@lanaco/lnc-react-ui 3.11.31 → 3.11.33

package/lib/index.esm.js

@@ -2,7 +2,7 @@ import _extends$4 from '@babel/runtime/helpers/extends';
 import _objectWithoutProperties$1 from '@babel/runtime/helpers/objectWithoutProperties';
 import _taggedTemplateLiteral from '@babel/runtime/helpers/taggedTemplateLiteral';
 import * as React from 'react';
-import React__default, { useLayoutEffect, forwardRef, useContext, createElement, createContext, Fragment, useRef, useEffect, useState, useMemo, useCallback, Component, useImperativeHandle, memo, useReducer, cloneElement, useDebugValue, Children, isValidElement } from 'react';
+import React__default, { useLayoutEffect, forwardRef, useContext, createElement, createContext, Fragment, useRef, useEffect as useEffect$1, useState, useMemo, useCallback, Component, useImperativeHandle, memo, useReducer, cloneElement, useDebugValue, Children, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import _extends$3 from '@babel/runtime/helpers/esm/extends';
 import _slicedToArray$2 from '@babel/runtime/helpers/slicedToArray';
@@ -2966,7 +2966,7 @@ function useFirstMountState() {
 
 var useUpdateEffect = function (effect, deps) {
     var isFirstMount = useFirstMountState();
-    useEffect(function () {
+    useEffect$1(function () {
         if (!isFirstMount) {
             return effect();
         }
@@ -3096,11 +3096,11 @@ function __spreadArray(to, from, pack) {
 var noop$7 = function () { };
 var isBrowser$1 = typeof window !== 'undefined';
 
-var useIsomorphicLayoutEffect$3 = isBrowser$1 ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect$3 = isBrowser$1 ? useLayoutEffect : useEffect$1;
 var useIsomorphicLayoutEffect$4 = useIsomorphicLayoutEffect$3;
 
 var useEffectOnce = function (effect) {
-    useEffect(effect, []);
+    useEffect$1(effect, []);
 };
 var useEffectOnce$1 = useEffectOnce;
 
@@ -3120,7 +3120,7 @@ var getInitialState$1 = function (query, defaultState) {
 };
 var useMedia = function (query, defaultState) {
     var _a = useState(getInitialState$1(query, defaultState)), state = _a[0], setState = _a[1];
-    useEffect(function () {
+    useEffect$1(function () {
         var mounted = true;
         var mql = window.matchMedia(query);
         var onChange = function () {
@@ -43298,7 +43298,7 @@ var StyledInput$2 = newStyled.input(_templateObject4$a || (_templateObject4$a =
   return getDisabledStateCss(props.theme);
 });
 
-var _excluded$1e = ["disabled", "readOnly", "debounceTime", "type", "placeholder", "tabIndex", "prefix", "suffix", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$1e = ["disabled", "readOnly", "defaultValue", "value", "debounceTime", "type", "placeholder", "tabIndex", "prefix", "suffix", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
@@ -43306,6 +43306,8 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   //
   var disabled = props.disabled,
     readOnly = props.readOnly,
+    defaultValue = props.defaultValue,
+    value = props.value,
     _props$debounceTime = props.debounceTime,
     debounceTime = _props$debounceTime === void 0 ? 180 : _props$debounceTime,
     _props$type = props.type,
@@ -43327,14 +43329,19 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties$1(props, _excluded$1e);
   var theme = useTheme$1();
-  // const [inputValue, setInputValue] = useState(value);
-  var _useState = useState(false),
+  var _useState = useState(value || defaultValue || ""),
     _useState2 = _slicedToArray$2(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-
-  // useUpdateEffect(() => setInputValue(value), [value]);
-
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray$2(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  useEffect$1(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   var debouncedOnChange = useCallback(lodash.exports.debounce(function (e, val) {
     return handleChange(e, val);
   }, debounceTime), [onChange]);
@@ -43342,11 +43349,11 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
-    // if (value || value === "") setInputValue(e.target.value);
+    // if (value || value === "") 
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var handleFocus = function handleFocus(e) {
-    console.log("focus", e);
     setFocused(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   };
@@ -43383,8 +43390,8 @@ var TextInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: onValueChange,
-    tabIndex: tabIndex
-    // value={inputValue}
+    tabIndex: tabIndex,
+    value: inputValue
   }, rest)), suffix && /*#__PURE__*/React__default.createElement(StyledSuffix$3, {
     theme: theme,
     color: color,
@@ -45375,7 +45382,7 @@ var StyledInput$1 = newStyled.input(_templateObject4$8 || (_templateObject4$8 =
   return getDisabledStateCss(props.theme);
 });
 
-var _excluded$1a = ["disabled", "readOnly", "debounceTime", "step", "min", "max", "prefix", "suffix", "placeholder", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$1a = ["disabled", "readOnly", "debounceTime", "step", "min", "max", "prefix", "suffix", "placeholder", "value", "defaultValue", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
@@ -45394,6 +45401,8 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     prefix = props.prefix,
     suffix = props.suffix,
     placeholder = props.placeholder,
+    value = props.value,
+    defaultValue = props.defaultValue,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
@@ -45407,10 +45416,19 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties$1(props, _excluded$1a);
   var theme = useTheme$1();
-  var _useState = useState(false),
+  var _useState = useState(value || defaultValue || ""),
     _useState2 = _slicedToArray$2(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray$2(_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   var debouncedOnChange = useCallback(lodash.exports.debounce(function (e, val) {
     return handleChange(e, val);
   }, debounceTime), [onChange]);
@@ -45418,6 +45436,7 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var handleFocus = function handleFocus(e) {
@@ -45455,9 +45474,8 @@ var NumberInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     readOnly: readOnly,
     step: step,
     min: min,
-    max: max
-    // value={inputValue}
-    ,
+    max: max,
+    value: inputValue,
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: onValueChange
@@ -45582,7 +45600,7 @@ var StyledInput = newStyled.input(_templateObject5$4 || (_templateObject5$4 = _t
   return getDisabledStateCss(props.theme);
 });
 
-var _excluded$19 = ["wrapperRef", "disabled", "readOnly", "debounceTime", "placeholder", "prefix", "suffix", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$19 = ["wrapperRef", "disabled", "readOnly", "debounceTime", "placeholder", "prefix", "suffix", "value", "defaultValue", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
@@ -45595,6 +45613,8 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     placeholder = props.placeholder,
     prefix = props.prefix,
     suffix = props.suffix,
+    value = props.value,
+    defaultValue = props.defaultValue,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
@@ -45609,21 +45629,30 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     rest = _objectWithoutProperties$1(props, _excluded$19);
   var inputRef = useRef();
   var theme = useTheme$1();
-  var _useState = useState(true),
+  var _useState = useState(value || defaultValue || ""),
     _useState2 = _slicedToArray$2(_useState, 2),
-    locked = _useState2[0],
-    setLocked = _useState2[1];
-  var _useState3 = useState(false),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  useEffect$1(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
+  var _useState3 = useState(true),
     _useState4 = _slicedToArray$2(_useState3, 2),
-    focused = _useState4[0],
-    setFocused = _useState4[1];
-  useEffect(function () {
+    locked = _useState4[0],
+    setLocked = _useState4[1];
+  var _useState5 = useState(false),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    focused = _useState6[0],
+    setFocused = _useState6[1];
+  useEffect$1(function () {
     var _inputRef$current;
     var inputValue = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || "";
     inputRef.current.selectionStart = inputValue !== null && inputValue !== void 0 && inputValue.length ? inputValue.length : 0;
     inputRef.current.selectionEnd = inputValue !== null && inputValue !== void 0 && inputValue.length ? inputValue.length : 0;
   }, [locked]);
-  useEffect(function () {
+  useEffect$1(function () {
     if (ref !== null && ref !== undefined) ref.current = inputRef.current;
   }, [ref, inputRef]);
   var debouncedOnChange = useCallback(lodash.exports.debounce(function (e, val) {
@@ -45633,6 +45662,7 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var toggleLocked = function toggleLocked() {
@@ -45676,7 +45706,8 @@ var PasswordInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     focused: focused,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    onChange: onValueChange
+    onChange: onValueChange,
+    value: inputValue
   }, rest)), /*#__PURE__*/React__default.createElement(StyledLockIcon, {
     theme: theme,
     color: color,
@@ -46044,10 +46075,10 @@ var RangeSliderInput = /*#__PURE__*/React__default.forwardRef(function (props, r
   useUpdateEffect$1(function () {
     setInputValue(value);
   }, [value]);
-  useEffect(function () {
+  useEffect$1(function () {
     changeSliderColor(inputValue ? inputValue : 0);
   }, [inputValue, getPercent, disabled, color]);
-  useEffect(function () {
+  useEffect$1(function () {
     setValueColor(getColorRgbaValue(theme, "Range", color, disabled ? "disabled" : "enabled", "background"));
   }, [color, disabled]);
   var handleOnInput = function handleOnInput(e) {
@@ -46405,13 +46436,15 @@ var index$2 = /* #__PURE__ */forwardRef(TextareaAutosize);
 
 var ReactTextareaAutosize = index$2;
 
-var _excluded$15 = ["disabled", "readOnly", "debounceTime", "type", "collapseOnBlur", "minRows", "maxRows", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$15 = ["disabled", "readOnly", "value", "defaultValue", "debounceTime", "type", "collapseOnBlur", "minRows", "maxRows", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
 var TextAreaInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var disabled = props.disabled,
     readOnly = props.readOnly,
+    value = props.value,
+    defaultValue = props.defaultValue,
     _props$debounceTime = props.debounceTime,
     debounceTime = _props$debounceTime === void 0 ? 180 : _props$debounceTime;
     props.type;
@@ -46432,24 +46465,33 @@ var TextAreaInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     _props$color = props.color,
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties$1(props, _excluded$15);
-  var theme = useTheme$1();
-  var _useState = useState(false),
+  var _useState = useState(value || defaultValue || ""),
     _useState2 = _slicedToArray$2(_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-  var _useState3 = useState(minRows),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var theme = useTheme$1();
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray$2(_useState3, 2),
-    innerMinRows = _useState4[0],
-    setInnerMinRows = _useState4[1];
-  var _useState5 = useState(collapseOnBlur ? minRows : maxRows),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useState5 = useState(minRows),
     _useState6 = _slicedToArray$2(_useState5, 2),
-    innerMaxRows = _useState6[0],
-    setInnerMaxRows = _useState6[1];
-  useEffect(function () {
+    innerMinRows = _useState6[0],
+    setInnerMinRows = _useState6[1];
+  var _useState7 = useState(collapseOnBlur ? minRows : maxRows),
+    _useState8 = _slicedToArray$2(_useState7, 2),
+    innerMaxRows = _useState8[0],
+    setInnerMaxRows = _useState8[1];
+  useEffect$1(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
+  useEffect$1(function () {
     setInnerMinRows(minRows);
     if (collapseOnBlur && focused === false) setInnerMaxRows(minRows);
   }, [minRows, maxRows]);
-  useEffect(function () {
+  useEffect$1(function () {
     if (!collapseOnBlur) setInnerMaxRows(maxRows);else setInnerMaxRows(focused === true ? maxRows : minRows);
   }, [collapseOnBlur]);
   var debouncedOnChange = useCallback(lodash.exports.debounce(function (e, val) {
@@ -46459,6 +46501,7 @@ var TextAreaInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var handleFocus = function handleFocus(e) {
@@ -46487,9 +46530,8 @@ var TextAreaInput = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     collapseOnBlur: collapseOnBlur
   }, /*#__PURE__*/React__default.createElement(ReactTextareaAutosize, _extends$4({
     ref: ref,
-    disabled: disabled
-    // value={inputValue}
-    ,
+    disabled: disabled,
+    value: inputValue,
     readOnly: readOnly,
     minRows: innerMinRows,
     maxRows: innerMaxRows,
@@ -46559,7 +46601,7 @@ TextAreaInput.propTypes = {
   color: PropTypes.oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray"])
 };
 
-var _excluded$14 = ["disabled", "readOnly", "debounceTime", "onChange", "className", "style", "size", "color"];
+var _excluded$14 = ["disabled", "readOnly", "defaultValue", "value", "debounceTime", "onChange", "className", "style", "size", "color"];
 var _templateObject$1d;
 var standardCssFields$1 = function standardCssFields(_ref) {
   var theme = _ref.theme,
@@ -46591,6 +46633,8 @@ var SyledInput = newStyled.input(_templateObject$1d || (_templateObject$1d = _ta
 var TimeInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
   var disabled = props.disabled,
     readOnly = props.readOnly,
+    defaultValue = props.defaultValue,
+    value = props.value,
     _props$debounceTime = props.debounceTime,
     debounceTime = _props$debounceTime === void 0 ? 180 : _props$debounceTime,
     onChange = props.onChange,
@@ -46604,6 +46648,15 @@ var TimeInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties$1(props, _excluded$14);
   var theme = useTheme$1();
+  var _useState = useState(value || defaultValue || ""),
+    _useState2 = _slicedToArray$2(_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   var debouncedOnChange = useCallback(lodash.exports.debounce(function (e, val) {
     return handleChange(e, val);
   }, debounceTime), [onChange]);
@@ -46611,6 +46664,7 @@ var TimeInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SyledInput, _extends$4({
@@ -46623,7 +46677,8 @@ var TimeInput = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     color: color,
     size: size,
     className: className,
-    style: style
+    style: style,
+    value: inputValue
   }, rest)));
 });
 
@@ -47170,14 +47225,14 @@ var FlexGridItem = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     setColumnGap = _useState6[1];
 
   //============================================= LIFECYCLE ============================================
-  useEffect(function () {
+  useEffect$1(function () {
     calculateWidth();
   }, [columns, XS, S, M, L, XL, col]);
-  useEffect(function () {
+  useEffect$1(function () {
     calculateWidth();
     adjustSpacing();
   }, [screenSize]);
-  useEffect(function () {
+  useEffect$1(function () {
     adjustSpacing();
   }, [spacing, rowSpacing, columnSpacing]);
 
@@ -49080,17 +49135,17 @@ var Table = /*#__PURE__*/forwardRef(function (props, ref) {
   var screenSize = useScreenSize();
 
   // Missing RowIdentifier console error
-  useEffect(function () {
+  useEffect$1(function () {
     if (EnableSelection === true && (RowIdentifier === null || RowIdentifier === "")) console.error("Error: Selection is enabled but the 'RowIdentifier' is empty");
   }, []);
 
   // Missing Columns definition
-  useEffect(function () {
+  useEffect$1(function () {
     if (Columns === null || Columns === undefined || Columns.length === 0) console.error("Error: Columns array must have at least one item.");
   }, [Columns]);
 
   // VisibilityPattern errors
-  useEffect(function () {
+  useEffect$1(function () {
     if (VisibilityPattern) {
       if (!VisibilityPattern.hasOwnProperty(screenSizes.XS.type)) console.error(getVisibilityPatternError(screenSizes.XS.type));
       if (!VisibilityPattern.hasOwnProperty(screenSizes.S.type)) console.error(getVisibilityPatternError(screenSizes.S.type));
@@ -51680,7 +51735,7 @@ function useScrollCapture(_ref) {
     el.removeEventListener('touchstart', onTouchStart, false);
     el.removeEventListener('touchmove', onTouchMove, false);
   }, [onTouchMove, onTouchStart, onWheel]);
-  useEffect(function () {
+  useEffect$1(function () {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     startListening(element);
@@ -51805,7 +51860,7 @@ function useScrollLock(_ref) {
       }
     }
   }, [accountForScrollbars]);
-  useEffect(function () {
+  useEffect$1(function () {
     if (!isEnabled) return;
     var element = scrollTarget.current;
     addScrollLock(element);
@@ -54024,13 +54079,13 @@ var EditableTableCell = function EditableTableCell(props) {
     color: color,
     theme: theme
   };
-  useEffect(function () {
+  useEffect$1(function () {
     onMount(RowIndex, Index, divRef);
   }, []);
-  useEffect(function () {
+  useEffect$1(function () {
     if (!focused) onMount(RowIndex, Index, divRef);
   }, [focused]);
-  useEffect(function () {
+  useEffect$1(function () {
     if (focused && inputRef && inputRef.current) {
       inputRef.current.focus();
     }
@@ -54609,7 +54664,7 @@ var RadioGroup = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     checkedId = _useState2[0],
     setCheckedId = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     if (value !== checkedId) setCheckedId(value);
   }, [value]);
   var themeProps = {
@@ -55141,7 +55196,7 @@ function getOwnerDocument(target) {
  * @param callback {function} Callback function that is invoked when the dependencies of the hook change
  */
 
-const useIsomorphicLayoutEffect$1 = canUseDOM ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$1 = canUseDOM ? useLayoutEffect : useEffect$1;
 
 function useEvent$1(handler) {
   const handlerRef = useRef(handler);
@@ -55211,7 +55266,7 @@ function useNodeRef(onChange) {
 
 function usePrevious(value) {
   const ref = useRef();
-  useEffect(() => {
+  useEffect$1(() => {
     ref.current = value;
   }, [value]);
   return ref.current;
@@ -55437,7 +55492,7 @@ const DndMonitorContext = /*#__PURE__*/createContext(null);
 
 function useDndMonitor(listener) {
   const registerListener = useContext(DndMonitorContext);
-  useEffect(() => {
+  useEffect$1(() => {
     if (!registerListener) {
       throw new Error('useDndMonitor must be used within a children of <DndContext>');
     }
@@ -55526,7 +55581,7 @@ function Accessibility(_ref) {
   } = useAnnouncement();
   const liveRegionId = useUniqueId$1("DndLiveRegion");
   const [mounted, setMounted] = useState(false);
-  useEffect(() => {
+  useEffect$1(() => {
     setMounted(true);
   }, []);
   useDndMonitor(useMemo(() => ({
@@ -57206,7 +57261,7 @@ function useAutoScroller(_ref) {
     scrollContainer.scrollBy(scrollLeft, scrollTop);
   }, []);
   const sortedScrollableAncestors = useMemo(() => order === TraversalOrder.TreeOrder ? [...scrollableAncestors].reverse() : scrollableAncestors, [order, scrollableAncestors]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (!enabled || !scrollableAncestors.length || !rect) {
       clearAutoScrollInterval();
       return;
@@ -57413,10 +57468,10 @@ function useDroppableMeasuring(containers, _ref) {
 
     return previousValue;
   }, [containers, queue, dragging, disabled, measure]);
-  useEffect(() => {
+  useEffect$1(() => {
     containersRef.current = containers;
   }, [containers]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (disabled) {
       return;
     }
@@ -57424,13 +57479,13 @@ function useDroppableMeasuring(containers, _ref) {
     measureDroppableContainers();
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [dragging, disabled]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (queue && queue.length > 0) {
       setQueue(null);
     }
   }, //eslint-disable-next-line react-hooks/exhaustive-deps
   [JSON.stringify(queue)]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (disabled || typeof frequency !== 'number' || timeoutId.current !== null) {
       return;
     }
@@ -57500,7 +57555,7 @@ function useMutationObserver(_ref) {
     } = window;
     return new MutationObserver(handleMutations);
   }, [handleMutations, disabled]);
-  useEffect(() => {
+  useEffect$1(() => {
     return () => mutationObserver == null ? void 0 : mutationObserver.disconnect();
   }, [mutationObserver]);
   return mutationObserver;
@@ -57528,7 +57583,7 @@ function useResizeObserver(_ref) {
     return new ResizeObserver(handleResize);
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [disabled]);
-  useEffect(() => {
+  useEffect$1(() => {
     return () => resizeObserver == null ? void 0 : resizeObserver.disconnect();
   }, [resizeObserver]);
   return resizeObserver;
@@ -57625,7 +57680,7 @@ function useScrollableAncestors(node) {
 
     return getScrollableAncestors(node);
   }, [node]);
-  useEffect(() => {
+  useEffect$1(() => {
     previousNode.current = node;
   }, [node]);
   return ancestors;
@@ -57651,7 +57706,7 @@ function useScrollOffsets(elements) {
       return new Map(scrollCoordinates);
     });
   }, []);
-  useEffect(() => {
+  useEffect$1(() => {
     const previousElements = prevElements.current;
 
     if (elements !== previousElements) {
@@ -57699,11 +57754,11 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
   }
 
   const initialScrollOffsets = useRef(null);
-  useEffect(() => {
+  useEffect$1(() => {
     initialScrollOffsets.current = null;
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   dependencies);
-  useEffect(() => {
+  useEffect$1(() => {
     const hasScrollOffsets = scrollOffsets !== defaultCoordinates;
 
     if (hasScrollOffsets && !initialScrollOffsets.current) {
@@ -57718,7 +57773,7 @@ function useScrollOffsetsDelta(scrollOffsets, dependencies) {
 }
 
 function useSensorSetup(sensors) {
-  useEffect(() => {
+  useEffect$1(() => {
     if (!canUseDOM) {
       return;
     }
@@ -58089,7 +58144,7 @@ function RestoreFocus(_ref) {
   const previousActivatorEvent = usePrevious(activatorEvent);
   const previousActiveId = usePrevious(active == null ? void 0 : active.id); // Restore keyboard focus on the activator node
 
-  useEffect(() => {
+  useEffect$1(() => {
     if (disabled) {
       return;
     }
@@ -58553,7 +58608,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
       setStatus(Status.Initialized);
     }
   }, [activeNodeRect, status]);
-  useEffect(() => {
+  useEffect$1(() => {
     const {
       onDragMove
     } = latestProps.current;
@@ -58587,7 +58642,7 @@ const DndContext = /*#__PURE__*/memo(function DndContext(_ref) {
     });
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [scrollAdjustedTranslate.x, scrollAdjustedTranslate.y]);
-  useEffect(() => {
+  useEffect$1(() => {
     const {
       active,
       activatorEvent,
@@ -58872,7 +58927,7 @@ function useDroppable(_ref) {
   }, [resizeObserver]);
   const [nodeRef, setNodeRef] = useNodeRef(handleNodeChange);
   const dataRef = useLatestValue(data);
-  useEffect(() => {
+  useEffect$1(() => {
     if (!resizeObserver || !nodeRef.current) {
       return;
     }
@@ -58900,7 +58955,7 @@ function useDroppable(_ref) {
     });
   }, // eslint-disable-next-line react-hooks/exhaustive-deps
   [id]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (disabled !== previous.current.disabled) {
       dispatch({
         type: Action$1.SetDroppableDisabled,
@@ -59585,7 +59640,7 @@ function SortableContext(_ref) {
       measureDroppableContainers(items);
     }
   }, [itemsHaveChanged, items, isDragging, measureDroppableContainers]);
-  useEffect(() => {
+  useEffect$1(() => {
     previousItemsRef.current = items;
   }, [items]);
   const contextValue = useMemo(() => ({
@@ -59694,7 +59749,7 @@ function useDerivedTransform(_ref) {
       previousIndex.current = index;
     }
   }, [disabled, index, node, rect]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (derivedTransform) {
       setDerivedtransform(null);
     }
@@ -59816,7 +59871,7 @@ function useSortable(_ref) {
     node,
     rect
   });
-  useEffect(() => {
+  useEffect$1(() => {
     if (isSorting && previous.current.newIndex !== newIndex) {
       previous.current.newIndex = newIndex;
     }
@@ -59829,7 +59884,7 @@ function useSortable(_ref) {
       previous.current.items = items;
     }
   }, [isSorting, newIndex, containerId, items]);
-  useEffect(() => {
+  useEffect$1(() => {
     if (activeId === previous.current.activeId) {
       return;
     }
@@ -60048,7 +60103,7 @@ var Item$2 = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwa
     children = _ref.children,
     props = _objectWithoutProperties$1(_ref, _excluded$Q);
   var theme = useTheme$1();
-  useEffect(function () {
+  useEffect$1(function () {
     if (!dragOverlay) {
       return;
     }
@@ -61180,7 +61235,7 @@ var ThemeProvider = function ThemeProvider(_ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     currentTheme = _useState2[0],
     setCurrentTheme = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     if (typeof theme == "string") setCurrentTheme(themes === null || themes === void 0 ? void 0 : themes.find(function (item) {
       return item.name == theme;
     }));else setCurrentTheme(theme);
@@ -61361,7 +61416,7 @@ function usePresence() {
     // either be null or non-null for the lifespan of the component.
     // Replace with useOpaqueId when released in React
     var id = useUniqueId();
-    useEffect(function () { return register(id); }, []);
+    useEffect$1(function () { return register(id); }, []);
     var safeToRemove = function () { return onExitComplete === null || onExitComplete === void 0 ? void 0 : onExitComplete(id); };
     return !isPresent && onExitComplete ? [false, safeToRemove] : [true];
 }
@@ -61379,7 +61434,7 @@ var LayoutGroupContext = createContext(null);
 
 var isBrowser = typeof window !== "undefined";
 
-var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect = isBrowser ? useLayoutEffect : useEffect$1;
 
 function useLayoutId(_a) {
     var layoutId = _a.layoutId;
@@ -61422,7 +61477,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
          */
         visualElement.syncRender();
     });
-    useEffect(function () {
+    useEffect$1(function () {
         var _a;
         if (!visualElement)
             return;
@@ -62757,7 +62812,7 @@ function addDomEvent(target, eventName, handler, options) {
  * @public
  */
 function useDomEvent(ref, eventName, handler, options) {
-    useEffect(function () {
+    useEffect$1(function () {
         var element = ref.current;
         if (handler && element) {
             return addDomEvent(element, eventName, handler, options);
@@ -62986,7 +63041,7 @@ var isNodeOrChild = function (parent, child) {
 };
 
 function useUnmountEffect(callback) {
-    return useEffect(function () { return function () { return callback(); }; }, []);
+    return useEffect$1(function () { return function () { return callback(); }; }, []);
 }
 
 var clamp = function (min, max, v) {
@@ -65298,14 +65353,14 @@ var animations = {
          * Subscribe any provided AnimationControls to the component's VisualElement
          */
         if (isAnimationControls(animate)) {
-            useEffect(function () { return animate.subscribe(visualElement); }, [animate]);
+            useEffect$1(function () { return animate.subscribe(visualElement); }, [animate]);
         }
     }),
     exit: makeRenderlessComponent(function (props) {
         var custom = props.custom, visualElement = props.visualElement;
         var _a = __read(usePresence(), 2), isPresent = _a[0], onExitComplete = _a[1];
         var presenceContext = useContext(PresenceContext);
-        useEffect(function () {
+        useEffect$1(function () {
             var _a, _b;
             var animation = (_a = visualElement.animationState) === null || _a === void 0 ? void 0 : _a.setActive(AnimationType.Exit, !isPresent, { custom: (_b = presenceContext === null || presenceContext === void 0 ? void 0 : presenceContext.custom) !== null && _b !== void 0 ? _b : custom });
             !isPresent && (animation === null || animation === void 0 ? void 0 : animation.then(onExitComplete));
@@ -66623,9 +66678,9 @@ function useDrag(props) {
     dragControls.setProps(__assign(__assign({}, props), { transformPagePoint: transformPagePoint }));
     // If we've been provided a DragControls for manual control over the drag gesture,
     // subscribe this component to it on mount.
-    useEffect(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls]);
+    useEffect$1(function () { return groupDragControls && groupDragControls.subscribe(dragControls); }, [dragControls]);
     // Mount the drag controls with the visualElement
-    useEffect(function () { return dragControls.mount(visualElement); }, []);
+    useEffect$1(function () { return dragControls.mount(visualElement); }, []);
 }
 
 /**
@@ -66654,7 +66709,7 @@ function usePanGesture(_a) {
             onPanEnd && onPanEnd(event, info);
         },
     };
-    useEffect(function () {
+    useEffect$1(function () {
         if (panSession.current !== null) {
             panSession.current.updateHandlers(handlers);
         }
@@ -68761,7 +68816,7 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return cloneElement(child); })));
 };
 
-var index$1 = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+var index$1 = typeof document !== 'undefined' ? useLayoutEffect : useEffect$1;
 
 // Fork of `fast-deep-equal` that only does the comparisons we need and compares
 // functions
@@ -69568,7 +69623,7 @@ var tabbable = function tabbable(el, options) {
   return sortByOrder(candidates);
 };
 
-var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect;
+var index = typeof document !== 'undefined' ? useLayoutEffect : useEffect$1;
 
 let serverHandoffComplete = false;
 let count = 0;
@@ -71514,7 +71569,7 @@ var DropdownItem = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     _useState2 = _slicedToArray$2(_useState, 2),
     isActive = _useState2[0],
     setIsActive = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     setIsActive(active);
   }, [active]);
   var handleOnClick = function handleOnClick(e) {
@@ -71944,7 +71999,7 @@ var useMountStatus = function useMountStatus() {
     _useState2 = _slicedToArray$2(_useState, 2),
     isMounted = _useState2[0],
     setIsMounted = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     var timeout = setTimeout(function () {
       return setIsMounted(true);
     }, 500);
@@ -72226,7 +72281,7 @@ var Kanban = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     setItems(data);
     setContainers(Object.keys(data));
   }, [data]);
-  useEffect(function () {
+  useEffect$1(function () {
     requestAnimationFrame(function () {
       recentlyMovedToNewContainer.current = false;
     });
@@ -74130,7 +74185,7 @@ function cssTransition(_ref) {
     useLayoutEffect(function () {
       onEnter();
     }, []);
-    useEffect(function () {
+    useEffect$1(function () {
       if (!isIn) preventExitTransition ? onExited() : onExit();
     }, [isIn]);
 
@@ -74243,7 +74298,7 @@ function useKeeper(arg, refresh) {
   }
 
   var ref = useRef(arg);
-  useEffect(function () {
+  useEffect$1(function () {
     if (refresh) ref.current = arg;
   });
   return ref.current;
@@ -74292,7 +74347,7 @@ function useToastContainer(props) {
       return collection[id] || null;
     }
   });
-  useEffect(function () {
+  useEffect$1(function () {
     instance.containerId = props.containerId;
     eventManager.cancelEmit(3
     /* WillUnmount */
@@ -74313,14 +74368,14 @@ function useToastContainer(props) {
       , instance);
     };
   }, []);
-  useEffect(function () {
+  useEffect$1(function () {
     instance.isToastActive = isToastActive;
     instance.displayedToast = toast.length;
     eventManager.emit(4
     /* Change */
     , toast.length, props.containerId);
   }, [toast]);
-  useEffect(function () {
+  useEffect$1(function () {
     instance.props = props;
   });
 
@@ -74575,19 +74630,19 @@ function useToast(props) {
       closeToast = props.closeToast,
       onClick = props.onClick,
       closeOnClick = props.closeOnClick;
-  useEffect(function () {
+  useEffect$1(function () {
     if (isFn(props.onOpen)) props.onOpen(isValidElement(props.children) && props.children.props);
     return function () {
       if (isFn(syncProps.onClose)) syncProps.onClose(isValidElement(syncProps.children) && syncProps.children.props);
     };
   }, []);
-  useEffect(function () {
+  useEffect$1(function () {
     props.draggable && bindDragEvents();
     return function () {
       props.draggable && unbindDragEvents();
     };
   }, [props.draggable]);
-  useEffect(function () {
+  useEffect$1(function () {
     props.pauseOnFocusLoss && bindFocusEvents();
     return function () {
       props.pauseOnFocusLoss && unbindFocusEvents();
@@ -76047,7 +76102,7 @@ var DoubleRangeSlider = /*#__PURE__*/React__default.forwardRef(function (props,
     _useState6 = _slicedToArray$2(_useState5, 2),
     maxVal = _useState6[0],
     setMaxVal = _useState6[1];
-  useEffect(function () {
+  useEffect$1(function () {
     setMinVal(minValue);
     setMaxVal(maxValue);
   }, [minValue, maxValue]);
@@ -76059,7 +76114,7 @@ var DoubleRangeSlider = /*#__PURE__*/React__default.forwardRef(function (props,
   }, [min, max]);
 
   // Set width of the range to decrease from the left side
-  useEffect(function () {
+  useEffect$1(function () {
     var minPercent = getPercent(minVal);
     var maxPercent = getPercent(maxVal);
     if (range.current) {
@@ -76069,7 +76124,7 @@ var DoubleRangeSlider = /*#__PURE__*/React__default.forwardRef(function (props,
   }, [minVal, getPercent]);
 
   // Set width of the range to decrease from the right side
-  useEffect(function () {
+  useEffect$1(function () {
     var minPercent = getPercent(minVal);
     var maxPercent = getPercent(maxVal);
     if (range.current) {
@@ -76078,7 +76133,7 @@ var DoubleRangeSlider = /*#__PURE__*/React__default.forwardRef(function (props,
   }, [maxVal, getPercent]);
 
   // Get min and max values when their state changes
-  useEffect(function () {
+  useEffect$1(function () {
     onChange({
       min: minVal,
       max: maxVal
@@ -77346,7 +77401,7 @@ function useDropzone() {
     }
   };
 
-  useEffect(function () {
+  useEffect$1(function () {
     window.addEventListener("focus", onWindowFocus, false);
     return function () {
       window.removeEventListener("focus", onWindowFocus, false);
@@ -77364,7 +77419,7 @@ function useDropzone() {
     dragTargetsRef.current = [];
   };
 
-  useEffect(function () {
+  useEffect$1(function () {
     if (preventDropOnDocument) {
       document.addEventListener("dragover", onDocumentDragOver, false);
       document.addEventListener("drop", onDocumentDrop, false);
@@ -77378,7 +77433,7 @@ function useDropzone() {
     };
   }, [rootRef, preventDropOnDocument]); // Auto focus the root when autoFocus is true
 
-  useEffect(function () {
+  useEffect$1(function () {
     if (!disabled && autoFocus && rootRef.current) {
       rootRef.current.focus();
     }
@@ -77904,7 +77959,7 @@ var DragAndDropFile = /*#__PURE__*/React__default.forwardRef(function (props, re
     displayDnD = _useState4[0],
     setDisplayDnD = _useState4[1];
   var dropzoneRef = useRef();
-  useEffect(function () {
+  useEffect$1(function () {
     setDisplayDnD(showDnD);
   }, [showDnD]);
   var themeProps = {
@@ -78128,7 +78183,7 @@ var DragDropFiles = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     _useState2 = _slicedToArray$2(_useState, 2),
     inputFiles = _useState2[0],
     setInputFiles = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     setInputFiles(files);
   }, [files]);
   var handleOnDrop = useCallback(function (acceptedFiles, rejectedFiles) {
@@ -78319,7 +78374,7 @@ function useAsync(_ref) {
     setDefaultOptions(Array.isArray(propsDefaultOptions) ? propsDefaultOptions : undefined);
     setPrevDefaultOptions(propsDefaultOptions);
   }
-  useEffect(function () {
+  useEffect$1(function () {
     mounted.current = true;
     return function () {
       mounted.current = false;
@@ -78334,7 +78389,7 @@ function useAsync(_ref) {
       });
     }
   }, [propsLoadOptions]);
-  useEffect(function () {
+  useEffect$1(function () {
     if (propsDefaultOptions === true) {
       loadOptions(stateInputValue, function (options) {
         if (!mounted.current) return;
@@ -81578,7 +81633,7 @@ var Sidebar = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     sidebarCollapsed = _useState2[0],
     setSidebarCollapsed = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     if (collapsed != undefined) setSidebarCollapsed(collapsed);else {
       if (screenSize == "XS" || screenSize == "S") setSidebarCollapsed(true);else setSidebarCollapsed(false);
     }
@@ -82847,7 +82902,7 @@ var EZDrawer = function EZDrawer(props) {
       _props$lockBackground = props.lockBackgroundScroll,
       lockBackgroundScroll = _props$lockBackground === void 0 ? false : _props$lockBackground;
   var bodyRef = useRef(null);
-  useEffect(function () {
+  useEffect$1(function () {
     var updatePageScroll = function updatePageScroll() {
       bodyRef.current = window.document.querySelector('body');
 
@@ -83316,7 +83371,7 @@ var SwipeableDrawer = /*#__PURE__*/React__default.forwardRef(function (props, re
   };
 
   //Outside click handling
-  useEffect(function () {
+  useEffect$1(function () {
     var handleClickOutside = function handleClickOutside(event) {
       if (drawerRef !== null && drawerRef !== void 0 && drawerRef.current && !(drawerRef !== null && drawerRef !== void 0 && drawerRef.current.contains(event.target))) {
         if (closeOnClickOutside == true) closeDrawer();
@@ -83615,7 +83670,7 @@ var MenuItem = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     _useState2 = _slicedToArray$2(_useState, 2),
     isActive = _useState2[0],
     setIsActive = _useState2[1];
-  useEffect(function () {
+  useEffect$1(function () {
     setIsActive(active);
   }, [active]);
   var handleOnClick = function handleOnClick(e) {

package/lib/index.js

@@ -43347,7 +43347,7 @@ var StyledInput$2 = newStyled.input(_templateObject4$a || (_templateObject4$a =
   return getDisabledStateCss(props.theme);
 });
 
-var _excluded$1e = ["disabled", "readOnly", "debounceTime", "type", "placeholder", "tabIndex", "prefix", "suffix", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$1e = ["disabled", "readOnly", "defaultValue", "value", "debounceTime", "type", "placeholder", "tabIndex", "prefix", "suffix", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
@@ -43355,6 +43355,8 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
   //
   var disabled = props.disabled,
     readOnly = props.readOnly,
+    defaultValue = props.defaultValue,
+    value = props.value,
     _props$debounceTime = props.debounceTime,
     debounceTime = _props$debounceTime === void 0 ? 180 : _props$debounceTime,
     _props$type = props.type,
@@ -43376,14 +43378,19 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties__default["default"](props, _excluded$1e);
   var theme = useTheme$1();
-  // const [inputValue, setInputValue] = useState(value);
-  var _useState = React.useState(false),
+  var _useState = React.useState(value || defaultValue || ""),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-
-  // useUpdateEffect(() => setInputValue(value), [value]);
-
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  React.useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   var debouncedOnChange = React.useCallback(lodash.exports.debounce(function (e, val) {
     return handleChange(e, val);
   }, debounceTime), [onChange]);
@@ -43391,11 +43398,11 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
-    // if (value || value === "") setInputValue(e.target.value);
+    // if (value || value === "") 
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var handleFocus = function handleFocus(e) {
-    console.log("focus", e);
     setFocused(true);
     onFocus === null || onFocus === void 0 ? void 0 : onFocus(e);
   };
@@ -43432,8 +43439,8 @@ var TextInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: onValueChange,
-    tabIndex: tabIndex
-    // value={inputValue}
+    tabIndex: tabIndex,
+    value: inputValue
   }, rest)), suffix && /*#__PURE__*/React__default["default"].createElement(StyledSuffix$3, {
     theme: theme,
     color: color,
@@ -45424,7 +45431,7 @@ var StyledInput$1 = newStyled.input(_templateObject4$8 || (_templateObject4$8 =
   return getDisabledStateCss(props.theme);
 });
 
-var _excluded$1a = ["disabled", "readOnly", "debounceTime", "step", "min", "max", "prefix", "suffix", "placeholder", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$1a = ["disabled", "readOnly", "debounceTime", "step", "min", "max", "prefix", "suffix", "placeholder", "value", "defaultValue", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
@@ -45443,6 +45450,8 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
     prefix = props.prefix,
     suffix = props.suffix,
     placeholder = props.placeholder,
+    value = props.value,
+    defaultValue = props.defaultValue,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
@@ -45456,10 +45465,19 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties__default["default"](props, _excluded$1a);
   var theme = useTheme$1();
-  var _useState = React.useState(false),
+  var _useState = React.useState(value || defaultValue || ""),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var _useState3 = React.useState(false),
+    _useState4 = _slicedToArray__default["default"](_useState3, 2),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   var debouncedOnChange = React.useCallback(lodash.exports.debounce(function (e, val) {
     return handleChange(e, val);
   }, debounceTime), [onChange]);
@@ -45467,6 +45485,7 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var handleFocus = function handleFocus(e) {
@@ -45504,9 +45523,8 @@ var NumberInput = /*#__PURE__*/React__default["default"].forwardRef(function (pr
     readOnly: readOnly,
     step: step,
     min: min,
-    max: max
-    // value={inputValue}
-    ,
+    max: max,
+    value: inputValue,
     onFocus: handleFocus,
     onBlur: handleBlur,
     onChange: onValueChange
@@ -45631,7 +45649,7 @@ var StyledInput = newStyled.input(_templateObject5$4 || (_templateObject5$4 = _t
   return getDisabledStateCss(props.theme);
 });
 
-var _excluded$19 = ["wrapperRef", "disabled", "readOnly", "debounceTime", "placeholder", "prefix", "suffix", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$19 = ["wrapperRef", "disabled", "readOnly", "debounceTime", "placeholder", "prefix", "suffix", "value", "defaultValue", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
@@ -45644,6 +45662,8 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     placeholder = props.placeholder,
     prefix = props.prefix,
     suffix = props.suffix,
+    value = props.value,
+    defaultValue = props.defaultValue,
     onChange = props.onChange,
     onBlur = props.onBlur,
     onFocus = props.onFocus,
@@ -45658,14 +45678,23 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     rest = _objectWithoutProperties__default["default"](props, _excluded$19);
   var inputRef = React.useRef();
   var theme = useTheme$1();
-  var _useState = React.useState(true),
+  var _useState = React.useState(value || defaultValue || ""),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    locked = _useState2[0],
-    setLocked = _useState2[1];
-  var _useState3 = React.useState(false),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  React.useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
+  var _useState3 = React.useState(true),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    focused = _useState4[0],
-    setFocused = _useState4[1];
+    locked = _useState4[0],
+    setLocked = _useState4[1];
+  var _useState5 = React.useState(false),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    focused = _useState6[0],
+    setFocused = _useState6[1];
   React.useEffect(function () {
     var _inputRef$current;
     var inputValue = (inputRef === null || inputRef === void 0 ? void 0 : (_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value) || "";
@@ -45682,6 +45711,7 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var toggleLocked = function toggleLocked() {
@@ -45725,7 +45755,8 @@ var PasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     focused: focused,
     onFocus: handleFocus,
     onBlur: handleBlur,
-    onChange: onValueChange
+    onChange: onValueChange,
+    value: inputValue
   }, rest)), /*#__PURE__*/React__default["default"].createElement(StyledLockIcon, {
     theme: theme,
     color: color,
@@ -46454,13 +46485,15 @@ var index$2 = /* #__PURE__ */React.forwardRef(TextareaAutosize);
 
 var ReactTextareaAutosize = index$2;
 
-var _excluded$15 = ["disabled", "readOnly", "debounceTime", "type", "collapseOnBlur", "minRows", "maxRows", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
+var _excluded$15 = ["disabled", "readOnly", "value", "defaultValue", "debounceTime", "type", "collapseOnBlur", "minRows", "maxRows", "onChange", "onBlur", "onFocus", "className", "style", "size", "color"];
 
 //===================================================
 
 var TextAreaInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var disabled = props.disabled,
     readOnly = props.readOnly,
+    value = props.value,
+    defaultValue = props.defaultValue,
     _props$debounceTime = props.debounceTime,
     debounceTime = _props$debounceTime === void 0 ? 180 : _props$debounceTime;
     props.type;
@@ -46481,19 +46514,28 @@ var TextAreaInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     _props$color = props.color,
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties__default["default"](props, _excluded$15);
-  var theme = useTheme$1();
-  var _useState = React.useState(false),
+  var _useState = React.useState(value || defaultValue || ""),
     _useState2 = _slicedToArray__default["default"](_useState, 2),
-    focused = _useState2[0],
-    setFocused = _useState2[1];
-  var _useState3 = React.useState(minRows),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  var theme = useTheme$1();
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    innerMinRows = _useState4[0],
-    setInnerMinRows = _useState4[1];
-  var _useState5 = React.useState(collapseOnBlur ? minRows : maxRows),
+    focused = _useState4[0],
+    setFocused = _useState4[1];
+  var _useState5 = React.useState(minRows),
     _useState6 = _slicedToArray__default["default"](_useState5, 2),
-    innerMaxRows = _useState6[0],
-    setInnerMaxRows = _useState6[1];
+    innerMinRows = _useState6[0],
+    setInnerMinRows = _useState6[1];
+  var _useState7 = React.useState(collapseOnBlur ? minRows : maxRows),
+    _useState8 = _slicedToArray__default["default"](_useState7, 2),
+    innerMaxRows = _useState8[0],
+    setInnerMaxRows = _useState8[1];
+  React.useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   React.useEffect(function () {
     setInnerMinRows(minRows);
     if (collapseOnBlur && focused === false) setInnerMaxRows(minRows);
@@ -46508,6 +46550,7 @@ var TextAreaInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   var handleFocus = function handleFocus(e) {
@@ -46536,9 +46579,8 @@ var TextAreaInput = /*#__PURE__*/React__default["default"].forwardRef(function (
     collapseOnBlur: collapseOnBlur
   }, /*#__PURE__*/React__default["default"].createElement(ReactTextareaAutosize, _extends__default$1["default"]({
     ref: ref,
-    disabled: disabled
-    // value={inputValue}
-    ,
+    disabled: disabled,
+    value: inputValue,
     readOnly: readOnly,
     minRows: innerMinRows,
     maxRows: innerMaxRows,
@@ -46608,7 +46650,7 @@ TextAreaInput.propTypes = {
   color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "danger", "warning", "information", "neutral", "gray"])
 };
 
-var _excluded$14 = ["disabled", "readOnly", "debounceTime", "onChange", "className", "style", "size", "color"];
+var _excluded$14 = ["disabled", "readOnly", "defaultValue", "value", "debounceTime", "onChange", "className", "style", "size", "color"];
 var _templateObject$1d;
 var standardCssFields$1 = function standardCssFields(_ref) {
   var theme = _ref.theme,
@@ -46640,6 +46682,8 @@ var SyledInput = newStyled.input(_templateObject$1d || (_templateObject$1d = _ta
 var TimeInput = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
   var disabled = props.disabled,
     readOnly = props.readOnly,
+    defaultValue = props.defaultValue,
+    value = props.value,
     _props$debounceTime = props.debounceTime,
     debounceTime = _props$debounceTime === void 0 ? 180 : _props$debounceTime,
     onChange = props.onChange,
@@ -46653,6 +46697,15 @@ var TimeInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     color = _props$color === void 0 ? "primary" : _props$color,
     rest = _objectWithoutProperties__default["default"](props, _excluded$14);
   var theme = useTheme$1();
+  var _useState = React.useState(value || defaultValue || ""),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    inputValue = _useState2[0],
+    setInputValue = _useState2[1];
+  useEffect(function () {
+    if (value !== null && value !== undefined) {
+      setInputValue(value);
+    }
+  }, [value]);
   var debouncedOnChange = React.useCallback(lodash.exports.debounce(function (e, val) {
     return handleChange(e, val);
   }, debounceTime), [onChange]);
@@ -46660,6 +46713,7 @@ var TimeInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     if (onChange) onChange === null || onChange === void 0 ? void 0 : onChange(e, value);
   };
   var onValueChange = function onValueChange(e) {
+    setInputValue(e.target.value);
     debouncedOnChange(e, e.target.value);
   };
   return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SyledInput, _extends__default$1["default"]({
@@ -46672,7 +46726,8 @@ var TimeInput = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     color: color,
     size: size,
     className: className,
-    style: style
+    style: style,
+    value: inputValue
   }, rest)));
 });
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lanaco/lnc-react-ui",
   "type": "module",
-  "version": "3.11.31",
+  "version": "3.11.33",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",