@bonprix-ds/react-text-field 1.0.0 → 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 -55
- package/dist/src/TextField.d.ts +48 -0
- package/dist/src/TextField.js +8 -8
- package/dist/src/TextField.js.map +1 -1
- package/package.json +29 -28
package/dist/index.d.ts
CHANGED
|
@@ -1,55 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
declare type ControlledInputProps = TextFieldBaseProps & {
|
|
5
|
-
/** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
|
|
6
|
-
value: string;
|
|
7
|
-
/** The default value of the input field. Should be used when the input is uncontrolled. */
|
|
8
|
-
defaultValue?: never;
|
|
9
|
-
/** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */
|
|
10
|
-
onChange: (value: string) => void;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
declare const TextField: (props: TextFieldProps) => default_2.JSX.Element;
|
|
14
|
-
export default TextField;
|
|
15
|
-
|
|
16
|
-
export declare interface TextFieldBaseProps extends HTMLInputAttributes {
|
|
17
|
-
/** The visible label for the input field. */
|
|
18
|
-
label?: string;
|
|
19
|
-
/** The name of the input field. */
|
|
20
|
-
name?: string;
|
|
21
|
-
/** The id of the input field. */
|
|
22
|
-
id?: string;
|
|
23
|
-
/** A text that further describes the field and helps with filling out the form correctly. */
|
|
24
|
-
helperText?: string;
|
|
25
|
-
/** A text message that appears when the field is invalid. Only visible when `error` is set to `true`. */
|
|
26
|
-
errorText?: string;
|
|
27
|
-
/** If `true`, disables the input. */
|
|
28
|
-
disabled?: boolean;
|
|
29
|
-
/** If `true`, marks the input as required. */
|
|
30
|
-
required?: boolean;
|
|
31
|
-
/** If `true`, the input field is in an error state. Required for `errorText` to be shown. */
|
|
32
|
-
error?: boolean;
|
|
33
|
-
/** <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby" target="_blank">ARIA: aria-describedby attribute.</a> */
|
|
34
|
-
describedBy?: string;
|
|
35
|
-
/** Callback that is triggered when the input loses focus. */
|
|
36
|
-
onBlur?: () => void;
|
|
37
|
-
/** Callback that is triggered when the input gains focus. */
|
|
38
|
-
onFocus?: () => void;
|
|
39
|
-
/** If `true`, hides the clear icon button. Always true for date-like types. */
|
|
40
|
-
hideClear?: boolean;
|
|
41
|
-
/** Any of valid mask types. We use <a href="https://imask.js.org/" target="_blank">IMask</a> behind the scenes. */
|
|
42
|
-
mask?: string;
|
|
43
|
-
/** If `true`, the input will return the unmasked/row value, instead of modified one. Will only have effect when `mask` is used. */
|
|
44
|
-
unmask?: boolean;
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
export declare type TextFieldProps = ControlledInputProps | UncontrolledInputProps;
|
|
48
|
-
|
|
49
|
-
declare type UncontrolledInputProps = TextFieldBaseProps & {
|
|
50
|
-
value?: never;
|
|
51
|
-
defaultValue: string;
|
|
52
|
-
onChange?: (value: string) => void;
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
export { }
|
|
1
|
+
export { default } from "./src/TextField";
|
|
2
|
+
export type { Props as TextFieldProps, TextFieldBaseProps } from "./src/TextField";
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { type HTMLInputAttributes } from "@bonprix-ds/react-base-input-field";
|
|
3
|
+
export interface TextFieldBaseProps extends HTMLInputAttributes {
|
|
4
|
+
/** The visible label for the input field. */
|
|
5
|
+
label?: string;
|
|
6
|
+
/** The name of the input field. */
|
|
7
|
+
name?: string;
|
|
8
|
+
/** The id of the input field. */
|
|
9
|
+
id?: string;
|
|
10
|
+
/** A text that further describes the field and helps with filling out the form correctly. */
|
|
11
|
+
helperText?: string;
|
|
12
|
+
/** A text message that appears when the field is invalid. Only visible when `error` is set to `true`. */
|
|
13
|
+
errorText?: string;
|
|
14
|
+
/** If `true`, disables the input. */
|
|
15
|
+
disabled?: boolean;
|
|
16
|
+
/** If `true`, marks the input as required. */
|
|
17
|
+
required?: boolean;
|
|
18
|
+
/** If `true`, the input field is in an error state. Required for `errorText` to be shown. */
|
|
19
|
+
error?: boolean;
|
|
20
|
+
/** <a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby" target="_blank">ARIA: aria-describedby attribute.</a> */
|
|
21
|
+
describedBy?: string;
|
|
22
|
+
/** Callback that is triggered when the input loses focus. */
|
|
23
|
+
onBlur?: () => void;
|
|
24
|
+
/** Callback that is triggered when the input gains focus. */
|
|
25
|
+
onFocus?: () => void;
|
|
26
|
+
/** If `true`, hides the clear icon button. Always true for date-like types. */
|
|
27
|
+
hideClear?: boolean;
|
|
28
|
+
/** Any of valid mask types. We use <a href="https://imask.js.org/" target="_blank">IMask</a> behind the scenes. */
|
|
29
|
+
mask?: string;
|
|
30
|
+
/** If `true`, the input will return the unmasked/row value, instead of modified one. Will only have effect when `mask` is used. */
|
|
31
|
+
unmask?: boolean;
|
|
32
|
+
}
|
|
33
|
+
type ControlledInputProps = TextFieldBaseProps & {
|
|
34
|
+
/** The current value of the input field. Should be used in conjunction with `onChange`, when controlling the input. Should be `undefined` otherwise. */
|
|
35
|
+
value: string;
|
|
36
|
+
/** The default value of the input field. Should be used when the input is uncontrolled. */
|
|
37
|
+
defaultValue?: never;
|
|
38
|
+
/** Callback that is triggered when the input value changes. Should be used in conjunction with `value`, when controlling the input. Optional otherwise. */
|
|
39
|
+
onChange: (value: string) => void;
|
|
40
|
+
};
|
|
41
|
+
type UncontrolledInputProps = TextFieldBaseProps & {
|
|
42
|
+
value?: never;
|
|
43
|
+
defaultValue: string;
|
|
44
|
+
onChange?: (value: string) => void;
|
|
45
|
+
};
|
|
46
|
+
export type Props = ControlledInputProps | UncontrolledInputProps;
|
|
47
|
+
declare const TextField: (props: Props) => React.JSX.Element;
|
|
48
|
+
export default TextField;
|
package/dist/src/TextField.js
CHANGED
|
@@ -1,27 +1,27 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import e from "@bonprix-ds/react-base-input-field";
|
|
3
2
|
import "react";
|
|
4
|
-
import { useIMask as
|
|
3
|
+
import { useIMask as e } from "react-imask";
|
|
4
|
+
import t from "@bonprix-ds/react-base-input-field";
|
|
5
5
|
import { jsx as n } from "react/jsx-runtime";
|
|
6
6
|
//#region src/TextField.tsx
|
|
7
|
-
var r = (e) => e.mask ? /* @__PURE__ */ n(a, { ...e }) : /* @__PURE__ */ n(i, { ...e }), i = (
|
|
8
|
-
let { unmask: r, ...i } =
|
|
9
|
-
return /* @__PURE__ */ n(
|
|
7
|
+
var r = (e) => e.mask ? /* @__PURE__ */ n(a, { ...e }) : /* @__PURE__ */ n(i, { ...e }), i = (e) => {
|
|
8
|
+
let { unmask: r, ...i } = e;
|
|
9
|
+
return /* @__PURE__ */ n(t, {
|
|
10
10
|
type: "text",
|
|
11
11
|
...i,
|
|
12
12
|
componentName: "text-field",
|
|
13
|
-
hideClear:
|
|
13
|
+
hideClear: e.hideClear
|
|
14
14
|
});
|
|
15
15
|
}, a = (r) => {
|
|
16
16
|
let i;
|
|
17
17
|
i = r.value ? r.value : r.defaultValue ? r.defaultValue : "";
|
|
18
|
-
let { ref: a, value: o, unmaskedValue: s, setValue: c } =
|
|
18
|
+
let { ref: a, value: o, unmaskedValue: s, setValue: c } = e({
|
|
19
19
|
mask: r.mask,
|
|
20
20
|
defaultValue: i
|
|
21
21
|
}), l = () => {
|
|
22
22
|
r.onChange && r.onChange(r.unmask ? s : o), c(o);
|
|
23
23
|
}, { unmask: u, ...d } = r;
|
|
24
|
-
return /* @__PURE__ */ n(
|
|
24
|
+
return /* @__PURE__ */ n(t, {
|
|
25
25
|
type: "text",
|
|
26
26
|
...d,
|
|
27
27
|
inputRef: a,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextField.js","names":[],"sources":["../../src/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport
|
|
1
|
+
{"version":3,"file":"TextField.js","names":[],"sources":["../../src/TextField.tsx"],"sourcesContent":["\"use client\";\n\nimport React from \"react\";\nimport { useIMask } from \"react-imask\";\n\nimport BaseInputField, { type HTMLInputAttributes } from \"@bonprix-ds/react-base-input-field\";\n\nexport interface TextFieldBaseProps extends HTMLInputAttributes {\n /** The visible label for the input field. */\n label?: string;\n /** The name of the input field. */\n name?: string;\n /** The id of the input field. */\n id?: string;\n /** A text that further describes the field and helps with filling out the form correctly. */\n helperText?: string;\n /** A text message that appears when the field is invalid. Only visible when `error` is set to `true`. */\n errorText?: string;\n /** If `true`, disables the input. */\n disabled?: boolean;\n /** If `true`, marks the input as required. */\n required?: boolean;\n /** If `true`, the input field is in an error state. Required for `errorText` to be shown. */\n error?: boolean;\n /** <a href=\"https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-describedby\" target=\"_blank\">ARIA: aria-describedby attribute.</a> */\n describedBy?: string;\n /** Callback that is triggered when the input loses focus. */\n onBlur?: () => void;\n /** Callback that is triggered when the input gains focus. */\n onFocus?: () => void;\n /** If `true`, hides the clear icon button. Always true for date-like types. */\n hideClear?: boolean;\n /** Any of valid mask types. We use <a href=\"https://imask.js.org/\" target=\"_blank\">IMask</a> behind the scenes. */\n mask?: string;\n /** If `true`, the input will return the unmasked/row value, instead of modified one. Will only have effect when `mask` is used. */\n unmask?: boolean;\n}\n\ntype ControlledInputProps = TextFieldBaseProps & {\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\ntype UncontrolledInputProps = TextFieldBaseProps & {\n value?: never;\n defaultValue: string;\n onChange?: (value: string) => void;\n};\n\nexport type Props = ControlledInputProps | UncontrolledInputProps;\n\nconst TextField = (props: Props) => {\n if (props.mask) {\n return <MaskedTextField {...props} />;\n } else {\n return <UnmaskedTextField {...props} />;\n }\n};\n\nexport default TextField;\n\nconst UnmaskedTextField = (props: Props) => {\n // oxlint-disable-next-line @typescript-eslint/no-unused-vars\n const { unmask, ...propsWithoutMask } = props;\n\n return <BaseInputField type=\"text\" {...propsWithoutMask} componentName=\"text-field\" hideClear={props.hideClear} />;\n};\n\nconst MaskedTextField = (props: Props) => {\n let defaultValue;\n if (props.value) {\n defaultValue = props.value;\n } else if (props.defaultValue) {\n defaultValue = props.defaultValue;\n } else {\n defaultValue = \"\";\n }\n\n const {\n ref: maskRef,\n value,\n unmaskedValue,\n setValue,\n } = useIMask<HTMLInputElement, { mask?: string; defaultValue: string }>({\n mask: props.mask,\n defaultValue,\n });\n const handleChange = () => {\n if (props.onChange) {\n props.onChange(props.unmask ? unmaskedValue : value);\n }\n setValue(value);\n };\n // oxlint-disable-next-line @typescript-eslint/no-unused-vars\n const { unmask, ...propsWithoutMask } = props;\n return (\n <BaseInputField type=\"text\" {...propsWithoutMask} inputRef={maskRef} value={value} onChange={handleChange} componentName=\"text-field\" />\n );\n};\n"],"mappings":";;;;;;AAuDA,IAAM,KAAa,MACb,EAAM,OACD,kBAAC,GAAD,EAAiB,GAAI,EAAQ,CAAA,IAE7B,kBAAC,GAAD,EAAmB,GAAI,EAAQ,CAAA,GAMpC,KAAqB,MAAiB;CAE1C,IAAM,EAAE,WAAQ,GAAG,MAAqB;CAExC,OAAO,kBAAC,GAAD;EAAgB,MAAK;EAAO,GAAI;EAAkB,eAAc;EAAa,WAAW,EAAM;CAAY,CAAA;AACnH,GAEM,KAAmB,MAAiB;CACxC,IAAI;CACJ,AAKE,IALE,EAAM,QACO,EAAM,QACZ,EAAM,eACA,EAAM,eAEN;CAGjB,IAAM,EACJ,KAAK,GACL,UACA,kBACA,gBACE,EAAoE;EACtE,MAAM,EAAM;EACZ;CACF,CAAC,GACK,UAAqB;EAIzB,AAHI,EAAM,YACR,EAAM,SAAS,EAAM,SAAS,IAAgB,CAAK,GAErD,EAAS,CAAK;CAChB,GAEM,EAAE,WAAQ,GAAG,MAAqB;CACxC,OACE,kBAAC,GAAD;EAAgB,MAAK;EAAO,GAAI;EAAkB,UAAU;EAAgB;EAAO,UAAU;EAAc,eAAc;CAAc,CAAA;AAE3I"}
|
package/package.json
CHANGED
|
@@ -1,14 +1,25 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@bonprix-ds/react-text-field",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "TextField 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/text-field"
|
|
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/text-field"
|
|
30
|
+
"publishConfig": {
|
|
31
|
+
"access": "public",
|
|
32
|
+
"provenance": true
|
|
30
33
|
},
|
|
31
34
|
"dependencies": {
|
|
32
35
|
"react-imask": "7.6.1",
|
|
33
|
-
"@bonprix-ds/react-base-input-field": "1.0.
|
|
34
|
-
"@bonprix-ds/utils": "0.2.
|
|
35
|
-
},
|
|
36
|
-
"peerDependencies": {
|
|
37
|
-
"react": "^19.0.0",
|
|
38
|
-
"react-dom": "^19.0.0",
|
|
39
|
-
"tailwind-variants": "0.3.1"
|
|
36
|
+
"@bonprix-ds/react-base-input-field": "1.0.2",
|
|
37
|
+
"@bonprix-ds/utils": "0.2.2"
|
|
40
38
|
},
|
|
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"
|