@alfalab/core-components-pure-cell 4.5.1 → 4.6.0

package/modern/components/main/index.js

@@ -1,18 +1 @@
-export { M as Main } from '../../component-4d708178.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/core-components-comment/modern';
-import '@alfalab/hooks';
-import '../addon/component.js';
-import '@alfalab/core-components-shared/modern';
-import '../amount/component.js';
-import '@alfalab/core-components-amount/modern';
-import '@alfalab/core-components-typography/modern';
-import '../amount-title/component.js';
-import '../category/component.js';
-import '../footer/component.js';
-import '../footer-button/component.js';
-import '@alfalab/core-components-button/modern';
-import '../footer-text/component.js';
-import '../graphics/component.js';
+export { M as Main } from '../../component-edffa17d.js';

package/modern/components/text/component.js

@@ -2,17 +2,4 @@ import 'react';
 import 'classnames';
 import '@alfalab/core-components-shared/modern';
 import '@alfalab/core-components-typography/modern';
-export { T as Text } from '../../component-4d708178.js';
-import 'react-merge-refs';
-import '@alfalab/core-components-comment/modern';
-import '@alfalab/hooks';
-import '../addon/component.js';
-import '../amount/component.js';
-import '@alfalab/core-components-amount/modern';
-import '../amount-title/component.js';
-import '../category/component.js';
-import '../footer/component.js';
-import '../footer-button/component.js';
-import '@alfalab/core-components-button/modern';
-import '../footer-text/component.js';
-import '../graphics/component.js';
+export { T as Text } from '../../component-edffa17d.js';

package/modern/components/text/index.css

@@ -1,4 +1,4 @@
-/* hash: 58bwj */
+/* hash: 10t9a */
 :root {
 } /* deprecated */ :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
 } :root { /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -16,29 +16,29 @@
     --gap-m: 16px;
 } :root {
 } :root {
-} .pure-cell__horizontal_1sh7g {
+} .pure-cell__horizontal_10ste {
     padding: var(--gap-3xs) 0;
-} .pure-cell__rowLimit1_1sh7g {
+} .pure-cell__rowLimit1_10ste {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
     word-break: break-all;
-} .pure-cell__rowLimit2_1sh7g {
+} .pure-cell__rowLimit2_10ste {
     -webkit-line-clamp: 2;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     overflow: hidden;
-} .pure-cell__component_1sh7g {
+} .pure-cell__component_10ste {
     display: flex;
     flex-direction: row;
     flex-wrap: nowrap;
     justify-content: space-between;
     margin: var(--gap-3xs) 0;
     word-break: break-word;
-} .pure-cell__component_1sh7g .pure-cell__vertical_1sh7g {
+} .pure-cell__component_10ste .pure-cell__vertical_10ste {
         justify-content: center;
-    } .pure-cell__title_1sh7g + .pure-cell__value_1sh7g {
+    } .pure-cell__title_10ste + .pure-cell__value_10ste {
     margin-left: var(--gap-m);
     flex-shrink: 0;
 }

package/modern/components/text/index.d.ts

@@ -1 +1 @@
-export * from "../../component-4d708178";
+export * from "../../component-edffa17d";

package/modern/components/text/index.js

@@ -1,18 +1 @@
-export { T as Text } from '../../component-4d708178.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/core-components-comment/modern';
-import '@alfalab/hooks';
-import '../addon/component.js';
-import '@alfalab/core-components-shared/modern';
-import '../amount/component.js';
-import '@alfalab/core-components-amount/modern';
-import '@alfalab/core-components-typography/modern';
-import '../amount-title/component.js';
-import '../category/component.js';
-import '../footer/component.js';
-import '../footer-button/component.js';
-import '@alfalab/core-components-button/modern';
-import '../footer-text/component.js';
-import '../graphics/component.js';
+export { T as Text } from '../../component-edffa17d.js';

package/modern/index.css

@@ -1,4 +1,4 @@
-/* hash: 2ks7t */
+/* hash: 196m7 */
 :root {
 } /* deprecated */ :root {
     --color-light-border-link: #2288fa; /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */ /* deprecated */
@@ -20,21 +20,21 @@
 } :root {
 } :root {
     --focus-color: var(--color-light-border-link);
-} .pure-cell__component_1va9u {
+} .pure-cell__component_1q7ju {
     text-align: unset;
     box-sizing: border-box;
-} .pure-cell__horizontal_1va9u {
+} .pure-cell__horizontal_1q7ju {
     display: flex;
     width: 100%
-} .pure-cell__horizontal_1va9u > section:not(:last-child) {
+} .pure-cell__horizontal_1q7ju > section:not(:last-child) {
         margin-right: var(--gap-m);
-    } .pure-cell__vertical_1va9u {
+    } .pure-cell__vertical_1q7ju {
     display: flex;
     align-items: center;
     flex-direction: column
-} .pure-cell__vertical_1va9u > section:not(:last-child) {
+} .pure-cell__vertical_1q7ju > section:not(:last-child) {
         margin-bottom: var(--gap-s);
-    } .pure-cell__button_1va9u {
+    } .pure-cell__button_1q7ju {
     font-family: inherit;
     background: none;
     border: 0;
@@ -42,37 +42,37 @@
     cursor: pointer;
     transition: opacity 0.15s ease-in-out;
     padding: 0
-} .pure-cell__button_1va9u:hover {
+} .pure-cell__button_1q7ju:hover {
         opacity: 0.8;
-    } .pure-cell__button_1va9u:active {
+    } .pure-cell__button_1q7ju:active {
         opacity: 0.6;
-    } .pure-cell__link_1va9u {
+    } .pure-cell__link_1q7ju {
     text-decoration: none;
     color: inherit;
     cursor: pointer;
     transition: opacity 0.15s ease-in-out
-} .pure-cell__link_1va9u:hover {
+} .pure-cell__link_1q7ju:hover {
         opacity: 0.8;
-    } .pure-cell__link_1va9u:active {
+    } .pure-cell__link_1q7ju:active {
         opacity: 0.6;
-    } .pure-cell__none_1va9u {
+    } .pure-cell__none_1q7ju {
     padding: 0;
-} .pure-cell__airy_1va9u {
+} .pure-cell__airy_1q7ju {
     padding: var(--gap-m) 0;
-} .pure-cell__defaultPadding_1va9u {
+} .pure-cell__defaultPadding_1q7ju {
     padding: var(--gap-s) 0;
-} .pure-cell__compact_1va9u {
+} .pure-cell__compact_1q7ju {
     padding: var(--gap-xs) 0;
-} .pure-cell__tiny_1va9u {
+} .pure-cell__tiny_1q7ju {
     padding: var(--gap-2xs) 0;
-} .pure-cell__left_1va9u {
+} .pure-cell__left_1q7ju {
     padding-left: var(--gap-m);
-} .pure-cell__right_1va9u {
+} .pure-cell__right_1q7ju {
     padding-right: var(--gap-m);
-} .pure-cell__both_1va9u {
+} .pure-cell__both_1q7ju {
     padding-right: var(--gap-m);
     padding-left: var(--gap-m);
-} .pure-cell__focused_1va9u {
+} .pure-cell__focused_1q7ju {
     outline: 2px solid var(--focus-color);
     outline-offset: 2px;
 }

package/modern/index.d.ts

@@ -1 +1 @@
-export { PureCell } from "./component-5a229016";
+export { PureCell } from "./component-fd7196d2";

package/modern/index.js

@@ -1,18 +1 @@
-export { P as PureCell } from './component-4d708178.js';
-import 'react';
-import 'react-merge-refs';
-import 'classnames';
-import '@alfalab/core-components-comment/modern';
-import '@alfalab/hooks';
-import './components/addon/component.js';
-import '@alfalab/core-components-shared/modern';
-import './components/amount/component.js';
-import '@alfalab/core-components-amount/modern';
-import '@alfalab/core-components-typography/modern';
-import './components/amount-title/component.js';
-import './components/category/component.js';
-import './components/footer/component.js';
-import './components/footer-button/component.js';
-import '@alfalab/core-components-button/modern';
-import './components/footer-text/component.js';
-import './components/graphics/component.js';
+export { P as PureCell } from './component-edffa17d.js';

package/modern/shared/index.d.ts

@@ -0,0 +1 @@
+export { getPureCellTestIds } from "../utils";

package/modern/shared/index.js

@@ -0,0 +1 @@
+export { getPureCellTestIds } from '../utils.js';

package/modern/utils.d.ts

@@ -0,0 +1,20 @@
+declare function getPureCellTestIds(dataTestId: string): {
+    pureCell: string;
+    addon: string;
+    amount: string;
+    amountText: string;
+    amountTitle: string;
+    coreAmountTitle: string;
+    categoryName: string;
+    categoryPercent: string;
+    categoryRightAddon: string;
+    content: string;
+    footer: string;
+    footerButton: string;
+    extraSubtitle: string;
+    graphics: string;
+    main: string;
+    textContent: string;
+    textValue: string;
+};
+export { getPureCellTestIds };

package/modern/utils.js

@@ -0,0 +1,25 @@
+import { getDataTestId } from '@alfalab/core-components-shared/modern';
+
+function getPureCellTestIds(dataTestId) {
+    return {
+        pureCell: dataTestId,
+        addon: getDataTestId(dataTestId, 'addon'),
+        amount: getDataTestId(dataTestId, 'amount'),
+        amountText: getDataTestId(dataTestId, 'amount-text'),
+        amountTitle: getDataTestId(dataTestId, 'amount-title'),
+        coreAmountTitle: getDataTestId(dataTestId, 'core-amount-title'),
+        categoryName: getDataTestId(dataTestId, 'category-name'),
+        categoryPercent: getDataTestId(dataTestId, 'category-percent'),
+        categoryRightAddon: getDataTestId(dataTestId, 'category-right-addon'),
+        content: getDataTestId(dataTestId, 'content'),
+        footer: getDataTestId(dataTestId, 'footer'),
+        footerButton: getDataTestId(dataTestId, 'button'),
+        extraSubtitle: getDataTestId(dataTestId, 'footer-title'),
+        graphics: getDataTestId(dataTestId, 'graphics'),
+        main: getDataTestId(dataTestId, 'main'),
+        textContent: getDataTestId(dataTestId, 'text_content'),
+        textValue: getDataTestId(dataTestId, 'text_value'),
+    };
+}
+
+export { getPureCellTestIds };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@alfalab/core-components-pure-cell",
-    "version": "4.5.1",
+    "version": "4.6.0",
     "description": "",
     "keywords": [],
     "license": "MIT",
@@ -16,10 +16,10 @@
     },
     "dependencies": {
         "@alfalab/core-components-amount": "^3.3.1",
-        "@alfalab/core-components-button": "^11.1.0",
-        "@alfalab/core-components-typography": "^4.3.0",
-        "@alfalab/core-components-comment": "^2.3.1",
-        "@alfalab/core-components-shared": "^0.9.0",
+        "@alfalab/core-components-button": "^11.2.0",
+        "@alfalab/core-components-typography": "^4.5.0",
+        "@alfalab/core-components-comment": "^2.3.3",
+        "@alfalab/core-components-shared": "^0.9.1",
         "@alfalab/hooks": "^1.13.0",
         "@alfalab/data": "^1.6.0",
         "classnames": "^2.3.1",

package/shared/index.d.ts

@@ -0,0 +1 @@
+export { getPureCellTestIds } from "../utils";

package/shared/index.js

@@ -0,0 +1,9 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var utils = require('../utils.js');
+
+
+
+exports.getPureCellTestIds = utils.getPureCellTestIds;

package/shared/package.json

@@ -0,0 +1,3 @@
+{
+    "module": "../esm/shared/index.js"
+}

package/src/component.tsx

@@ -33,6 +33,7 @@ import styles from './index.module.css';
 export type PureCellContext = {
     /** Направление */
     direction?: 'horizontal' | 'vertical';
+    dataTestId?: string;
 };
 
 // eslint-disable-next-line @typescript-eslint/no-redeclare
@@ -126,7 +127,7 @@ const PureCellComponent = forwardRef<HTMLElement, PureProps>(
                     data-test-id={dataTestId}
                     onClick={onClick}
                 >
-                    <PureCellContext.Provider value={{ direction }}>
+                    <PureCellContext.Provider value={{ direction, dataTestId }}>
                         {children}
                     </PureCellContext.Provider>
                 </Component>
@@ -142,7 +143,7 @@ const PureCellComponent = forwardRef<HTMLElement, PureProps>(
                     data-test-id={dataTestId}
                     onClick={onClick}
                 >
-                    <PureCellContext.Provider value={{ direction }}>
+                    <PureCellContext.Provider value={{ direction, dataTestId }}>
                         {children}
                     </PureCellContext.Provider>
                 </Component>
@@ -157,7 +158,7 @@ const PureCellComponent = forwardRef<HTMLElement, PureProps>(
                 className={cn(addClasses, className)}
                 data-test-id={dataTestId}
             >
-                <PureCellContext.Provider value={{ direction }}>
+                <PureCellContext.Provider value={{ direction, dataTestId }}>
                     {children}
                 </PureCellContext.Provider>
             </Component>

package/src/components/addon/component.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { PureCellContext } from '../../component';
 import { AddonElement } from '../types';
 
 import styles from './index.module.css';
@@ -35,11 +36,15 @@ export const Addon: React.FC<Props> = ({
     verticalAlign = 'top',
     addonPadding = 'default',
     dataTestId,
-}) => (
-    <section
-        className={cn(styles.component, styles[addonPadding], styles[verticalAlign])}
-        data-test-id={getDataTestId(dataTestId, 'addon')}
-    >
-        {children}
-    </section>
-);
+}) => {
+    const pureCellContext = useContext(PureCellContext);
+
+    return (
+        <section
+            className={cn(styles.component, styles[addonPadding], styles[verticalAlign])}
+            data-test-id={getDataTestId(dataTestId || pureCellContext.dataTestId, 'addon')}
+        >
+            {children}
+        </section>
+    );
+};

package/src/components/amount/component.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 
 import { Amount as CoreAmount } from '@alfalab/core-components-amount';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Color, Typography } from '@alfalab/core-components-typography';
 
+import { PureCellContext } from '../../component';
 import { AmountProps as AmountType } from '../typesProps';
 
 import styles from './index.module.css';
@@ -40,18 +41,22 @@ export const Amount: React.FC<Props> = ({
     minorUnits = 100,
     dataTestId,
     ...restProps
-}) => (
-    <Typography.Text
-        view={textView}
-        dataTestId={getDataTestId(dataTestId, 'amount-text')}
-        className={cn(styles.component)}
-        color={color}
-    >
-        <CoreAmount
-            minority={minority || minorUnits}
-            bold={weight === 'bold' ? 'full' : 'none'}
-            dataTestId={getDataTestId(dataTestId, 'amount')}
-            {...restProps}
-        />
-    </Typography.Text>
-);
+}) => {
+    const pureCellContext = useContext(PureCellContext);
+
+    return (
+        <Typography.Text
+            view={textView}
+            dataTestId={getDataTestId(dataTestId || pureCellContext.dataTestId, 'amount-text')}
+            className={cn(styles.component)}
+            color={color}
+        >
+            <CoreAmount
+                minority={minority || minorUnits}
+                bold={weight === 'bold' ? 'full' : 'none'}
+                dataTestId={getDataTestId(dataTestId || pureCellContext.dataTestId, 'amount')}
+                {...restProps}
+            />
+        </Typography.Text>
+    );
+};

package/src/components/amount-title/component.tsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 
 import { Amount as CoreAmount } from '@alfalab/core-components-amount';
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Color, TitleProps, Typography } from '@alfalab/core-components-typography';
 
+import { PureCellContext } from '../../component';
 import { AmountProps as AmountType } from '../typesProps';
 
 import styles from './index.module.css';
@@ -37,6 +38,8 @@ export const AmountTitle: React.FC<Props> = ({
     titleProps = {},
     ...restProps
 }) => {
+    const pureCellContext = useContext(PureCellContext);
+
     const titleDefaultProps = {
         tag: 'h4',
         view: 'small',
@@ -47,13 +50,16 @@ export const AmountTitle: React.FC<Props> = ({
     return (
         <Typography.Title
             {...titleDefaultProps}
-            dataTestId={getDataTestId(dataTestId, 'amount-title')}
+            dataTestId={getDataTestId(dataTestId || pureCellContext.dataTestId, 'amount-title')}
             className={cn(styles.component, titleProps.className)}
         >
             <CoreAmount
                 minority={minority || minorUnits}
                 className={cn(styles.weight, className)}
-                dataTestId={getDataTestId(dataTestId, 'core-amount-title')}
+                dataTestId={getDataTestId(
+                    dataTestId || pureCellContext.dataTestId,
+                    'core-amount-title',
+                )}
                 {...restProps}
                 bold='none'
             />

package/src/components/category/component.tsx

@@ -1,8 +1,10 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useContext } from 'react';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 import { Typography } from '@alfalab/core-components-typography';
 
+import { PureCellContext } from '../../component';
+
 import styles from './index.module.css';
 
 type Props = {
@@ -34,34 +36,47 @@ export const Category: React.FC<Props> = ({
     categoryPercent,
     rightAddons,
     dataTestId,
-}) => (
-    <div className={styles.component} data-test-id='cell-pure-category'>
-        <Typography.Text
-            view='primary-small'
-            color='secondary'
-            dataTestId={getDataTestId(dataTestId, 'category-name')}
-            className={styles.categoryName}
-        >
-            {categoryName}
-        </Typography.Text>
-        {categoryPercent !== undefined && (
+}) => {
+    const pureCellContext = useContext(PureCellContext);
+
+    return (
+        <div className={styles.component} data-test-id='cell-pure-category'>
             <Typography.Text
-                tag='div'
                 view='primary-small'
                 color='secondary'
-                className={styles.categoryPercent}
-                dataTestId={getDataTestId(dataTestId, 'category-percent')}
+                dataTestId={getDataTestId(
+                    dataTestId || pureCellContext.dataTestId,
+                    'category-name',
+                )}
+                className={styles.categoryName}
             >
-                {categoryPercent}%
+                {categoryName}
             </Typography.Text>
-        )}
-        {rightAddons !== undefined && (
-            <div
-                className={styles.rightAddon}
-                data-test-id={getDataTestId(dataTestId, 'category-right-addon')}
-            >
-                {rightAddons}
-            </div>
-        )}
-    </div>
-);
+            {categoryPercent !== undefined && (
+                <Typography.Text
+                    tag='div'
+                    view='primary-small'
+                    color='secondary'
+                    className={styles.categoryPercent}
+                    dataTestId={getDataTestId(
+                        dataTestId || pureCellContext.dataTestId,
+                        'category-percent',
+                    )}
+                >
+                    {categoryPercent}%
+                </Typography.Text>
+            )}
+            {rightAddons !== undefined && (
+                <div
+                    className={styles.rightAddon}
+                    data-test-id={getDataTestId(
+                        dataTestId || pureCellContext.dataTestId,
+                        'category-right-addon',
+                    )}
+                >
+                    {rightAddons}
+                </div>
+            )}
+        </div>
+    );
+};

package/src/components/content/component.tsx

@@ -22,12 +22,12 @@ type Props = {
 };
 
 export const Content: React.FC<Props> = ({ children, dataTestId }) => {
-    const { direction } = useContext(PureCellContext);
+    const { direction, dataTestId: contextDataTestId } = useContext(PureCellContext);
 
     return (
         <section
             className={cn(styles.component, { [styles.horizontal]: direction === 'horizontal' })}
-            data-test-id={getDataTestId(dataTestId, 'content')}
+            data-test-id={getDataTestId(dataTestId || contextDataTestId, 'content')}
         >
             {children}
         </section>

package/src/components/footer/component.tsx

@@ -1,8 +1,9 @@
-import React from 'react';
+import React, { useContext } from 'react';
 import cn from 'classnames';
 
 import { getDataTestId } from '@alfalab/core-components-shared';
 
+import { PureCellContext } from '../../component';
 import { FooterElement } from '../types';
 
 import styles from './index.module.css';
@@ -25,11 +26,15 @@ type Props = {
     dataTestId?: string;
 };
 
-export const Footer: React.FC<Props> = ({ children, footerPadding = 'default', dataTestId }) => (
-    <footer
-        className={cn(styles.component, styles[footerPadding])}
-        data-test-id={getDataTestId(dataTestId, 'footer')}
-    >
-        {children}
-    </footer>
-);
+export const Footer: React.FC<Props> = ({ children, footerPadding = 'default', dataTestId }) => {
+    const pureCellContext = useContext(PureCellContext);
+
+    return (
+        <footer
+            className={cn(styles.component, styles[footerPadding])}
+            data-test-id={getDataTestId(dataTestId || pureCellContext.dataTestId, 'footer')}
+        >
+            {children}
+        </footer>
+    );
+};