@acusti/css-value-input 1.0.0-rc.9 → 1.0.0
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/CSSValueInput.js
CHANGED
|
@@ -9,7 +9,7 @@ export default React.forwardRef(function CSSValueInput({ allowEmpty = true, clas
|
|
|
9
9
|
useImperativeHandle(ref, () => inputRef.current);
|
|
10
10
|
// props.value should be a string; if it’s a number, convert it here
|
|
11
11
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
12
|
-
value = `${value}`;
|
|
12
|
+
value = `${value}`;
|
|
13
13
|
}
|
|
14
14
|
const submittedValueRef = useRef(value !== null && value !== void 0 ? value : '');
|
|
15
15
|
useEffect(() => {
|
|
@@ -168,8 +168,8 @@ export default React.forwardRef(function CSSValueInput({ allowEmpty = true, clas
|
|
|
168
168
|
handleSubmitValue(event);
|
|
169
169
|
}
|
|
170
170
|
}, [handleSubmitValue, onKeyUp]);
|
|
171
|
-
return (React.createElement("label", { className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
|
|
172
|
-
icon ? React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon)
|
|
171
|
+
return (React.createElement("label", { "aria-label": label ? undefined : title, className: clsx(ROOT_CLASS_NAME, className, { disabled }), title: title },
|
|
172
|
+
icon == null ? null : (React.createElement("div", { className: `${ROOT_CLASS_NAME}-icon` }, icon)),
|
|
173
173
|
label ? (React.createElement("div", { className: `${ROOT_CLASS_NAME}-label` },
|
|
174
174
|
React.createElement("p", { className: `${ROOT_CLASS_NAME}-label-text` }, label))) : null,
|
|
175
175
|
React.createElement("div", { className: `${ROOT_CLASS_NAME}-value` },
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"AAAA,OAAO,EACH,sBAAsB,EACtB,8BAA8B,EAC9B,mBAAmB,EACnB,mBAAmB,EACnB,mBAAmB,EACnB,gBAAgB,GACnB,MAAM,oBAAoB,CAAC;AAE5B,OAAO,SAAS,MAAM,oBAAoB,CAAC;AAC3C,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA4C/B,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,mBAAmB,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC;AAEtE,MAAM,eAAe,GAAG,eAAe,CAAC;AAExC,eAAe,KAAK,CAAC,UAAU,CAA0B,SAAS,aAAa,CAC3E,EACI,UAAU,GAAG,IAAI,EACjB,SAAS,EACT,YAAY,GAAG,sBAAsB,EACrC,QAAQ,EACR,gBAAgB,GAAG,mBAAmB,EACtC,IAAI,EACJ,KAAK,EACL,GAAG,EACH,GAAG,EACH,IAAI,EACJ,MAAM,EACN,QAAQ,EACR,OAAO,EACP,SAAS,EACT,OAAO,EACP,aAAa,EACb,WAAW,EACX,IAAI,GAAG,CAAC,EACR,QAAQ,EACR,KAAK,EACL,IAAI,GAAG,8BAA8B,CAAC,YAAY,CAAC,EACnD,SAAS,EACT,KAAK,GACD,EACR,GAAG;IAEH,MAAM,QAAQ,GAAG,MAAM,CAAW,IAAI,CAAC,CAAC;IACxC,mBAAmB,CAAqB,GAAG,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC;IACrE,oEAAoE;IACpE,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC,KAAK,CAAC,EAAE,CAAC;QACpD,KAAK,GAAG,GAAG,KAAK,EAAE,CAAC
|
|
1
|
+
{"version":3,"file":"CSSValueInput.js","sourceRoot":"","sources":["../src/CSSValueInput.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @vitest-environment happy-dom
|
|
2
2
|
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import React from 'react';
|
|
3
|
+
import { userEvent } from '@testing-library/user-event';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
6
|
import CSSValueInput from './CSSValueInput.js';
|
|
7
7
|
const noop = () => { }; // eslint-disable-line @typescript-eslint/no-empty-function
|
|
@@ -9,14 +9,12 @@ afterEach(cleanup);
|
|
|
9
9
|
describe('CSSValueInput.tsx', () => {
|
|
10
10
|
it('renders a text input with the given props.value', () => {
|
|
11
11
|
render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "24px" }));
|
|
12
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
13
12
|
const input = screen.getByRole('textbox');
|
|
14
13
|
expect(input.value).toBe('24px');
|
|
15
14
|
});
|
|
16
15
|
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
17
16
|
const user = userEvent.setup();
|
|
18
17
|
render(React.createElement(CSSValueInput, { onSubmitValue: noop, value: "75%" }));
|
|
19
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
20
18
|
const input = screen.getByRole('textbox');
|
|
21
19
|
expect(input.value).toBe('75%');
|
|
22
20
|
await user.type(input, '{ArrowUp}');
|
|
@@ -35,7 +33,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
35
33
|
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
36
34
|
const user = userEvent.setup();
|
|
37
35
|
render(React.createElement(CSSValueInput, { onSubmitValue: noop, step: 0.1, value: "2rem" }));
|
|
38
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
39
36
|
const input = screen.getByRole('textbox');
|
|
40
37
|
expect(input.value).toBe('2rem');
|
|
41
38
|
await user.type(input, '{ArrowUp}');
|
|
@@ -54,7 +51,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
54
51
|
it('uses props.unit as default unit when unit is missing', async () => {
|
|
55
52
|
const user = userEvent.setup();
|
|
56
53
|
render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
|
|
57
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
58
54
|
const input = screen.getByRole('textbox');
|
|
59
55
|
expect(input.value).toBe('');
|
|
60
56
|
await user.type(input, '14{Enter}');
|
|
@@ -63,7 +59,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
63
59
|
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
64
60
|
const user = userEvent.setup();
|
|
65
61
|
render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "px", value: "" }));
|
|
66
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
67
62
|
const input = screen.getByRole('textbox');
|
|
68
63
|
expect(input.value).toBe('');
|
|
69
64
|
await user.type(input, '25vw{Enter}');
|
|
@@ -74,7 +69,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
74
69
|
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
75
70
|
const user = userEvent.setup();
|
|
76
71
|
render(React.createElement(CSSValueInput, { allowEmpty: true, onSubmitValue: noop, unit: "", value: "100" }));
|
|
77
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
78
72
|
const input = screen.getByRole('textbox');
|
|
79
73
|
expect(input.value).toBe('100');
|
|
80
74
|
await user.type(input, '1{Enter}');
|
|
@@ -89,7 +83,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
89
83
|
it('updates default unit as props.unit and props.value changes', async () => {
|
|
90
84
|
const user = userEvent.setup();
|
|
91
85
|
const { rerender } = render(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "px", value: "12px" }));
|
|
92
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
93
86
|
const input = screen.getByRole('textbox');
|
|
94
87
|
rerender(React.createElement(CSSValueInput, { onSubmitValue: noop, unit: "", value: "4" }));
|
|
95
88
|
expect(input.value).toBe('4');
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.tsx"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AACjE,OAAO,SAAS,MAAM,6BAA6B,CAAC;
|
|
1
|
+
{"version":3,"file":"CSSValueInput.test.js","sourceRoot":"","sources":["../src/CSSValueInput.test.tsx"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@acusti/css-value-input",
|
|
3
|
-
"version": "1.0.0
|
|
3
|
+
"version": "1.0.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": "./dist/CSSValueInput.js",
|
|
@@ -39,23 +39,23 @@
|
|
|
39
39
|
},
|
|
40
40
|
"homepage": "https://github.com/acusti/uikit/tree/main/packages/css-value-input#readme",
|
|
41
41
|
"devDependencies": {
|
|
42
|
-
"@testing-library/dom": "^
|
|
43
|
-
"@testing-library/react": "^
|
|
44
|
-
"@testing-library/user-event": "^14.
|
|
45
|
-
"@types/react": "^
|
|
46
|
-
"happy-dom": "^
|
|
47
|
-
"react": "^
|
|
48
|
-
"react-dom": "^
|
|
49
|
-
"typescript": "
|
|
50
|
-
"vitest": "^
|
|
42
|
+
"@testing-library/dom": "^10.4.0",
|
|
43
|
+
"@testing-library/react": "^16.1.0",
|
|
44
|
+
"@testing-library/user-event": "^14.5.2",
|
|
45
|
+
"@types/react": "^19.0.2",
|
|
46
|
+
"happy-dom": "^15.11.7",
|
|
47
|
+
"react": "^19.0.0",
|
|
48
|
+
"react-dom": "^19.0.0",
|
|
49
|
+
"typescript": "5.3.3",
|
|
50
|
+
"vitest": "^2.1.8"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@acusti/css-values": "^1.0.
|
|
54
|
-
"@acusti/input-text": "^1.
|
|
53
|
+
"@acusti/css-values": "^1.0.3",
|
|
54
|
+
"@acusti/input-text": "^1.9.0",
|
|
55
55
|
"clsx": "^2"
|
|
56
56
|
},
|
|
57
57
|
"peerDependencies": {
|
|
58
|
-
"react": "^16.8 || ^17 || ^18",
|
|
59
|
-
"react-dom": "^16.8 || ^17 || ^18"
|
|
58
|
+
"react": "^16.8 || ^17 || ^18 || ^19",
|
|
59
|
+
"react-dom": "^16.8 || ^17 || ^18 || ^19"
|
|
60
60
|
}
|
|
61
61
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
// @vitest-environment happy-dom
|
|
2
2
|
import { cleanup, render, screen } from '@testing-library/react';
|
|
3
|
-
import userEvent from '@testing-library/user-event';
|
|
4
|
-
import React from 'react';
|
|
3
|
+
import { userEvent } from '@testing-library/user-event';
|
|
4
|
+
import React from 'react';
|
|
5
5
|
import { afterEach, describe, expect, it } from 'vitest';
|
|
6
6
|
|
|
7
7
|
import CSSValueInput from './CSSValueInput.js';
|
|
@@ -13,7 +13,6 @@ afterEach(cleanup);
|
|
|
13
13
|
describe('CSSValueInput.tsx', () => {
|
|
14
14
|
it('renders a text input with the given props.value', () => {
|
|
15
15
|
render(<CSSValueInput onSubmitValue={noop} value="24px" />);
|
|
16
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
17
16
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
18
17
|
expect(input.value).toBe('24px');
|
|
19
18
|
});
|
|
@@ -21,7 +20,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
21
20
|
it('handles ↑/↓ keys to increment/decrement by 1 and ⇧↑/⇧↓ to increment/decrement by 10 (preserving the CSS unit)', async () => {
|
|
22
21
|
const user = userEvent.setup();
|
|
23
22
|
render(<CSSValueInput onSubmitValue={noop} value="75%" />);
|
|
24
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
25
23
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
26
24
|
expect(input.value).toBe('75%');
|
|
27
25
|
await user.type(input, '{ArrowUp}');
|
|
@@ -41,7 +39,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
41
39
|
it('supports custom props.step for ↑/↓ key handling', async () => {
|
|
42
40
|
const user = userEvent.setup();
|
|
43
41
|
render(<CSSValueInput onSubmitValue={noop} step={0.1} value="2rem" />);
|
|
44
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
45
42
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
46
43
|
expect(input.value).toBe('2rem');
|
|
47
44
|
await user.type(input, '{ArrowUp}');
|
|
@@ -61,7 +58,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
61
58
|
it('uses props.unit as default unit when unit is missing', async () => {
|
|
62
59
|
const user = userEvent.setup();
|
|
63
60
|
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
|
|
64
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
65
61
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
66
62
|
expect(input.value).toBe('');
|
|
67
63
|
await user.type(input, '14{Enter}');
|
|
@@ -71,7 +67,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
71
67
|
it('preserves last entered unit if different from props.unit when unit is missing', async () => {
|
|
72
68
|
const user = userEvent.setup();
|
|
73
69
|
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="px" value="" />);
|
|
74
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
75
70
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
76
71
|
expect(input.value).toBe('');
|
|
77
72
|
await user.type(input, '25vw{Enter}');
|
|
@@ -83,7 +78,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
83
78
|
it('treats value as numeric if props.unit is an empty string', async () => {
|
|
84
79
|
const user = userEvent.setup();
|
|
85
80
|
render(<CSSValueInput allowEmpty onSubmitValue={noop} unit="" value="100" />);
|
|
86
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
87
81
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
88
82
|
expect(input.value).toBe('100');
|
|
89
83
|
await user.type(input, '1{Enter}');
|
|
@@ -101,7 +95,6 @@ describe('CSSValueInput.tsx', () => {
|
|
|
101
95
|
const { rerender } = render(
|
|
102
96
|
<CSSValueInput onSubmitValue={noop} unit="px" value="12px" />,
|
|
103
97
|
);
|
|
104
|
-
// eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
|
|
105
98
|
const input = screen.getByRole('textbox') as HTMLInputElement;
|
|
106
99
|
rerender(<CSSValueInput onSubmitValue={noop} unit="" value="4" />);
|
|
107
100
|
expect(input.value).toBe('4');
|
package/src/CSSValueInput.tsx
CHANGED
|
@@ -89,7 +89,7 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
89
89
|
useImperativeHandle<InputRef, InputRef>(ref, () => inputRef.current);
|
|
90
90
|
// props.value should be a string; if it’s a number, convert it here
|
|
91
91
|
if (typeof value === 'number' && !Number.isNaN(value)) {
|
|
92
|
-
value = `${value}`;
|
|
92
|
+
value = `${value}`;
|
|
93
93
|
}
|
|
94
94
|
const submittedValueRef = useRef<string>(value ?? '');
|
|
95
95
|
|
|
@@ -287,8 +287,14 @@ export default React.forwardRef<HTMLInputElement, Props>(function CSSValueInput(
|
|
|
287
287
|
);
|
|
288
288
|
|
|
289
289
|
return (
|
|
290
|
-
<label
|
|
291
|
-
{
|
|
290
|
+
<label
|
|
291
|
+
aria-label={label ? undefined : title}
|
|
292
|
+
className={clsx(ROOT_CLASS_NAME, className, { disabled })}
|
|
293
|
+
title={title}
|
|
294
|
+
>
|
|
295
|
+
{icon == null ? null : (
|
|
296
|
+
<div className={`${ROOT_CLASS_NAME}-icon`}>{icon}</div>
|
|
297
|
+
)}
|
|
292
298
|
{label ? (
|
|
293
299
|
<div className={`${ROOT_CLASS_NAME}-label`}>
|
|
294
300
|
<p className={`${ROOT_CLASS_NAME}-label-text`}>{label}</p>
|