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 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(rest.value || rest.defaultValue || "");
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
- // Sync internal value with controlled value prop
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
- // Always prioritize DOM value for React Hook Form compatibility
64989
- const domValue = internalRef.current?.value;
64990
- if (domValue !== undefined) {
64991
- return domValue;
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(newValue);
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
- setInternalValue(event.target.value);
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: internalValue.length > maxLength,
66151
- }), children: [internalValue?.replaceAll("\n", "")?.length, "/", maxLength] })) })] })] }));
66126
+ negative: getCurrentValue()?.length > maxLength,
66127
+ }), children: [getCurrentValue()?.length, "/", maxLength] })) })] })] }));
66152
66128
  });
66153
66129
  FISInputArea.displayName = "FISInputArea";
66154
66130