@a-type/ui 6.1.47 → 6.1.48
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.
|
@@ -12,6 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
13
|
import { Input as BaseInput, } from '@base-ui/react/input';
|
|
14
14
|
import clsx from 'clsx';
|
|
15
|
+
import { useState } from 'react';
|
|
15
16
|
import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
|
|
16
17
|
import { withClassName } from '../../hooks/withClassName.js';
|
|
17
18
|
import { inputInfo } from '../../systems/inputs.js';
|
|
@@ -19,6 +20,7 @@ import cls from './Input.module.css';
|
|
|
19
20
|
const InputBorder = withClassName('div', cls.inputBorder);
|
|
20
21
|
const InnerInput = function InnerInput(_a) {
|
|
21
22
|
var { autoSelect, onFocus, onBlur, className, placeholders, placeholder, placeholdersIntervalMs = 5000, onValueChange } = _a, props = __rest(_a, ["autoSelect", "onFocus", "onBlur", "className", "placeholders", "placeholder", "placeholdersIntervalMs", "onValueChange"]);
|
|
23
|
+
const [touched, setTouched] = useState(false);
|
|
22
24
|
const handleFocus = (ev) => {
|
|
23
25
|
if (autoSelect) {
|
|
24
26
|
ev.target.select();
|
|
@@ -35,9 +37,10 @@ const InnerInput = function InnerInput(_a) {
|
|
|
35
37
|
const handleBlur = (ev) => {
|
|
36
38
|
onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
|
|
37
39
|
ev.currentTarget.removeAttribute('data-focus-clicked');
|
|
40
|
+
setTouched(true);
|
|
38
41
|
};
|
|
39
42
|
const randomPlaceholder = useRotatingShuffledValue(placeholders !== null && placeholders !== void 0 ? placeholders : [], placeholdersIntervalMs);
|
|
40
|
-
return (_jsx(BaseInput, Object.assign({ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder, onFocus: handleFocus, onValueChange: onValueChange, onBlur: handleBlur, className: clsx(cls.input, className) }, props)));
|
|
43
|
+
return (_jsx(BaseInput, Object.assign({ placeholder: placeholder !== null && placeholder !== void 0 ? placeholder : randomPlaceholder, onFocus: handleFocus, onValueChange: onValueChange, onBlur: handleBlur, className: clsx(cls.input, className), "data-touched": touched || undefined }, props)));
|
|
41
44
|
};
|
|
42
45
|
const InputDefault = function InputDefault(_a) {
|
|
43
46
|
var { className, borderRef, startAccessory, endAccessory, style } = _a, props = __rest(_a, ["className", "borderRef", "startAccessory", "endAccessory", "style"]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EACN,KAAK,IAAI,SAAS,GAElB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,IAAI,MAAM,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/input/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
line-height: var(--m-prose-secondary-lineHeight);
|
|
58
58
|
font-weight: var(--m-prose-secondary-weight);
|
|
59
59
|
|
|
60
|
-
&:has(input:invalid:not(:focus)),
|
|
61
|
-
&:has(textarea:invalid:not(:focus)),
|
|
60
|
+
&:has(input[data-touched]:invalid:not(:focus)),
|
|
61
|
+
&:has(textarea[data-touched]:invalid:not(:focus)),
|
|
62
62
|
&:has([contenteditable]:invalid:not(:focus)),
|
|
63
|
-
&:has(input[aria-invalid='true']:not(:focus)),
|
|
64
|
-
&:has(textarea[aria-invalid='true']:not(:focus)),
|
|
63
|
+
&:has(input[data-touched][aria-invalid='true']:not(:focus)),
|
|
64
|
+
&:has(textarea[data-touched][aria-invalid='true']:not(:focus)),
|
|
65
65
|
&:has([contenteditable][aria-invalid='true']:not(:focus)) {
|
|
66
66
|
@apply --mx-borderColor(var(--m-color-attention-heavy));
|
|
67
67
|
@apply --mx-bg(var(--m-color-attention-wash));
|
package/package.json
CHANGED
|
@@ -57,11 +57,11 @@
|
|
|
57
57
|
line-height: var(--m-prose-secondary-lineHeight);
|
|
58
58
|
font-weight: var(--m-prose-secondary-weight);
|
|
59
59
|
|
|
60
|
-
&:has(input:invalid:not(:focus)),
|
|
61
|
-
&:has(textarea:invalid:not(:focus)),
|
|
60
|
+
&:has(input[data-touched]:invalid:not(:focus)),
|
|
61
|
+
&:has(textarea[data-touched]:invalid:not(:focus)),
|
|
62
62
|
&:has([contenteditable]:invalid:not(:focus)),
|
|
63
|
-
&:has(input[aria-invalid='true']:not(:focus)),
|
|
64
|
-
&:has(textarea[aria-invalid='true']:not(:focus)),
|
|
63
|
+
&:has(input[data-touched][aria-invalid='true']:not(:focus)),
|
|
64
|
+
&:has(textarea[data-touched][aria-invalid='true']:not(:focus)),
|
|
65
65
|
&:has([contenteditable][aria-invalid='true']:not(:focus)) {
|
|
66
66
|
@apply --mx-borderColor(var(--m-color-attention-heavy));
|
|
67
67
|
@apply --mx-bg(var(--m-color-attention-wash));
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
InputProps as BaseInputProps,
|
|
4
4
|
} from '@base-ui/react/input';
|
|
5
5
|
import clsx from 'clsx';
|
|
6
|
-
import { CSSProperties, Ref } from 'react';
|
|
6
|
+
import { CSSProperties, Ref, useState } from 'react';
|
|
7
7
|
import { useRotatingShuffledValue } from '../../hooks/useRotatingShuffledValue.js';
|
|
8
8
|
import { withClassName } from '../../hooks/withClassName.js';
|
|
9
9
|
import { inputInfo } from '../../systems/inputs.js';
|
|
@@ -23,6 +23,7 @@ const InnerInput = function InnerInput({
|
|
|
23
23
|
|
|
24
24
|
...props
|
|
25
25
|
}: InputProps) {
|
|
26
|
+
const [touched, setTouched] = useState(false);
|
|
26
27
|
const handleFocus: BaseInputProps['onFocus'] = (ev) => {
|
|
27
28
|
if (autoSelect) {
|
|
28
29
|
ev.target.select();
|
|
@@ -40,6 +41,7 @@ const InnerInput = function InnerInput({
|
|
|
40
41
|
const handleBlur: BaseInputProps['onBlur'] = (ev) => {
|
|
41
42
|
onBlur?.(ev);
|
|
42
43
|
ev.currentTarget.removeAttribute('data-focus-clicked');
|
|
44
|
+
setTouched(true);
|
|
43
45
|
};
|
|
44
46
|
const randomPlaceholder = useRotatingShuffledValue(
|
|
45
47
|
placeholders ?? [],
|
|
@@ -53,6 +55,7 @@ const InnerInput = function InnerInput({
|
|
|
53
55
|
onValueChange={onValueChange}
|
|
54
56
|
onBlur={handleBlur}
|
|
55
57
|
className={clsx(cls.input, className)}
|
|
58
|
+
data-touched={touched || undefined}
|
|
56
59
|
{...props}
|
|
57
60
|
/>
|
|
58
61
|
);
|