reshaped 2.9.3 → 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/Slider/Slider.module.css +1 -1
- 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 +1 @@
|
|
|
1
|
-
.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);user-select:none;-webkit-tap-highlight-color:transparent}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1))!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
1
|
+
.root{align-items:center;cursor:pointer;display:flex;height:var(--rs-unit-x4);user-select:none;-webkit-tap-highlight-color:transparent}.bar,.root{position:relative}.bar{background:var(--rs-color-background-neutral);border-radius:var(--rs-unit-radius-small);height:var(--rs-unit-x1);width:100%}.bar,.input{overflow:hidden}.input{height:1px;opacity:0;pointer-events:none;position:absolute;width:1px}.selection{background:var(--rs-color-background-primary);height:100%;position:absolute}.tooltip{--rs-slider-tooltip-translate-x:calc(-50% + var(--rs-slider-tooltip-offset, 0px));background:var(--rs-color-background-elevation-overlay);border-radius:var(--rs-unit-radius-small);bottom:100%;box-shadow:var(--rs-shadow-overlay);box-sizing:initial;color:var(--rs-color-foreground-neutral);left:50%;min-width:var(--rs-line-height-caption-1);opacity:0;padding:calc(var(--rs-unit-x1) / 2) var(--rs-unit-x1);pointer-events:none;text-align:center;transform:translate(var(--rs-slider-tooltip-translate-x));transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:opacity,transform;user-select:none;white-space:nowrap;will-change:transform}.thumb,.tooltip{position:absolute}.thumb{height:100%;width:0}.thumb:before{background:var(--rs-color-background-primary);border-radius:999px;box-shadow:0 0 0 2px var(--rs-color-background-elevation-base);box-sizing:border-box;height:var(--rs-unit-x4);transition:var(--rs-duration-fast) var(--rs-easing-standard);transition-property:box-shadow;width:var(--rs-unit-x4)}.thumb:after,.thumb:before{content:"";left:0;position:absolute;top:50%;transform:translate(-50%,-50%)}.thumb:after{cursor:grab;height:var(--rs-unit-x7);width:var(--rs-unit-x7)}.thumb:hover .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1))}.input:focus+.thumb:after,.thumb--active:after{cursor:grabbing}.input:focus+.thumb:before,.thumb--active:before{box-shadow:0 0 0 1px var(--rs-color-background-elevation-base)}.input:focus+.thumb .tooltip,.thumb--active .tooltip{opacity:1;transform:translate(var(--rs-slider-tooltip-translate-x),calc(var(--rs-unit-x1) * -1))!important}.--disabled{cursor:not-allowed}.--disabled .bar{background-color:var(--rs-color-background-disabled)}.--disabled .selection,.--disabled .thumb:before{background-color:var(--rs-color-foreground-disabled)}.--disabled .thumb:after{cursor:not-allowed}.--disabled .thumb:hover .tooltip{opacity:0}
|
|
@@ -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": {
|