@bonprix-ds/react-textarea 1.0.1 → 1.0.2
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/index.d.ts +2 -32
- package/dist/src/Textarea.d.ts +24 -0
- package/dist/src/Textarea.js +10 -10
- package/dist/src/Textarea.js.map +1 -1
- package/package.json +29 -28
package/dist/index.d.ts
CHANGED
|
@@ -1,32 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
import { TextFieldBaseProps } from '@bonprix-ds/react-text-field';
|
|
4
|
-
|
|
5
|
-
declare interface BaseProps extends TextFieldBaseProps {
|
|
6
|
-
/** The placeholder text for the input field. */
|
|
7
|
-
placeholder?: string;
|
|
8
|
-
/** Reference to the input element. */
|
|
9
|
-
inputRef?: RefObject<HTMLTextAreaElement>;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
declare interface ControlledProps extends BaseProps {
|
|
13
|
-
/** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
|
|
14
|
-
value: string;
|
|
15
|
-
/** The default value of the input field. Should be used when the input is uncontrolled. */
|
|
16
|
-
defaultValue?: never;
|
|
17
|
-
/** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */
|
|
18
|
-
onChange: (value: string) => void;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
declare const Textarea: ({ label, placeholder, name, id, inputRef, onFocus, onBlur, minLength, helperText, errorText, disabled, required, error, maxLength, describedBy, ...unionProps }: TextareaProps) => default_2.JSX.Element;
|
|
22
|
-
export default Textarea;
|
|
23
|
-
|
|
24
|
-
export declare type TextareaProps = ControlledProps | UncontrolledProps;
|
|
25
|
-
|
|
26
|
-
declare interface UncontrolledProps extends BaseProps {
|
|
27
|
-
value?: never;
|
|
28
|
-
defaultValue: string;
|
|
29
|
-
onChange?: (value: string) => void;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export { }
|
|
1
|
+
export { default } from "./src/Textarea";
|
|
2
|
+
export type { Props as TextareaProps } from "./src/Textarea";
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import React, { RefObject } from "react";
|
|
2
|
+
import type { TextFieldBaseProps } from "@bonprix-ds/react-text-field";
|
|
3
|
+
interface BaseProps extends TextFieldBaseProps {
|
|
4
|
+
/** The placeholder text for the input field. */
|
|
5
|
+
placeholder?: string;
|
|
6
|
+
/** Reference to the input element. */
|
|
7
|
+
inputRef?: RefObject<HTMLTextAreaElement>;
|
|
8
|
+
}
|
|
9
|
+
interface ControlledProps extends BaseProps {
|
|
10
|
+
/** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
|
|
11
|
+
value: string;
|
|
12
|
+
/** The default value of the input field. Should be used when the input is uncontrolled. */
|
|
13
|
+
defaultValue?: never;
|
|
14
|
+
/** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */
|
|
15
|
+
onChange: (value: string) => void;
|
|
16
|
+
}
|
|
17
|
+
interface UncontrolledProps extends BaseProps {
|
|
18
|
+
value?: never;
|
|
19
|
+
defaultValue: string;
|
|
20
|
+
onChange?: (value: string) => void;
|
|
21
|
+
}
|
|
22
|
+
export type Props = ControlledProps | UncontrolledProps;
|
|
23
|
+
declare const Textarea: ({ label, placeholder, name, id, inputRef, onFocus, onBlur, minLength, helperText, errorText, disabled, required, error, maxLength, describedBy, ...unionProps }: Props) => React.JSX.Element;
|
|
24
|
+
export default Textarea;
|
package/dist/src/Textarea.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import {
|
|
2
|
+
import { useId as e, useRef as t, useState as n } from "react";
|
|
3
|
+
import { tv as r } from "tailwind-variants";
|
|
4
|
+
import { InputWrapper as i } from "@bonprix-ds/internal-components";
|
|
5
5
|
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
6
6
|
//#region src/Textarea.tsx
|
|
7
|
-
var s =
|
|
7
|
+
var s = r({
|
|
8
8
|
slots: {
|
|
9
9
|
root: "preflight w-full relative [&_.inputLabel]:z-1",
|
|
10
10
|
container: [
|
|
@@ -17,18 +17,18 @@ var s = i({
|
|
|
17
17
|
wordCounter: "absolute end-3 bottom-2 typography-textarea-wordcounter-text text-inherit"
|
|
18
18
|
},
|
|
19
19
|
variants: { labelInside: { true: { textareaClass: "pt-[2.125rem]" } } }
|
|
20
|
-
}), c = ({ label:
|
|
20
|
+
}), c = ({ label: r, placeholder: c, name: l, id: u, inputRef: d, onFocus: f, onBlur: p, minLength: m, helperText: h = "", errorText: g = "", disabled: _ = !1, required: v = !1, error: y = !1, maxLength: b = 500, describedBy: x, ...S }) => {
|
|
21
21
|
let C, w;
|
|
22
22
|
S.value === void 0 ? (C = !!S.defaultValue, w = S.defaultValue.length) : (C = !!S.value, w = S.value.length);
|
|
23
|
-
let [T, E] =
|
|
23
|
+
let [T, E] = n(!1), [D, O] = n(C), [k, A] = n(w), j = D || T, M = `${k} / ${b}`, N = t(null), P = d ?? N, F = () => {
|
|
24
24
|
E(!0), f && f();
|
|
25
25
|
}, I = () => {
|
|
26
26
|
E(!1), p && p();
|
|
27
27
|
}, L = (e) => {
|
|
28
28
|
let t = e.currentTarget.value;
|
|
29
29
|
S.onChange?.(t), D !== !!t && O(!!t), A(t.length);
|
|
30
|
-
}, { root: R, textareaClass: z, container: B, wordCounter: V } = s({ labelInside: !!
|
|
31
|
-
label:
|
|
30
|
+
}, { root: R, textareaClass: z, container: B, wordCounter: V } = s({ labelInside: !!r && !j }), H = e(), U = u ?? H, W = e(), G = e(), K = {
|
|
31
|
+
label: r,
|
|
32
32
|
id: U,
|
|
33
33
|
labelFloated: j,
|
|
34
34
|
disabled: _,
|
|
@@ -58,7 +58,7 @@ var s = i({
|
|
|
58
58
|
};
|
|
59
59
|
return S.value === void 0 ? /* @__PURE__ */ a("div", {
|
|
60
60
|
className: R(),
|
|
61
|
-
children: /* @__PURE__ */ a(
|
|
61
|
+
children: /* @__PURE__ */ a(i, {
|
|
62
62
|
...K,
|
|
63
63
|
componentName: "textarea",
|
|
64
64
|
children: /* @__PURE__ */ o("div", {
|
|
@@ -75,7 +75,7 @@ var s = i({
|
|
|
75
75
|
})
|
|
76
76
|
}) : /* @__PURE__ */ a("div", {
|
|
77
77
|
className: R(),
|
|
78
|
-
children: /* @__PURE__ */ a(
|
|
78
|
+
children: /* @__PURE__ */ a(i, {
|
|
79
79
|
...K,
|
|
80
80
|
componentName: "textarea",
|
|
81
81
|
children: /* @__PURE__ */ o("div", {
|
package/dist/src/Textarea.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","names":[],"sources":["../../src/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport {
|
|
1
|
+
{"version":3,"file":"Textarea.js","names":[],"sources":["../../src/Textarea.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { RefObject, useId, useRef, useState } from \"react\";\nimport { tv } from \"tailwind-variants\";\n\nimport { InputWrapper } from \"@bonprix-ds/internal-components\";\nimport type { TextFieldBaseProps } from \"@bonprix-ds/react-text-field\";\n\nconst generateClasses = tv({\n slots: {\n root: \"preflight w-full relative [&_.inputLabel]:z-1\",\n container: [\n \"grid relative min-h-[6.25rem] text-inherit\",\n // This is for the autogrow functionality:\n // https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/\n \"after:content-[attr(data-value)] after:px-3 after:pt-2 after:pb-5 after:whitespace-pre-wrap\",\n \"after:row-start-1 after:row-end-2 after:col-start-1 after:col-end-2 after:break-words after:min-w-0\",\n \"after:w-full after:box-border after:typography-input-text\",\n ],\n textareaClass: [\n \"input typography-input-text text-inherit relative bg-clr-bg-main px-3 pt-2 pb-5 resize-none overflow-hidden row-start-1 row-end-2 col-start-1 col-end-2 focus-visible:outline-none\",\n // border-radius to avoid edged from bleeding into input wrapper\n \"rounded-sm\",\n ],\n wordCounter: \"absolute end-3 bottom-2 typography-textarea-wordcounter-text text-inherit\",\n },\n variants: {\n labelInside: { true: { textareaClass: \"pt-[2.125rem]\" } },\n },\n});\n\ninterface BaseProps extends TextFieldBaseProps {\n /** The placeholder text for the input field. */\n placeholder?: string;\n /** Reference to the input element. */\n inputRef?: RefObject<HTMLTextAreaElement>;\n}\n\ninterface ControlledProps extends BaseProps {\n /** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */\n value: string;\n /** The default value of the input field. Should be used when the input is uncontrolled. */\n defaultValue?: never;\n /** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */\n onChange: (value: string) => void;\n}\n\ninterface UncontrolledProps extends BaseProps {\n value?: never;\n defaultValue: string;\n onChange?: (value: string) => void;\n}\n\nexport type Props = ControlledProps | UncontrolledProps;\n\nconst Textarea = ({\n label,\n placeholder,\n name,\n id,\n inputRef,\n onFocus,\n onBlur,\n minLength,\n helperText = \"\",\n errorText = \"\",\n disabled = false,\n required = false,\n error = false,\n maxLength = 500,\n describedBy,\n ...unionProps\n}: Props) => {\n let initialHasValue: boolean;\n let initialCharCount: number;\n if (unionProps.value !== undefined) {\n initialHasValue = Boolean(unionProps.value);\n initialCharCount = unionProps.value.length;\n } else {\n initialHasValue = Boolean(unionProps.defaultValue);\n initialCharCount = unionProps.defaultValue.length;\n }\n\n const [focused, setFocused] = useState(false);\n const [hasValue, setHasValue] = useState(initialHasValue);\n const [charCount, setCharCount] = useState(initialCharCount);\n const labelFloated = hasValue || focused;\n const wordCounterText = `${charCount} / ${maxLength}`;\n\n const innerRef = useRef<HTMLTextAreaElement>(null);\n const ref = inputRef ?? innerRef;\n\n const handleFocus = () => {\n setFocused(true);\n if (onFocus) {\n onFocus();\n }\n };\n\n const handleBlur = () => {\n setFocused(false);\n if (onBlur) {\n onBlur();\n }\n };\n\n const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {\n const newValue = e.currentTarget.value;\n unionProps.onChange?.(newValue);\n if (hasValue !== Boolean(newValue)) {\n setHasValue(Boolean(newValue));\n }\n setCharCount(newValue.length);\n };\n\n const labelInside = !!label && !labelFloated;\n const { root, textareaClass, container, wordCounter } = generateClasses({ labelInside });\n const generatedId = useId();\n const calculatedId = id ?? generatedId;\n const helperTextId = useId();\n const errorTextId = useId();\n\n const inputWrapperProps = {\n label,\n id: calculatedId,\n labelFloated,\n disabled,\n required,\n helperText,\n helperTextId,\n error,\n errorText,\n errorTextId,\n };\n\n let ariaDescribedBy;\n if (helperText) {\n ariaDescribedBy = helperTextId;\n }\n if (error && errorText) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + errorTextId : errorTextId;\n }\n if (describedBy) {\n ariaDescribedBy = ariaDescribedBy ? ariaDescribedBy + \" \" + describedBy : describedBy;\n }\n\n const commonTextareaProps = {\n name,\n placeholder: placeholder ?? \" \",\n className: textareaClass(),\n disabled,\n minLength,\n maxLength,\n onFocus: handleFocus,\n onBlur: handleBlur,\n id: calculatedId,\n ref,\n required,\n \"aria-invalid\": error ? error : undefined,\n \"aria-describedby\": ariaDescribedBy,\n onChange: handleChange,\n };\n\n if (unionProps.value !== undefined) {\n return (\n <div className={root()}>\n <InputWrapper {...inputWrapperProps} componentName=\"textarea\">\n <div className={container()} data-value={unionProps.value}>\n <textarea {...commonTextareaProps} value={unionProps.value} />\n <div className={wordCounter()}>{wordCounterText}</div>\n </div>\n </InputWrapper>\n </div>\n );\n } else {\n return (\n <div className={root()}>\n <InputWrapper {...inputWrapperProps} componentName=\"textarea\">\n <div className={container()} data-value={unionProps.defaultValue}>\n <textarea {...commonTextareaProps} defaultValue={unionProps.defaultValue} />\n <div className={wordCounter()}>{wordCounterText}</div>\n </div>\n </InputWrapper>\n </div>\n );\n }\n};\n\nexport default Textarea;\n"],"mappings":";;;;;;AAQA,IAAM,IAAkB,EAAG;CACzB,OAAO;EACL,MAAM;EACN,WAAW;GACT;GAGA;GACA;GACA;EACF;EACA,eAAe,CACb,sLAEA,YACF;EACA,aAAa;CACf;CACA,UAAU,EACR,aAAa,EAAE,MAAM,EAAE,eAAe,gBAAgB,EAAE,EAC1D;AACF,CAAC,GA0BK,KAAY,EAChB,UACA,gBACA,SACA,OACA,aACA,YACA,WACA,cACA,gBAAa,IACb,eAAY,IACZ,cAAW,IACX,cAAW,IACX,WAAQ,IACR,eAAY,KACZ,gBACA,GAAG,QACQ;CACX,IAAI,GACA;CACJ,AAAI,EAAW,UAAU,KAAA,KAIvB,IAAkB,EAAQ,EAAW,cACrC,IAAmB,EAAW,aAAa,WAJ3C,IAAkB,EAAQ,EAAW,OACrC,IAAmB,EAAW,MAAM;CAMtC,IAAM,CAAC,GAAS,KAAc,EAAS,EAAK,GACtC,CAAC,GAAU,KAAe,EAAS,CAAe,GAClD,CAAC,GAAW,KAAgB,EAAS,CAAgB,GACrD,IAAe,KAAY,GAC3B,IAAkB,GAAG,EAAU,KAAK,KAEpC,IAAW,EAA4B,IAAI,GAC3C,IAAM,KAAY,GAElB,UAAoB;EAExB,AADA,EAAW,EAAI,GACX,KACF,EAAQ;CAEZ,GAEM,UAAmB;EAEvB,AADA,EAAW,EAAK,GACZ,KACF,EAAO;CAEX,GAEM,KAAgB,MAA8C;EAClE,IAAM,IAAW,EAAE,cAAc;EAKjC,AAJA,EAAW,WAAW,CAAQ,GAC1B,MAAa,EAAQ,KACvB,EAAY,EAAQ,CAAS,GAE/B,EAAa,EAAS,MAAM;CAC9B,GAGM,EAAE,SAAM,kBAAe,cAAW,mBAAgB,EAAgB,EAAE,aADtD,CAAC,CAAC,KAAS,CAAC,EACsD,CAAC,GACjF,IAAc,EAAM,GACpB,IAAe,KAAM,GACrB,IAAe,EAAM,GACrB,IAAc,EAAM,GAEpB,IAAoB;EACxB;EACA,IAAI;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,GAEI;CAOJ,AANI,MACF,IAAkB,IAEhB,KAAS,MACX,IAAkB,IAAkB,IAAkB,MAAM,IAAc,IAExE,MACF,IAAkB,IAAkB,IAAkB,MAAM,IAAc;CAG5E,IAAM,IAAsB;EAC1B;EACA,aAAa,KAAe;EAC5B,WAAW,EAAc;EACzB;EACA;EACA;EACA,SAAS;EACT,QAAQ;EACR,IAAI;EACJ;EACA;EACA,gBAAgB,KAAgB,KAAA;EAChC,oBAAoB;EACpB,UAAU;CACZ;CAcE,OAZE,EAAW,UAAU,KAAA,IAarB,kBAAC,OAAD;EAAK,WAAW,EAAK;EACnB,UAAA,kBAAC,GAAD;GAAc,GAAI;GAAmB,eAAc;GACjD,UAAA,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAG,cAAY,EAAW;IAApD,UAAA,CACE,kBAAC,YAAD;KAAU,GAAI;KAAqB,cAAc,EAAW;IAAe,CAAA,GAC3E,kBAAC,OAAD;KAAK,WAAW,EAAY;KAAI,UAAA;IAAqB,CAAA,CAClD;;EACO,CAAA;CACX,CAAA,IAlBL,kBAAC,OAAD;EAAK,WAAW,EAAK;EACnB,UAAA,kBAAC,GAAD;GAAc,GAAI;GAAmB,eAAc;GACjD,UAAA,kBAAC,OAAD;IAAK,WAAW,EAAU;IAAG,cAAY,EAAW;IAApD,UAAA,CACE,kBAAC,YAAD;KAAU,GAAI;KAAqB,OAAO,EAAW;IAAQ,CAAA,GAC7D,kBAAC,OAAD;KAAK,WAAW,EAAY;KAAI,UAAA;IAAqB,CAAA,CAClD;;EACO,CAAA;CACX,CAAA;AAcX"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-textarea",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Textarea component, implemented in React, for the Bonprix Design System.",
|
|
5
|
-
"
|
|
6
|
-
"
|
|
7
|
-
|
|
8
|
-
|
|
5
|
+
"keywords": [],
|
|
6
|
+
"license": "UNLICENSED",
|
|
7
|
+
"author": "",
|
|
8
|
+
"repository": {
|
|
9
|
+
"type": "git",
|
|
10
|
+
"url": "git+https://github.com/bonprix/design-system.git",
|
|
11
|
+
"directory": "packages/react/textarea"
|
|
9
12
|
},
|
|
10
|
-
"
|
|
13
|
+
"files": [
|
|
14
|
+
"dist",
|
|
15
|
+
"!dist/tsconfig.tsbuildinfo",
|
|
16
|
+
"!dist/vite.config.d.ts",
|
|
17
|
+
"!dist/**/*.test.d.ts"
|
|
18
|
+
],
|
|
19
|
+
"type": "module",
|
|
11
20
|
"sideEffects": false,
|
|
21
|
+
"module": "./dist/index.js",
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
12
23
|
"exports": {
|
|
13
24
|
".": {
|
|
14
25
|
"import": "./dist/index.js",
|
|
@@ -16,35 +27,25 @@
|
|
|
16
27
|
"default": "./dist/index.js"
|
|
17
28
|
}
|
|
18
29
|
},
|
|
19
|
-
"
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
],
|
|
23
|
-
"keywords": [],
|
|
24
|
-
"author": "",
|
|
25
|
-
"license": "UNLICENSED",
|
|
26
|
-
"repository": {
|
|
27
|
-
"type": "git",
|
|
28
|
-
"url": "git+https://github.com/bonprix/design-system.git",
|
|
29
|
-
"directory": "packages/react/textarea"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
|
-
"@bonprix-ds/internal-components": "0.2.
|
|
33
|
-
"@bonprix-ds/react-text-field": "1.0.
|
|
35
|
+
"@bonprix-ds/internal-components": "0.2.1",
|
|
36
|
+
"@bonprix-ds/react-text-field": "1.0.2",
|
|
34
37
|
"@bonprix-ds/utils": "0.2.2"
|
|
35
38
|
},
|
|
36
|
-
"peerDependencies": {
|
|
37
|
-
"react": "^19.0.0",
|
|
38
|
-
"react-dom": "^19.0.0",
|
|
39
|
-
"tailwind-variants": "0.3.1"
|
|
40
|
-
},
|
|
41
39
|
"devDependencies": {
|
|
42
|
-
"
|
|
43
|
-
"@types/react": "19.2.18",
|
|
40
|
+
"@types/react": "19.3.0",
|
|
44
41
|
"@vitejs/plugin-react": "6.1.1",
|
|
45
42
|
"rollup-preserve-directives": "1.1.3",
|
|
46
|
-
"
|
|
47
|
-
|
|
43
|
+
"vite": "8.3.0"
|
|
44
|
+
},
|
|
45
|
+
"peerDependencies": {
|
|
46
|
+
"react": "^19.3.0",
|
|
47
|
+
"react-dom": "^19.3.0",
|
|
48
|
+
"tailwind-variants": "0.3.1"
|
|
48
49
|
},
|
|
49
50
|
"scripts": {
|
|
50
51
|
"build": "vite build"
|