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/esm/index.js
CHANGED
|
@@ -64954,38 +64954,23 @@ const FISInputText = forwardRef((props, ref) => {
|
|
|
64954
64954
|
const { className, typeSuffix, textLabel = "", iconLabel, required, iconPrefix, sizeInput, showCount, message, negative, positive, maxLength = 500, disabled, onChange, onEnter, onKeyDown, onClickIconLabel, onClickSuffix, ...rest } = props;
|
|
64955
64955
|
// Internal ref to access DOM element for character count
|
|
64956
64956
|
const internalRef = React__default.useRef(null);
|
|
64957
|
-
const [internalValue, setInternalValue] = React__default.useState(
|
|
64957
|
+
const [internalValue, setInternalValue] = React__default.useState("");
|
|
64958
64958
|
// State to trigger re-render for character count (React Hook Form compatibility)
|
|
64959
64959
|
const [, forceUpdate] = React__default.useReducer((x) => x + 1, 0);
|
|
64960
|
-
//
|
|
64961
|
-
React__default.useEffect(() => {
|
|
64962
|
-
if (rest.value !== undefined) {
|
|
64963
|
-
setInternalValue(rest.value);
|
|
64964
|
-
}
|
|
64965
|
-
}, [rest.value]);
|
|
64966
|
-
// Get current value for display (controlled vs uncontrolled)
|
|
64960
|
+
// Get current value for display (prioritize DOM for React Hook Form)
|
|
64967
64961
|
const getCurrentValue = () => {
|
|
64968
|
-
|
|
64969
|
-
|
|
64970
|
-
|
|
64971
|
-
|
|
64972
|
-
}
|
|
64973
|
-
// Fallback to controlled value prop
|
|
64974
|
-
if (rest.value !== undefined) {
|
|
64975
|
-
return rest.value;
|
|
64976
|
-
}
|
|
64977
|
-
// Fallback to internal state for uncontrolled mode
|
|
64978
|
-
return internalValue ?? "";
|
|
64962
|
+
return (internalRef.current?.value ??
|
|
64963
|
+
rest.value ??
|
|
64964
|
+
internalValue ??
|
|
64965
|
+
"");
|
|
64979
64966
|
};
|
|
64980
64967
|
const handleChange = React__default.useCallback((event) => {
|
|
64981
|
-
const newValue = event.target.value;
|
|
64982
64968
|
// Update internal state for uncontrolled mode
|
|
64983
64969
|
if (rest.value === undefined) {
|
|
64984
|
-
setInternalValue(
|
|
64970
|
+
setInternalValue(event.target.value);
|
|
64985
64971
|
}
|
|
64986
64972
|
else {
|
|
64987
64973
|
// Force re-render only for controlled mode (React Hook Form case)
|
|
64988
|
-
// This ensures character count updates when value prop doesn't change
|
|
64989
64974
|
forceUpdate();
|
|
64990
64975
|
}
|
|
64991
64976
|
if (onChange) {
|
|
@@ -66038,13 +66023,26 @@ styled.div `
|
|
|
66038
66023
|
const FISInputArea = forwardRef((props, ref) => {
|
|
66039
66024
|
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;
|
|
66040
66025
|
const [internalValue, setInternalValue] = React__default.useState("");
|
|
66026
|
+
// State to trigger re-render for character count (React Hook Form compatibility)
|
|
66027
|
+
const [, forceUpdate] = React__default.useReducer((x) => x + 1, 0);
|
|
66041
66028
|
const inputRef = React__default.useRef(null);
|
|
66029
|
+
// Get current value for display (prioritize DOM for React Hook Form)
|
|
66030
|
+
const getCurrentValue = () => {
|
|
66031
|
+
return (inputRef.current?.value ?? rest.value ?? internalValue ?? "");
|
|
66032
|
+
};
|
|
66042
66033
|
const handleChange = React__default.useCallback((event) => {
|
|
66043
|
-
|
|
66034
|
+
// Update internal state for uncontrolled mode
|
|
66035
|
+
if (rest.value === undefined) {
|
|
66036
|
+
setInternalValue(event.target.value);
|
|
66037
|
+
}
|
|
66038
|
+
else {
|
|
66039
|
+
// Force re-render only for controlled mode (React Hook Form case)
|
|
66040
|
+
forceUpdate();
|
|
66041
|
+
}
|
|
66044
66042
|
if (onChange) {
|
|
66045
66043
|
onChange(event);
|
|
66046
66044
|
}
|
|
66047
|
-
}, [onChange]);
|
|
66045
|
+
}, [onChange, rest.value]);
|
|
66048
66046
|
const handleKeyPress = React__default.useCallback((event) => {
|
|
66049
66047
|
if (!event)
|
|
66050
66048
|
return;
|
|
@@ -66054,28 +66052,6 @@ const FISInputArea = forwardRef((props, ref) => {
|
|
|
66054
66052
|
}
|
|
66055
66053
|
}
|
|
66056
66054
|
}, [onEnter]);
|
|
66057
|
-
useImperativeHandle(ref, () => {
|
|
66058
|
-
const inputElement = inputRef.current;
|
|
66059
|
-
return {
|
|
66060
|
-
...inputElement,
|
|
66061
|
-
focus: () => {
|
|
66062
|
-
if (inputRef.current) {
|
|
66063
|
-
inputRef.current.focus();
|
|
66064
|
-
}
|
|
66065
|
-
},
|
|
66066
|
-
blur: () => {
|
|
66067
|
-
if (inputRef.current) {
|
|
66068
|
-
inputRef.current.blur();
|
|
66069
|
-
}
|
|
66070
|
-
},
|
|
66071
|
-
clear: () => {
|
|
66072
|
-
if (inputRef.current) {
|
|
66073
|
-
inputRef.current.value = "";
|
|
66074
|
-
setInternalValue("");
|
|
66075
|
-
}
|
|
66076
|
-
},
|
|
66077
|
-
};
|
|
66078
|
-
});
|
|
66079
66055
|
const handleResize = (e) => {
|
|
66080
66056
|
e.preventDefault();
|
|
66081
66057
|
e.stopPropagation();
|
|
@@ -66116,7 +66092,7 @@ const FISInputArea = forwardRef((props, ref) => {
|
|
|
66116
66092
|
"input-area-lg": size === "lg",
|
|
66117
66093
|
"input-area-icon": iconSuffix,
|
|
66118
66094
|
negative,
|
|
66119
|
-
}), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: inputRef, disabled: disabled, className: classNames({
|
|
66095
|
+
}), style: { width: fixedWidth ? `${fixedWidth}px` : "auto" }, children: [jsx(TextAreaSC, { ...rest, onChange: handleChange, onKeyDown: handleKeyPress, ref: mergeRefs(ref, inputRef), disabled: disabled, className: classNames({
|
|
66120
66096
|
negative,
|
|
66121
66097
|
"input-area-lg": size === "lg",
|
|
66122
66098
|
"input-area-icon": iconSuffix,
|
|
@@ -66127,8 +66103,8 @@ const FISInputArea = forwardRef((props, ref) => {
|
|
|
66127
66103
|
negative,
|
|
66128
66104
|
positive,
|
|
66129
66105
|
}), children: message ? message : "" }), jsx(DivCountSC, { children: showCount && maxLength > 0 && (jsxs("span", { className: classNames("text-area__count", {
|
|
66130
|
-
negative:
|
|
66131
|
-
}), children: [
|
|
66106
|
+
negative: getCurrentValue()?.length > maxLength,
|
|
66107
|
+
}), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
|
|
66132
66108
|
});
|
|
66133
66109
|
FISInputArea.displayName = "FISInputArea";
|
|
66134
66110
|
|