reshaped 2.9.4 → 2.9.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.
- package/CHANGELOG.md +3 -0
- package/bundle.css +1 -1
- package/bundle.js +5 -5
- package/components/Accordion/AccordionContent.js +1 -0
- package/components/TextArea/TextArea.js +15 -6
- package/components/TextArea/TextArea.module.css +1 -1
- package/components/TextArea/TextArea.types.d.ts +1 -0
- package/components/TextArea/tests/TextArea.stories.d.ts +1 -0
- package/components/TextArea/tests/TextArea.stories.js +8 -0
- package/package.json +30 -30
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
3
|
+
import React from "react";
|
|
3
4
|
import { classNames, responsiveClassNames } from "../../utilities/helpers.js";
|
|
4
5
|
import { useFormControl } from "../FormControl/index.js";
|
|
5
6
|
import Aligner from "../_private/Aligner/index.js";
|
|
@@ -7,20 +8,28 @@ import useElementId from "../../hooks/useElementId.js";
|
|
|
7
8
|
import s from "./TextArea.module.css";
|
|
8
9
|
const TextArea = (props) => {
|
|
9
10
|
var _a, _b;
|
|
10
|
-
const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", className, attributes, } = props;
|
|
11
|
+
const { onChange, onFocus, onBlur, name, value, defaultValue, placeholder, size = "medium", variant = "outline", resize, className, attributes, } = props;
|
|
12
|
+
const [autogrowValue, setAutogrowValue] = React.useState(value || defaultValue || "");
|
|
11
13
|
const formControl = useFormControl();
|
|
12
14
|
const id = useElementId(props.id);
|
|
13
15
|
const inputId = ((_a = formControl === null || formControl === void 0 ? void 0 : formControl.attributes) === null || _a === void 0 ? void 0 : _a.id) || ((_b = props.inputAttributes) === null || _b === void 0 ? void 0 : _b.id) || id;
|
|
14
16
|
const disabled = (formControl === null || formControl === void 0 ? void 0 : formControl.disabled) || props.disabled;
|
|
15
17
|
const hasError = (formControl === null || formControl === void 0 ? void 0 : formControl.hasError) || props.hasError;
|
|
16
18
|
const inputAttributes = Object.assign(Object.assign({}, props.inputAttributes), formControl === null || formControl === void 0 ? void 0 : formControl.attributes);
|
|
17
|
-
const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], className);
|
|
19
|
+
const rootClassName = classNames(s.root, size && responsiveClassNames(s, "--size", size), hasError && s["--status-error"], disabled && s["--disabled"], variant && s[`--variant-${variant}`], resize !== undefined && s[`--resize-${resize}`], className);
|
|
18
20
|
const handleChange = (event) => {
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
21
|
+
const nextValue = event.target.value;
|
|
22
|
+
onChange === null || onChange === void 0 ? void 0 : onChange({ name, value: nextValue, event });
|
|
23
|
+
if (resize === "auto" && typeof value !== "string") {
|
|
24
|
+
setAutogrowValue(nextValue);
|
|
25
|
+
}
|
|
22
26
|
};
|
|
23
|
-
|
|
27
|
+
React.useEffect(() => {
|
|
28
|
+
if (typeof value !== "string" || resize !== "auto")
|
|
29
|
+
return;
|
|
30
|
+
setAutogrowValue(value);
|
|
31
|
+
}, [value, resize]);
|
|
32
|
+
return (_jsx("div", Object.assign({}, attributes, { "data-rs-aligner-target": true, className: rootClassName, "data-rs-textarea-value": autogrowValue, children: _jsx("textarea", Object.assign({ rows: 3 }, inputAttributes, { className: s.input, disabled: disabled, name: name, placeholder: placeholder, value: value, defaultValue: defaultValue, onChange: handleChange, onFocus: onFocus || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onFocus), onBlur: onBlur || (inputAttributes === null || inputAttributes === void 0 ? void 0 : inputAttributes.onBlur), id: inputId })) })));
|
|
24
33
|
};
|
|
25
34
|
TextArea.Aligner = Aligner;
|
|
26
35
|
export default TextArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
.root{display:grid;position:relative}.root:after{content:attr(data-rs-textarea-value) " ";visibility:hidden;white-space:pre-wrap}.input,.root:after{border:1px solid var(--rs-color-border-neutral);box-sizing:border-box;flex-grow:1;font-family:var(--rs-font-family-body);font-weight:var(--rs-font-weight-regular);grid-area:1/1/2/2;padding:calc(var(--rs-p) - 1px);width:100%}.input{background:var(--rs-color-background-elevation-base);border-radius:var(--rs-unit-radius-small);color:var(--rs-color-foreground-neutral);outline:none;position:relative;z-index:1}.input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.input[disabled]{background:var(--rs-color-background-disabled-faded);border-color:var(--rs-color-border-disabled);color:var(--rs-color-foreground-disabled);cursor:not-allowed}.--size-medium{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.root.--variant-faded .input{background:var(--rs-color-background-neutral-faded);border-color:transparent}.root.--variant-faded .input:focus{border-color:var(--rs-color-border-primary)}.root.--variant-headless .input{background:transparent;border-color:transparent}.root.--variant-headless .input:focus,.root.--variant-headless.--status-error .input,.root.--variant-headless.--status-error .input:focus{border-color:transparent;box-shadow:none}.root.--status-error .input{border-color:var(--rs-color-border-critical)}.root.--status-error .input:active,.root.--status-error .input:focus{border-color:var(--rs-color-border-primary);box-shadow:0 0 0 1px var(--rs-color-border-primary)}.root.--resize-auto .input,.root.--resize-none .input{resize:none}@media (--rs-viewport-s ) and (hover:none){.input{font-size:var(--rs-font-size-body-2)!important}}@media (--rs-viewport-m ){.--size-medium--m{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--m .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--m{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--m{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--m .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-l ){.--size-medium--l{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--l .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--l{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--l{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--l .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}@media (--rs-viewport-xl ){.--size-medium--xl{--rs-p:var(--rs-unit-x2);border-radius:var(--rs-unit-radius-small)}.--size-medium--xl .input{font-size:var(--rs-font-size-body-3);line-height:var(--rs-line-height-body-3)}.--size-large--xl{--rs-p:var(--rs-unit-x3);border-radius:var(--rs-unit-radius-medium)}.--size-large--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}.--size-xlarge--xl{--rs-p:var(--rs-unit-x4);border-radius:var(--rs-unit-radius-medium)}.--size-xlarge--xl .input{font-size:var(--rs-font-size-body-2);line-height:var(--rs-line-height-body-2)}}
|
|
@@ -15,6 +15,7 @@ type BaseProps = {
|
|
|
15
15
|
className?: G.ClassName;
|
|
16
16
|
attributes?: G.Attributes<"div", Props>;
|
|
17
17
|
inputAttributes?: G.Attributes<"textarea", Omit<Props, "id">>;
|
|
18
|
+
resize?: "none" | "auto";
|
|
18
19
|
} & Pick<FormControlProps, "hasError">;
|
|
19
20
|
export type ControlledProps = BaseProps & {
|
|
20
21
|
value: string;
|
|
@@ -14,6 +14,7 @@ export default _default;
|
|
|
14
14
|
export declare const value: () => import("react").JSX.Element;
|
|
15
15
|
export declare const variants: () => import("react").JSX.Element;
|
|
16
16
|
export declare const size: () => import("react").JSX.Element;
|
|
17
|
+
export declare const resize: () => import("react").JSX.Element;
|
|
17
18
|
export declare const disabled: () => import("react").JSX.Element;
|
|
18
19
|
export declare const error: () => import("react").JSX.Element;
|
|
19
20
|
export declare const formControl: () => import("react").JSX.Element;
|
|
@@ -54,6 +54,14 @@ export const size = () => (<Example>
|
|
|
54
54
|
<TextArea name="Name" placeholder="Enter your name" size={{ s: "xlarge", m: "medium" }}/>
|
|
55
55
|
</Example.Item>
|
|
56
56
|
</Example>);
|
|
57
|
+
export const resize = () => (<Example>
|
|
58
|
+
<Example.Item title="resize: none">
|
|
59
|
+
<TextArea name="Name" placeholder="Enter your name" resize="none"/>
|
|
60
|
+
</Example.Item>
|
|
61
|
+
<Example.Item title="resize: auto">
|
|
62
|
+
<TextArea name="Name" placeholder="Enter your name" resize="auto"/>
|
|
63
|
+
</Example.Item>
|
|
64
|
+
</Example>);
|
|
57
65
|
export const disabled = () => (<Example>
|
|
58
66
|
<Example.Item title="disabled, no value">
|
|
59
67
|
<TextArea name="Name" placeholder="Enter your name" disabled/>
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "reshaped",
|
|
3
3
|
"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
|
|
4
|
-
"version": "2.9.
|
|
4
|
+
"version": "2.9.5",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.md",
|
|
6
6
|
"email": "hello@reshaped.so",
|
|
7
7
|
"homepage": "https://reshaped.so",
|
|
@@ -81,58 +81,58 @@
|
|
|
81
81
|
"defaults and not IE 11"
|
|
82
82
|
],
|
|
83
83
|
"devDependencies": {
|
|
84
|
-
"@commitlint/cli": "18.
|
|
85
|
-
"@commitlint/config-conventional": "18.
|
|
86
|
-
"@commitlint/types": "18.
|
|
87
|
-
"@size-limit/preset-big-lib": "11.0.
|
|
88
|
-
"@storybook/addon-a11y": "7.6.
|
|
89
|
-
"@storybook/addon-controls": "7.6.
|
|
90
|
-
"@storybook/addon-docs": "7.6.
|
|
91
|
-
"@storybook/addon-storysource": "7.6.
|
|
92
|
-
"@storybook/react": "7.6.
|
|
93
|
-
"@storybook/react-vite": "7.6.
|
|
94
|
-
"@testing-library/jest-dom": "6.1
|
|
95
|
-
"@testing-library/react": "14.1
|
|
84
|
+
"@commitlint/cli": "18.6.0",
|
|
85
|
+
"@commitlint/config-conventional": "18.6.0",
|
|
86
|
+
"@commitlint/types": "18.6.0",
|
|
87
|
+
"@size-limit/preset-big-lib": "11.0.2",
|
|
88
|
+
"@storybook/addon-a11y": "7.6.12",
|
|
89
|
+
"@storybook/addon-controls": "7.6.12",
|
|
90
|
+
"@storybook/addon-docs": "7.6.12",
|
|
91
|
+
"@storybook/addon-storysource": "7.6.12",
|
|
92
|
+
"@storybook/react": "7.6.12",
|
|
93
|
+
"@storybook/react-vite": "7.6.12",
|
|
94
|
+
"@testing-library/jest-dom": "6.4.1",
|
|
95
|
+
"@testing-library/react": "14.2.1",
|
|
96
96
|
"@testing-library/user-event": "14.5.2",
|
|
97
97
|
"@types/events": "3.0.3",
|
|
98
|
-
"@types/jest": "29.5.
|
|
99
|
-
"@types/node": "20.
|
|
100
|
-
"@types/react": "18.2.
|
|
98
|
+
"@types/jest": "29.5.12",
|
|
99
|
+
"@types/node": "20.11.16",
|
|
100
|
+
"@types/react": "18.2.52",
|
|
101
101
|
"@types/react-dom": "18.2.18",
|
|
102
|
-
"@typescript-eslint/eslint-plugin": "6.
|
|
103
|
-
"@typescript-eslint/parser": "6.
|
|
102
|
+
"@typescript-eslint/eslint-plugin": "6.20.0",
|
|
103
|
+
"@typescript-eslint/parser": "6.20.0",
|
|
104
104
|
"@vitejs/plugin-react": "4.2.1",
|
|
105
|
-
"chromatic": "10.
|
|
105
|
+
"chromatic": "10.7.1",
|
|
106
106
|
"cz-conventional-changelog": "3.3.0",
|
|
107
107
|
"eslint": "8.56.0",
|
|
108
108
|
"eslint-config-airbnb-typescript": "17.1.0",
|
|
109
109
|
"eslint-config-prettier": "9.1.0",
|
|
110
110
|
"eslint-plugin-import": "2.29.1",
|
|
111
111
|
"eslint-plugin-jsx-a11y": "6.8.0",
|
|
112
|
-
"eslint-plugin-prettier": "5.1.
|
|
112
|
+
"eslint-plugin-prettier": "5.1.3",
|
|
113
113
|
"eslint-plugin-react": "7.33.2",
|
|
114
114
|
"eslint-plugin-react-hooks": "4.6.0",
|
|
115
115
|
"identity-obj-proxy": "3.0.0",
|
|
116
116
|
"jest": "29.7.0",
|
|
117
117
|
"jest-environment-jsdom": "29.7.0",
|
|
118
118
|
"jest-matchmedia-mock": "1.1.0",
|
|
119
|
-
"lefthook": "1.
|
|
120
|
-
"postcss": "8.4.
|
|
119
|
+
"lefthook": "1.6.1",
|
|
120
|
+
"postcss": "8.4.33",
|
|
121
121
|
"postcss-cli": "11.0.0",
|
|
122
122
|
"postcss-each": "1.1.0",
|
|
123
123
|
"postcss-nested": "6.0.1",
|
|
124
|
-
"prettier": "3.
|
|
124
|
+
"prettier": "3.2.5",
|
|
125
125
|
"react": "18.2.0",
|
|
126
126
|
"react-dom": "18.2.0",
|
|
127
127
|
"resolve-tspaths": "0.8.17",
|
|
128
|
-
"size-limit": "11.0.
|
|
129
|
-
"storybook": "7.6.
|
|
130
|
-
"stylelint": "
|
|
128
|
+
"size-limit": "11.0.2",
|
|
129
|
+
"storybook": "7.6.12",
|
|
130
|
+
"stylelint": "16.2.1",
|
|
131
131
|
"stylelint-config-prettier": "9.0.5",
|
|
132
|
-
"stylelint-config-standard": "
|
|
133
|
-
"ts-jest": "29.1.
|
|
132
|
+
"stylelint-config-standard": "36.0.0",
|
|
133
|
+
"ts-jest": "29.1.2",
|
|
134
134
|
"typescript": "5.3.3",
|
|
135
|
-
"vite": "5.0.
|
|
135
|
+
"vite": "5.0.12",
|
|
136
136
|
"vite-tsconfig-paths": "4.3.1"
|
|
137
137
|
},
|
|
138
138
|
"peerDependencies": {
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
"@csstools/postcss-global-data": "2.1.1",
|
|
145
145
|
"chalk": "4.1.2",
|
|
146
146
|
"commander": "11.1.0",
|
|
147
|
-
"cssnano": "6.0.
|
|
147
|
+
"cssnano": "6.0.3",
|
|
148
148
|
"postcss-custom-media": "10.0.2"
|
|
149
149
|
},
|
|
150
150
|
"resolutions": {
|