@gravity-ui/querieskit 1.2.0 → 1.3.1

package/build/esm/components/AttachmentList/helpers/stringRequiredValidator.js

@@ -0,0 +1,19 @@
+import "core-js/modules/es.string.trim.js";
+import i18n from "../i18n";
+var DEFAULT_MAX_LENGTH = 256;
+export var stringRequiredValidator = function stringRequiredValidator(value) {
+  var maxLength = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : DEFAULT_MAX_LENGTH;
+  if (typeof value !== 'string') {
+    return i18n('alert_value-must-be-string');
+  }
+  if (!value.trim()) {
+    return i18n('alert_required-field');
+  }
+  if (value.length > maxLength) {
+    return i18n('alert_max-length', {
+      maxLength: maxLength
+    });
+  }
+  return null;
+};
+// #sourceMappingURL=stringRequiredValidator.js.map

package/build/esm/components/AttachmentList/helpers/stringRequiredValidator.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["i18n","DEFAULT_MAX_LENGTH","stringRequiredValidator","value","maxLength","arguments","length","undefined","trim"],"sources":["stringRequiredValidator.ts"],"sourcesContent":["import i18n from '../i18n';\n\nconst DEFAULT_MAX_LENGTH = 256;\n\nexport type Validator = (value: unknown) => string | null;\n\nexport const stringRequiredValidator: Validator = (\n    value: unknown,\n    maxLength: number = DEFAULT_MAX_LENGTH,\n) => {\n    if (typeof value !== 'string') {\n        return i18n('alert_value-must-be-string');\n    }\n\n    if (!value.trim()) {\n        return i18n('alert_required-field');\n    }\n\n    if (value.length > maxLength) {\n        return i18n('alert_max-length', {maxLength});\n    }\n\n    return null;\n};\n"],"mappings":";AAAA,OAAOA,IAAI;AAEX,IAAMC,kBAAkB,GAAG,GAAG;AAI9B,OAAO,IAAMC,uBAAkC,GAAG,SAArCA,uBAAkCA,CAC3CC,KAAc,EAEb;EAAA,IADDC,SAAiB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAGJ,kBAAkB;EAEtC,IAAI,OAAOE,KAAK,KAAK,QAAQ,EAAE;IAC3B,OAAOH,IAAI,CAAC,4BAA4B,CAAC;EAC7C;EAEA,IAAI,CAACG,KAAK,CAACK,IAAI,CAAC,CAAC,EAAE;IACf,OAAOR,IAAI,CAAC,sBAAsB,CAAC;EACvC;EAEA,IAAIG,KAAK,CAACG,MAAM,GAAGF,SAAS,EAAE;IAC1B,OAAOJ,IAAI,CAAC,kBAAkB,EAAE;MAACI,SAAS,EAATA;IAAS,CAAC,CAAC;EAChD;EAEA,OAAO,IAAI;AACf,CAAC","ignoreList":[]}

package/build/esm/components/AttachmentList/hooks/useKeyDownFormControl.d.ts

@@ -0,0 +1,4 @@
+export declare const useKeyDownFormControl: (onAccept: () => void, onCancel: () => void) => {
+    handleInputKeyDown: (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
+    handleEditorKeyDown: (event: React.KeyboardEvent<"div">) => void;
+};

package/build/esm/components/AttachmentList/hooks/useKeyDownFormControl.js

@@ -0,0 +1,21 @@
+export var useKeyDownFormControl = function useKeyDownFormControl(onAccept, onCancel) {
+  var handleInputKeyDown = function handleInputKeyDown(event) {
+    if (event.key === 'Enter' && !event.shiftKey) {
+      event.preventDefault();
+      onAccept();
+    }
+  };
+  var handleEditorKeyDown = function handleEditorKeyDown(event) {
+    if (event.key !== 'Escape' || event.nativeEvent.isComposing) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+  return {
+    handleInputKeyDown: handleInputKeyDown,
+    handleEditorKeyDown: handleEditorKeyDown
+  };
+};
+// #sourceMappingURL=useKeyDownFormControl.js.map

package/build/esm/components/AttachmentList/hooks/useKeyDownFormControl.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useKeyDownFormControl","onAccept","onCancel","handleInputKeyDown","event","key","shiftKey","preventDefault","handleEditorKeyDown","nativeEvent","isComposing","stopPropagation"],"sources":["useKeyDownFormControl.ts"],"sourcesContent":["export const useKeyDownFormControl = (onAccept: () => void, onCancel: () => void) => {\n    const handleInputKeyDown = (\n        event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>,\n    ) => {\n        if (event.key === 'Enter' && !event.shiftKey) {\n            event.preventDefault();\n            onAccept();\n        }\n    };\n\n    const handleEditorKeyDown = (event: React.KeyboardEvent<'div'>) => {\n        if (event.key !== 'Escape' || event.nativeEvent.isComposing) {\n            return;\n        }\n\n        event.preventDefault();\n        event.stopPropagation();\n        onCancel?.();\n    };\n\n    return {handleInputKeyDown, handleEditorKeyDown};\n};\n"],"mappings":"AAAA,OAAO,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,QAAoB,EAAEC,QAAoB,EAAK;EACjF,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CACpBC,KAAkE,EACjE;IACD,IAAIA,KAAK,CAACC,GAAG,KAAK,OAAO,IAAI,CAACD,KAAK,CAACE,QAAQ,EAAE;MAC1CF,KAAK,CAACG,cAAc,CAAC,CAAC;MACtBN,QAAQ,CAAC,CAAC;IACd;EACJ,CAAC;EAED,IAAMO,mBAAmB,GAAG,SAAtBA,mBAAmBA,CAAIJ,KAAiC,EAAK;IAC/D,IAAIA,KAAK,CAACC,GAAG,KAAK,QAAQ,IAAID,KAAK,CAACK,WAAW,CAACC,WAAW,EAAE;MACzD;IACJ;IAEAN,KAAK,CAACG,cAAc,CAAC,CAAC;IACtBH,KAAK,CAACO,eAAe,CAAC,CAAC;IACvBT,QAAQ,aAARA,QAAQ,eAARA,QAAQ,CAAG,CAAC;EAChB,CAAC;EAED,OAAO;IAACC,kBAAkB,EAAlBA,kBAAkB;IAAEK,mBAAmB,EAAnBA;EAAmB,CAAC;AACpD,CAAC","ignoreList":[]}

package/build/esm/components/AttachmentList/hooks/useLabelRef.d.ts

@@ -0,0 +1,4 @@
+export declare const useLabelRef: (labelText: string) => {
+    labelRef: import("react").RefObject<HTMLLabelElement | null>;
+    labelWidth: number;
+};

package/build/esm/components/AttachmentList/hooks/useLabelRef.js

@@ -0,0 +1,28 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import { useLayoutEffect, useRef, useState } from 'react';
+export var useLabelRef = function useLabelRef(labelText) {
+  var labelRef = useRef(null);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    labelWidth = _useState2[0],
+    setLabelWidth = _useState2[1];
+  useLayoutEffect(function () {
+    var label = labelRef.current;
+    if (!label) return undefined;
+    var updateLabelWidth = function updateLabelWidth() {
+      return setLabelWidth(label.offsetWidth);
+    };
+    updateLabelWidth();
+    if (typeof ResizeObserver === 'undefined') return undefined;
+    var observer = new ResizeObserver(updateLabelWidth);
+    observer.observe(label);
+    return function () {
+      return observer.disconnect();
+    };
+  }, [labelText]);
+  return {
+    labelRef: labelRef,
+    labelWidth: labelWidth
+  };
+};
+// #sourceMappingURL=useLabelRef.js.map

package/build/esm/components/AttachmentList/hooks/useLabelRef.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["useLayoutEffect","useRef","useState","useLabelRef","labelText","labelRef","_useState","_useState2","_slicedToArray","labelWidth","setLabelWidth","label","current","undefined","updateLabelWidth","offsetWidth","ResizeObserver","observer","observe","disconnect"],"sources":["useLabelRef.ts"],"sourcesContent":["import {useLayoutEffect, useRef, useState} from 'react';\n\nexport const useLabelRef = (labelText: string) => {\n    const labelRef = useRef<HTMLLabelElement>(null);\n    const [labelWidth, setLabelWidth] = useState(0);\n\n    useLayoutEffect(() => {\n        const label = labelRef.current;\n\n        if (!label) return undefined;\n\n        const updateLabelWidth = () => setLabelWidth(label.offsetWidth);\n\n        updateLabelWidth();\n\n        if (typeof ResizeObserver === 'undefined') return undefined;\n\n        const observer = new ResizeObserver(updateLabelWidth);\n        observer.observe(label);\n\n        return () => observer.disconnect();\n    }, [labelText]);\n\n    return {labelRef, labelWidth};\n};\n"],"mappings":";AAAA,SAAQA,eAAe,EAAEC,MAAM,EAAEC,QAAQ,QAAO,OAAO;AAEvD,OAAO,IAAMC,WAAW,GAAG,SAAdA,WAAWA,CAAIC,SAAiB,EAAK;EAC9C,IAAMC,QAAQ,GAAGJ,MAAM,CAAmB,IAAI,CAAC;EAC/C,IAAAK,SAAA,GAAoCJ,QAAQ,CAAC,CAAC,CAAC;IAAAK,UAAA,GAAAC,cAAA,CAAAF,SAAA;IAAxCG,UAAU,GAAAF,UAAA;IAAEG,aAAa,GAAAH,UAAA;EAEhCP,eAAe,CAAC,YAAM;IAClB,IAAMW,KAAK,GAAGN,QAAQ,CAACO,OAAO;IAE9B,IAAI,CAACD,KAAK,EAAE,OAAOE,SAAS;IAE5B,IAAMC,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAA;MAAA,OAASJ,aAAa,CAACC,KAAK,CAACI,WAAW,CAAC;IAAA;IAE/DD,gBAAgB,CAAC,CAAC;IAElB,IAAI,OAAOE,cAAc,KAAK,WAAW,EAAE,OAAOH,SAAS;IAE3D,IAAMI,QAAQ,GAAG,IAAID,cAAc,CAACF,gBAAgB,CAAC;IACrDG,QAAQ,CAACC,OAAO,CAACP,KAAK,CAAC;IAEvB,OAAO;MAAA,OAAMM,QAAQ,CAACE,UAAU,CAAC,CAAC;IAAA;EACtC,CAAC,EAAE,CAACf,SAAS,CAAC,CAAC;EAEf,OAAO;IAACC,QAAQ,EAARA,QAAQ;IAAEI,UAAU,EAAVA;EAAU,CAAC;AACjC,CAAC","ignoreList":[]}

package/build/esm/components/AttachmentList/i18n/dicts.d.ts

@@ -0,0 +1,23 @@
+declare const _default: {
+    en: {
+        field_link: string;
+        field_token: string;
+        field_name: string;
+        action_save: string;
+        action_cancel: string;
+        "alert_value-must-be-string": string;
+        "alert_required-field": string;
+        "alert_max-length": string;
+    };
+    ru: {
+        field_link: string;
+        field_token: string;
+        field_name: string;
+        action_save: string;
+        action_cancel: string;
+        "alert_value-must-be-string": string;
+        "alert_required-field": string;
+        "alert_max-length": string;
+    };
+};
+export default _default;

package/build/esm/components/AttachmentList/i18n/dicts.js

@@ -0,0 +1,7 @@
+import en from "./en.json";
+import ru from "./ru.json";
+export default {
+  en: en,
+  ru: ru
+};
+// #sourceMappingURL=dicts.js.map

package/build/esm/components/AttachmentList/i18n/dicts.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["en","ru"],"sources":["dicts.ts"],"sourcesContent":["import en from './en.json';\nimport ru from './ru.json';\n\nexport default {en, ru};\n"],"mappings":"AAAA,OAAOA,EAAE;AACT,OAAOC,EAAE;AAET,eAAe;EAACD,EAAE,EAAFA,EAAE;EAAEC,EAAE,EAAFA;AAAE,CAAC","ignoreList":[]}

package/build/esm/components/AttachmentList/i18n/en.json

@@ -0,0 +1,10 @@
+{
+  "field_link": "Link:",
+  "field_token": "Token:",
+  "field_name": "Name:",
+  "action_save": "Save",
+  "action_cancel": "Cancel",
+  "alert_value-must-be-string": "Value must be a string",
+  "alert_required-field": "Required field",
+  "alert_max-length": "Maximum length is {{maxLength}}"
+}

package/build/esm/components/AttachmentList/i18n/index.d.ts

@@ -0,0 +1,6 @@
+declare const _default: ((key: "field_link" | "field_token" | "field_name" | "action_save" | "action_cancel" | "alert_value-must-be-string" | "alert_required-field" | "alert_max-length", params?: import("@gravity-ui/i18n").Params) => string) & {
+    keysetData: {
+        "qp:attachment-list": Record<"field_link" | "field_token" | "field_name" | "action_save" | "action_cancel" | "alert_value-must-be-string" | "alert_required-field" | "alert_max-length", import("@gravity-ui/i18n").KeyData>;
+    };
+};
+export default _default;

package/build/esm/components/AttachmentList/i18n/index.js

@@ -0,0 +1,4 @@
+import { addI18Keysets } from "../../../i18n";
+import dicts from "./dicts";
+export default addI18Keysets('qp:attachment-list', dicts);
+// #sourceMappingURL=index.js.map

package/build/esm/components/AttachmentList/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["addI18Keysets","dicts"],"sources":["index.ts"],"sourcesContent":["import {addI18Keysets} from '../../../i18n';\n\nimport dicts from './dicts';\n\nexport default addI18Keysets('qp:attachment-list', dicts);\n"],"mappings":"AAAA,SAAQA,aAAa;AAErB,OAAOC,KAAK;AAEZ,eAAeD,aAAa,CAAC,oBAAoB,EAAEC,KAAK,CAAC","ignoreList":[]}

package/build/esm/components/AttachmentList/i18n/ru.json

@@ -0,0 +1,10 @@
+{
+  "field_link": "Ссылка:",
+  "field_token": "Токен:",
+  "field_name": "Имя:",
+  "action_save": "Сохранить",
+  "action_cancel": "Отменить",
+  "alert_value-must-be-string": "Значение должно быть строкой",
+  "alert_required-field": "Обязательное поле",
+  "alert_max-length": "Максимальная длина — {{maxLength}}"
+}

package/build/esm/components/AttachmentList/index.d.ts

@@ -0,0 +1,4 @@
+export { AttachmentList } from './AttachmentList';
+export type { AttachmentListProps } from './AttachmentList';
+export * from './internal/EditAttachmentItem';
+export * from './internal/AttachmentItem';

package/build/esm/components/AttachmentList/index.js

@@ -0,0 +1,4 @@
+export { AttachmentList } from "./AttachmentList";
+export * from "./internal/EditAttachmentItem";
+export * from "./internal/AttachmentItem";
+// #sourceMappingURL=index.js.map

package/build/esm/components/AttachmentList/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AttachmentList"],"sources":["index.ts"],"sourcesContent":["export {AttachmentList} from './AttachmentList';\nexport type {AttachmentListProps} from './AttachmentList';\nexport * from './internal/EditAttachmentItem';\nexport * from './internal/AttachmentItem';\n"],"mappings":"AAAA,SAAQA,cAAc;AAEtB;AACA","ignoreList":[]}

package/build/esm/components/AttachmentList/internal/AttachmentItem/AttachmentItem.css

@@ -0,0 +1,18 @@
+.qp-attachment-item__info {
+  flex: 1;
+  min-width: 0;
+}
+.qp-attachment-item__actions {
+  flex-shrink: 0;
+}
+.qp-attachment-item__attachment-name {
+  flex: 1;
+  min-width: 0;
+}
+.qp-attachment-item_wasAdded {
+  background-color: var(--g-color-base-positive-light);
+}
+.qp-attachment-item_wasEdited {
+  background-color: var(--g-color-base-info-light);
+}
+/*# sourceMappingURL=AttachmentItem.css.map */

package/build/esm/components/AttachmentList/internal/AttachmentItem/AttachmentItem.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["AttachmentItem.scss"],"names":[],"mappings":"AACI;EACI,OAAA;EACA,YAAA;AAAR;AAGI;EACI,cAAA;AADR;AAII;EACI,OAAA;EACA,YAAA;AAFR;AAKI;EACI,oDAAA;AAHR;AAMI;EACI,gDAAA;AAJR","file":"AttachmentItem.css","sourcesContent":[".qp-attachment-item {\n    &__info {\n        flex: 1;\n        min-width: 0;\n    }\n\n    &__actions {\n        flex-shrink: 0;\n    }\n\n    &__attachment-name {\n        flex: 1;\n        min-width: 0;\n    }\n\n    &_wasAdded {\n        background-color: var(--g-color-base-positive-light);\n    }\n\n    &_wasEdited {\n        background-color: var(--g-color-base-info-light);\n    }\n}\n"],"sourceRoot":""}

package/build/esm/components/AttachmentList/internal/AttachmentItem/AttachmentItem.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import './AttachmentItem.scss';
+export type AttachmentItemProps = {
+    attachment: {
+        id: string;
+        name: string;
+        link?: string;
+    };
+    wasEdited?: boolean;
+    wasAdded?: boolean;
+    onEdit?: (attachment: AttachmentItemProps['attachment']) => void;
+    onDelete?: (attachment: AttachmentItemProps['attachment']) => void;
+    onRevert?: (attachment: AttachmentItemProps['attachment']) => void;
+    isDeleted?: boolean;
+};
+export declare const AttachmentItem: ({ attachment, wasAdded, wasEdited, onEdit, onDelete, onRevert, isDeleted, }: AttachmentItemProps) => React.JSX.Element;

package/build/esm/components/AttachmentList/internal/AttachmentItem/AttachmentItem.js

@@ -0,0 +1,98 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.string.link.js";
+import React, { useMemo, useState } from 'react';
+import { Button, Flex, Icon, Text } from '@gravity-ui/uikit';
+import { ArrowRotateLeft, Link, Pencil, TrashBin } from '@gravity-ui/icons';
+import { getAttachmentIcon } from "../../helpers/getIconByAttachmentName";
+import cn from 'bem-cn-lite';
+import "./AttachmentItem.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('qp-attachment-item');
+export var AttachmentItem = function AttachmentItem(_ref) {
+  var attachment = _ref.attachment,
+    wasAdded = _ref.wasAdded,
+    wasEdited = _ref.wasEdited,
+    onEdit = _ref.onEdit,
+    onDelete = _ref.onDelete,
+    onRevert = _ref.onRevert,
+    isDeleted = _ref.isDeleted;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isHovered = _useState2[0],
+    setIsHovered = _useState2[1];
+  var attachmentIcon = useMemo(function () {
+    if (typeof attachment.link === 'string') return Link;
+    return getAttachmentIcon(attachment.name);
+  }, [attachment.name, attachment.link]);
+  return /*#__PURE__*/_jsxs(Flex, {
+    width: "100%",
+    height: "32px",
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    },
+    alignItems: "center",
+    justifyContent: "space-between",
+    spacing: {
+      px: 4
+    },
+    className: block({
+      wasEdited: wasEdited,
+      wasAdded: wasAdded
+    }),
+    children: [/*#__PURE__*/_jsxs(Flex, {
+      gap: 2,
+      alignItems: "center",
+      className: block('info'),
+      children: [/*#__PURE__*/_jsx(Icon, {
+        width: 16,
+        className: block('attachment-icon'),
+        data: attachmentIcon
+      }), /*#__PURE__*/_jsx(Text, {
+        variant: "body-1",
+        ellipsis: true,
+        className: block('attachment-name'),
+        children: attachment.name
+      })]
+    }), isHovered && !isDeleted && /*#__PURE__*/_jsxs(Flex, {
+      gap: 1,
+      className: block('actions'),
+      children: [/*#__PURE__*/_jsx(Button, {
+        size: "s",
+        view: "flat",
+        onClick: function onClick() {
+          return onEdit === null || onEdit === void 0 ? void 0 : onEdit(attachment);
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          data: Pencil
+        })
+      }), /*#__PURE__*/_jsx(Button, {
+        size: "s",
+        view: "flat",
+        onClick: function onClick() {
+          return onDelete === null || onDelete === void 0 ? void 0 : onDelete(attachment);
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          data: TrashBin
+        })
+      })]
+    }), isHovered && isDeleted && /*#__PURE__*/_jsx(Flex, {
+      gap: 1,
+      className: block('actions'),
+      children: /*#__PURE__*/_jsx(Button, {
+        size: "s",
+        view: "flat",
+        onClick: function onClick() {
+          return onRevert === null || onRevert === void 0 ? void 0 : onRevert(attachment);
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          data: ArrowRotateLeft
+        })
+      })
+    })]
+  });
+};
+// #sourceMappingURL=AttachmentItem.js.map

package/build/esm/components/AttachmentList/internal/AttachmentItem/AttachmentItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useMemo","useState","Button","Flex","Icon","Text","ArrowRotateLeft","Link","Pencil","TrashBin","getAttachmentIcon","cn","jsx","_jsx","jsxs","_jsxs","block","AttachmentItem","_ref","attachment","wasAdded","wasEdited","onEdit","onDelete","onRevert","isDeleted","_useState","_useState2","_slicedToArray","isHovered","setIsHovered","attachmentIcon","link","name","width","height","onMouseEnter","onMouseLeave","alignItems","justifyContent","spacing","px","className","children","gap","data","variant","ellipsis","size","view","onClick"],"sources":["AttachmentItem.tsx"],"sourcesContent":["import React, {useMemo, useState} from 'react';\nimport {Button, Flex, Icon, Text} from '@gravity-ui/uikit';\nimport {ArrowRotateLeft, Link, Pencil, TrashBin} from '@gravity-ui/icons';\nimport {getAttachmentIcon} from '../../helpers/getIconByAttachmentName';\nimport cn from 'bem-cn-lite';\nimport './AttachmentItem.scss';\n\nexport type AttachmentItemProps = {\n    attachment: {id: string; name: string; link?: string};\n    wasEdited?: boolean;\n    wasAdded?: boolean;\n    onEdit?: (attachment: AttachmentItemProps['attachment']) => void;\n    onDelete?: (attachment: AttachmentItemProps['attachment']) => void;\n    onRevert?: (attachment: AttachmentItemProps['attachment']) => void;\n    isDeleted?: boolean;\n};\n\nconst block = cn('qp-attachment-item');\n\nexport const AttachmentItem = ({\n    attachment,\n    wasAdded,\n    wasEdited,\n    onEdit,\n    onDelete,\n    onRevert,\n    isDeleted,\n}: AttachmentItemProps) => {\n    const [isHovered, setIsHovered] = useState(false);\n\n    const attachmentIcon = useMemo(() => {\n        if (typeof attachment.link === 'string') return Link;\n        return getAttachmentIcon(attachment.name);\n    }, [attachment.name, attachment.link]);\n\n    return (\n        <Flex\n            width=\"100%\"\n            height=\"32px\"\n            onMouseEnter={() => setIsHovered(true)}\n            onMouseLeave={() => setIsHovered(false)}\n            alignItems=\"center\"\n            justifyContent=\"space-between\"\n            spacing={{px: 4}}\n            className={block({wasEdited, wasAdded})}\n        >\n            <Flex gap={2} alignItems=\"center\" className={block('info')}>\n                <Icon width={16} className={block('attachment-icon')} data={attachmentIcon} />\n                <Text variant=\"body-1\" ellipsis className={block('attachment-name')}>\n                    {attachment.name}\n                </Text>\n            </Flex>\n\n            {isHovered && !isDeleted && (\n                <Flex gap={1} className={block('actions')}>\n                    <Button size=\"s\" view=\"flat\" onClick={() => onEdit?.(attachment)}>\n                        <Icon data={Pencil} />\n                    </Button>\n\n                    <Button size=\"s\" view=\"flat\" onClick={() => onDelete?.(attachment)}>\n                        <Icon data={TrashBin} />\n                    </Button>\n                </Flex>\n            )}\n\n            {isHovered && isDeleted && (\n                <Flex gap={1} className={block('actions')}>\n                    <Button size=\"s\" view=\"flat\" onClick={() => onRevert?.(attachment)}>\n                        <Icon data={ArrowRotateLeft} />\n                    </Button>\n                </Flex>\n            )}\n        </Flex>\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/build/esm/components/AttachmentList/internal/AttachmentItem/AttachmentItem.scss

@@ -0,0 +1,23 @@
+.qp-attachment-item {
+    &__info {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &__actions {
+        flex-shrink: 0;
+    }
+
+    &__attachment-name {
+        flex: 1;
+        min-width: 0;
+    }
+
+    &_wasAdded {
+        background-color: var(--g-color-base-positive-light);
+    }
+
+    &_wasEdited {
+        background-color: var(--g-color-base-info-light);
+    }
+}

package/build/esm/components/AttachmentList/internal/AttachmentItem/index.d.ts

@@ -0,0 +1,2 @@
+export { AttachmentItem } from './AttachmentItem';
+export type { AttachmentItemProps } from './AttachmentItem';

package/build/esm/components/AttachmentList/internal/AttachmentItem/index.js

@@ -0,0 +1,2 @@
+export { AttachmentItem } from "./AttachmentItem";
+// #sourceMappingURL=index.js.map

package/build/esm/components/AttachmentList/internal/AttachmentItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["AttachmentItem"],"sources":["index.ts"],"sourcesContent":["export {AttachmentItem} from './AttachmentItem';\nexport type {AttachmentItemProps} from './AttachmentItem';\n"],"mappings":"AAAA,SAAQA,cAAc","ignoreList":[]}

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditAttachmentItem.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { EditFileItemProps } from './FileEdit';
+import type { EditLinkItemProps } from './EditLinkItem';
+export type EditAttachmentItemProps = (EditFileItemProps & {
+    type: 'file';
+}) | (EditLinkItemProps & {
+    type: 'link';
+});
+export declare const EditAttachmentItem: ({ ...props }: EditAttachmentItemProps) => React.JSX.Element;

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditAttachmentItem.js

@@ -0,0 +1,15 @@
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
+import "core-js/modules/es.object.assign.js";
+import React from 'react';
+import { FileEdit } from "./FileEdit";
+import { EditLinkItem } from "./EditLinkItem";
+import { jsx as _jsx } from "react/jsx-runtime";
+export var EditAttachmentItem = function EditAttachmentItem(_ref) {
+  var props = Object.assign({}, (_objectDestructuringEmpty(_ref), _ref));
+  if (props.type === 'file') {
+    return /*#__PURE__*/_jsx(FileEdit, _objectSpread({}, props));
+  }
+  return /*#__PURE__*/_jsx(EditLinkItem, _objectSpread({}, props));
+};
+// #sourceMappingURL=EditAttachmentItem.js.map

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditAttachmentItem.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","FileEdit","EditLinkItem","jsx","_jsx","EditAttachmentItem","_ref","props","Object","assign","_objectDestructuringEmpty","type","_objectSpread"],"sources":["EditAttachmentItem.tsx"],"sourcesContent":["import React from 'react';\nimport {FileEdit} from './FileEdit';\nimport {EditLinkItem} from './EditLinkItem';\nimport type {EditFileItemProps} from './FileEdit';\nimport type {EditLinkItemProps} from './EditLinkItem';\n\nexport type EditAttachmentItemProps =\n    | (EditFileItemProps & {\n          type: 'file';\n      })\n    | (EditLinkItemProps & {\n          type: 'link';\n      });\n\nexport const EditAttachmentItem = ({...props}: EditAttachmentItemProps) => {\n    if (props.type === 'file') {\n        return <FileEdit {...props} />;\n    }\n\n    return <EditLinkItem {...props} />;\n};\n"],"mappings":";;;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAAQC,QAAQ;AAChB,SAAQC,YAAY;AAAwB,SAAAC,GAAA,IAAAC,IAAA;AAY5C,OAAO,IAAMC,kBAAkB,GAAG,SAArBA,kBAAkBA,CAAAC,IAAA,EAA4C;EAAA,IAApCC,KAAK,GAAAC,MAAA,CAAAC,MAAA,MAAAC,yBAAA,CAAAJ,IAAA,GAAAA,IAAA;EACxC,IAAIC,KAAK,CAACI,IAAI,KAAK,MAAM,EAAE;IACvB,oBAAOP,IAAA,CAACH,QAAQ,EAAAW,aAAA,KAAKL,KAAK,CAAG,CAAC;EAClC;EAEA,oBAAOH,IAAA,CAACF,YAAY,EAAAU,aAAA,KAAKL,KAAK,CAAG,CAAC;AACtC,CAAC","ignoreList":[]}

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditLinkItem.css

@@ -0,0 +1,17 @@
+.edit-link-item__link-field-container {
+  padding: 1px;
+}
+.edit-link-item__link-field-label {
+  position: absolute;
+  z-index: 1;
+  top: calc(var(--g-spacing-1) + 1px);
+  left: var(--g-spacing-2);
+  font-weight: 600;
+}
+.edit-link-item .g-select {
+  padding: 1px;
+}
+.edit-link-item .g-text-input {
+  padding: 1px;
+}
+/*# sourceMappingURL=EditLinkItem.css.map */

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditLinkItem.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["EditLinkItem.scss"],"names":[],"mappings":"AACI;EACI,YAAA;AAAR;AAGI;EACI,kBAAA;EACA,UAAA;EACA,mCAAA;EACA,wBAAA;EACA,gBAAA;AADR;AAII;EACI,YAAA;AAFR;AAKI;EACI,YAAA;AAHR","file":"EditLinkItem.css","sourcesContent":[".edit-link-item {\n    &__link-field-container {\n        padding: 1px;\n    }\n\n    &__link-field-label {\n        position: absolute;\n        z-index: 1;\n        inset-block-start: calc(var(--g-spacing-1) + 1px);\n        inset-inline-start: var(--g-spacing-2);\n        font-weight: 600;\n    }\n\n    .g-select {\n        padding: 1px;\n    }\n\n    .g-text-input {\n        padding: 1px;\n    }\n}"],"sourceRoot":""}

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditLinkItem.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ObjectLinkValidator } from '../../helpers/objectLinkValidator';
+import './EditLinkItem.scss';
+export type EditLinkValues = {
+    link: string;
+    token: string;
+    name: string;
+};
+export type EditLinkItemProps = {
+    linkLabel?: string;
+    tokenLabel?: string;
+    nameLabel?: string;
+    onAccept?: (values: EditLinkValues) => void;
+    onCancel?: () => void;
+    onChange?: (pathedValues: EditLinkValues) => void;
+    tokens?: {
+        value: string;
+        title: string;
+    }[];
+    values?: EditLinkValues;
+    defaultValues?: EditLinkValues;
+    validator?: ObjectLinkValidator;
+};
+export declare const EditLinkItem: ({ linkLabel: cutomerLinkLabel, tokenLabel: customerTokenLabel, nameLabel: customeNameLabel, onAccept, onCancel, onChange, tokens, values: customerValues, validator, defaultValues, }: EditLinkItemProps) => React.JSX.Element;

package/build/esm/components/AttachmentList/internal/EditAttachmentItem/EditLinkItem.js

@@ -0,0 +1,167 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/objectSpread2";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import "core-js/modules/es.array.iterator.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.iterator.constructor.js";
+import "core-js/modules/es.iterator.map.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.string.link.js";
+import "core-js/modules/web.dom-collections.iterator.js";
+import React, { useId, useRef, useState } from 'react';
+import { Box, Button, Flex, Icon, Select, Text, TextArea, TextInput } from '@gravity-ui/uikit';
+import { Check, Xmark } from '@gravity-ui/icons';
+import { useLabelRef } from "../../hooks/useLabelRef";
+import { useKeyDownFormControl } from "../../hooks/useKeyDownFormControl";
+import { objectLinkValidator } from "../../helpers/objectLinkValidator";
+import cn from 'bem-cn-lite';
+import i18n from "../../i18n";
+import "./EditLinkItem.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+var block = cn('edit-link-item');
+export var EditLinkItem = function EditLinkItem(_ref) {
+  var cutomerLinkLabel = _ref.linkLabel,
+    customerTokenLabel = _ref.tokenLabel,
+    customeNameLabel = _ref.nameLabel,
+    onAccept = _ref.onAccept,
+    onCancel = _ref.onCancel,
+    onChange = _ref.onChange,
+    tokens = _ref.tokens,
+    customerValues = _ref.values,
+    _ref$validator = _ref.validator,
+    validator = _ref$validator === void 0 ? objectLinkValidator : _ref$validator,
+    defaultValues = _ref.defaultValues;
+  var _useState = useState(_objectSpread(_objectSpread({
+      link: '',
+      token: '',
+      name: ''
+    }, customerValues), defaultValues !== null && defaultValues !== void 0 ? defaultValues : {})),
+    _useState2 = _slicedToArray(_useState, 2),
+    innerValues = _useState2[0],
+    setInnerValues = _useState2[1];
+  var _useState3 = useState(null),
+    _useState4 = _slicedToArray(_useState3, 2),
+    errors = _useState4[0],
+    setErrors = _useState4[1];
+  var linkInputId = useId();
+  var linkLabel = cutomerLinkLabel !== null && cutomerLinkLabel !== void 0 ? cutomerLinkLabel : i18n('field_link');
+  var tokenLabel = customerTokenLabel !== null && customerTokenLabel !== void 0 ? customerTokenLabel : i18n('field_token');
+  var nameLabel = customeNameLabel !== null && customeNameLabel !== void 0 ? customeNameLabel : i18n('field_name');
+  var values = customerValues !== null && customerValues !== void 0 ? customerValues : innerValues;
+  var _useLabelRef = useLabelRef(linkLabel),
+    labelRef = _useLabelRef.labelRef,
+    labelWidth = _useLabelRef.labelWidth;
+  var wasSubmittedRef = useRef(false);
+  var isTokenRequired = tokens && (tokens === null || tokens === void 0 ? void 0 : tokens.length) > 0;
+  var handleUpdate = function handleUpdate(key, patcValue) {
+    var newValues = _objectSpread(_objectSpread({}, values), {}, _defineProperty({}, key, patcValue));
+    if (errors || wasSubmittedRef.current) {
+      setErrors(validator(newValues, isTokenRequired));
+    }
+    setInnerValues(newValues);
+    onChange === null || onChange === void 0 || onChange(newValues);
+  };
+  var handleAccept = function handleAccept() {
+    var validResult = validator(values, isTokenRequired);
+    wasSubmittedRef.current = true;
+    if (validResult) {
+      setErrors(validResult);
+      return;
+    }
+    onAccept === null || onAccept === void 0 || onAccept(values);
+  };
+  var handleCancel = function handleCancel() {
+    onCancel === null || onCancel === void 0 || onCancel();
+  };
+  var handleLinkScroll = function handleLinkScroll(event) {
+    if (labelRef.current) {
+      labelRef.current.style.transform = "translateY(-".concat(event.currentTarget.scrollTop, "px)");
+    }
+  };
+  var _useKeyDownFormContro = useKeyDownFormControl(handleAccept, handleCancel),
+    handleEditorKeyDown = _useKeyDownFormContro.handleEditorKeyDown,
+    handleInputKeyDown = _useKeyDownFormContro.handleInputKeyDown;
+  return /*#__PURE__*/_jsxs(Flex, {
+    onKeyDown: handleEditorKeyDown,
+    className: block(),
+    width: "100%",
+    spacing: {
+      px: 4,
+      py: 3
+    },
+    direction: "column",
+    gap: 2,
+    children: [/*#__PURE__*/_jsxs(Box, {
+      overflow: "hidden",
+      className: block('link-field-container'),
+      position: "relative",
+      children: [/*#__PURE__*/_jsx(Text, {
+        ref: labelRef,
+        as: "label",
+        htmlFor: linkInputId,
+        className: block('link-field-label'),
+        children: linkLabel
+      }), /*#__PURE__*/_jsx(TextArea, {
+        id: linkInputId,
+        value: values.link,
+        minRows: 3,
+        maxRows: 5,
+        hasClear: true,
+        autoFocus: true,
+        error: errors === null || errors === void 0 ? void 0 : errors.link,
+        errorMessage: errors === null || errors === void 0 ? void 0 : errors.link,
+        onKeyDown: handleInputKeyDown,
+        onUpdate: function onUpdate(v) {
+          return handleUpdate('link', v);
+        },
+        controlProps: {
+          onScroll: handleLinkScroll,
+          style: {
+            textIndent: labelWidth ? labelWidth + 2 : undefined
+          }
+        }
+      })]
+    }), tokens && /*#__PURE__*/_jsx(Select, {
+      filterable: true,
+      value: [values.token],
+      label: tokenLabel,
+      errorMessage: errors === null || errors === void 0 ? void 0 : errors.token,
+      validationState: errors !== null && errors !== void 0 && errors.token ? 'invalid' : undefined,
+      onUpdate: function onUpdate(v) {
+        return handleUpdate('token', v[0]);
+      },
+      children: tokens.map(function (token) {
+        return /*#__PURE__*/_jsx(Select.Option, {
+          value: token.value,
+          content: token.title
+        }, token.value);
+      })
+    }), /*#__PURE__*/_jsx(TextInput, {
+      value: values.name,
+      label: nameLabel,
+      hasClear: true,
+      error: errors === null || errors === void 0 ? void 0 : errors.name,
+      onKeyDown: handleInputKeyDown,
+      onUpdate: function onUpdate(v) {
+        return handleUpdate('name', v);
+      }
+    }), /*#__PURE__*/_jsxs(Flex, {
+      gap: 2,
+      children: [/*#__PURE__*/_jsxs(Button, {
+        view: "flat",
+        onClick: handleAccept,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          data: Check
+        }), i18n('action_save')]
+      }), /*#__PURE__*/_jsxs(Button, {
+        view: "flat",
+        onClick: onCancel,
+        children: [/*#__PURE__*/_jsx(Icon, {
+          data: Xmark
+        }), i18n('action_cancel')]
+      })]
+    })]
+  });
+};
+// #sourceMappingURL=EditLinkItem.js.map