fis-component 0.0.85 → 0.0.86
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 +18 -3
- package/dist/cjs/index.js.map +1 -1
- package/dist/esm/index.js +18 -3
- package/dist/esm/index.js.map +1 -1
- package/package.json +1 -1
package/dist/esm/index.js
CHANGED
|
@@ -64927,7 +64927,12 @@ FISInputLabel.displayName = "FISInputLabel";
|
|
|
64927
64927
|
|
|
64928
64928
|
const FISInputText = forwardRef((props, ref) => {
|
|
64929
64929
|
const { className, typeSuffix, textLabel = "", iconLabel, required, iconPrefix, sizeInput, showCount, message, negative, positive, maxLength = 500, disabled, onChange, onEnter, onKeyDown, onClickIconLabel, onClickSuffix, ...rest } = props;
|
|
64930
|
+
// Internal ref to access DOM element when external ref is not provided
|
|
64931
|
+
const internalRef = React__default.useRef(null);
|
|
64932
|
+
const inputRef = ref || internalRef;
|
|
64930
64933
|
const [internalValue, setInternalValue] = React__default.useState(rest.value || rest.defaultValue || "");
|
|
64934
|
+
// State to trigger re-render for character count (React Hook Form compatibility)
|
|
64935
|
+
const [, forceUpdate] = React__default.useReducer((x) => x + 1, 0);
|
|
64931
64936
|
// Sync internal value with controlled value prop
|
|
64932
64937
|
React__default.useEffect(() => {
|
|
64933
64938
|
if (rest.value !== undefined) {
|
|
@@ -64936,7 +64941,12 @@ const FISInputText = forwardRef((props, ref) => {
|
|
|
64936
64941
|
}, [rest.value]);
|
|
64937
64942
|
// Get current value for display (controlled vs uncontrolled)
|
|
64938
64943
|
const getCurrentValue = () => {
|
|
64939
|
-
|
|
64944
|
+
// Controlled mode: use value prop
|
|
64945
|
+
if (rest.value !== undefined) {
|
|
64946
|
+
return rest.value;
|
|
64947
|
+
}
|
|
64948
|
+
// Uncontrolled mode: use internal state, fallback to DOM value for React Hook Form
|
|
64949
|
+
return internalValue ?? inputRef.current?.value ?? "";
|
|
64940
64950
|
};
|
|
64941
64951
|
const handleChange = React__default.useCallback((event) => {
|
|
64942
64952
|
const newValue = event.target.value;
|
|
@@ -64944,10 +64954,15 @@ const FISInputText = forwardRef((props, ref) => {
|
|
|
64944
64954
|
if (rest.value === undefined) {
|
|
64945
64955
|
setInternalValue(newValue);
|
|
64946
64956
|
}
|
|
64957
|
+
else {
|
|
64958
|
+
// Force re-render for character count when using React Hook Form
|
|
64959
|
+
// This ensures character count updates even when value prop doesn't change
|
|
64960
|
+
forceUpdate();
|
|
64961
|
+
}
|
|
64947
64962
|
if (onChange) {
|
|
64948
64963
|
onChange(event);
|
|
64949
64964
|
}
|
|
64950
|
-
}, [onChange, rest.value]);
|
|
64965
|
+
}, [onChange, rest.value, forceUpdate]);
|
|
64951
64966
|
const handleKeyPress = React__default.useCallback((event) => {
|
|
64952
64967
|
if (!event)
|
|
64953
64968
|
return;
|
|
@@ -64957,7 +64972,7 @@ const FISInputText = forwardRef((props, ref) => {
|
|
|
64957
64972
|
}
|
|
64958
64973
|
}
|
|
64959
64974
|
}, [onEnter]);
|
|
64960
|
-
return (jsxs(DivContainerSC$6, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(FISInputField, { ...rest, ref:
|
|
64975
|
+
return (jsxs(DivContainerSC$6, { className: className, children: [(textLabel || iconLabel) && (jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsx(FISInputField, { ...rest, ref: inputRef, typeSuffix: typeSuffix, sizeInput: sizeInput, iconPrefix: iconPrefix, onKeyPress: handleKeyPress, onChange: handleChange, disabled: disabled, negative: negative, maxLength: maxLength, onClickSuffix: onClickSuffix }), (message || showCount) && (jsxs(DivHintWrapperSC$1, { children: [jsx(SpanHintSC$3, { className: classNames({
|
|
64961
64976
|
disabled: disabled,
|
|
64962
64977
|
negative: negative,
|
|
64963
64978
|
positive: positive,
|