@cladd-ui/react 0.0.34 → 0.0.35
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 +7 -0
- package/components/Input.d.ts +3 -4
- package/components/Input.d.ts.map +1 -1
- package/components/Input.js +12 -21
- package/components/Input.js.map +1 -1
- package/components/SurfaceCut.d.ts +1 -2
- package/components/SurfaceCut.d.ts.map +1 -1
- package/components/Textarea.d.ts +3 -4
- package/components/Textarea.d.ts.map +1 -1
- package/components/Textarea.js +3 -12
- package/components/Textarea.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
package/components/Input.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { ElementType, ReactNode, Ref, ChangeEvent, KeyboardEvent, FocusEvent, ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import { Color } from '../types.js';
|
|
3
|
+
import { SurfaceCutOwnProps } from './SurfaceCut.js';
|
|
3
4
|
export type InputSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
5
|
interface InputOwnProps<C extends ElementType = 'div', IC extends ElementType = 'input'> {
|
|
5
6
|
/** Polymorphic **wrapper** element. Defaults to `'div'`. (For the inner input, see `inputComponent`.) */
|
|
@@ -65,9 +66,7 @@ interface InputOwnProps<C extends ElementType = 'div', IC extends ElementType =
|
|
|
65
66
|
inputMode?: 'none' | 'text' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal' | 'search';
|
|
66
67
|
/** Icon node rendered inside the surface, absolutely positioned on the left. Shifts input padding. */
|
|
67
68
|
icon?: ReactNode;
|
|
68
|
-
/**
|
|
69
|
-
surfaceClassName?: string;
|
|
70
|
-
/** Forwarded to the wrapper element. */
|
|
69
|
+
/** Forwarded to the `SurfaceCut` root element. */
|
|
71
70
|
ref?: Ref<HTMLElement>;
|
|
72
71
|
/** Forwarded to the inner `<input>` (or `inputComponent`) element. */
|
|
73
72
|
inputRef?: Ref<HTMLInputElement>;
|
|
@@ -80,7 +79,7 @@ interface InputOwnProps<C extends ElementType = 'div', IC extends ElementType =
|
|
|
80
79
|
/** Extra props forwarded to the `inputComponent`. Typed against the chosen component. */
|
|
81
80
|
inputComponentProps?: Partial<ComponentPropsWithoutRef<IC>>;
|
|
82
81
|
}
|
|
83
|
-
export type InputProps<C extends ElementType = 'div', IC extends ElementType = 'input'> = InputOwnProps<C, IC> & Omit<ComponentPropsWithoutRef<C>, keyof InputOwnProps<C, IC>>;
|
|
82
|
+
export type InputProps<C extends ElementType = 'div', IC extends ElementType = 'input'> = InputOwnProps<C, IC> & Omit<SurfaceCutOwnProps<C>, keyof InputOwnProps<C, IC> | 'children'> & Omit<ComponentPropsWithoutRef<C>, keyof InputOwnProps<C, IC>>;
|
|
84
83
|
export declare const Input: <C extends ElementType = "div", IC extends ElementType = "input">(props: InputProps<C, IC>) => import("react/jsx-runtime").JSX.Element;
|
|
85
84
|
export {};
|
|
86
85
|
//# sourceMappingURL=Input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"AAAA,OAAO,EAGL,WAAW,EACX,SAAS,EACT,GAAG,EACH,WAAW,EACX,aAAa,EACb,UAAU,EAEV,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
package/components/Input.js
CHANGED
|
@@ -10,7 +10,7 @@ import { CloseIcon } from './icons/CloseIcon.js';
|
|
|
10
10
|
import { SurfaceCut } from './SurfaceCut.js';
|
|
11
11
|
export const Input = (props) => {
|
|
12
12
|
const accentColor = useAccentColor();
|
|
13
|
-
const { as: asProp = 'div', type = 'text', value, displayValue, placeholder, name, required = false, disabled = false, readOnly, inputId, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, onClear = () => { }, color = accentColor, prefix, min, step, suffix, className, contentClassName, inputClassName, max, maxLength, clearButton, valid = true, infoMessage, errorMessage, pattern, inputMode, icon,
|
|
13
|
+
const { as: asProp = 'div', type = 'text', value, displayValue, placeholder, name, required = false, disabled = false, readOnly, inputId, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, onClear = () => { }, color = accentColor, prefix, min, step, suffix, className, contentClassName, inputClassName, max, maxLength, clearButton, valid = true, infoMessage, errorMessage, pattern, inputMode, icon, autoFocus, inputComponent = 'input', inputComponentProps = {}, ref: externalRef, inputRef: externalInputRef, ...rest } = props;
|
|
14
14
|
const fontSizes = {
|
|
15
15
|
sm: 'text-cladd-xs',
|
|
16
16
|
md: 'text-cladd-xs',
|
|
@@ -51,7 +51,6 @@ export const Input = (props) => {
|
|
|
51
51
|
const inputPadding = icon
|
|
52
52
|
? inputPaddingWithIcon[size]
|
|
53
53
|
: inputPaddingNoIcon[size];
|
|
54
|
-
const elRef = useRef(null);
|
|
55
54
|
const inputElRef = useRef(null);
|
|
56
55
|
const [focused, setFocused] = useState(false);
|
|
57
56
|
const onFocusInternal = (e) => {
|
|
@@ -62,30 +61,22 @@ export const Input = (props) => {
|
|
|
62
61
|
setFocused(false);
|
|
63
62
|
onBlur(e);
|
|
64
63
|
};
|
|
65
|
-
const Component = asProp;
|
|
66
64
|
const InputComponent = inputComponent;
|
|
65
|
+
const SurfaceCutComponent = SurfaceCut;
|
|
67
66
|
const showDisplayValue = displayValue && (readOnly || !focused);
|
|
68
67
|
const showRealValue = !showDisplayValue;
|
|
69
|
-
return (_jsxs(
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
inputElRef.current = el;
|
|
79
|
-
if (externalInputRef) {
|
|
80
|
-
if (typeof externalInputRef === 'function')
|
|
81
|
-
externalInputRef(el);
|
|
82
|
-
else
|
|
83
|
-
externalInputRef.current = el;
|
|
84
|
-
}
|
|
85
|
-
}, id: inputId, type: type, disabled: disabled, value: value, name: name, required: required, placeholder: placeholder, className: cn(inputPadding, height, fontSizes[size], itemRoundedClasses, 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-cladd-fg-softer', 'placeholder-cladd-fg-softer', !showRealValue && 'text-transparent! placeholder-transparent!', inputClassName), onFocus: onFocusInternal, onBlur: onBlurInternal, onKeyDown: onKeyDown, onChange: (e) => onChange(e.target.value, e), maxLength: maxLength, max: max, min: min, pattern: pattern, step: step, ...inputComponentProps }), showDisplayValue && (_jsx("span", { "data-part": "display-value", className: cn(inputPadding, height, fontSizes[size], 'pointer-events-none absolute inset-0 flex items-center font-medium', disabled && 'text-cladd-fg-softer', inputClassName), children: displayValue })), clearButton && !disabled && !readOnly && (_jsx("div", { className: cn('relative mr-1 shrink-0', rootSizeClasses(size, 'height'), rootSizeClasses(size, 'width')), children: _jsx(Button, { "data-part": "clear", className: cn('absolute top-1 right-0 bottom-1 left-0 h-auto w-auto transform-gpu duration-200', !value && 'pointer-events-none scale-0'), contentClassName: "px-0", disabled: !value, rounded: rounded, size: prevSize, outline: false, onClick: onClear, children: _jsx(CloseIcon, { className: cn('text-cladd-fg-soft', size === 'sm'
|
|
68
|
+
return (_jsxs(SurfaceCutComponent, { ...rest, as: asProp, ref: externalRef, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-invalid": valid === false || undefined, "data-required": required || undefined, wrapContent: false, hoverable: !disabled && !readOnly, className: cn('cladd-input group/cladd-input', disabled && 'opacity-50', itemRoundedClasses, className), children: [!readOnly && !disabled && (_jsx(FocusableLayer, { className: cn(focusRoundedClasses), force: valid === false, color: valid === false ? 'red' : color, group: "input" })), _jsxs("div", { "data-part": "wrapper", className: cn('relative flex items-center', contentClassName), onContextMenuCapture: (e) => e.preventDefault(), children: [prefix, icon && (_jsx("div", { "data-part": "icon", className: cn('pointer-events-none absolute top-1/2 -translate-y-1/2', iconWrapClasses[size]), children: icon })), _jsxs("div", { className: cn('relative flex w-full'), children: [_jsx(InputComponent, { "data-part": "control", tabIndex: disabled || readOnly ? -1 : undefined, autoFocus: autoFocus, readOnly: readOnly, inputMode: inputMode, ref: (el) => {
|
|
69
|
+
inputElRef.current = el;
|
|
70
|
+
if (externalInputRef) {
|
|
71
|
+
if (typeof externalInputRef === 'function')
|
|
72
|
+
externalInputRef(el);
|
|
73
|
+
else
|
|
74
|
+
externalInputRef.current = el;
|
|
75
|
+
}
|
|
76
|
+
}, id: inputId, type: type, disabled: disabled, value: value, name: name, required: required, placeholder: placeholder, className: cn(inputPadding, height, fontSizes[size], itemRoundedClasses, 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-cladd-fg-softer', 'placeholder-cladd-fg-softer', !showRealValue && 'text-transparent! placeholder-transparent!', inputClassName), onFocus: onFocusInternal, onBlur: onBlurInternal, onKeyDown: onKeyDown, onChange: (e) => onChange(e.target.value, e), maxLength: maxLength, max: max, min: min, pattern: pattern, step: step, ...inputComponentProps }), showDisplayValue && (_jsx("span", { "data-part": "display-value", className: cn(inputPadding, height, fontSizes[size], 'pointer-events-none absolute inset-0 flex items-center font-medium', disabled && 'text-cladd-fg-softer', inputClassName), children: displayValue }))] }), clearButton && !disabled && !readOnly && (_jsx("div", { className: cn('relative mr-1 shrink-0', rootSizeClasses(size, 'height'), rootSizeClasses(size, 'width')), children: _jsx(Button, { "data-part": "clear", className: cn('absolute top-1 right-0 bottom-1 left-0 h-auto w-auto transform-gpu duration-200', !value && 'pointer-events-none scale-0'), contentClassName: "px-0", disabled: !value, rounded: rounded, size: prevSize, outline: false, onClick: onClear, children: _jsx(CloseIcon, { className: cn('text-cladd-fg-soft', size === 'sm'
|
|
86
77
|
? 'size-3!'
|
|
87
78
|
: size === 'md'
|
|
88
79
|
? 'size-3.5!'
|
|
89
|
-
: 'size-4') }) }) })), suffix] }), infoMessage && valid !== false && !readOnly && (_jsx("div", { "data-part": "info", className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-
|
|
80
|
+
: 'size-4') }) }) })), suffix] }), infoMessage && valid !== false && !readOnly && (_jsx("div", { "data-part": "info", className: cn('pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-0 rounded-cladd-xs bg-cladd-primary px-2 py-0.5 text-cladd-2xs leading-none font-semibold text-cladd-on-primary opacity-0 duration-200 group-has-[input:focus]/cladd-input:-translate-y-1/2 group-has-[input:focus]/cladd-input:opacity-100', `cladd-color-${color}`), children: infoMessage })), errorMessage && valid === false && (_jsx("div", { "data-part": "error", className: cn('cladd-color-red pointer-events-none absolute -top-1.5 left-2 z-10 -translate-y-1/2 rounded-cladd-xs bg-cladd-primary px-2 py-0.5 text-cladd-2xs leading-none font-semibold text-cladd-on-primary opacity-100 duration-200'), children: errorMessage }))] }));
|
|
90
81
|
};
|
|
91
82
|
//# sourceMappingURL=Input.js.map
|
package/components/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,MAAM,EACN,QAAQ,GAST,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,MAAM,EAAc,MAAM,UAAU,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/components/Input.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { ReactNode, Ref, ElementType, ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import { Color } from '../types.js';
|
|
3
|
-
interface SurfaceCutOwnProps<C extends ElementType = 'div'> {
|
|
3
|
+
export interface SurfaceCutOwnProps<C extends ElementType = 'div'> {
|
|
4
4
|
/** Surface-cut content. */
|
|
5
5
|
children?: ReactNode;
|
|
6
6
|
/** Extra classes for the root element. */
|
|
@@ -30,5 +30,4 @@ interface SurfaceCutOwnProps<C extends ElementType = 'div'> {
|
|
|
30
30
|
}
|
|
31
31
|
export type SurfaceCutProps<C extends ElementType = 'div'> = SurfaceCutOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof SurfaceCutOwnProps<C>>;
|
|
32
32
|
export declare const SurfaceCut: <C extends ElementType = "div">(props: SurfaceCutProps<C>) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
-
export {};
|
|
34
33
|
//# sourceMappingURL=SurfaceCut.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SurfaceCut.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,
|
|
1
|
+
{"version":3,"file":"SurfaceCut.d.ts","sourceRoot":"","sources":["../../../src/components/SurfaceCut.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,wBAAwB,EAAE,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IAC/D,2BAA2B;IAC3B,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,0CAA0C;IAC1C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,qDAAqD;IACrD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yEAAyE;IACzE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,8DAA8D;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,yFAAyF;IACzF,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qDAAqD;IACrD,EAAE,CAAC,EAAE,CAAC,CAAC;IACP;;;;OAIG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,sGAAsG;IACtG,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iDAAiD;IACjD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,MAAM,MAAM,eAAe,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IACvD,kBAAkB,CAAC,CAAC,CAAC,GACnB,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;AAEnE,eAAO,MAAM,UAAU,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACtD,OAAO,eAAe,CAAC,CAAC,CAAC,4CAuE1B,CAAC"}
|
package/components/Textarea.d.ts
CHANGED
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { ElementType, ReactNode, Ref, FocusEvent, KeyboardEvent, FormEvent, ComponentPropsWithoutRef } from 'react';
|
|
2
2
|
import { Color } from '../types.js';
|
|
3
|
+
import { SurfaceCutOwnProps } from './SurfaceCut.js';
|
|
3
4
|
export type TextareaSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
4
5
|
interface TextareaOwnProps<C extends ElementType = 'div'> {
|
|
5
6
|
/** Polymorphic wrapper element. Defaults to `'div'`. The editable area itself is always a `contenteditable` `<div>`. */
|
|
6
7
|
as?: C;
|
|
7
|
-
/** Forwarded to the
|
|
8
|
+
/** Forwarded to the `SurfaceCut` root element. */
|
|
8
9
|
ref?: Ref<HTMLElement>;
|
|
9
10
|
/** Controlled value. Synced into the editable `innerText` on change (see `updateContentOnChange`). */
|
|
10
11
|
value?: string;
|
|
@@ -51,12 +52,10 @@ interface TextareaOwnProps<C extends ElementType = 'div'> {
|
|
|
51
52
|
errorMessage?: ReactNode;
|
|
52
53
|
/** Icon node rendered absolutely positioned on the left. */
|
|
53
54
|
icon?: ReactNode;
|
|
54
|
-
/** Extra classes applied to the inner `SurfaceCut`. */
|
|
55
|
-
surfaceClassName?: string;
|
|
56
55
|
/** Reserved - currently not applied in the rendered output. */
|
|
57
56
|
inputPadding?: string;
|
|
58
57
|
}
|
|
59
|
-
export type TextareaProps<C extends ElementType = 'div'> = TextareaOwnProps<C> & Omit<ComponentPropsWithoutRef<C>, keyof TextareaOwnProps<C>>;
|
|
58
|
+
export type TextareaProps<C extends ElementType = 'div'> = TextareaOwnProps<C> & Omit<SurfaceCutOwnProps<C>, keyof TextareaOwnProps<C> | 'children'> & Omit<ComponentPropsWithoutRef<C>, keyof TextareaOwnProps<C>>;
|
|
60
59
|
export declare const Textarea: <C extends ElementType = "div">(props: TextareaProps<C>) => import("react/jsx-runtime").JSX.Element;
|
|
61
60
|
export {};
|
|
62
61
|
//# sourceMappingURL=Textarea.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EACX,SAAS,EACT,GAAG,EACH,UAAU,EACV,aAAa,EACb,SAAS,EAGT,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;
|
|
1
|
+
{"version":3,"file":"Textarea.d.ts","sourceRoot":"","sources":["../../../src/components/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,EAIL,WAAW,EACX,SAAS,EACT,GAAG,EACH,UAAU,EACV,aAAa,EACb,SAAS,EAGT,wBAAwB,EACzB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,OAAO,EAAc,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAE9D,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,CAAC;AAE7D,UAAU,gBAAgB,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK;IACtD,wHAAwH;IACxH,EAAE,CAAC,EAAE,CAAC,CAAC;IACP,kDAAkD;IAClD,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;IACvB,sGAAsG;IACtG,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,8DAA8D;IAC9D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4EAA4E;IAC5E,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,sFAAsF;IACtF,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACtE,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACvD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IAClD,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,CAAC,cAAc,CAAC,KAAK,IAAI,CAAC;IACjD,iGAAiG;IACjG,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,8CAA8C;IAC9C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,6CAA6C;IAC7C,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;OAIG;IACH,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,iFAAiF;IACjF,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,kEAAkE;IAClE,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,+CAA+C;IAC/C,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;gFAE4E;IAC5E,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,mGAAmG;IACnG,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,mEAAmE;IACnE,YAAY,CAAC,EAAE,SAAS,CAAC;IACzB,4DAA4D;IAC5D,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,+DAA+D;IAC/D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,WAAW,GAAG,KAAK,IAAI,gBAAgB,CAAC,CAAC,CAAC,GAC5E,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,GAAG,UAAU,CAAC,GACnE,IAAI,CAAC,wBAAwB,CAAC,CAAC,CAAC,EAAE,MAAM,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC;AAE/D,eAAO,MAAM,QAAQ,GAAI,CAAC,SAAS,WAAW,GAAG,KAAK,EACpD,OAAO,aAAa,CAAC,CAAC,CAAC,4CAmNxB,CAAC"}
|
package/components/Textarea.js
CHANGED
|
@@ -8,7 +8,7 @@ import { FocusableLayer } from './FocusableLayer.js';
|
|
|
8
8
|
import { SurfaceCut } from './SurfaceCut.js';
|
|
9
9
|
export const Textarea = (props) => {
|
|
10
10
|
const accentColor = useAccentColor();
|
|
11
|
-
const { as: asProp = 'div', ref: externalRef, value, placeholder, disabled = false, readOnly, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, color = accentColor, prefix, suffix, updateContentOnChange = true, className, contentClassName, inputClassName, placeholderClassName = '', valid = true, infoMessage, errorMessage, icon,
|
|
11
|
+
const { as: asProp = 'div', ref: externalRef, value, placeholder, disabled = false, readOnly, rounded = false, size = 'lg', onChange = () => { }, onKeyDown = () => { }, onFocus = () => { }, onBlur = () => { }, color = accentColor, prefix, suffix, updateContentOnChange = true, className, contentClassName, inputClassName, placeholderClassName = '', valid = true, infoMessage, errorMessage, icon, ...rest } = props;
|
|
12
12
|
const fontSizes = {
|
|
13
13
|
sm: 'text-cladd-xs',
|
|
14
14
|
md: 'text-cladd-xs',
|
|
@@ -47,7 +47,6 @@ export const Textarea = (props) => {
|
|
|
47
47
|
const { itemRoundedClasses, focusRoundedClasses } = roundedClasses(size, rounded, true);
|
|
48
48
|
const height = rootSizeClasses(size, 'min-height');
|
|
49
49
|
const inputPadding = cn(inputPaddingVertical[size], icon ? inputPaddingWithIcon[size] : inputPaddingNoIcon[size]);
|
|
50
|
-
const elRef = useRef(null);
|
|
51
50
|
const inputElRef = useRef(null);
|
|
52
51
|
const [text, setText] = useState();
|
|
53
52
|
const onPaste = (e) => {
|
|
@@ -70,15 +69,7 @@ export const Textarea = (props) => {
|
|
|
70
69
|
}
|
|
71
70
|
}
|
|
72
71
|
}, [value]);
|
|
73
|
-
const
|
|
74
|
-
return (_jsxs(
|
|
75
|
-
elRef.current = el;
|
|
76
|
-
if (externalRef) {
|
|
77
|
-
if (typeof externalRef === 'function')
|
|
78
|
-
externalRef(el);
|
|
79
|
-
else
|
|
80
|
-
externalRef.current = el;
|
|
81
|
-
}
|
|
82
|
-
}, children: [prefix, icon && (_jsx("div", { "data-part": "icon", className: cn('pointer-events-none absolute', iconWrapClasses[size]), children: icon })), _jsxs("div", { className: "relative w-full", children: [_jsx("div", { "data-part": "control", contentEditable: !disabled && !readOnly, ref: inputElRef, className: cn(inputPadding, height, itemRoundedClasses, fontSizes[size], 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-cladd-fg-softer', inputClassName), onPaste: onPaste, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onInput: onInput }), !text && placeholder && (_jsx("div", { "data-part": "placeholder", className: cn('pointer-events-none absolute top-0 left-0 h-full w-full text-cladd-fg-softer select-none', fontSizes[size], inputPadding, placeholderClassName), children: placeholder }))] }), suffix] }), infoMessage && valid !== false && !readOnly && (_jsx("div", { "data-part": "info", className: cn(`cladd-color-${color}`, 'pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-1 rounded-cladd-sm bg-cladd-primary px-2 py-1.5 text-cladd-2xs leading-none font-semibold text-cladd-on-primary opacity-0 duration-200 group-has-[[contenteditable]:focus]/cladd-textarea:-translate-y-1/2 group-has-[[contenteditable]:focus]/cladd-textarea:opacity-100'), children: infoMessage })), errorMessage && valid === false && (_jsx("div", { "data-part": "error", className: cn('cladd-color-red pointer-events-none absolute -top-1.5 left-2 z-10 -translate-y-1/2 rounded-cladd-sm bg-cladd-primary px-1 py-0.5 text-cladd-2xs leading-none font-semibold text-cladd-on-primary opacity-100 duration-200'), children: errorMessage }))] }));
|
|
72
|
+
const SurfaceCutComponent = SurfaceCut;
|
|
73
|
+
return (_jsxs(SurfaceCutComponent, { ...rest, as: asProp, ref: externalRef, "data-disabled": disabled || undefined, "data-readonly": readOnly || undefined, "data-invalid": valid === false || undefined, hoverable: !disabled && !readOnly, wrapContent: false, className: cn('cladd-textarea group/cladd-textarea relative', disabled && 'opacity-50', itemRoundedClasses, className), children: [!readOnly && !disabled && (_jsx(FocusableLayer, { className: cn(focusRoundedClasses), force: valid === false, color: valid === false ? 'red' : color, group: "textarea" })), _jsxs("div", { "data-part": "wrapper", onContextMenuCapture: (e) => e.preventDefault(), className: cn('relative flex items-center', contentClassName), children: [prefix, icon && (_jsx("div", { "data-part": "icon", className: cn('pointer-events-none absolute', iconWrapClasses[size]), children: icon })), _jsxs("div", { className: "relative w-full", children: [_jsx("div", { "data-part": "control", contentEditable: !disabled && !readOnly, ref: inputElRef, className: cn(inputPadding, height, itemRoundedClasses, fontSizes[size], 'w-full appearance-none border-none bg-transparent font-medium shadow-none outline-none', disabled && 'text-cladd-fg-softer', inputClassName), onPaste: onPaste, onFocus: onFocus, onBlur: onBlur, onKeyDown: onKeyDown, onInput: onInput }), !text && placeholder && (_jsx("div", { "data-part": "placeholder", className: cn('pointer-events-none absolute top-0 left-0 h-full w-full text-cladd-fg-softer select-none', fontSizes[size], inputPadding, placeholderClassName), children: placeholder }))] }), suffix] }), infoMessage && valid !== false && !readOnly && (_jsx("div", { "data-part": "info", className: cn(`cladd-color-${color}`, 'pointer-events-none absolute -top-1.5 left-2 z-10 translate-y-1 rounded-cladd-sm bg-cladd-primary px-2 py-1.5 text-cladd-2xs leading-none font-semibold text-cladd-on-primary opacity-0 duration-200 group-has-[[contenteditable]:focus]/cladd-textarea:-translate-y-1/2 group-has-[[contenteditable]:focus]/cladd-textarea:opacity-100'), children: infoMessage })), errorMessage && valid === false && (_jsx("div", { "data-part": "error", className: cn('cladd-color-red pointer-events-none absolute -top-1.5 left-2 z-10 -translate-y-1/2 rounded-cladd-sm bg-cladd-primary px-1 py-0.5 text-cladd-2xs leading-none font-semibold text-cladd-on-primary opacity-100 duration-200'), children: errorMessage }))] }));
|
|
83
74
|
};
|
|
84
75
|
//# sourceMappingURL=Textarea.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/Textarea.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,SAAS,EACT,MAAM,EACN,QAAQ,GAUT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAClC,OAAO,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC3D,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,UAAU,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../src/components/Textarea.tsx"],"names":[],"mappings":"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"}
|