@snack-uikit/fields 0.57.2-preview-02d918ac.0 → 0.57.2

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.57.2 (2026-07-03)
+
+### Only dependencies have been changed
+* [@snack-uikit/calendar@0.14.2]($PUBLIC_PROJECT_URL/blob/master/packages/calendar/CHANGELOG.md)
+* [@snack-uikit/color-picker@0.3.58]($PUBLIC_PROJECT_URL/blob/master/packages/color-picker/CHANGELOG.md)
+* [@snack-uikit/dropdown@0.5.8]($PUBLIC_PROJECT_URL/blob/master/packages/dropdown/CHANGELOG.md)
+* [@snack-uikit/list@0.33.3]($PUBLIC_PROJECT_URL/blob/master/packages/list/CHANGELOG.md)
+* [@snack-uikit/slider@0.3.39]($PUBLIC_PROJECT_URL/blob/master/packages/slider/CHANGELOG.md)
+* [@snack-uikit/tag@0.15.22]($PUBLIC_PROJECT_URL/blob/master/packages/tag/CHANGELOG.md)
+* [@snack-uikit/tooltip@0.18.15]($PUBLIC_PROJECT_URL/blob/master/packages/tooltip/CHANGELOG.md)
+* [@snack-uikit/truncate-string@0.7.14]($PUBLIC_PROJECT_URL/blob/master/packages/truncate-string/CHANGELOG.md)
+
+
+
+
+
 ## 0.57.1 (2026-06-24)
 
 

package/dist/cjs/components/FieldColor/FieldColor.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -32,48 +34,60 @@ const getValidationState_1 = require("../../utils/getValidationState");
 const FieldDecorator_1 = require("../FieldDecorator");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.FieldColor = (0, react_1.forwardRef)((_a, ref) => {
-  var {
-      id,
-      name,
-      value: valueProp,
-      disabled = false,
-      readonly = false,
-      showCopyButton: showCopyButtonProp = true,
-      showClearButton: showClearButtonProp = true,
-      open,
-      onChange,
-      onOpenChange,
-      className,
-      label,
-      labelTooltip,
-      labelTooltipPlacement,
-      required = false,
-      caption,
-      hint,
-      showHintIcon,
-      size = input_private_1.SIZE.S,
-      validationState = constants_1.VALIDATION_STATE.Default,
-      error,
-      withAlpha,
-      autoApply,
-      placeholder,
-      onFocus,
-      onBlur,
-      onCopyButtonClick,
-      autoFocus
-    } = _a,
+  var id = _a.id,
+    name = _a.name,
+    valueProp = _a.value,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    _a$readonly = _a.readonly,
+    readonly = _a$readonly === void 0 ? false : _a$readonly,
+    _a$showCopyButton = _a.showCopyButton,
+    showCopyButtonProp = _a$showCopyButton === void 0 ? true : _a$showCopyButton,
+    _a$showClearButton = _a.showClearButton,
+    showClearButtonProp = _a$showClearButton === void 0 ? true : _a$showClearButton,
+    open = _a.open,
+    onChange = _a.onChange,
+    onOpenChange = _a.onOpenChange,
+    className = _a.className,
+    label = _a.label,
+    labelTooltip = _a.labelTooltip,
+    labelTooltipPlacement = _a.labelTooltipPlacement,
+    _a$required = _a.required,
+    required = _a$required === void 0 ? false : _a$required,
+    caption = _a.caption,
+    hint = _a.hint,
+    showHintIcon = _a.showHintIcon,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? input_private_1.SIZE.S : _a$size,
+    _a$validationState = _a.validationState,
+    validationState = _a$validationState === void 0 ? constants_1.VALIDATION_STATE.Default : _a$validationState,
+    error = _a.error,
+    withAlpha = _a.withAlpha,
+    autoApply = _a.autoApply,
+    placeholder = _a.placeholder,
+    onFocus = _a.onFocus,
+    onBlur = _a.onBlur,
+    onCopyButtonClick = _a.onCopyButtonClick,
+    autoFocus = _a.autoFocus,
     rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onChange", "onOpenChange", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "error", "withAlpha", "autoApply", "placeholder", "onFocus", "onBlur", "onCopyButtonClick", "autoFocus"]);
-  const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
+  const _ref = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange),
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    isOpen = _ref2[0],
+    setIsOpen = _ref2[1];
   const localRef = (0, react_1.useRef)(null);
   const showDropList = isOpen && !readonly && !disabled;
   const fieldValidationState = (0, getValidationState_1.getValidationState)({
     validationState,
     error
   });
-  const [value = '', setValue] = (0, utils_1.useValueControl)({
-    value: valueProp || '',
-    onChange: onChange
-  });
+  const _ref3 = (0, utils_1.useValueControl)({
+      value: valueProp || '',
+      onChange: onChange
+    }),
+    _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    _ref4$ = _ref4[0],
+    value = _ref4$ === void 0 ? '' : _ref4$,
+    setValue = _ref4[1];
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
   const showAdditionalButton = Boolean(value && !disabled);
@@ -99,16 +113,15 @@ exports.FieldColor = (0, react_1.forwardRef)((_a, ref) => {
     valueToCopy: value,
     onCopyButtonClick
   });
-  const {
-    postfixButtons,
-    inputTabIndex,
-    onInputKeyDown
-  } = (0, input_private_1.useButtonNavigation)({
-    inputRef: localRef,
-    postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
-    readonly,
-    submitKeys: ['Enter', 'Space', 'Tab']
-  });
+  const _ref5 = (0, input_private_1.useButtonNavigation)({
+      inputRef: localRef,
+      postfixButtons: (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings], [clearButtonSettings, copyButtonSettings]),
+      readonly,
+      submitKeys: ['Enter', 'Space', 'Tab']
+    }),
+    postfixButtons = _ref5.postfixButtons,
+    inputTabIndex = _ref5.inputTabIndex,
+    onInputKeyDown = _ref5.onInputKeyDown;
   (0, react_1.useEffect)(() => {
     var _a;
     if (open) {
@@ -145,10 +158,8 @@ exports.FieldColor = (0, react_1.forwardRef)((_a, ref) => {
         withAlpha: withAlpha,
         autoApply: autoApply,
         value: value,
-        onChange: _ref => {
-          let {
-            hex
-          } = _ref;
+        onChange: _ref6 => {
+          let hex = _ref6.hex;
           setValue === null || setValue === void 0 ? void 0 : setValue(hex || '');
         },
         colorMode: {

package/dist/cjs/components/FieldDate/FieldDate.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __rest = void 0 && (void 0).__rest || function (s, e) {
   var t = {};
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
@@ -34,37 +36,45 @@ const FieldDecorator_1 = require("../FieldDecorator");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
   var _b;
-  var {
-      id,
-      name,
-      value: valueProp,
-      disabled = false,
-      readonly = false,
-      showCopyButton: showCopyButtonProp = true,
-      showClearButton: showClearButtonProp = true,
-      open,
-      onOpenChange,
-      onChange,
-      onFocus,
-      onBlur: onBlurProp,
-      className,
-      label,
-      labelTooltip,
-      labelTooltipPlacement,
-      required = false,
-      caption,
-      hint,
-      showHintIcon,
-      size = input_private_1.SIZE.S,
-      validationState = constants_1.VALIDATION_STATE.Default,
-      buildCellProps,
-      error,
-      mode,
-      onCopyButtonClick,
-      autoFocus
-    } = _a,
+  var id = _a.id,
+    name = _a.name,
+    valueProp = _a.value,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    _a$readonly = _a.readonly,
+    readonly = _a$readonly === void 0 ? false : _a$readonly,
+    _a$showCopyButton = _a.showCopyButton,
+    showCopyButtonProp = _a$showCopyButton === void 0 ? true : _a$showCopyButton,
+    _a$showClearButton = _a.showClearButton,
+    showClearButtonProp = _a$showClearButton === void 0 ? true : _a$showClearButton,
+    open = _a.open,
+    onOpenChange = _a.onOpenChange,
+    onChange = _a.onChange,
+    onFocus = _a.onFocus,
+    onBlurProp = _a.onBlur,
+    className = _a.className,
+    label = _a.label,
+    labelTooltip = _a.labelTooltip,
+    labelTooltipPlacement = _a.labelTooltipPlacement,
+    _a$required = _a.required,
+    required = _a$required === void 0 ? false : _a$required,
+    caption = _a.caption,
+    hint = _a.hint,
+    showHintIcon = _a.showHintIcon,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? input_private_1.SIZE.S : _a$size,
+    _a$validationState = _a.validationState,
+    validationState = _a$validationState === void 0 ? constants_1.VALIDATION_STATE.Default : _a$validationState,
+    buildCellProps = _a.buildCellProps,
+    error = _a.error,
+    mode = _a.mode,
+    onCopyButtonClick = _a.onCopyButtonClick,
+    autoFocus = _a.autoFocus,
     rest = __rest(_a, ["id", "name", "value", "disabled", "readonly", "showCopyButton", "showClearButton", "open", "onOpenChange", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "showHintIcon", "size", "validationState", "buildCellProps", "error", "mode", "onCopyButtonClick", "autoFocus"]);
-  const [isOpen, setIsOpen] = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange);
+  const _ref = (0, uncontrollable_1.useUncontrolledProp)(open, false, onOpenChange),
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    isOpen = _ref2[0],
+    setIsOpen = _ref2[1];
   const localRef = (0, react_1.useRef)(null);
   const clearButtonRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
@@ -141,37 +151,35 @@ exports.FieldDate = (0, react_1.forwardRef)((_a, ref) => {
     }))
   }), [calendarIconSize, size]);
   const memorizedButtons = (0, react_1.useMemo)(() => [clearButtonSettings, copyButtonSettings, calendarIcon], [clearButtonSettings, copyButtonSettings, calendarIcon]);
-  const {
-    value,
-    handleChange,
-    handleClick: dateInputClickHandler,
-    handleKeyDown: dateInputKeyDownHandler,
-    handleBlur: dateInputBlurHandler,
-    mask,
-    setInputFocus
-  } = (0, hooks_1.useDateField)({
-    inputRef: localRef,
-    onChange,
-    readonly,
-    locale: constants_1.DEFAULT_LOCALE,
-    setIsOpen,
-    mode,
-    showSeconds
-  });
+  const _ref3 = (0, hooks_1.useDateField)({
+      inputRef: localRef,
+      onChange,
+      readonly,
+      locale: constants_1.DEFAULT_LOCALE,
+      setIsOpen,
+      mode,
+      showSeconds
+    }),
+    value = _ref3.value,
+    handleChange = _ref3.handleChange,
+    dateInputClickHandler = _ref3.handleClick,
+    dateInputKeyDownHandler = _ref3.handleKeyDown,
+    dateInputBlurHandler = _ref3.handleBlur,
+    mask = _ref3.mask,
+    setInputFocus = _ref3.setInputFocus;
   const setInputFocusFromButtons = (0, react_1.useCallback)(() => setInputFocus(mode === 'date' ? constants_1.SlotKey.Year : constants_1.SlotKey.Seconds), [mode, setInputFocus]);
-  const {
-    postfixButtons,
-    inputTabIndex,
-    onInputKeyDown: navigationInputKeyDownHandler,
-    setInitialTabIndices
-  } = (0, input_private_1.useButtonNavigation)({
-    setInputFocus: setInputFocusFromButtons,
-    inputRef: localRef,
-    postfixButtons: memorizedButtons,
-    onButtonKeyDown: checkForLeavingFocus,
-    readonly,
-    submitKeys: ['Enter', 'Space', 'Tab']
-  });
+  const _ref4 = (0, input_private_1.useButtonNavigation)({
+      setInputFocus: setInputFocusFromButtons,
+      inputRef: localRef,
+      postfixButtons: memorizedButtons,
+      onButtonKeyDown: checkForLeavingFocus,
+      readonly,
+      submitKeys: ['Enter', 'Space', 'Tab']
+    }),
+    postfixButtons = _ref4.postfixButtons,
+    inputTabIndex = _ref4.inputTabIndex,
+    navigationInputKeyDownHandler = _ref4.onInputKeyDown,
+    setInitialTabIndices = _ref4.setInitialTabIndices;
   const handleSelectDate = date => {
     var _a;
     onChange && onChange(date);

package/dist/cjs/components/FieldDecorator/FieldDecorator.js

@@ -28,24 +28,24 @@ const Footer_1 = require("./Footer");
 const Header_1 = require("./Header");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 exports.FieldDecorator = (0, react_1.forwardRef)((_a, ref) => {
-  var {
-      children,
-      className,
-      label,
-      labelTooltip,
-      required,
-      labelFor,
-      caption,
-      length,
-      hint,
-      disabled,
-      readonly,
-      showHintIcon,
-      labelTooltipPlacement,
-      size = input_private_1.SIZE.S,
-      error,
-      validationState = constants_1.VALIDATION_STATE.Default
-    } = _a,
+  var children = _a.children,
+    className = _a.className,
+    label = _a.label,
+    labelTooltip = _a.labelTooltip,
+    required = _a.required,
+    labelFor = _a.labelFor,
+    caption = _a.caption,
+    length = _a.length,
+    hint = _a.hint,
+    disabled = _a.disabled,
+    readonly = _a.readonly,
+    showHintIcon = _a.showHintIcon,
+    labelTooltipPlacement = _a.labelTooltipPlacement,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? input_private_1.SIZE.S : _a$size,
+    error = _a.error,
+    _a$validationState = _a.validationState,
+    validationState = _a$validationState === void 0 ? constants_1.VALIDATION_STATE.Default : _a$validationState,
     rest = __rest(_a, ["children", "className", "label", "labelTooltip", "required", "labelFor", "caption", "length", "hint", "disabled", "readonly", "showHintIcon", "labelTooltipPlacement", "size", "error", "validationState"]);
   const isFieldActive = !disabled && !readonly;
   const fieldValidationState = (0, getValidationState_1.getValidationState)({

package/dist/cjs/components/FieldDecorator/Footer.js

@@ -44,13 +44,12 @@ function getValidationIcon(props) {
   }) : null;
 }
 function Footer(_ref) {
-  let {
-    length,
-    hint,
-    size,
-    validationState = constants_1.VALIDATION_STATE.Default,
-    showHintIcon
-  } = _ref;
+  let length = _ref.length,
+    hint = _ref.hint,
+    size = _ref.size,
+    _ref$validationState = _ref.validationState,
+    validationState = _ref$validationState === void 0 ? constants_1.VALIDATION_STATE.Default : _ref$validationState,
+    showHintIcon = _ref.showHintIcon;
   const isReverseContainer = !hint && length;
   const limitExceeded = length && length.max && length.current > length.max;
   const icon = (0, react_1.useMemo)(() => getValidationIcon({

package/dist/cjs/components/FieldDecorator/Header.js

@@ -15,15 +15,16 @@ const tooltip_1 = require("@snack-uikit/tooltip");
 const truncate_string_1 = require("@snack-uikit/truncate-string");
 const styles_module_scss_1 = __importDefault(require('./styles.module.css'));
 function Header(_ref) {
-  let {
-    label = '',
-    labelTooltip,
-    caption,
-    labelFor,
-    size,
-    required = false,
-    labelTooltipPlacement = 'top'
-  } = _ref;
+  let _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    labelTooltip = _ref.labelTooltip,
+    caption = _ref.caption,
+    labelFor = _ref.labelFor,
+    size = _ref.size,
+    _ref$required = _ref.required,
+    required = _ref$required === void 0 ? false : _ref$required,
+    _ref$labelTooltipPlac = _ref.labelTooltipPlacement,
+    labelTooltipPlacement = _ref$labelTooltipPlac === void 0 ? 'top' : _ref$labelTooltipPlac;
   return (0, jsx_runtime_1.jsxs)("span", {
     className: styles_module_scss_1.default.header,
     "data-size": size,

package/dist/cjs/components/FieldDecorator/utils.js

@@ -5,22 +5,20 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.extractFieldDecoratorProps = extractFieldDecoratorProps;
 function extractFieldDecoratorProps(_ref) {
-  let {
-    error,
-    required,
-    readonly,
-    label,
-    labelTooltip,
-    labelTooltipPlacement,
-    labelFor,
-    caption,
-    hint,
-    disabled,
-    showHintIcon,
-    size,
-    validationState,
-    className
-  } = _ref;
+  let error = _ref.error,
+    required = _ref.required,
+    readonly = _ref.readonly,
+    label = _ref.label,
+    labelTooltip = _ref.labelTooltip,
+    labelTooltipPlacement = _ref.labelTooltipPlacement,
+    labelFor = _ref.labelFor,
+    caption = _ref.caption,
+    hint = _ref.hint,
+    disabled = _ref.disabled,
+    showHintIcon = _ref.showHintIcon,
+    size = _ref.size,
+    validationState = _ref.validationState,
+    className = _ref.className;
   return {
     error,
     required,

package/dist/cjs/components/FieldSecure/FieldSecure.js

@@ -1,5 +1,7 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
 var __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
   function adopt(value) {
     return value instanceof P ? value : new P(function (resolve) {
@@ -56,54 +58,73 @@ const hooks_1 = require("../../hooks");
 const getValidationState_1 = require("../../utils/getValidationState");
 const FieldDecorator_1 = require("../FieldDecorator");
 exports.FieldSecure = (0, react_1.forwardRef)((_a, ref) => {
-  var {
-      id,
-      name,
-      value: valueProp,
-      placeholder,
-      maxLength,
-      disabled = false,
-      readonly = false,
-      showCopyButton: showCopyButtonProp = true,
-      allowMoreThanMaxLength = false,
-      hidden: hiddenProp,
-      onHiddenChange,
-      showHintIcon,
-      onChange: onChangeProp,
-      onFocus,
-      onBlur,
-      className,
-      label,
-      labelTooltip,
-      labelTooltipPlacement,
-      required = false,
-      caption,
-      hint,
-      size = input_private_1.SIZE.S,
-      validationState = constants_1.VALIDATION_STATE.Default,
-      prefixIcon,
-      error,
-      asyncValueGetter,
-      autoComplete,
-      autoFocus,
-      onCopyButtonClick
-    } = _a,
+  var id = _a.id,
+    name = _a.name,
+    valueProp = _a.value,
+    placeholder = _a.placeholder,
+    maxLength = _a.maxLength,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    _a$readonly = _a.readonly,
+    readonly = _a$readonly === void 0 ? false : _a$readonly,
+    _a$showCopyButton = _a.showCopyButton,
+    showCopyButtonProp = _a$showCopyButton === void 0 ? true : _a$showCopyButton,
+    _a$allowMoreThanMaxLe = _a.allowMoreThanMaxLength,
+    allowMoreThanMaxLength = _a$allowMoreThanMaxLe === void 0 ? false : _a$allowMoreThanMaxLe,
+    hiddenProp = _a.hidden,
+    onHiddenChange = _a.onHiddenChange,
+    showHintIcon = _a.showHintIcon,
+    onChangeProp = _a.onChange,
+    onFocus = _a.onFocus,
+    onBlur = _a.onBlur,
+    className = _a.className,
+    label = _a.label,
+    labelTooltip = _a.labelTooltip,
+    labelTooltipPlacement = _a.labelTooltipPlacement,
+    _a$required = _a.required,
+    required = _a$required === void 0 ? false : _a$required,
+    caption = _a.caption,
+    hint = _a.hint,
+    _a$size = _a.size,
+    size = _a$size === void 0 ? input_private_1.SIZE.S : _a$size,
+    _a$validationState = _a.validationState,
+    validationState = _a$validationState === void 0 ? constants_1.VALIDATION_STATE.Default : _a$validationState,
+    prefixIcon = _a.prefixIcon,
+    error = _a.error,
+    asyncValueGetter = _a.asyncValueGetter,
+    autoComplete = _a.autoComplete,
+    autoFocus = _a.autoFocus,
+    onCopyButtonClick = _a.onCopyButtonClick,
     rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "caption", "hint", "size", "validationState", "prefixIcon", "error", "asyncValueGetter", "autoComplete", "autoFocus", "onCopyButtonClick"]);
   const localRef = (0, react_1.useRef)(null);
   const copyButtonRef = (0, react_1.useRef)(null);
   const hideButtonRef = (0, react_1.useRef)(null);
-  const [isDataRequested, setIsDataRequested] = (0, react_1.useState)(false);
-  const [isLoading, setIsLoading] = (0, react_1.useState)(false);
-  const [value = '', onChange] = (0, hooks_1.useValueControl)({
-    value: valueProp,
-    defaultValue: '',
-    onChange: onChangeProp
-  });
-  const [hidden = true, setHidden] = (0, hooks_1.useValueControl)({
-    value: hiddenProp,
-    defaultValue: true,
-    onChange: onHiddenChange
-  });
+  const _ref = (0, react_1.useState)(false),
+    _ref2 = (0, _slicedToArray2.default)(_ref, 2),
+    isDataRequested = _ref2[0],
+    setIsDataRequested = _ref2[1];
+  const _ref3 = (0, react_1.useState)(false),
+    _ref4 = (0, _slicedToArray2.default)(_ref3, 2),
+    isLoading = _ref4[0],
+    setIsLoading = _ref4[1];
+  const _ref5 = (0, hooks_1.useValueControl)({
+      value: valueProp,
+      defaultValue: '',
+      onChange: onChangeProp
+    }),
+    _ref6 = (0, _slicedToArray2.default)(_ref5, 2),
+    _ref6$ = _ref6[0],
+    value = _ref6$ === void 0 ? '' : _ref6$,
+    onChange = _ref6[1];
+  const _ref7 = (0, hooks_1.useValueControl)({
+      value: hiddenProp,
+      defaultValue: true,
+      onChange: onHiddenChange
+    }),
+    _ref8 = (0, _slicedToArray2.default)(_ref7, 2),
+    _ref8$ = _ref8[0],
+    hidden = _ref8$ === void 0 ? true : _ref8$,
+    setHidden = _ref8[1];
   const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
   const showHideButton = !(readonly && !value);
   const fieldValidationState = (0, getValidationState_1.getValidationState)({
@@ -134,10 +155,8 @@ exports.FieldSecure = (0, react_1.forwardRef)((_a, ref) => {
     };
   });
   const toggleHidden = () => {
-    getAsyncValue().then(_ref => {
-      let {
-        success
-      } = _ref;
+    getAsyncValue().then(_ref9 => {
+      let success = _ref9.success;
       if (success) {
         setHidden(!hidden);
         if (!readonly) {
@@ -167,16 +186,15 @@ exports.FieldSecure = (0, react_1.forwardRef)((_a, ref) => {
     hidden,
     disabled: disabled || isLoading
   });
-  const {
-    postfixButtons,
-    inputTabIndex,
-    onInputKeyDown
-  } = (0, input_private_1.useButtonNavigation)({
-    inputRef: localRef,
-    postfixButtons: (0, react_1.useMemo)(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),
-    readonly,
-    submitKeys: ['Enter', 'Space', 'Tab']
-  });
+  const _ref0 = (0, input_private_1.useButtonNavigation)({
+      inputRef: localRef,
+      postfixButtons: (0, react_1.useMemo)(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),
+      readonly,
+      submitKeys: ['Enter', 'Space', 'Tab']
+    }),
+    postfixButtons = _ref0.postfixButtons,
+    inputTabIndex = _ref0.inputTabIndex,
+    onInputKeyDown = _ref0.onInputKeyDown;
   return (0, jsx_runtime_1.jsx)(FieldDecorator_1.FieldDecorator, Object.assign({
     className: className,
     label: label,