@hh.ru/magritte-ui-chat-marker 1.0.1

package/ChatMarker.d.ts

@@ -0,0 +1,2 @@
+import { ChatMarkerProps } from '@hh.ru/magritte-ui-chat-marker/types';
+export declare const ChatMarker: import("react").ForwardRefExoticComponent<ChatMarkerProps & import("react").RefAttributes<HTMLDivElement>>;

package/ChatMarker.js

@@ -0,0 +1,34 @@
+import './index.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { useResizeObserver } from '@hh.ru/magritte-common-resize';
+import { Divider } from '@hh.ru/magritte-ui-divider';
+import { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';
+import { LoaderDefaultPropsContext } from '@hh.ru/magritte-ui-loader';
+import { Text } from '@hh.ru/magritte-ui-typography';
+
+var styles = {"chat-marker":"magritte-chat-marker___ya9dO_1-0-1","chatMarker":"magritte-chat-marker___ya9dO_1-0-1","line":"magritte-line___0zxh4_1-0-1","icon":"magritte-icon___RUogw_1-0-1","label":"magritte-label___RKh8J_1-0-1","label-outgoing":"magritte-label-outgoing___gqTn0_1-0-1","labelOutgoing":"magritte-label-outgoing___gqTn0_1-0-1","fade-out":"magritte-fade-out___Mog0k_1-0-1","fadeOut":"magritte-fade-out___Mog0k_1-0-1","label-outgoing-centered":"magritte-label-outgoing-centered___GikqE_1-0-1","labelOutgoingCentered":"magritte-label-outgoing-centered___GikqE_1-0-1","label-incoming":"magritte-label-incoming___cq-7a_1-0-1","labelIncoming":"magritte-label-incoming___cq-7a_1-0-1","fade-in":"magritte-fade-in___gDnCc_1-0-1","fadeIn":"magritte-fade-in___gDnCc_1-0-1"};
+
+const LABEL_ID = 'label';
+const ChatMarker = forwardRef(({ className, 'data-qa': dataQa = 'chat-marker', divider = false, icon, label, mode = 'secondary', ...props }, ref) => {
+    const labelWidth = useRef(0);
+    const [transition, setTransition] = useState({ label, outgoing: null });
+    const observeLabel = useResizeObserver((elements) => {
+        labelWidth.current = elements.get(LABEL_ID)?.getBoundingClientRect().width ?? 0;
+    });
+    if (transition.label !== label) {
+        const width = Math.ceil(labelWidth.current);
+        setTransition({ label, outgoing: width > 0 ? { text: transition.label, width } : null });
+    }
+    const { outgoing } = transition;
+    const renderText = (value) => (jsx(Text, { typography: "label-3-regular", style: mode, children: value }));
+    const line = divider && (jsx("div", { className: styles.line, "data-qa": "chat-marker-divider", "aria-hidden": true, children: jsx(Divider, {}) }));
+    return (jsxs("div", { ...props, className: classnames(className, styles.chatMarker), "data-qa": dataQa, ref: ref, children: [line, icon && (jsx(IconDefaultPropsContext, { props: { initialColor: mode }, children: jsx(LoaderDefaultPropsContext, { props: { size: 16, color: mode }, children: jsx("span", { className: styles.icon, "data-qa": "chat-marker-icon", "aria-hidden": true, children: icon }) }) })), jsxs("div", { ref: observeLabel(LABEL_ID), className: styles.label, "data-qa": "chat-marker-label", children: [jsx("span", { className: classnames({ [styles.labelIncoming]: outgoing !== null }), "data-qa": "chat-marker-label-text", children: renderText(label) }, label), outgoing !== null && (jsx("span", { className: classnames(styles.labelOutgoing, {
+                            [styles.labelOutgoingCentered]: divider,
+                        }), style: { width: outgoing.width }, "data-qa": "chat-marker-label-outgoing", onAnimationEnd: () => setTransition({ label, outgoing: null }), "aria-hidden": true, children: renderText(outgoing.text) }, outgoing.text))] }), line] }));
+});
+ChatMarker.displayName = 'ChatMarker';
+
+export { ChatMarker };
+//# sourceMappingURL=ChatMarker.js.map

package/ChatMarker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChatMarker.js","sources":["src/ChatMarker.tsx"],"sourcesContent":["import { forwardRef, useRef, useState } from 'react';\nimport classnames from 'classnames';\n\nimport { useResizeObserver } from '@hh.ru/magritte-common-resize';\nimport { ChatMarkerProps } from '@hh.ru/magritte-ui-chat-marker/types';\nimport { Divider } from '@hh.ru/magritte-ui-divider';\nimport { IconDefaultPropsContext } from '@hh.ru/magritte-ui-icon';\nimport { LoaderDefaultPropsContext } from '@hh.ru/magritte-ui-loader';\nimport { Text } from '@hh.ru/magritte-ui-typography';\n\nimport styles from './chat-marker.less';\n\nconst LABEL_ID = 'label';\n\nexport const ChatMarker = forwardRef<HTMLDivElement, ChatMarkerProps>(\n    (\n        { className, 'data-qa': dataQa = 'chat-marker', divider = false, icon, label, mode = 'secondary', ...props },\n        ref\n    ) => {\n        const labelWidth = useRef(0);\n        const [transition, setTransition] = useState<{\n            label: string;\n            outgoing: { text: string; width: number } | null;\n        }>({ label, outgoing: null });\n\n        const observeLabel = useResizeObserver((elements) => {\n            labelWidth.current = elements.get(LABEL_ID)?.getBoundingClientRect().width ?? 0;\n        });\n\n        if (transition.label !== label) {\n            const width = Math.ceil(labelWidth.current);\n            setTransition({ label, outgoing: width > 0 ? { text: transition.label, width } : null });\n        }\n\n        const { outgoing } = transition;\n\n        const renderText = (value: string) => (\n            <Text typography=\"label-3-regular\" style={mode}>\n                {value}\n            </Text>\n        );\n\n        const line = divider && (\n            <div className={styles.line} data-qa=\"chat-marker-divider\" aria-hidden>\n                <Divider />\n            </div>\n        );\n\n        return (\n            <div {...props} className={classnames(className, styles.chatMarker)} data-qa={dataQa} ref={ref}>\n                {line}\n                {icon && (\n                    <IconDefaultPropsContext props={{ initialColor: mode }}>\n                        <LoaderDefaultPropsContext props={{ size: 16, color: mode }}>\n                            <span className={styles.icon} data-qa=\"chat-marker-icon\" aria-hidden>\n                                {icon}\n                            </span>\n                        </LoaderDefaultPropsContext>\n                    </IconDefaultPropsContext>\n                )}\n                <div ref={observeLabel(LABEL_ID)} className={styles.label} data-qa=\"chat-marker-label\">\n                    <span\n                        key={label}\n                        className={classnames({ [styles.labelIncoming]: outgoing !== null })}\n                        data-qa=\"chat-marker-label-text\"\n                    >\n                        {renderText(label)}\n                    </span>\n                    {outgoing !== null && (\n                        <span\n                            key={outgoing.text}\n                            className={classnames(styles.labelOutgoing, {\n                                [styles.labelOutgoingCentered]: divider,\n                            })}\n                            style={{ width: outgoing.width }}\n                            data-qa=\"chat-marker-label-outgoing\"\n                            onAnimationEnd={() => setTransition({ label, outgoing: null })}\n                            aria-hidden\n                        >\n                            {renderText(outgoing.text)}\n                        </span>\n                    )}\n                </div>\n                {line}\n            </div>\n        );\n    }\n);\n\nChatMarker.displayName = 'ChatMarker';\n"],"names":["_jsx","_jsxs"],"mappings":"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"}

package/index.css

@@ -0,0 +1,67 @@
+:root{
+  --magritte-semantic-animation-time-s-duration-v25-0-1:200ms;
+  --magritte-semantic-animation-ease-base-timing-function-v25-0-1:cubic-bezier(0.4, 0.24, 0, 1);
+}
+.magritte-chat-marker___ya9dO_1-0-1{
+  --label-animation-duration:0ms;
+  display:flex;
+  align-items:flex-start;
+  gap:12px;
+}
+@media (prefers-reduced-motion: no-preference){
+  .magritte-chat-marker___ya9dO_1-0-1{
+    --label-animation-duration:var(--magritte-semantic-animation-time-s-duration-v25-0-1);
+  }
+}
+.magritte-line___0zxh4_1-0-1,
+.magritte-icon___RUogw_1-0-1{
+  display:flex;
+  align-items:center;
+  height:20px;
+}
+.magritte-line___0zxh4_1-0-1{
+  flex:1 1 0;
+}
+.magritte-icon___RUogw_1-0-1{
+  flex-shrink:0;
+}
+.magritte-label___RKh8J_1-0-1{
+  position:relative;
+  flex:0 1 auto;
+  min-width:0;
+}
+.magritte-label-outgoing___gqTn0_1-0-1{
+  position:absolute;
+  top:0;
+  left:0;
+  animation-name:magritte-fade-out___Mog0k_1-0-1;
+}
+.magritte-label-outgoing-centered___GikqE_1-0-1{
+  left:50%;
+  transform:translateX(-50%);
+}
+.magritte-label-incoming___cq-7a_1-0-1,
+.magritte-label-outgoing___gqTn0_1-0-1{
+  animation-duration:var(--label-animation-duration);
+  animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v25-0-1);
+  animation-fill-mode:forwards;
+}
+.magritte-label-incoming___cq-7a_1-0-1{
+  animation-name:magritte-fade-in___gDnCc_1-0-1;
+}
+@keyframes magritte-fade-in___gDnCc_1-0-1{
+  from{
+    opacity:0;
+  }
+  to{
+    opacity:1;
+  }
+}
+@keyframes magritte-fade-out___Mog0k_1-0-1{
+  from{
+    opacity:1;
+  }
+  to{
+    opacity:0;
+  }
+}

package/index.d.ts

@@ -0,0 +1,2 @@
+export * from '@hh.ru/magritte-ui-chat-marker/ChatMarker';
+export { type ChatMarkerMode, type ChatMarkerProps } from '@hh.ru/magritte-ui-chat-marker/types';

package/index.js

@@ -0,0 +1,11 @@
+import './index.css';
+export { ChatMarker } from './ChatMarker.js';
+import 'react/jsx-runtime';
+import 'react';
+import 'classnames';
+import '@hh.ru/magritte-common-resize';
+import '@hh.ru/magritte-ui-divider';
+import '@hh.ru/magritte-ui-icon';
+import '@hh.ru/magritte-ui-loader';
+import '@hh.ru/magritte-ui-typography';
+//# sourceMappingURL=index.js.map

package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;"}

package/index.mock.d.ts

@@ -0,0 +1,3 @@
+import { ForwardRefExoticComponent } from 'react';
+export { type ChatMarkerMode, type ChatMarkerProps } from '@hh.ru/magritte-ui-chat-marker/types';
+export declare const ChatMarker: ForwardRefExoticComponent<Record<string, unknown>>;

package/index.mock.js

@@ -0,0 +1,7 @@
+import './index.css';
+import { mockComponent } from '@hh.ru/magritte-ui-mock-component';
+
+const ChatMarker = mockComponent('ChatMarker');
+
+export { ChatMarker };
+//# sourceMappingURL=index.mock.js.map

package/index.mock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mock.js","sources":["src/index.mock.ts"],"sourcesContent":["import { ForwardRefExoticComponent } from 'react';\n\nimport { mockComponent } from '@hh.ru/magritte-ui-mock-component';\n\nexport { type ChatMarkerMode, type ChatMarkerProps } from '@hh.ru/magritte-ui-chat-marker/types';\n\nexport const ChatMarker: ForwardRefExoticComponent<Record<string, unknown>> = mockComponent('ChatMarker');\n"],"names":[],"mappings":";;MAMa,UAAU,GAAuD,aAAa,CAAC,YAAY;;;;"}

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "@hh.ru/magritte-ui-chat-marker",
+  "version": "1.0.1",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "sideEffects": [
+    "index.css"
+  ],
+  "scripts": {
+    "build": "yarn root:build $(pwd)",
+    "build-test-branch": "yarn root:build-test-branch $(pwd)",
+    "prepack": "yarn root:prepack $(pwd)",
+    "postpublish": "yarn root:postpublish $(pwd)",
+    "stylelint-check": "yarn root:stylelint-check $(pwd)",
+    "eslint-check": "yarn root:eslint-check $(pwd)",
+    "ts-config": "yarn root:ts-config $(pwd)",
+    "ts-check": "yarn root:ts-check $(pwd)",
+    "test": "yarn root:test $(pwd)",
+    "watch": "yarn root:watch $(pwd)"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@hh.ru/magritte-common-resize": "0.2.2",
+    "@hh.ru/magritte-design-tokens": "25.0.1",
+    "@hh.ru/magritte-ui-divider": "3.2.8",
+    "@hh.ru/magritte-ui-icon": "15.0.3",
+    "@hh.ru/magritte-ui-loader": "4.1.0",
+    "@hh.ru/magritte-ui-mock-component": "1.1.7",
+    "@hh.ru/magritte-ui-typography": "5.3.12"
+  },
+  "peerDependencies": {
+    "classnames": ">=2.3.2",
+    "react": ">=18.2.0"
+  },
+  "gitHead": "654e4a7ad4debb3463a3c37b316fbdc7571e9dff"
+}

package/types.d.ts

@@ -0,0 +1,19 @@
+export type ChatMarkerMode = 'secondary' | 'tertiary';
+export interface ChatMarkerProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
+    /** Основной текст маркера */
+    label: string;
+    /** Слот перед текстом: иконка или лоадер */
+    icon?: React.ReactNode;
+    /** Горизонтальные разделители с обеих сторон от содержимого
+     * @default false
+     */
+    divider?: boolean;
+    /** Цвет текста и иконки
+     * @default secondary
+     */
+    mode?: ChatMarkerMode;
+    /** Значение data-qa на корневом элементе
+     * @default chat-marker
+     */
+    'data-qa'?: string;
+}

package/types.js

@@ -0,0 +1,3 @@
+import './index.css';
+
+//# sourceMappingURL=types.js.map

package/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}