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/cjs/index.js
CHANGED
|
@@ -64947,7 +64947,12 @@ FISInputLabel.displayName = "FISInputLabel";
|
|
|
64947
64947
|
|
|
64948
64948
|
const FISInputText = React.forwardRef((props, ref) => {
|
|
64949
64949
|
const { className, typeSuffix, textLabel = "", iconLabel, required, iconPrefix, sizeInput, showCount, message, negative, positive, maxLength = 500, disabled, onChange, onEnter, onKeyDown, onClickIconLabel, onClickSuffix, ...rest } = props;
|
|
64950
|
+
// Internal ref to access DOM element when external ref is not provided
|
|
64951
|
+
const internalRef = React.useRef(null);
|
|
64952
|
+
const inputRef = ref || internalRef;
|
|
64950
64953
|
const [internalValue, setInternalValue] = React.useState(rest.value || rest.defaultValue || "");
|
|
64954
|
+
// State to trigger re-render for character count (React Hook Form compatibility)
|
|
64955
|
+
const [, forceUpdate] = React.useReducer((x) => x + 1, 0);
|
|
64951
64956
|
// Sync internal value with controlled value prop
|
|
64952
64957
|
React.useEffect(() => {
|
|
64953
64958
|
if (rest.value !== undefined) {
|
|
@@ -64956,7 +64961,12 @@ const FISInputText = React.forwardRef((props, ref) => {
|
|
|
64956
64961
|
}, [rest.value]);
|
|
64957
64962
|
// Get current value for display (controlled vs uncontrolled)
|
|
64958
64963
|
const getCurrentValue = () => {
|
|
64959
|
-
|
|
64964
|
+
// Controlled mode: use value prop
|
|
64965
|
+
if (rest.value !== undefined) {
|
|
64966
|
+
return rest.value;
|
|
64967
|
+
}
|
|
64968
|
+
// Uncontrolled mode: use internal state, fallback to DOM value for React Hook Form
|
|
64969
|
+
return internalValue ?? inputRef.current?.value ?? "";
|
|
64960
64970
|
};
|
|
64961
64971
|
const handleChange = React.useCallback((event) => {
|
|
64962
64972
|
const newValue = event.target.value;
|
|
@@ -64964,10 +64974,15 @@ const FISInputText = React.forwardRef((props, ref) => {
|
|
|
64964
64974
|
if (rest.value === undefined) {
|
|
64965
64975
|
setInternalValue(newValue);
|
|
64966
64976
|
}
|
|
64977
|
+
else {
|
|
64978
|
+
// Force re-render for character count when using React Hook Form
|
|
64979
|
+
// This ensures character count updates even when value prop doesn't change
|
|
64980
|
+
forceUpdate();
|
|
64981
|
+
}
|
|
64967
64982
|
if (onChange) {
|
|
64968
64983
|
onChange(event);
|
|
64969
64984
|
}
|
|
64970
|
-
}, [onChange, rest.value]);
|
|
64985
|
+
}, [onChange, rest.value, forceUpdate]);
|
|
64971
64986
|
const handleKeyPress = React.useCallback((event) => {
|
|
64972
64987
|
if (!event)
|
|
64973
64988
|
return;
|
|
@@ -64977,7 +64992,7 @@ const FISInputText = React.forwardRef((props, ref) => {
|
|
|
64977
64992
|
}
|
|
64978
64993
|
}
|
|
64979
64994
|
}, [onEnter]);
|
|
64980
|
-
return (jsxRuntime.jsxs(DivContainerSC$6, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.jsx(FISInputField, { ...rest, ref:
|
|
64995
|
+
return (jsxRuntime.jsxs(DivContainerSC$6, { className: className, children: [(textLabel || iconLabel) && (jsxRuntime.jsx(FISInputLabel, { textLabel: textLabel, required: required, iconLabel: iconLabel, onClickIconLabel: onClickIconLabel })), jsxRuntime.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) && (jsxRuntime.jsxs(DivHintWrapperSC$1, { children: [jsxRuntime.jsx(SpanHintSC$3, { className: classNames({
|
|
64981
64996
|
disabled: disabled,
|
|
64982
64997
|
negative: negative,
|
|
64983
64998
|
positive: positive,
|