@snack-uikit/fields 0.19.1 → 0.19.3-preview-34ffedb5.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.19.2 (2024-04-25)
+
+
+### Bug Fixes
+
+* **PDS-0000:** remove required pinTop/pinBottom ([51bbe9f](https://github.com/cloud-ru-tech/snack-uikit/commit/51bbe9f6d79c50bd2aa41128a12b125eb91f625b))
+* **PDS-0000:** set default button type as button ([4ec64de](https://github.com/cloud-ru-tech/snack-uikit/commit/4ec64de508826df4a1e82fd8c75448d9919e563f))
+
+
+
+
+
 ## 0.19.1 (2024-04-24)
 
 

package/README.md

@@ -252,6 +252,7 @@ const [isOpen, setIsOpen] = useState(false);
 | showCopyButton | `boolean` | - | Отображение кнопки копирования |
 | allowMoreThanMaxLength | `boolean` | - | Можно ли вводить больше разрешённого кол-ва символов |
 | prefixIcon | `ReactElement<any, string \| JSXElementConstructor<any>>` | - | Иконка-префикс для поля |
+| onDataRequest | `() => Promise<void>` | - | Свойство позволяет грузить данные в поле по требованию |
 | value | `string` | - | Значение input |
 | onChange | `(value: string, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
 | disabled | `boolean` | - | Является ли поле деактивированным |
@@ -312,8 +313,6 @@ const [isOpen, setIsOpen] = useState(false);
 ### Props
 | name | type | default value | description |
 |------|------|---------------|-------------|
-| pinBottom* | `OptionProps[]` | - |  |
-| pinTop* | `OptionProps[]` | - |  |
 | options* | `OptionProps[]` | - |  |
 | disabled | `boolean` | false | Является ли поле деактивированным |
 | readonly | `boolean` | false false | Является ли поле доступным только для чтения |
@@ -337,6 +336,8 @@ const [isOpen, setIsOpen] = useState(false);
 | value | `ItemId \| ItemId[]` | - | Controlled состояние |
 | onChange | `OnChangeHandler<any>` | - | Controlled обработчик измения состояния |
 | defaultValue | `ItemId \| ItemId[]` | - | Начальное состояние |
+| pinTop | `OptionProps[]` | - |  |
+| pinBottom | `OptionProps[]` | - |  |
 | searchable | `boolean` | - |  |
 | showCopyButton | `boolean` | - | Отображение кнопки Копировать для поля (актуально только для `readonly = true`) |
 | showClearButton | `boolean` | true | Отображение кнопки очистки поля |

package/dist/components/FieldSecure/FieldSecure.d.ts

@@ -15,6 +15,8 @@ type FieldSecureOwnProps = {
     allowMoreThanMaxLength?: boolean;
     /** Иконка-префикс для поля */
     prefixIcon?: ReactElement;
+    /** Свойство позволяет грузить данные в поле по требованию */
+    onDataRequest?(): Promise<void>;
 };
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
 export declare const FieldSecure: import("react").ForwardRefExoticComponent<{

package/dist/components/FieldSecure/FieldSecure.js

@@ -1,3 +1,12 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -11,8 +20,9 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { jsx as _jsx } from "react/jsx-runtime";
 import mergeRefs from 'merge-refs';
-import { forwardRef, useMemo, useRef } from 'react';
+import { forwardRef, useMemo, useRef, useState } from 'react';
 import { InputPrivate, moveCursorToEnd, runAfterRerender, SIZE, useButtonNavigation, } from '@snack-uikit/input-private';
+import { Skeleton, WithSkeleton } from '@snack-uikit/skeleton';
 import { extractSupportProps } from '@snack-uikit/utils';
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
 import { FieldContainerPrivate } from '../../helperComponents';
@@ -20,10 +30,12 @@ import { useCopyButton, useHideButton, useValueControl } from '../../hooks';
 import { getValidationState } from '../../utils/getValidationState';
 import { FieldDecorator } from '../FieldDecorator';
 export const FieldSecure = 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, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error"]);
+    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, hint, size = SIZE.S, validationState = VALIDATION_STATE.Default, prefixIcon, error, onDataRequest } = _a, rest = __rest(_a, ["id", "name", "value", "placeholder", "maxLength", "disabled", "readonly", "showCopyButton", "allowMoreThanMaxLength", "hidden", "onHiddenChange", "showHintIcon", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "size", "validationState", "prefixIcon", "error", "onDataRequest"]);
     const localRef = useRef(null);
     const copyButtonRef = useRef(null);
     const hideButtonRef = useRef(null);
+    const [isDataRequested, setIsDataRequested] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const [value = '', onChange] = useValueControl({
         value: valueProp,
         defaultValue: '',
@@ -37,23 +49,58 @@ export const FieldSecure = forwardRef((_a, ref) => {
     const showCopyButton = showCopyButtonProp && Boolean(value) && readonly && !disabled;
     const showHideButton = !(readonly && !value);
     const fieldValidationState = getValidationState({ validationState, error });
-    const toggleHidden = () => {
-        setHidden(!hidden);
-        if (!readonly) {
-            runAfterRerender(() => {
-                var _a;
-                (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-                moveCursorToEnd(localRef.current);
-            });
+    const handleDataRequest = () => __awaiter(void 0, void 0, void 0, function* () {
+        if (!isDataRequested && onDataRequest) {
+            setIsLoading(true);
+            try {
+                yield onDataRequest();
+                setIsDataRequested(true);
+                return true;
+            }
+            catch (e) {
+                return false;
+            }
+            finally {
+                setIsLoading(false);
+            }
         }
+        return true;
+    });
+    const toggleHidden = () => {
+        handleDataRequest().then(isSuccess => {
+            if (isSuccess) {
+                setHidden(!hidden);
+                if (!readonly) {
+                    runAfterRerender(() => {
+                        var _a;
+                        (_a = localRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        moveCursorToEnd(localRef.current);
+                    });
+                }
+            }
+        });
     };
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const hideButtonSettings = useHideButton({ hideButtonRef, showHideButton, size, toggleHidden, hidden, disabled });
+    const copyButtonSettings = useCopyButton({
+        copyButtonRef,
+        showCopyButton,
+        size,
+        valueToCopy: value,
+        onDataRequest: handleDataRequest,
+        disabled: isLoading,
+    });
+    const hideButtonSettings = useHideButton({
+        hideButtonRef,
+        showHideButton,
+        size,
+        toggleHidden,
+        hidden,
+        disabled: disabled || isLoading,
+    });
     const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
         inputRef: localRef,
         buttons: useMemo(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),
         readonly,
         submitKeys: ['Enter', 'Space', 'Tab'],
     });
-    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) })));
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, length: maxLength ? { max: maxLength, current: value.length } : undefined, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, error: error, validationState: fieldValidationState }, extractSupportProps(rest), { children: _jsx(FieldContainerPrivate, { size: size, validationState: fieldValidationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: localRef, prefix: prefixIcon, postfix: buttons, children: _jsx(WithSkeleton, { skeleton: _jsx(Skeleton, { width: '100%', borderRadius: 2 }), loading: isLoading, children: _jsx(InputPrivate, { ref: mergeRefs(ref, localRef), "data-size": size, value: value, onChange: onChange, onFocus: onFocus, onBlur: onBlur, onKeyDown: onInputKeyDown, tabIndex: inputTabIndex, placeholder: placeholder, disabled: disabled, readonly: readonly, type: hidden ? 'password' : 'text', maxLength: allowMoreThanMaxLength ? undefined : maxLength || undefined, id: id, name: name, "data-test-id": 'field-secure__input' }) }) }) })));
 });

package/dist/components/FieldSelect/FieldSelectMultiple.d.ts

@@ -9,8 +9,8 @@ export declare const FieldSelectMultiple: import("react").ForwardRefExoticCompon
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
-    pinTop: import("./types").OptionProps[];
-    pinBottom: import("./types").OptionProps[];
+    pinTop?: import("./types").OptionProps[] | undefined;
+    pinBottom?: import("./types").OptionProps[] | undefined;
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;

package/dist/components/FieldSelect/FieldSelectSingle.d.ts

@@ -7,8 +7,8 @@ export declare const FieldSelectSingle: import("react").ForwardRefExoticComponen
     'data-test-id'?: string | undefined;
 } & import("react").AriaAttributes & {
     options: import("./types").OptionProps[];
-    pinTop: import("./types").OptionProps[];
-    pinBottom: import("./types").OptionProps[];
+    pinTop?: import("./types").OptionProps[] | undefined;
+    pinBottom?: import("./types").OptionProps[] | undefined;
     searchable?: boolean | undefined;
     showCopyButton?: boolean | undefined;
     showClearButton?: boolean | undefined;

package/dist/components/FieldSelect/types.d.ts

@@ -37,8 +37,8 @@ export type FieldSelectPrivateProps = InputProps & WrapperProps & {
 };
 type FiledSelectCommonProps = WithSupportProps<{
     options: OptionProps[];
-    pinTop: OptionProps[];
-    pinBottom: OptionProps[];
+    pinTop?: OptionProps[];
+    pinBottom?: OptionProps[];
     searchable?: boolean;
     /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */
     showCopyButton?: boolean;

package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.d.ts

@@ -6,6 +6,8 @@ type ButtonCopyValueProps = {
     onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
     onClick?: MouseEventHandler<HTMLButtonElement>;
     tabIndex?: number;
+    onDataRequest?(): Promise<boolean>;
+    disabled?: boolean;
 };
 export declare const ButtonCopyValue: import("react").ForwardRefExoticComponent<ButtonCopyValueProps & import("react").RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/helperComponents/ButtonCopyValue/ButtonCopyValue.js

@@ -3,22 +3,34 @@ import copyToClipboard from 'copy-to-clipboard';
 import { forwardRef, useEffect, useRef, useState } from 'react';
 import { getIcon } from './helpers';
 import styles from './styles.module.css';
-export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick }, ref) => {
+export const ButtonCopyValue = forwardRef(({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onDataRequest, disabled }, ref) => {
     const [isChecked, setIsChecked] = useState(false);
     const timerId = useRef();
     const openTooltip = () => setIsChecked(true);
     const closeTooltip = () => setIsChecked(false);
     const handleClick = event => {
+        const handleCopy = () => {
+            valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
+            openTooltip();
+            clearTimeout(timerId.current);
+            timerId.current = setTimeout(closeTooltip, 2000);
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        };
         event.stopPropagation();
-        valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
-        openTooltip();
-        clearTimeout(timerId.current);
-        timerId.current = setTimeout(closeTooltip, 2000);
-        onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        if (onDataRequest) {
+            onDataRequest().then(isSuccess => {
+                if (isSuccess) {
+                    handleCopy();
+                }
+            });
+        }
+        else {
+            handleCopy();
+        }
     };
     useEffect(() => () => {
         closeTooltip();
         clearTimeout(timerId.current);
     }, []);
-    return (_jsx("button", { className: styles.buttonCopyValue, "data-size": size, onClick: handleClick, "data-test-id": 'button-copy-value', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, type: 'button', children: getIcon({ size, isChecked }) }));
+    return (_jsx("button", { className: styles.buttonCopyValue, "data-size": size, "data-disabled": disabled || undefined, onClick: handleClick, "data-test-id": 'button-copy-value', ref: ref, onKeyDown: onKeyDown, tabIndex: tabIndex, type: 'button', disabled: disabled, children: getIcon({ size, isChecked }) }));
 });

package/dist/hooks/useCopyButton.d.ts

@@ -5,6 +5,8 @@ type UseCopyButtonProps = {
     showCopyButton: boolean;
     valueToCopy: string;
     size: Size;
+    onDataRequest?(): Promise<boolean>;
+    disabled?: boolean;
 };
-export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy }: UseCopyButtonProps): ButtonProps;
+export declare function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onDataRequest, disabled, }: UseCopyButtonProps): ButtonProps;
 export {};

package/dist/hooks/useCopyButton.js

@@ -2,11 +2,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useMemo } from 'react';
 import { BUTTON_SIZE_MAP } from '@snack-uikit/input-private';
 import { ButtonCopyValue } from '../helperComponents';
-export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy }) {
+export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy, onDataRequest, disabled, }) {
     return useMemo(() => ({
         id: 'copy',
         ref: copyButtonRef,
         show: showCopyButton,
-        render: props => _jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: valueToCopy })),
-    }), [copyButtonRef, showCopyButton, size, valueToCopy]);
+        render: props => (_jsx(ButtonCopyValue, Object.assign({}, props, { size: BUTTON_SIZE_MAP[size], valueToCopy: valueToCopy, onDataRequest: onDataRequest, disabled: disabled }))),
+    }), [copyButtonRef, disabled, onDataRequest, showCopyButton, size, valueToCopy]);
 }

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.19.1",
+  "version": "0.19.3-preview-34ffedb5.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -33,12 +33,13 @@
   "scripts": {},
   "dependencies": {
     "@snack-uikit/button": "0.17.1",
-    "@snack-uikit/calendar": "0.7.7",
+    "@snack-uikit/calendar": "0.7.8",
     "@snack-uikit/dropdown": "0.2.2",
     "@snack-uikit/icons": "0.20.1",
     "@snack-uikit/input-private": "3.1.2",
-    "@snack-uikit/list": "0.11.1",
+    "@snack-uikit/list": "0.11.2",
     "@snack-uikit/scroll": "0.5.3",
+    "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/slider": "0.1.9",
     "@snack-uikit/tag": "0.9.1",
     "@snack-uikit/tooltip": "0.13.2",
@@ -58,5 +59,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "06a0c7c3a2f092971d66bead5e89f74f4befee4b"
+  "gitHead": "7c21433a0f290c78176650374b137e2abafced96"
 }

package/src/components/FieldSecure/FieldSecure.tsx

@@ -1,5 +1,5 @@
 import mergeRefs from 'merge-refs';
-import { forwardRef, ReactElement, useMemo, useRef } from 'react';
+import { forwardRef, ReactElement, useMemo, useRef, useState } from 'react';
 
 import {
   InputPrivate,
@@ -9,6 +9,7 @@ import {
   SIZE,
   useButtonNavigation,
 } from '@snack-uikit/input-private';
+import { Skeleton, WithSkeleton } from '@snack-uikit/skeleton';
 import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
 
 import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
@@ -45,6 +46,8 @@ type FieldSecureOwnProps = {
   allowMoreThanMaxLength?: boolean;
   /** Иконка-префикс для поля */
   prefixIcon?: ReactElement;
+  /** Свойство позволяет грузить данные в поле по требованию */
+  onDataRequest?(): Promise<void>;
 };
 
 export type FieldSecureProps = WithSupportProps<FieldSecureOwnProps & InputProps & WrapperProps>;
@@ -77,6 +80,7 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
       validationState = VALIDATION_STATE.Default,
       prefixIcon,
       error,
+      onDataRequest,
       ...rest
     },
     ref,
@@ -84,6 +88,8 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
     const localRef = useRef<HTMLInputElement>(null);
     const copyButtonRef = useRef<HTMLButtonElement>(null);
     const hideButtonRef = useRef<HTMLButtonElement>(null);
+    const [isDataRequested, setIsDataRequested] = useState(false);
+    const [isLoading, setIsLoading] = useState(false);
     const [value = '', onChange] = useValueControl<string>({
       value: valueProp,
       defaultValue: '',
@@ -99,19 +105,55 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
 
     const fieldValidationState = getValidationState({ validationState, error });
 
-    const toggleHidden = () => {
-      setHidden(!hidden);
+    const handleDataRequest = async (): Promise<boolean> => {
+      if (!isDataRequested && onDataRequest) {
+        setIsLoading(true);
 
-      if (!readonly) {
-        runAfterRerender(() => {
-          localRef.current?.focus();
-          moveCursorToEnd(localRef.current);
-        });
+        try {
+          await onDataRequest();
+          setIsDataRequested(true);
+          return true;
+        } catch (e) {
+          return false;
+        } finally {
+          setIsLoading(false);
+        }
       }
+
+      return true;
+    };
+
+    const toggleHidden = () => {
+      handleDataRequest().then(isSuccess => {
+        if (isSuccess) {
+          setHidden(!hidden);
+
+          if (!readonly) {
+            runAfterRerender(() => {
+              localRef.current?.focus();
+              moveCursorToEnd(localRef.current);
+            });
+          }
+        }
+      });
     };
 
-    const copyButtonSettings = useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy: value });
-    const hideButtonSettings = useHideButton({ hideButtonRef, showHideButton, size, toggleHidden, hidden, disabled });
+    const copyButtonSettings = useCopyButton({
+      copyButtonRef,
+      showCopyButton,
+      size,
+      valueToCopy: value,
+      onDataRequest: handleDataRequest,
+      disabled: isLoading,
+    });
+    const hideButtonSettings = useHideButton({
+      hideButtonRef,
+      showHideButton,
+      size,
+      toggleHidden,
+      hidden,
+      disabled: disabled || isLoading,
+    });
     const { buttons, inputTabIndex, onInputKeyDown } = useButtonNavigation({
       inputRef: localRef,
       buttons: useMemo(() => [copyButtonSettings, hideButtonSettings], [copyButtonSettings, hideButtonSettings]),
@@ -147,24 +189,26 @@ export const FieldSecure = forwardRef<HTMLInputElement, FieldSecureProps>(
           prefix={prefixIcon}
           postfix={buttons}
         >
-          <InputPrivate
-            ref={mergeRefs(ref, localRef)}
-            data-size={size}
-            value={value}
-            onChange={onChange}
-            onFocus={onFocus}
-            onBlur={onBlur}
-            onKeyDown={onInputKeyDown}
-            tabIndex={inputTabIndex}
-            placeholder={placeholder}
-            disabled={disabled}
-            readonly={readonly}
-            type={hidden ? 'password' : 'text'}
-            maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
-            id={id}
-            name={name}
-            data-test-id='field-secure__input'
-          />
+          <WithSkeleton skeleton={<Skeleton width='100%' borderRadius={2} />} loading={isLoading}>
+            <InputPrivate
+              ref={mergeRefs(ref, localRef)}
+              data-size={size}
+              value={value}
+              onChange={onChange}
+              onFocus={onFocus}
+              onBlur={onBlur}
+              onKeyDown={onInputKeyDown}
+              tabIndex={inputTabIndex}
+              placeholder={placeholder}
+              disabled={disabled}
+              readonly={readonly}
+              type={hidden ? 'password' : 'text'}
+              maxLength={allowMoreThanMaxLength ? undefined : maxLength || undefined}
+              id={id}
+              name={name}
+              data-test-id='field-secure__input'
+            />
+          </WithSkeleton>
         </FieldContainerPrivate>
       </FieldDecorator>
     );

package/src/components/FieldSelect/types.ts

@@ -83,8 +83,8 @@ export type FieldSelectPrivateProps = InputProps & WrapperProps & { options: Opt
 type FiledSelectCommonProps = WithSupportProps<{
   options: OptionProps[];
 
-  pinTop: OptionProps[];
-  pinBottom: OptionProps[];
+  pinTop?: OptionProps[];
+  pinBottom?: OptionProps[];
 
   searchable?: boolean;
   /** Отображение кнопки Копировать для поля (актуально только для `readonly = true`) */

package/src/helperComponents/ButtonCopyValue/ButtonCopyValue.tsx

@@ -12,21 +12,36 @@ type ButtonCopyValueProps = {
   onKeyDown?: KeyboardEventHandler<HTMLButtonElement>;
   onClick?: MouseEventHandler<HTMLButtonElement>;
   tabIndex?: number;
+  onDataRequest?(): Promise<boolean>;
+  disabled?: boolean;
 };
 export const ButtonCopyValue = forwardRef<HTMLButtonElement, ButtonCopyValueProps>(
-  ({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick }, ref) => {
+  ({ size, valueToCopy, tabIndex = -1, onKeyDown, onClick, onDataRequest, disabled }, ref) => {
     const [isChecked, setIsChecked] = useState(false);
     const timerId = useRef<ReturnType<typeof setTimeout>>();
     const openTooltip = () => setIsChecked(true);
     const closeTooltip = () => setIsChecked(false);
 
     const handleClick: MouseEventHandler<HTMLButtonElement> = event => {
+      const handleCopy = () => {
+        valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
+        openTooltip();
+        clearTimeout(timerId.current);
+        timerId.current = setTimeout(closeTooltip, 2000);
+        onClick?.(event);
+      };
+
       event.stopPropagation();
-      valueToCopy && copyToClipboard(valueToCopy, { format: 'text/plain' });
-      openTooltip();
-      clearTimeout(timerId.current);
-      timerId.current = setTimeout(closeTooltip, 2000);
-      onClick?.(event);
+
+      if (onDataRequest) {
+        onDataRequest().then(isSuccess => {
+          if (isSuccess) {
+            handleCopy();
+          }
+        });
+      } else {
+        handleCopy();
+      }
     };
 
     useEffect(
@@ -41,12 +56,14 @@ export const ButtonCopyValue = forwardRef<HTMLButtonElement, ButtonCopyValueProp
       <button
         className={styles.buttonCopyValue}
         data-size={size}
+        data-disabled={disabled || undefined}
         onClick={handleClick}
         data-test-id='button-copy-value'
         ref={ref}
         onKeyDown={onKeyDown}
         tabIndex={tabIndex}
         type='button'
+        disabled={disabled}
       >
         {getIcon({ size, isChecked })}
       </button>

package/src/hooks/useCopyButton.tsx

@@ -9,16 +9,33 @@ type UseCopyButtonProps = {
   showCopyButton: boolean;
   valueToCopy: string;
   size: Size;
+  onDataRequest?(): Promise<boolean>;
+  disabled?: boolean;
 };
 
-export function useCopyButton({ copyButtonRef, showCopyButton, size, valueToCopy }: UseCopyButtonProps): ButtonProps {
+export function useCopyButton({
+  copyButtonRef,
+  showCopyButton,
+  size,
+  valueToCopy,
+  onDataRequest,
+  disabled,
+}: UseCopyButtonProps): ButtonProps {
   return useMemo(
     () => ({
       id: 'copy',
       ref: copyButtonRef,
       show: showCopyButton,
-      render: props => <ButtonCopyValue {...props} size={BUTTON_SIZE_MAP[size]} valueToCopy={valueToCopy} />,
+      render: props => (
+        <ButtonCopyValue
+          {...props}
+          size={BUTTON_SIZE_MAP[size]}
+          valueToCopy={valueToCopy}
+          onDataRequest={onDataRequest}
+          disabled={disabled}
+        />
+      ),
     }),
-    [copyButtonRef, showCopyButton, size, valueToCopy],
+    [copyButtonRef, disabled, onDataRequest, showCopyButton, size, valueToCopy],
   );
 }