fis-component 0.0.87 → 0.0.88
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/cjs/index.js +25 -49
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +25 -49
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/cjs/index.js
CHANGED
|
@@ -64974,38 +64974,23 @@ const FISInputText = React.forwardRef((props, ref) => {
|
|
|
64974
64974
|
const { className, typeSuffix, textLabel = "", iconLabel, required, iconPrefix, sizeInput, showCount, message, negative, positive, maxLength = 500, disabled, onChange, onEnter, onKeyDown, onClickIconLabel, onClickSuffix, ...rest } = props;
|
|
64975
64975
|
// Internal ref to access DOM element for character count
|
|
64976
64976
|
const internalRef = React.useRef(null);
|
|
64977
|
-
const [internalValue, setInternalValue] = React.useState(
|
|
64977
|
+
const [internalValue, setInternalValue] = React.useState("");
|
|
64978
64978
|
// State to trigger re-render for character count (React Hook Form compatibility)
|
|
64979
64979
|
const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
|
|
64980
|
-
//
|
|
64981
|
-
React.useEffect(() => {
|
|
64982
|
-
if (rest.value !== undefined) {
|
|
64983
|
-
setInternalValue(rest.value);
|
|
64984
|
-
}
|
|
64985
|
-
}, [rest.value]);
|
|
64986
|
-
// Get current value for display (controlled vs uncontrolled)
|
|
64980
|
+
// Get current value for display (prioritize DOM for React Hook Form)
|
|
64987
64981
|
const getCurrentValue = () => {
|
|
64988
|
-
|
|
64989
|
-
|
|
64990
|
-
|
|
64991
|
-
|
|
64992
|
-
}
|
|
64993
|
-
// Fallback to controlled value prop
|
|
64994
|
-
if (rest.value !== undefined) {
|
|
64995
|
-
return rest.value;
|
|
64996
|
-
}
|
|
64997
|
-
// Fallback to internal state for uncontrolled mode
|
|
64998
|
-
return internalValue ?? "";
|
|
64982
|
+
return (internalRef.current?.value ??
|
|
64983
|
+
rest.value ??
|
|
64984
|
+
internalValue ??
|
|
64985
|
+
"");
|
|
64999
64986
|
};
|
|
65000
64987
|
const handleChange = React.useCallback((event) => {
|
|
65001
|
-
const newValue = event.target.value;
|
|
65002
64988
|
// Update internal state for uncontrolled mode
|
|
65003
64989
|
if (rest.value === undefined) {
|
|
65004
|
-
setInternalValue(
|
|
64990
|
+
setInternalValue(event.target.value);
|
|
65005
64991
|
}
|
|
65006
64992
|
else {
|
|
65007
64993
|
// Force re-render only for controlled mode (React Hook Form case)
|
|
65008
|
-
// This ensures character count updates when value prop doesn't change
|
|
65009
64994
|
forceUpdate();
|
|
65010
64995
|
}
|
|
65011
64996
|
if (onChange) {
|
|
@@ -66058,13 +66043,26 @@ styled.div `
|
|
|
66058
66043
|
const FISInputArea = React.forwardRef((props, ref) => {
|
|
66059
66044
|
const { className, required = false, textLabel = "", iconLabel, iconSuffix, disabled = false, readOnly = false, negative, message, positive, maxLength = 50, showCount, size = "md", fixedWidth, onClickIconLabel, onClickIconSuffix, onChange, onEnter, ...rest } = props;
|
|
66060
66045
|
const [internalValue, setInternalValue] = React.useState("");
|
|
66046
|
+
// State to trigger re-render for character count (React Hook Form compatibility)
|
|
66047
|
+
const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
|
|
66061
66048
|
const inputRef = React.useRef(null);
|
|
66049
|
+
// Get current value for display (prioritize DOM for React Hook Form)
|
|
66050
|
+
const getCurrentValue = () => {
|
|
66051
|
+
return (inputRef.current?.value ?? rest.value ?? internalValue ?? "");
|
|
66052
|
+
};
|
|
66062
66053
|
const handleChange = React.useCallback((event) => {
|
|
66063
|
-
|
|
66054
|
+
// Update internal state for uncontrolled mode
|
|
66055
|
+
if (rest.value === undefined) {
|
|
66056
|
+
setInternalValue(event.target.value);
|
|
66057
|
+
}
|
|
66058
|
+
else {
|
|
66059
|
+
// Force re-render only for controlled mode (React Hook Form case)
|
|
66060
|
+
forceUpdate();
|
|
66061
|
+
}
|
|
66064
66062
|
if (onChange) {
|
|
66065
66063
|
onChange(event);
|
|
66066
66064
|
}
|
|
66067
|
-
}, [onChange]);
|
|
66065
|
+
}, [onChange, rest.value]);
|
|
66068
66066
|
const handleKeyPress = React.useCallback((event) => {
|
|
66069
66067
|
if (!event)
|
|
66070
66068
|
return;
|
|
@@ -66074,28 +66072,6 @@ const FISInputArea = React.forwardRef((props, ref) => {
|
|
|
66074
66072
|
}
|
|
66075
66073
|
}
|
|
66076
66074
|
}, [onEnter]);
|
|
66077
|
-
React.useImperativeHandle(ref, () => {
|
|
66078
|
-
const inputElement = inputRef.current;
|
|
66079
|
-
return {
|
|
66080
|
-
...inputElement,
|
|
66081
|
-
focus: () => {
|
|
66082
|
-
if (inputRef.current) {
|
|
66083
|
-
inputRef.current.focus();
|
|
66084
|
-
}
|
|
66085
|
-
},
|
|
66086
|
-
blur: () => {
|
|
66087
|
-
if (inputRef.current) {
|
|
66088
|
-
inputRef.current.blur();
|
|
66089
|
-
}
|
|
66090
|
-
},
|
|
66091
|
-
clear: () => {
|
|
66092
|
-
if (inputRef.current) {
|
|
66093
|
-
inputRef.current.value = "";
|
|
66094
|
-
setInternalValue("");
|
|
66095
|
-
}
|
|
66096
|
-
},
|
|
66097
|
-
};
|
|
66098
|
-
});
|
|
66099
66075
|
const handleResize = (e) => {
|
|
66100
66076
|
e.preventDefault();
|
|
66101
66077
|
e.stopPropagation();
|
|
@@ -66136,7 +66112,7 @@ const FISInputArea = React.forwardRef((props, ref) => {
|
|
|
66136
66112
|
"input-area-lg": size === "lg",
|
|
66137
66113
|
"input-area-icon": iconSuffix,
|
|
66138
66114
|
negative,
|
|
66139
|
-
}), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: inputRef, disabled: disabled, className: classNames({
|
|
66115
|
+
}), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsxRuntime.jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: mergeRefs(ref, inputRef), disabled: disabled, className: classNames({
|
|
66140
66116
|
negative,
|
|
66141
66117
|
"input-area-lg": size === "lg",
|
|
66142
66118
|
"input-area-icon": iconSuffix,
|
|
@@ -66147,8 +66123,8 @@ const FISInputArea = React.forwardRef((props, ref) => {
|
|
|
66147
66123
|
negative,
|
|
66148
66124
|
positive,
|
|
66149
66125
|
}), children: message ? message : "" }), jsxRuntime.jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxRuntime.jsxs("span", { className: classNames("text-area__count", {
|
|
66150
|
-
negative:
|
|
66151
|
-
}), children: [
|
|
66126
|
+
negative: getCurrentValue()?.length > maxLength,
|
|
66127
|
+
}), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
|
|
66152
66128
|
});
|
|
66153
66129
|
FISInputArea.displayName = "FISInputArea";
|
|
66154
66130
|
|