@hh.ru/magritte-ui-chat-input 1.2.2 → 1.2.4

package/index.mock.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.mock.js","sources":["../mock-component/lib/setupMockComponent.js","src/index.mock.ts"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\n\nfunction enhance(mockComponent, staticProps) {\n    // удаляем внутренний свойства реакта, чтобы не перезаписать ими mockComponent\n    delete staticProps.type;\n    delete staticProps.$$typeof;\n    delete staticProps.render;\n    for (const prop in staticProps) {\n        mockComponent[prop] = staticProps[prop];\n    }\n}\nconst MockComponent = ({ style, ...props }) => (\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// eslint-disable-next-line react/jsx-no-undef\njsx(\"magritte-component-mock\", { \"style-data\": style, ...props }));\nconst MockComponentRenderProp = ({ style, ...props }) => (\n// eslint-disable-next-line @typescript-eslint/ban-ts-comment\n// @ts-ignore\n// eslint-disable-next-line react/jsx-no-undef\njsx(\"magritte-component-mock-render-prop\", { \"style-data\": style, ...props }));\n/**\n * Возвращает mock React компонента\n */\nconst mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {\n    const mockWrapper = forwardRef(({ children, ...props }, ref) => {\n        const mock = (\n        // eslint-disable-next-line react/jsx-no-undef\n        jsxs(MockComponent, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props, ref) : null, withChildren ? children : null] }));\n        return WrapperComponent ? jsx(WrapperComponent, { ...props, children: mock }) : mock;\n    });\n    staticProps && enhance(mockWrapper, staticProps);\n    mockWrapper.displayName = 'magritte-ref';\n    return mockWrapper;\n};\n/**\n * Возвращает mock React компонента, который рендерит переданный в него пропс render\n *\n * @param {String}              componentName               наименование компонента\n * @param {Object}              [staticProps]               объект со свойствами, которыми необходимо усилить mock\n * @param {Object}              [options]                   параметры мока\n * @param {boolean}             [options.withChildren]      флаг отвечает за рендеринг children компонента\n * @param {React.Component}     [options.innerDependence]   Реакт компонент, который рендерится внутри мока.\n *                                                          Необходим, когда mock компоненту требуется иметь\n *                                                           дополнительные элементы\n */\nconst mockComponentRenderProp = (componentName, staticProps, { withChildren, innerDependence, renderArguments } = { renderArguments: [] }) => {\n    const mockWrapper = ({ render, children, ...props }) => (jsxs(MockComponentRenderProp, { ...props, _component: componentName, children: [innerDependence ? innerDependence(props) : null, withChildren ? children : null, render?.(...(renderArguments || []))] }));\n    staticProps && enhance(mockWrapper, staticProps);\n    mockWrapper.displayName = 'magritte-component-mock-render-prop';\n    return mockWrapper;\n};\n\nexport { mockComponent, mockComponentRenderProp };\n//# sourceMappingURL=setupMockComponent.js.map\n","import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';\nexport { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';\nexport { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';\nexport {\n    type ChatInputFileProps,\n    type ChatInputFileState,\n    type ChatInputFileType,\n} from '@hh.ru/magritte-ui-chat-input/public/ChatInputFile';\nexport { getChatInputFileType } from '@hh.ru/magritte-ui-chat-input/public/getChatInputFileType';\nexport { type ChatInputFilesProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputFiles';\nexport { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';\nexport { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';\nexport { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';\n\nconst staticProps = {\n    Chips: mockComponent('Chips', undefined, {\n        withChildren: true,\n    }),\n    File: mockComponent('File'),\n    Files: mockComponent('Files', undefined, {\n        withChildren: true,\n    }),\n    Preview: mockComponent('Preview'),\n    SendButton: mockComponent('SendButton'),\n    VoiceButton: mockComponent('VoiceButton'),\n};\n\nexport const ChatInput = mockComponent('ChatInput', staticProps, {\n    withChildren: true,\n});\n"],"names":[],"mappings":";;;;AAGA,SAAS,OAAO,CAAC,aAAa,EAAE,WAAW,EAAE;AAC7C;AACA,IAAI,OAAO,WAAW,CAAC,IAAI,CAAC;AAC5B,IAAI,OAAO,WAAW,CAAC,QAAQ,CAAC;AAChC,IAAI,OAAO,WAAW,CAAC,MAAM,CAAC;AAC9B,IAAI,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE;AACpC,QAAQ,aAAa,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAChD,KAAK;AACL,CAAC;AACD,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;AAC1C;AACA;AACA;AACA,GAAG,CAAC,yBAAyB,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC,CAAC,CAAC;AAMnE;AACA;AACA;AACA,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,WAAW,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAAG,EAAE,KAAK;AACrH,IAAI,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAK;AACpE,QAAQ,MAAM,IAAI;AAClB;AACA,QAAQ,IAAI,CAAC,aAAa,EAAE,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,eAAe,GAAG,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,IAAI,EAAE,YAAY,GAAG,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC,CAAC;AACxK,QAAQ,OAAO,gBAAgB,GAAG,GAAG,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;AAC7F,KAAK,CAAC,CAAC;AACP,IAAI,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACrD,IAAI,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AAC7C,IAAI,OAAO,WAAW,CAAC;AACvB,CAAC;;ACnBD,MAAM,WAAW,GAAG;AAChB,IAAA,KAAK,EAAE,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE;AACrC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,IAAI,EAAE,aAAa,CAAC,MAAM,CAAC;AAC3B,IAAA,KAAK,EAAE,aAAa,CAAC,OAAO,EAAE,SAAS,EAAE;AACrC,QAAA,YAAY,EAAE,IAAI;KACrB,CAAC;AACF,IAAA,OAAO,EAAE,aAAa,CAAC,SAAS,CAAC;AACjC,IAAA,UAAU,EAAE,aAAa,CAAC,YAAY,CAAC;AACvC,IAAA,WAAW,EAAE,aAAa,CAAC,aAAa,CAAC;CAC5C,CAAC;MAEW,SAAS,GAAG,aAAa,CAAC,WAAW,EAAE,WAAW,EAAE;AAC7D,IAAA,YAAY,EAAE,IAAI;AACrB,CAAA;;;;"}
+{"version":3,"file":"index.mock.js","sources":["../mock-component/lib/setupMockComponent.js","src/index.mock.ts"],"sourcesContent":["import { jsxs, jsx } from 'react/jsx-runtime';\nimport { forwardRef } from 'react';\n\nfunction enhance(mockComponent2, staticProps) {\n  delete staticProps.type;\n  delete staticProps.$$typeof;\n  delete staticProps.render;\n  for (const prop in staticProps) {\n    mockComponent2[prop] = staticProps[prop];\n  }\n}\nconst MockComponent = ({ style, ...props }) => (\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  // eslint-disable-next-line react/jsx-no-undef\n  /* @__PURE__ */ jsx(\"magritte-component-mock\", { \"style-data\": style, ...props })\n);\nconst MockComponentRenderProp = ({ style, ...props }) => (\n  // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n  // @ts-ignore\n  // eslint-disable-next-line react/jsx-no-undef\n  /* @__PURE__ */ jsx(\"magritte-component-mock-render-prop\", { \"style-data\": style, ...props })\n);\nconst mockComponent = (componentName, staticProps = {}, { withChildren, innerDependence, WrapperComponent } = {}) => {\n  const mockWrapper = forwardRef(({ children, ...props }, ref) => {\n    const mock = (\n      // eslint-disable-next-line react/jsx-no-undef\n      /* @__PURE__ */ jsxs(MockComponent, { ...props, _component: componentName, children: [\n        innerDependence ? innerDependence(props, ref) : null,\n        withChildren ? children : null\n      ] })\n    );\n    return WrapperComponent ? /* @__PURE__ */ jsx(WrapperComponent, { ...props, children: mock }) : mock;\n  });\n  staticProps && enhance(mockWrapper, staticProps);\n  mockWrapper.displayName = \"magritte-ref\";\n  return mockWrapper;\n};\nconst mockComponentRenderProp = (componentName, staticProps, { withChildren, innerDependence, renderArguments } = { renderArguments: [] }) => {\n  const mockWrapper = ({\n    render,\n    children,\n    ...props\n  }) => /* @__PURE__ */ jsxs(MockComponentRenderProp, { ...props, _component: componentName, children: [\n    innerDependence ? innerDependence(props) : null,\n    withChildren ? children : null,\n    render?.(...renderArguments || [])\n  ] });\n  staticProps && enhance(mockWrapper, staticProps);\n  mockWrapper.displayName = \"magritte-component-mock-render-prop\";\n  return mockWrapper;\n};\n\nexport { mockComponent, mockComponentRenderProp };\n//# sourceMappingURL=setupMockComponent.js.map\n","import { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type ChatInputProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInput';\nexport { type ChatInputVoiceRecordConfig } from '@hh.ru/magritte-ui-chat-input/types';\nexport { type ChatInputChipsProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputChips';\nexport {\n    type ChatInputFileProps,\n    type ChatInputFileState,\n    type ChatInputFileType,\n} from '@hh.ru/magritte-ui-chat-input/public/ChatInputFile';\nexport { getChatInputFileType } from '@hh.ru/magritte-ui-chat-input/public/getChatInputFileType';\nexport { type ChatInputFilesProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputFiles';\nexport { type ChatInputPreviewProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputPreview';\nexport { type ChatInputSendButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputSendButton';\nexport { type ChatInputVoiceButtonProps } from '@hh.ru/magritte-ui-chat-input/public/ChatInputVoiceButton';\n\nconst staticProps = {\n    Chips: mockComponent('Chips', undefined, {\n        withChildren: true,\n    }),\n    File: mockComponent('File'),\n    Files: mockComponent('Files', undefined, {\n        withChildren: true,\n    }),\n    Preview: mockComponent('Preview'),\n    SendButton: mockComponent('SendButton'),\n    VoiceButton: mockComponent('VoiceButton'),\n};\n\nexport const ChatInput = mockComponent('ChatInput', staticProps, {\n    withChildren: true,\n});\n"],"names":[],"mappings":";;;;AAGA,SAAS,OAAO,CAAC,cAAc,EAAE,WAAW,EAAE;AAC9C,EAAE,OAAO,WAAW,CAAC,IAAI,CAAC;AAC1B,EAAE,OAAO,WAAW,CAAC,QAAQ,CAAC;AAC9B,EAAE,OAAO,WAAW,CAAC,MAAM,CAAC;AAC5B,EAAE,KAAK,MAAM,IAAI,IAAI,WAAW,EAAE;AAClC,IAAI,cAAc,CAAC,IAAI,CAAC,GAAG,WAAW,CAAC,IAAI,CAAC,CAAC;AAC7C,GAAG;AACH,CAAC;AACD,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE;AAC1C;AACA;AACA;AACA,kBAAkB,GAAG,CAAC,yBAAyB,EAAE,EAAE,YAAY,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,CAAC;AACnF,CAAC,CAAC;AAOF,MAAM,aAAa,GAAG,CAAC,aAAa,EAAE,WAAW,GAAG,EAAE,EAAE,EAAE,YAAY,EAAE,eAAe,EAAE,gBAAgB,EAAE,GAAG,EAAE,KAAK;AACrH,EAAE,MAAM,WAAW,GAAG,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,KAAK;AAClE,IAAI,MAAM,IAAI;AACd;AACA,sBAAsB,IAAI,CAAC,aAAa,EAAE,EAAE,GAAG,KAAK,EAAE,UAAU,EAAE,aAAa,EAAE,QAAQ,EAAE;AAC3F,QAAQ,eAAe,GAAG,eAAe,CAAC,KAAK,EAAE,GAAG,CAAC,GAAG,IAAI;AAC5D,QAAQ,YAAY,GAAG,QAAQ,GAAG,IAAI;AACtC,OAAO,EAAE,CAAC;AACV,KAAK,CAAC;AACN,IAAI,OAAO,gBAAgB,mBAAmB,GAAG,CAAC,gBAAgB,EAAE,EAAE,GAAG,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC;AACzG,GAAG,CAAC,CAAC;AACL,EAAE,WAAW,IAAI,OAAO,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;AACnD,EAAE,WAAW,CAAC,WAAW,GAAG,cAAc,CAAC;AAC3C,EAAE,OAAO,WAAW,CAAC;AACrB,CAAC;;ACrBD,MAAM,WAAc,GAAA;AAAA,EAChB,KAAA,EAAO,aAAc,CAAA,OAAA,EAAS,KAAW,CAAA,EAAA;AAAA,IACrC,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,IAAA,EAAM,cAAc,MAAM,CAAA;AAAA,EAC1B,KAAA,EAAO,aAAc,CAAA,OAAA,EAAS,KAAW,CAAA,EAAA;AAAA,IACrC,YAAc,EAAA,IAAA;AAAA,GACjB,CAAA;AAAA,EACD,OAAA,EAAS,cAAc,SAAS,CAAA;AAAA,EAChC,UAAA,EAAY,cAAc,YAAY,CAAA;AAAA,EACtC,WAAA,EAAa,cAAc,aAAa,CAAA;AAC5C,CAAA,CAAA;AAEa,MAAA,SAAA,GAAY,aAAc,CAAA,WAAA,EAAa,WAAa,EAAA;AAAA,EAC7D,YAAc,EAAA,IAAA;AAClB,CAAC;;;;"}

package/internal/ChatInputContext.d.ts

@@ -1,4 +1,4 @@
-import { type VoiceRecordStatus } from '@hh.ru/magritte-ui-chat-input/types';
+import { type VoiceRecordStatus } from '../types';
 interface ChatInputContextValue {
     /** Хендлер отправки; SendButton вызывает его по клику */
     onSend?: VoidFunction;

package/internal/ChatInputContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputContext.js","sources":["src/internal/ChatInputContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { type VoiceRecordStatus } from '@hh.ru/magritte-ui-chat-input/types';\n\ninterface ChatInputContextValue {\n    /** Хендлер отправки; SendButton вызывает его по клику */\n    onSend?: VoidFunction;\n    /** Старт записи голоса; VoiceButton вызывает его по клику. Есть внутри ChatInput\n     * (снаружи контекст пустой, кнопка неактивна) */\n    startVoiceRecord?: VoidFunction;\n    /** Статус сессии записи — VoiceButton показывает по нему ожидание доступа к микрофону */\n    voiceRecordStatus?: VoiceRecordStatus;\n}\n\nconst ChatInputContext = createContext<ChatInputContextValue>({});\n\nexport const ChatInputContextProvider = ChatInputContext.Provider;\n\nexport const useChatInputContext = (): ChatInputContextValue => useContext(ChatInputContext);\n"],"names":[],"mappings":";;AAcA,MAAM,gBAAgB,GAAG,aAAa,CAAwB,EAAE,CAAC,CAAC;AAErD,MAAA,wBAAwB,GAAG,gBAAgB,CAAC,SAAS;AAErD,MAAA,mBAAmB,GAAG,MAA6B,UAAU,CAAC,gBAAgB;;;;"}
+{"version":3,"file":"ChatInputContext.js","sources":["src/internal/ChatInputContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react';\n\nimport { type VoiceRecordStatus } from '@hh.ru/magritte-ui-chat-input/types';\n\ninterface ChatInputContextValue {\n    /** Хендлер отправки; SendButton вызывает его по клику */\n    onSend?: VoidFunction;\n    /** Старт записи голоса; VoiceButton вызывает его по клику. Есть внутри ChatInput\n     * (снаружи контекст пустой, кнопка неактивна) */\n    startVoiceRecord?: VoidFunction;\n    /** Статус сессии записи — VoiceButton показывает по нему ожидание доступа к микрофону */\n    voiceRecordStatus?: VoiceRecordStatus;\n}\n\nconst ChatInputContext = createContext<ChatInputContextValue>({});\n\nexport const ChatInputContextProvider = ChatInputContext.Provider;\n\nexport const useChatInputContext = (): ChatInputContextValue => useContext(ChatInputContext);\n"],"names":[],"mappings":";;AAcA,MAAM,gBAAA,GAAmB,aAAqC,CAAA,EAAE,CAAA,CAAA;AAEzD,MAAM,2BAA2B,gBAAiB,CAAA,SAAA;AAE5C,MAAA,mBAAA,GAAsB,MAA6B,UAAA,CAAW,gBAAgB;;;;"}

package/internal/ChatInputSlotButton.js

@@ -5,21 +5,21 @@ import { useDisabled } from '@hh.ru/magritte-common-use-disabled';
 import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
 
 const ChatInputSlotButton = ({ icon, iconProps, onClick, disabled, children }) => {
-    const handledEventRef = useRef(null);
-    const isDisabled = useDisabled() || !!disabled;
-    if (Children.toArray(children).length === 0) {
-        return icon;
+  const handledEventRef = useRef(null);
+  const isDisabled = useDisabled() || !!disabled;
+  if (Children.toArray(children).length === 0) {
+    return icon;
+  }
+  const handleClickOnce = (event) => {
+    if (handledEventRef.current === event.nativeEvent || isDisabled) {
+      return;
     }
-    const handleClickOnce = (event) => {
-        if (handledEventRef.current === event.nativeEvent || isDisabled) {
-            return;
-        }
-        handledEventRef.current = event.nativeEvent;
-        onClick?.(event);
-    };
-    return (jsx(IconDefaultPropsContext, { props: { ...iconProps, onClick: handleClickOnce }, children: jsx("div", { style: { display: 'contents' }, onClick: handleClickOnce, children: children }) }));
+    handledEventRef.current = event.nativeEvent;
+    onClick?.(event);
+  };
+  return /* @__PURE__ */ jsx(IconDefaultPropsContext, { props: { ...iconProps, onClick: handleClickOnce }, children: /* @__PURE__ */ jsx("div", { style: { display: "contents" }, onClick: handleClickOnce, children }) });
 };
-ChatInputSlotButton.displayName = 'ChatInputSlotButton';
+ChatInputSlotButton.displayName = "ChatInputSlotButton";
 
 export { ChatInputSlotButton };
 //# sourceMappingURL=ChatInputSlotButton.js.map

package/internal/ChatInputSlotButton.js.map

@@ -1 +1 @@
-{"version":3,"file":"ChatInputSlotButton.js","sources":["src/internal/ChatInputSlotButton.tsx"],"sourcesContent":["import {\n    Children,\n    type FC,\n    type MouseEvent as ReactMouseEvent,\n    type MouseEventHandler,\n    type ReactElement,\n    type ReactNode,\n    useRef,\n} from 'react';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport { type IconProps } from '@hh.ru/magritte-ui-icon/types';\n\ninterface ChatInputSlotButtonProps {\n    /** Встроенная иконка со всеми пропсами — рендерится, когда children не переданы */\n    icon: ReactElement;\n    /** Те же пропсы иконки — уходят в IconDefaultPropsContext, чтобы children-иконка получила\n     * то же оформление/aria и (за счёт onClick) стала интерактивной кнопкой */\n    iconProps: Partial<IconProps>;\n    /** Обработчик клика (тот же, что в `iconProps.onClick`) — им ловим всплывший клик от\n     * произвольных (не-иконочных) children */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n    /** Индивидуальная блокировка кнопки (в дополнение к общему `disabled` из `DisabledContext`) —\n     * гасит клик по произвольным children так же, как контекстный disabled */\n    disabled?: boolean;\n    /** Кастомный контент вместо встроенной иконки */\n    children?: ReactNode;\n}\n\nexport const ChatInputSlotButton: FC<ChatInputSlotButtonProps> = ({ icon, iconProps, onClick, disabled, children }) => {\n    const handledEventRef = useRef<Event | null>(null);\n    const isDisabled = useDisabled() || !!disabled;\n\n    if (Children.toArray(children).length === 0) {\n        return icon;\n    }\n\n    const handleClickOnce = (event: ReactMouseEvent<HTMLElement>) => {\n        if (handledEventRef.current === event.nativeEvent || isDisabled) {\n            return;\n        }\n        handledEventRef.current = event.nativeEvent;\n        onClick?.(event as ReactMouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n        <IconDefaultPropsContext props={{ ...iconProps, onClick: handleClickOnce }}>\n            <div style={{ display: 'contents' }} onClick={handleClickOnce}>\n                {children}\n            </div>\n        </IconDefaultPropsContext>\n    );\n};\n\nChatInputSlotButton.displayName = 'ChatInputSlotButton';\n"],"names":["_jsx"],"mappings":";;;;;AA8Ba,MAAA,mBAAmB,GAAiC,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAI;AAClH,IAAA,MAAM,eAAe,GAAG,MAAM,CAAe,IAAI,CAAC,CAAC;IACnD,MAAM,UAAU,GAAG,WAAW,EAAE,IAAI,CAAC,CAAC,QAAQ,CAAC;IAE/C,IAAI,QAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,MAAM,KAAK,CAAC,EAAE;AACzC,QAAA,OAAO,IAAI,CAAC;KACf;AAED,IAAA,MAAM,eAAe,GAAG,CAAC,KAAmC,KAAI;QAC5D,IAAI,eAAe,CAAC,OAAO,KAAK,KAAK,CAAC,WAAW,IAAI,UAAU,EAAE;YAC7D,OAAO;SACV;AACD,QAAA,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC,WAAW,CAAC;AAC5C,QAAA,OAAO,GAAG,KAA2C,CAAC,CAAC;AAC3D,KAAC,CAAC;AAEF,IAAA,QACIA,GAAA,CAAC,uBAAuB,EAAA,EAAC,KAAK,EAAE,EAAE,GAAG,SAAS,EAAE,OAAO,EAAE,eAAe,EAAE,EACtE,QAAA,EAAAA,GAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAE,EAAE,OAAO,EAAE,UAAU,EAAE,EAAE,OAAO,EAAE,eAAe,EACxD,QAAA,EAAA,QAAQ,EACP,CAAA,EAAA,CACgB,EAC5B;AACN,EAAE;AAEF,mBAAmB,CAAC,WAAW,GAAG,qBAAqB;;;;"}
+{"version":3,"file":"ChatInputSlotButton.js","sources":["src/internal/ChatInputSlotButton.tsx"],"sourcesContent":["import {\n    Children,\n    type FC,\n    type MouseEvent as ReactMouseEvent,\n    type MouseEventHandler,\n    type ReactElement,\n    type ReactNode,\n    useRef,\n} from 'react';\n\nimport { useDisabled } from '@hh.ru/magritte-common-use-disabled';\nimport { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport { type IconProps } from '@hh.ru/magritte-ui-icon/types';\n\ninterface ChatInputSlotButtonProps {\n    /** Встроенная иконка со всеми пропсами — рендерится, когда children не переданы */\n    icon: ReactElement;\n    /** Те же пропсы иконки — уходят в IconDefaultPropsContext, чтобы children-иконка получила\n     * то же оформление/aria и (за счёт onClick) стала интерактивной кнопкой */\n    iconProps: Partial<IconProps>;\n    /** Обработчик клика (тот же, что в `iconProps.onClick`) — им ловим всплывший клик от\n     * произвольных (не-иконочных) children */\n    onClick?: MouseEventHandler<HTMLButtonElement>;\n    /** Индивидуальная блокировка кнопки (в дополнение к общему `disabled` из `DisabledContext`) —\n     * гасит клик по произвольным children так же, как контекстный disabled */\n    disabled?: boolean;\n    /** Кастомный контент вместо встроенной иконки */\n    children?: ReactNode;\n}\n\nexport const ChatInputSlotButton: FC<ChatInputSlotButtonProps> = ({ icon, iconProps, onClick, disabled, children }) => {\n    const handledEventRef = useRef<Event | null>(null);\n    const isDisabled = useDisabled() || !!disabled;\n\n    if (Children.toArray(children).length === 0) {\n        return icon;\n    }\n\n    const handleClickOnce = (event: ReactMouseEvent<HTMLElement>) => {\n        if (handledEventRef.current === event.nativeEvent || isDisabled) {\n            return;\n        }\n        handledEventRef.current = event.nativeEvent;\n        onClick?.(event as ReactMouseEvent<HTMLButtonElement>);\n    };\n\n    return (\n        <IconDefaultPropsContext props={{ ...iconProps, onClick: handleClickOnce }}>\n            <div style={{ display: 'contents' }} onClick={handleClickOnce}>\n                {children}\n            </div>\n        </IconDefaultPropsContext>\n    );\n};\n\nChatInputSlotButton.displayName = 'ChatInputSlotButton';\n"],"names":[],"mappings":";;;;;AA8Ba,MAAA,mBAAA,GAAoD,CAAC,EAAE,IAAA,EAAM,WAAW,OAAS,EAAA,QAAA,EAAU,UAAe,KAAA;AACnH,EAAM,MAAA,eAAA,GAAkB,OAAqB,IAAI,CAAA,CAAA;AACjD,EAAA,MAAM,UAAa,GAAA,WAAA,EAAiB,IAAA,CAAC,CAAC,QAAA,CAAA;AAEtC,EAAA,IAAI,QAAS,CAAA,OAAA,CAAQ,QAAQ,CAAA,CAAE,WAAW,CAAG,EAAA;AACzC,IAAO,OAAA,IAAA,CAAA;AAAA,GACX;AAEA,EAAM,MAAA,eAAA,GAAkB,CAAC,KAAwC,KAAA;AAC7D,IAAA,IAAI,eAAgB,CAAA,OAAA,KAAY,KAAM,CAAA,WAAA,IAAe,UAAY,EAAA;AAC7D,MAAA,OAAA;AAAA,KACJ;AACA,IAAA,eAAA,CAAgB,UAAU,KAAM,CAAA,WAAA,CAAA;AAChC,IAAA,OAAA,GAAU,KAA2C,CAAA,CAAA;AAAA,GACzD,CAAA;AAEA,EAAA,2BACK,uBAAwB,EAAA,EAAA,KAAA,EAAO,EAAE,GAAG,SAAA,EAAW,SAAS,eAAgB,EAAA,EACrE,8BAAC,KAAI,EAAA,EAAA,KAAA,EAAO,EAAE,OAAS,EAAA,UAAA,IAAc,OAAS,EAAA,eAAA,EACzC,UACL,CACJ,EAAA,CAAA,CAAA;AAER,EAAA;AAEA,mBAAA,CAAoB,WAAc,GAAA,qBAAA;;;;"}

package/internal/FocusTarget.js

@@ -2,16 +2,9 @@ import './../index.css';
 import { jsx } from 'react/jsx-runtime';
 import { focusPriorityProps } from './focusGroup.js';
 
-// стиль обёртки-маркера: не создаёт бокс, дети остаются flex-элементами родительского слота
-const TARGET_STYLE = { display: 'contents' };
-/**
- * Обёртка-маркер вокруг наших кнопок для roving-группы (useRovingFocusGroup). `display:contents` —
- * не создаёт бокс, так что раскладка слота/блока записи не меняется, а менеджер находит кнопку
- * внутри по data-атрибуту. Маркер вешаем на обёртку, а не на саму иконку: кастомный data-* на
- * иконке уезжает на внутренний скрытый <svg> (не на фокусируемый <button>) и не проходит по типам.
- */
-const FocusTarget = ({ priority, children }) => (jsx("span", { style: TARGET_STYLE, ...focusPriorityProps(priority), children: children }));
-FocusTarget.displayName = 'ChatInputFocusTarget';
+const TARGET_STYLE = { display: "contents" };
+const FocusTarget = ({ priority, children }) => /* @__PURE__ */ jsx("span", { style: TARGET_STYLE, ...focusPriorityProps(priority), children });
+FocusTarget.displayName = "ChatInputFocusTarget";
 
 export { FocusTarget };
 //# sourceMappingURL=FocusTarget.js.map

package/internal/FocusTarget.js.map

@@ -1 +1 @@
-{"version":3,"file":"FocusTarget.js","sources":["src/internal/FocusTarget.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { focusPriorityProps } from '@hh.ru/magritte-ui-chat-input/internal/focusGroup';\n\n// стиль обёртки-маркера: не создаёт бокс, дети остаются flex-элементами родительского слота\nconst TARGET_STYLE = { display: 'contents' } as const;\n\ninterface FocusTargetProps {\n    /** Приоритет обхода стрелками в roving-группе (меньше — раньше), см. FOCUS_PRIORITY */\n    priority: number;\n    children: ReactNode;\n}\n\n/**\n * Обёртка-маркер вокруг наших кнопок для roving-группы (useRovingFocusGroup). `display:contents` —\n * не создаёт бокс, так что раскладка слота/блока записи не меняется, а менеджер находит кнопку\n * внутри по data-атрибуту. Маркер вешаем на обёртку, а не на саму иконку: кастомный data-* на\n * иконке уезжает на внутренний скрытый <svg> (не на фокусируемый <button>) и не проходит по типам.\n */\nexport const FocusTarget: FC<FocusTargetProps> = ({ priority, children }) => (\n    <span style={TARGET_STYLE} {...focusPriorityProps(priority)}>\n        {children}\n    </span>\n);\n\nFocusTarget.displayName = 'ChatInputFocusTarget';\n"],"names":["_jsx"],"mappings":";;;AAIA;AACA,MAAM,YAAY,GAAG,EAAE,OAAO,EAAE,UAAU,EAAW,CAAC;AAQtD;;;;;AAKG;AACU,MAAA,WAAW,GAAyB,CAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,MACpEA,GAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAE,YAAY,EAAA,GAAM,kBAAkB,CAAC,QAAQ,CAAC,EACtD,QAAA,EAAA,QAAQ,EACN,CAAA,EACT;AAEF,WAAW,CAAC,WAAW,GAAG,sBAAsB;;;;"}
+{"version":3,"file":"FocusTarget.js","sources":["src/internal/FocusTarget.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\n\nimport { focusPriorityProps } from '@hh.ru/magritte-ui-chat-input/internal/focusGroup';\n\n// стиль обёртки-маркера: не создаёт бокс, дети остаются flex-элементами родительского слота\nconst TARGET_STYLE = { display: 'contents' } as const;\n\ninterface FocusTargetProps {\n    /** Приоритет обхода стрелками в roving-группе (меньше — раньше), см. FOCUS_PRIORITY */\n    priority: number;\n    children: ReactNode;\n}\n\n/**\n * Обёртка-маркер вокруг наших кнопок для roving-группы (useRovingFocusGroup). `display:contents` —\n * не создаёт бокс, так что раскладка слота/блока записи не меняется, а менеджер находит кнопку\n * внутри по data-атрибуту. Маркер вешаем на обёртку, а не на саму иконку: кастомный data-* на\n * иконке уезжает на внутренний скрытый <svg> (не на фокусируемый <button>) и не проходит по типам.\n */\nexport const FocusTarget: FC<FocusTargetProps> = ({ priority, children }) => (\n    <span style={TARGET_STYLE} {...focusPriorityProps(priority)}>\n        {children}\n    </span>\n);\n\nFocusTarget.displayName = 'ChatInputFocusTarget';\n"],"names":[],"mappings":";;;AAKA,MAAM,YAAA,GAAe,EAAE,OAAA,EAAS,UAAW,EAAA,CAAA;AAcpC,MAAM,WAAoC,GAAA,CAAC,EAAE,QAAA,EAAU,UAC1D,qBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,KAAA,EAAO,YAAe,EAAA,GAAG,kBAAmB,CAAA,QAAQ,GACrD,QACL,EAAA,EAAA;AAGJ,WAAA,CAAY,WAAc,GAAA,sBAAA;;;;"}

package/internal/ModeTransition.js

@@ -2,23 +2,53 @@ import './../index.css';
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { useReducedMotion, motion } from 'motion/react';
 import CoreTokens from '@hh.ru/magritte-design-tokens/core-tokens';
-import { s as styles } from '../styles-CHMi0EYL.js';
+import { s as styles } from '../styles-DofLkp5v.js';
 
-const EASE_BASE = CoreTokens['magritte-semantic-animation-ease-base'];
-const MODE_TRANSITION_DURATION_MS = CoreTokens['magritte-semantic-animation-time-s'].duration;
+const EASE_BASE = CoreTokens["magritte-semantic-animation-ease-base"];
+const MODE_TRANSITION_DURATION_MS = CoreTokens["magritte-semantic-animation-time-s"].duration;
 const INSTANT_TRANSITION = { duration: 0 };
 const MODE_CONTENT_TRANSITION = {
-    duration: MODE_TRANSITION_DURATION_MS / 1000,
-    ease: EASE_BASE,
+  duration: MODE_TRANSITION_DURATION_MS / 1e3,
+  ease: EASE_BASE
 };
-const VISIBLE_LAYER = { opacity: 1, visibility: 'visible' };
-const HIDDEN_LAYER = { opacity: 0, transitionEnd: { visibility: 'hidden' } };
+const VISIBLE_LAYER = { opacity: 1, visibility: "visible" };
+const HIDDEN_LAYER = { opacity: 0, transitionEnd: { visibility: "hidden" } };
 const ModeTransition = ({ mode, text, voice }) => {
-    const transition = useReducedMotion() ? INSTANT_TRANSITION : MODE_CONTENT_TRANSITION;
-    const isVoice = mode === 'voice';
-    return (jsxs(motion.div, { className: styles.modeContainer, animate: { height: isVoice ? 40 : 'auto' }, transition: transition, children: [jsx(motion.div, { initial: false, animate: isVoice ? HIDDEN_LAYER : VISIBLE_LAYER, transition: transition, "aria-hidden": isVoice, children: text }), jsx(motion.div, { className: styles.voiceOverlay, initial: false, animate: isVoice ? VISIBLE_LAYER : HIDDEN_LAYER, transition: transition, "aria-hidden": !isVoice, children: voice })] }));
+  const transition = useReducedMotion() ? INSTANT_TRANSITION : MODE_CONTENT_TRANSITION;
+  const isVoice = mode === "voice";
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      className: styles.modeContainer,
+      animate: { height: isVoice ? 40 : "auto" },
+      transition,
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            initial: false,
+            animate: isVoice ? HIDDEN_LAYER : VISIBLE_LAYER,
+            transition,
+            "aria-hidden": isVoice,
+            children: text
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            className: styles.voiceOverlay,
+            initial: false,
+            animate: isVoice ? VISIBLE_LAYER : HIDDEN_LAYER,
+            transition,
+            "aria-hidden": !isVoice,
+            children: voice
+          }
+        )
+      ]
+    }
+  );
 };
-ModeTransition.displayName = 'ChatInputModeTransition';
+ModeTransition.displayName = "ChatInputModeTransition";
 
 export { ModeTransition };
 //# sourceMappingURL=ModeTransition.js.map

package/internal/ModeTransition.js.map

@@ -1 +1 @@
-{"version":3,"file":"ModeTransition.js","sources":["src/internal/ModeTransition.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\nimport { motion, type TargetAndTransition, useReducedMotion } from 'motion/react';\n\nimport CoreTokens from '@hh.ru/magritte-design-tokens/core-tokens';\n\nimport styles from '../styles.less';\n\ntype ChatInputMode = 'text' | 'voice';\n\nexport interface ModeTransitionProps {\n    /** Активный режим; смена запускает кроссфейд контента и анимацию высоты оболочки */\n    mode: ChatInputMode;\n    /** Контент текстового режима (сетка со слотами и вводом) */\n    text: ReactNode;\n    /** Контент режима записи голоса */\n    voice: ReactNode;\n}\n\nconst EASE_BASE = CoreTokens['magritte-semantic-animation-ease-base'];\n\nconst MODE_TRANSITION_DURATION_MS = CoreTokens['magritte-semantic-animation-time-s'].duration;\nconst INSTANT_TRANSITION = { duration: 0 } as const;\n\nconst MODE_CONTENT_TRANSITION = {\n    duration: MODE_TRANSITION_DURATION_MS / 1000,\n    ease: EASE_BASE,\n} as const;\n\nconst VISIBLE_LAYER: TargetAndTransition = { opacity: 1, visibility: 'visible' };\nconst HIDDEN_LAYER: TargetAndTransition = { opacity: 0, transitionEnd: { visibility: 'hidden' } };\n\nexport const ModeTransition: FC<ModeTransitionProps> = ({ mode, text, voice }) => {\n    const transition = useReducedMotion() ? INSTANT_TRANSITION : MODE_CONTENT_TRANSITION;\n    const isVoice = mode === 'voice';\n\n    return (\n        <motion.div\n            className={styles.modeContainer}\n            animate={{ height: isVoice ? 40 : 'auto' }}\n            transition={transition}\n        >\n            <motion.div\n                initial={false}\n                animate={isVoice ? HIDDEN_LAYER : VISIBLE_LAYER}\n                transition={transition}\n                aria-hidden={isVoice}\n            >\n                {text}\n            </motion.div>\n            <motion.div\n                className={styles.voiceOverlay}\n                initial={false}\n                animate={isVoice ? VISIBLE_LAYER : HIDDEN_LAYER}\n                transition={transition}\n                aria-hidden={!isVoice}\n            >\n                {voice}\n            </motion.div>\n        </motion.div>\n    );\n};\n\nModeTransition.displayName = 'ChatInputModeTransition';\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;AAkBA,MAAM,SAAS,GAAG,UAAU,CAAC,uCAAuC,CAAC,CAAC;AAEtE,MAAM,2BAA2B,GAAG,UAAU,CAAC,oCAAoC,CAAC,CAAC,QAAQ,CAAC;AAC9F,MAAM,kBAAkB,GAAG,EAAE,QAAQ,EAAE,CAAC,EAAW,CAAC;AAEpD,MAAM,uBAAuB,GAAG;IAC5B,QAAQ,EAAE,2BAA2B,GAAG,IAAI;AAC5C,IAAA,IAAI,EAAE,SAAS;CACT,CAAC;AAEX,MAAM,aAAa,GAAwB,EAAE,OAAO,EAAE,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC;AACjF,MAAM,YAAY,GAAwB,EAAE,OAAO,EAAE,CAAC,EAAE,aAAa,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,EAAE,CAAC;AAE3F,MAAM,cAAc,GAA4B,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,KAAI;AAC7E,IAAA,MAAM,UAAU,GAAG,gBAAgB,EAAE,GAAG,kBAAkB,GAAG,uBAAuB,CAAC;AACrF,IAAA,MAAM,OAAO,GAAG,IAAI,KAAK,OAAO,CAAC;IAEjC,QACIA,KAAC,MAAM,CAAC,GAAG,EACP,EAAA,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,OAAO,EAAE,EAAE,MAAM,EAAE,OAAO,GAAG,EAAE,GAAG,MAAM,EAAE,EAC1C,UAAU,EAAE,UAAU,EAEtB,QAAA,EAAA,CAAAC,GAAA,CAAC,MAAM,CAAC,GAAG,EAAA,EACP,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,OAAO,GAAG,YAAY,GAAG,aAAa,EAC/C,UAAU,EAAE,UAAU,iBACT,OAAO,EAAA,QAAA,EAEnB,IAAI,EAAA,CACI,EACbA,GAAA,CAAC,MAAM,CAAC,GAAG,IACP,SAAS,EAAE,MAAM,CAAC,YAAY,EAC9B,OAAO,EAAE,KAAK,EACd,OAAO,EAAE,OAAO,GAAG,aAAa,GAAG,YAAY,EAC/C,UAAU,EAAE,UAAU,iBACT,CAAC,OAAO,YAEpB,KAAK,EAAA,CACG,CACJ,EAAA,CAAA,EACf;AACN,EAAE;AAEF,cAAc,CAAC,WAAW,GAAG,yBAAyB;;;;"}
+{"version":3,"file":"ModeTransition.js","sources":["src/internal/ModeTransition.tsx"],"sourcesContent":["import { type FC, type ReactNode } from 'react';\nimport { motion, type TargetAndTransition, useReducedMotion } from 'motion/react';\n\nimport CoreTokens from '@hh.ru/magritte-design-tokens/core-tokens';\n\nimport styles from '../styles.less';\n\ntype ChatInputMode = 'text' | 'voice';\n\nexport interface ModeTransitionProps {\n    /** Активный режим; смена запускает кроссфейд контента и анимацию высоты оболочки */\n    mode: ChatInputMode;\n    /** Контент текстового режима (сетка со слотами и вводом) */\n    text: ReactNode;\n    /** Контент режима записи голоса */\n    voice: ReactNode;\n}\n\nconst EASE_BASE = CoreTokens['magritte-semantic-animation-ease-base'];\n\nconst MODE_TRANSITION_DURATION_MS = CoreTokens['magritte-semantic-animation-time-s'].duration;\nconst INSTANT_TRANSITION = { duration: 0 } as const;\n\nconst MODE_CONTENT_TRANSITION = {\n    duration: MODE_TRANSITION_DURATION_MS / 1000,\n    ease: EASE_BASE,\n} as const;\n\nconst VISIBLE_LAYER: TargetAndTransition = { opacity: 1, visibility: 'visible' };\nconst HIDDEN_LAYER: TargetAndTransition = { opacity: 0, transitionEnd: { visibility: 'hidden' } };\n\nexport const ModeTransition: FC<ModeTransitionProps> = ({ mode, text, voice }) => {\n    const transition = useReducedMotion() ? INSTANT_TRANSITION : MODE_CONTENT_TRANSITION;\n    const isVoice = mode === 'voice';\n\n    return (\n        <motion.div\n            className={styles.modeContainer}\n            animate={{ height: isVoice ? 40 : 'auto' }}\n            transition={transition}\n        >\n            <motion.div\n                initial={false}\n                animate={isVoice ? HIDDEN_LAYER : VISIBLE_LAYER}\n                transition={transition}\n                aria-hidden={isVoice}\n            >\n                {text}\n            </motion.div>\n            <motion.div\n                className={styles.voiceOverlay}\n                initial={false}\n                animate={isVoice ? VISIBLE_LAYER : HIDDEN_LAYER}\n                transition={transition}\n                aria-hidden={!isVoice}\n            >\n                {voice}\n            </motion.div>\n        </motion.div>\n    );\n};\n\nModeTransition.displayName = 'ChatInputModeTransition';\n"],"names":[],"mappings":";;;;;AAkBA,MAAM,SAAA,GAAY,WAAW,uCAAuC,CAAA,CAAA;AAEpE,MAAM,2BAAA,GAA8B,UAAW,CAAA,oCAAoC,CAAE,CAAA,QAAA,CAAA;AACrF,MAAM,kBAAA,GAAqB,EAAE,QAAA,EAAU,CAAE,EAAA,CAAA;AAEzC,MAAM,uBAA0B,GAAA;AAAA,EAC5B,UAAU,2BAA8B,GAAA,GAAA;AAAA,EACxC,IAAM,EAAA,SAAA;AACV,CAAA,CAAA;AAEA,MAAM,aAAqC,GAAA,EAAE,OAAS,EAAA,CAAA,EAAG,YAAY,SAAU,EAAA,CAAA;AAC/E,MAAM,YAAA,GAAoC,EAAE,OAAS,EAAA,CAAA,EAAG,eAAe,EAAE,UAAA,EAAY,UAAW,EAAA,CAAA;AAEzF,MAAM,iBAA0C,CAAC,EAAE,IAAM,EAAA,IAAA,EAAM,OAAY,KAAA;AAC9E,EAAM,MAAA,UAAA,GAAa,gBAAiB,EAAA,GAAI,kBAAqB,GAAA,uBAAA,CAAA;AAC7D,EAAA,MAAM,UAAU,IAAS,KAAA,OAAA,CAAA;AAEzB,EACI,uBAAA,IAAA;AAAA,IAAC,MAAO,CAAA,GAAA;AAAA,IAAP;AAAA,MACG,WAAW,MAAO,CAAA,aAAA;AAAA,MAClB,OAAS,EAAA,EAAE,MAAQ,EAAA,OAAA,GAAU,KAAK,MAAO,EAAA;AAAA,MACzC,UAAA;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,GAAA;AAAA,UAAC,MAAO,CAAA,GAAA;AAAA,UAAP;AAAA,YACG,OAAS,EAAA,KAAA;AAAA,YACT,OAAA,EAAS,UAAU,YAAe,GAAA,aAAA;AAAA,YAClC,UAAA;AAAA,YACA,aAAa,EAAA,OAAA;AAAA,YAEZ,QAAA,EAAA,IAAA;AAAA,WAAA;AAAA,SACL;AAAA,wBACA,GAAA;AAAA,UAAC,MAAO,CAAA,GAAA;AAAA,UAAP;AAAA,YACG,WAAW,MAAO,CAAA,YAAA;AAAA,YAClB,OAAS,EAAA,KAAA;AAAA,YACT,OAAA,EAAS,UAAU,aAAgB,GAAA,YAAA;AAAA,YACnC,UAAA;AAAA,YACA,eAAa,CAAC,OAAA;AAAA,YAEb,QAAA,EAAA,KAAA;AAAA,WAAA;AAAA,SACL;AAAA,OAAA;AAAA,KAAA;AAAA,GACJ,CAAA;AAER,EAAA;AAEA,cAAA,CAAe,WAAc,GAAA,yBAAA;;;;"}

package/internal/TextInput.d.ts

@@ -7,7 +7,7 @@ export declare const useFocus: <T extends HTMLTextAreaElement = HTMLTextAreaElem
 export declare const TextInput: import("react").ForwardRefExoticComponent<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, "value"> & {
     value: string;
     maxHeight?: number;
-    layout: "vertical" | "horizontal";
+    layout: 'vertical' | 'horizontal';
     onSend?: VoidFunction;
     /** Ширина контейнера; её изменение пере-измеряет layout (перенос текста зависит от ширины) */
     containerWidth?: number;

package/internal/TextInput.js

@@ -5,143 +5,163 @@ import classNames from 'classnames';
 import { useMultipleRefs } from '@hh.ru/magritte-common-use-multiple-refs';
 import { useSendOnEnter } from './useSendOnEnter.js';
 import { useScrollbar, Scrollbar } from '@hh.ru/magritte-ui-scrollbar';
-import { s as styles } from '../styles-CHMi0EYL.js';
+import { s as styles } from '../styles-DofLkp5v.js';
 import '@hh.ru/magritte-common-keyboard';
 
 const MIN_HEIGHT = 20;
-// допуск на субпиксельные значения скролла
 const HIDDEN_CONTENT_THRESHOLD = 4;
-// вертикальные паддинги ввода - источник правды здесь, ставятся инлайном (в LESS только
-// горизонтальные): фейд и раскладка считают по одним и тем же значениям без чтения стилей из DOM.
-// spacious - ввод на своём ряду (не в нижнем, где контролы), base - все остальные раскладки
 const VERTICAL_PADDING = {
-    base: { top: 8, bottom: 8 },
-    spacious: { top: 12, bottom: 16 },
+  base: { top: 8, bottom: 8 },
+  spacious: { top: 12, bottom: 16 }
 };
 const clamp = (value, min, max) => Math.max(Math.min(max, value), min);
-const useTextInputHeight = ({ inputRef, layout, maxHeight, containerWidth, value, onScrollHeightChange, }) => {
-    const [currentState, setCurrentState] = useState(() => ({
-        layout,
-        height: MIN_HEIGHT,
-    }));
-    const prevScrollHeightRef = useRef(null);
-    useLayoutEffect(() => {
-        const input = inputRef.current;
-        if (!input) {
-            return;
-        }
-        // изменение реального scrollHeight (например, рост контента при упоре в maxHeight) —
-        // повод пересчитать зависимое (скроллбар); читаем до измерительных тоглов
-        if (prevScrollHeightRef.current !== null && prevScrollHeightRef.current !== input.scrollHeight) {
-            onScrollHeightChange?.();
-        }
-        prevScrollHeightRef.current = input.scrollHeight;
-        // высота контента на ширине конкретного слота: .measure схлопывает высоту и паддинги
-        // (scrollHeight = чистая высота контента), layout-vertical выбирает вертикальный/горизонтальный слот
-        const measureContentHeight = (targetVertical) => {
-            input.classList.add(styles.measure);
-            input.classList.toggle(styles.layoutVertical, targetVertical);
-            const height = input.scrollHeight;
-            input.classList.toggle(styles.layoutVertical, currentState.layout === 'vertical');
-            input.classList.remove(styles.measure);
-            return height;
-        };
-        // лейаут определяется по горизонтальному слоту (влезает ли контент в одну строку). Замер
-        // горизонтального слота — форс-рефлоу, поэтому сначала снимаем заведомо известные случаи:
-        // внешний layout='vertical' и перенос строки в значении гарантируют вертикаль, пустое
-        // значение — горизонталь; замеряем только неоднозначный однострочный случай (перенос по ширине).
-        // Высоту всегда берём на ширине целевого слота — иначе размер меряется на старом месте.
-        let isVertical;
-        if (layout === 'vertical' || value.includes('\n')) {
-            isVertical = true;
-        }
-        else if (value === '') {
-            isVertical = false;
-        }
-        else {
-            isVertical = measureContentHeight(false) > MIN_HEIGHT;
-        }
-        const contentHeight = isVertical ? measureContentHeight(true) : MIN_HEIGHT;
-        const newState = {
-            layout: isVertical ? 'vertical' : 'horizontal',
-            height: clamp(contentHeight, MIN_HEIGHT, maxHeight ?? contentHeight),
-        };
-        if (Object.keys(currentState).some((key) => currentState[key] !== newState[key])) {
-            setCurrentState(newState);
-        }
-        // currentState не должно быть в зависимостях, иначе зациклится обновление
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [layout, maxHeight, value, inputRef, containerWidth]);
-    return currentState;
+const useTextInputHeight = ({
+  inputRef,
+  layout,
+  maxHeight,
+  containerWidth,
+  value,
+  onScrollHeightChange
+}) => {
+  const [currentState, setCurrentState] = useState(() => ({
+    layout,
+    height: MIN_HEIGHT
+  }));
+  const prevScrollHeightRef = useRef(null);
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    if (prevScrollHeightRef.current !== null && prevScrollHeightRef.current !== input.scrollHeight) {
+      onScrollHeightChange?.();
+    }
+    prevScrollHeightRef.current = input.scrollHeight;
+    const measureContentHeight = (targetVertical) => {
+      input.classList.add(styles.measure);
+      input.classList.toggle(styles.layoutVertical, targetVertical);
+      const height = input.scrollHeight;
+      input.classList.toggle(styles.layoutVertical, currentState.layout === "vertical");
+      input.classList.remove(styles.measure);
+      return height;
+    };
+    let isVertical;
+    if (layout === "vertical" || value.includes("\n")) {
+      isVertical = true;
+    } else if (value === "") {
+      isVertical = false;
+    } else {
+      isVertical = measureContentHeight(false) > MIN_HEIGHT;
+    }
+    const contentHeight = isVertical ? measureContentHeight(true) : MIN_HEIGHT;
+    const newState = {
+      layout: isVertical ? "vertical" : "horizontal",
+      height: clamp(contentHeight, MIN_HEIGHT, maxHeight ?? contentHeight)
+    };
+    if (Object.keys(currentState).some(
+      (key) => currentState[key] !== newState[key]
+    )) {
+      setCurrentState(newState);
+    }
+  }, [layout, maxHeight, value, inputRef, containerWidth]);
+  return currentState;
 };
 const useFocus = () => {
-    const [isFocused, setFocused] = useState(false);
-    const focusHandler = useCallback((event) => {
-        setFocused(event.target.classList.contains('focus-visible'));
-    }, []);
-    const blurHandler = useCallback(() => {
-        setFocused(false);
-    }, []);
-    return { focusHandler, blurHandler, isFocused };
+  const [isFocused, setFocused] = useState(false);
+  const focusHandler = useCallback((event) => {
+    setFocused(event.target.classList.contains("focus-visible"));
+  }, []);
+  const blurHandler = useCallback(() => {
+    setFocused(false);
+  }, []);
+  return { focusHandler, blurHandler, isFocused };
 };
-const TextInputComponent = ({ value, maxHeight, layout, onSend, containerWidth, hasCentral, hasBothSideControls, onKeyDown, onScroll, className, style, ...textareaProps }, forwardedRef) => {
-    const inputRef = useRef(null);
-    const { hasVerticalScroll, verticalScrollbarProps, scrollContainerRef, resizeCallbackRef, hoverContainerCssClass } = useScrollbar({ axis: 'vertical' });
-    const refCallback = useMultipleRefs(inputRef, scrollContainerRef, forwardedRef);
-    // ResizeObserver внутри useScrollbar видит только изменения размера textarea:
-    // после упора в maxHeight растет лишь scrollHeight - пересчитываем трек по нему
-    const handleScrollHeightChange = useCallback(() => {
-        resizeCallbackRef.current?.();
-    }, [resizeCallbackRef]);
-    const inputParams = useTextInputHeight({
-        inputRef,
-        layout,
-        maxHeight,
+const TextInputComponent = ({
+  value,
+  maxHeight,
+  layout,
+  onSend,
+  containerWidth,
+  hasCentral,
+  hasBothSideControls,
+  onKeyDown,
+  onScroll,
+  className,
+  style,
+  ...textareaProps
+}, forwardedRef) => {
+  const inputRef = useRef(null);
+  const { hasVerticalScroll, verticalScrollbarProps, scrollContainerRef, resizeCallbackRef, hoverContainerCssClass } = useScrollbar({ axis: "vertical" });
+  const refCallback = useMultipleRefs(inputRef, scrollContainerRef, forwardedRef);
+  const handleScrollHeightChange = useCallback(() => {
+    resizeCallbackRef.current?.();
+  }, [resizeCallbackRef]);
+  const inputParams = useTextInputHeight({
+    inputRef,
+    layout,
+    maxHeight,
+    value,
+    containerWidth,
+    onScrollHeightChange: handleScrollHeightChange
+  });
+  const verticalPadding = hasCentral || hasBothSideControls && inputParams.layout === "vertical" ? VERTICAL_PADDING.spacious : VERTICAL_PADDING.base;
+  const [hasHiddenTop, setHasHiddenTop] = useState(false);
+  const [hasHiddenBottom, setHasHiddenBottom] = useState(false);
+  const updateFades = useCallback(() => {
+    const input = inputRef.current;
+    if (!input) {
+      return;
+    }
+    const hiddenTop = input.scrollTop - verticalPadding.top;
+    const hiddenBottom = input.scrollHeight - input.scrollTop - input.clientHeight - verticalPadding.bottom;
+    setHasHiddenTop(hiddenTop > HIDDEN_CONTENT_THRESHOLD);
+    setHasHiddenBottom(hiddenBottom > HIDDEN_CONTENT_THRESHOLD);
+  }, [verticalPadding.top, verticalPadding.bottom]);
+  useLayoutEffect(() => {
+    updateFades();
+  }, [value, inputParams.height, containerWidth, updateFades]);
+  const handleKeyDown = useSendOnEnter({ onSend, onKeyDown });
+  const handleScroll = useCallback(
+    (event) => {
+      updateFades();
+      onScroll?.(event);
+    },
+    [updateFades, onScroll]
+  );
+  const { isFocused, focusHandler, blurHandler } = useFocus();
+  return /* @__PURE__ */ jsxs("div", { className: classNames(styles.textInputWrapper, hoverContainerCssClass), children: [
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        enterKeyHint: "enter",
+        ...textareaProps,
+        onFocus: focusHandler,
+        onBlur: blurHandler,
+        className: classNames(
+          styles.textInput,
+          {
+            [styles.layoutVertical]: inputParams.layout === "vertical",
+            [styles.withTopFade]: hasHiddenTop,
+            [styles.withBottomFade]: hasHiddenBottom,
+            [styles.textInputFocused]: isFocused
+          },
+          className
+        ),
+        style: {
+          ...style,
+          height: inputParams.height,
+          paddingTop: verticalPadding.top,
+          paddingBottom: verticalPadding.bottom
+        },
+        ref: refCallback,
         value,
-        containerWidth,
-        onScrollHeightChange: handleScrollHeightChange,
-    });
-    const verticalPadding = hasCentral || (hasBothSideControls && inputParams.layout === 'vertical')
-        ? VERTICAL_PADDING.spacious
-        : VERTICAL_PADDING.base;
-    // фейд у краёв показываем, только когда за соответствующим краем есть непроскролленный контент
-    const [hasHiddenTop, setHasHiddenTop] = useState(false);
-    const [hasHiddenBottom, setHasHiddenBottom] = useState(false);
-    const updateFades = useCallback(() => {
-        const input = inputRef.current;
-        if (!input) {
-            return;
-        }
-        // верхний и нижний паддинги - часть скроллируемой области, но контента в них нет:
-        // остаток скролла в их пределах не значит, что текст скрыт
-        const hiddenTop = input.scrollTop - verticalPadding.top;
-        const hiddenBottom = input.scrollHeight - input.scrollTop - input.clientHeight - verticalPadding.bottom;
-        setHasHiddenTop(hiddenTop > HIDDEN_CONTENT_THRESHOLD);
-        setHasHiddenBottom(hiddenBottom > HIDDEN_CONTENT_THRESHOLD);
-    }, [verticalPadding.top, verticalPadding.bottom]);
-    // позиция скролла отслеживается через onScroll, здесь - изменения контента, высоты и ширины
-    // контейнера: при упоре в maxHeight высота не меняется, но текст перетекает и за краями
-    // может появиться/исчезнуть скрытый контент
-    useLayoutEffect(() => {
-        updateFades();
-    }, [value, inputParams.height, containerWidth, updateFades]);
-    const handleKeyDown = useSendOnEnter({ onSend, onKeyDown });
-    const handleScroll = useCallback((event) => {
-        updateFades();
-        onScroll?.(event);
-    }, [updateFades, onScroll]);
-    const { isFocused, focusHandler, blurHandler } = useFocus();
-    return (jsxs("div", { className: classNames(styles.textInputWrapper, hoverContainerCssClass), children: [jsx("textarea", { enterKeyHint: "enter", ...textareaProps, onFocus: focusHandler, onBlur: blurHandler, className: classNames(styles.textInput, {
-                    [styles.layoutVertical]: inputParams.layout === 'vertical',
-                    [styles.withTopFade]: hasHiddenTop,
-                    [styles.withBottomFade]: hasHiddenBottom,
-                    [styles.textInputFocused]: isFocused,
-                }, className), style: {
-                    ...style,
-                    height: inputParams.height,
-                    paddingTop: verticalPadding.top,
-                    paddingBottom: verticalPadding.bottom,
-                }, ref: refCallback, value: value, onKeyDown: handleKeyDown, onScroll: handleScroll, "data-qa": "text-input" }), hasVerticalScroll && (jsx("div", { className: styles.scrollbarCell, children: jsx(Scrollbar, { ...verticalScrollbarProps }) }))] }));
+        onKeyDown: handleKeyDown,
+        onScroll: handleScroll,
+        "data-qa": "text-input"
+      }
+    ),
+    hasVerticalScroll && /* @__PURE__ */ jsx("div", { className: styles.scrollbarCell, children: /* @__PURE__ */ jsx(Scrollbar, { ...verticalScrollbarProps }) })
+  ] });
 };
 const TextInput = forwardRef(TextInputComponent);