@gravity-ui/page-constructor 4.13.2-alpha.0 → 4.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/build/cjs/components/BalancedMasonry/BalancedMasonry.d.ts +2 -2
  2. package/build/cjs/components/BalancedMasonry/BalancedMasonry.js +4 -3
  3. package/build/cjs/components/Button/Button.css +8 -6
  4. package/build/cjs/hooks/useAnalytics.d.ts +1 -1
  5. package/build/cjs/hooks/useAnalytics.js +3 -4
  6. package/build/esm/components/BalancedMasonry/BalancedMasonry.d.ts +2 -2
  7. package/build/esm/components/BalancedMasonry/BalancedMasonry.js +5 -4
  8. package/build/esm/components/Button/Button.css +8 -6
  9. package/build/esm/hooks/useAnalytics.d.ts +1 -1
  10. package/build/esm/hooks/useAnalytics.js +3 -4
  11. package/package.json +1 -1
  12. package/styles/mixins.scss +7 -5
  13. package/widget/index.js +1 -1
package/build/cjs/components/BalancedMasonry/BalancedMasonry.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ReactNode } from 'react';
2
- import { WithChildren } from '../../models';
3
- export interface BalancedMasonryProps {
2
+ import { QAProps, WithChildren } from '../../models';
3
+ export interface BalancedMasonryProps extends QAProps {
4
4
  className: string;
5
5
  columnClassName: string;
6
6
  children: ReactNode[];
package/build/cjs/components/BalancedMasonry/BalancedMasonry.js CHANGED
@@ -7,7 +7,8 @@ const ssrContext_1 = require("../../context/ssrContext");
7
7
  const utils_1 = require("../../utils");
8
8
  const b = (0, utils_1.block)('BalancedMasonry');
9
9
  const BalancedMasonry = (props) => {
10
- const { className, columnClassName, children = [], breakpointCols } = props;
10
+ const { className, columnClassName, children = [], breakpointCols, qa } = props;
11
+ const qaAttributes = (0, utils_1.getQaAttrubutes)(qa, 'column');
11
12
  const { isServer } = (0, react_1.useContext)(ssrContext_1.SSRContext);
12
13
  const getCurrentColumnsCount = (0, react_1.useCallback)(() => {
13
14
  const breakpoints = Object.entries(breakpointCols).sort(([firstBreakpoint], [secondBreakpoint]) => {
@@ -76,9 +77,9 @@ const BalancedMasonry = (props) => {
76
77
  }
77
78
  return () => observer.disconnect();
78
79
  }, [balanceColumns, children]);
79
- return (react_1.default.createElement("div", { className: b(null, className) },
80
+ return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa },
80
81
  react_1.default.createElement("div", { className: b('hidden-container'), style: { width: `${100 / columnCount}%` } },
81
82
  react_1.default.createElement("div", { ref: containerRef, className: b('hidden-list') }, children)),
82
- columns.map((columnElements, index) => (react_1.default.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` } }, columnElements)))));
83
+ columns.map((columnElements, index) => (react_1.default.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` }, "data-qa": qaAttributes.column }, columnElements)))));
83
84
  };
84
85
  exports.default = BalancedMasonry;
package/build/cjs/components/Button/Button.css CHANGED
@@ -11,33 +11,35 @@ unpredictable css rules order in build */
11
11
  .pc-button-block__image + .pc-button-block__text, .pc-button-block__text + .pc-button-block__image {
12
12
  margin-left: var(--btn-image-margin);
13
13
  }
14
- .pc-button-block_theme_github.pc-button-block_theme_github {
14
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github {
15
15
  --g-button-background-color: var(--pc-monochrome-button-background-color);
16
16
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
17
17
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
18
18
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
19
19
  }
20
- .pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github:focus {
20
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:focus {
21
21
  color: var(--pc-monochrome-button-color);
22
22
  }
23
- .pc-button-block_theme_github.pc-button-block_theme_github:hover {
23
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:hover {
24
24
  color: var(--pc-monochrome-button-color);
25
25
  }
26
+
26
27
  .pc-button-block_theme_scale::before, .pc-button-block_theme_scale::after {
27
28
  border-radius: 300px;
28
29
  }
29
- .pc-button-block_theme_monochrome {
30
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome {
30
31
  --g-button-background-color: var(--pc-monochrome-button-background-color);
31
32
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
32
33
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
33
34
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
34
35
  }
35
- .pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome:focus {
36
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:focus {
36
37
  color: var(--pc-monochrome-button-color);
37
38
  }
38
- .pc-button-block_theme_monochrome:hover {
39
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:hover {
39
40
  color: var(--pc-monochrome-button-color);
40
41
  }
42
+
41
43
  .pc-button-block_size_s {
42
44
  --btn-image-margin: 10px;
43
45
  }
package/build/cjs/hooks/useAnalytics.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { AnalyticsEvent } from '../models';
2
- export declare const useAnalytics: (name?: string, target?: string) => ((e?: AnalyticsEvent | AnalyticsEvent[] | null, additionalContext?: Record<string, string>) => void) & import("lodash").MemoizedFunction;
2
+ export declare const useAnalytics: (name?: string, target?: string) => (e?: AnalyticsEvent | AnalyticsEvent[] | null, additionalContext?: Record<string, string>) => void;
package/build/cjs/hooks/useAnalytics.js CHANGED
@@ -2,7 +2,6 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.useAnalytics = void 0;
4
4
  const react_1 = require("react");
5
- const lodash_1 = require("lodash");
6
5
  const analyticsContext_1 = require("../context/analyticsContext");
7
6
  const blockIdContext_1 = require("../context/blockIdContext");
8
7
  const models_1 = require("../models");
@@ -18,10 +17,10 @@ const useAnalytics = (name = '', target) => {
18
17
  }
19
18
  : undefined, [context, name, target]);
20
19
  if (!sendEvents) {
21
- return (0, lodash_1.memoize)(() => { });
20
+ return () => { };
22
21
  }
23
22
  const defaultEvents = defaultEvent && autoEvents ? [defaultEvent] : [];
24
- return (0, lodash_1.memoize)((e, additionalContext) => {
23
+ return (e, additionalContext) => {
25
24
  let events = defaultEvents;
26
25
  if (e) {
27
26
  events = Array.isArray(e) ? [...events, ...e] : [...events, e];
@@ -33,6 +32,6 @@ const useAnalytics = (name = '', target) => {
33
32
  ? events.map((event) => (Object.assign(Object.assign({}, event), additionalContext)))
34
33
  : events;
35
34
  sendEvents(preparedEvents);
36
- });
35
+ };
37
36
  };
38
37
  exports.useAnalytics = useAnalytics;
package/build/esm/components/BalancedMasonry/BalancedMasonry.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { ReactNode } from 'react';
2
- import { WithChildren } from '../../models';
2
+ import { QAProps, WithChildren } from '../../models';
3
3
  import './BalancedMasonry.css';
4
- export interface BalancedMasonryProps {
4
+ export interface BalancedMasonryProps extends QAProps {
5
5
  className: string;
6
6
  columnClassName: string;
7
7
  children: ReactNode[];
package/build/esm/components/BalancedMasonry/BalancedMasonry.js CHANGED
@@ -1,11 +1,12 @@
1
1
  import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
2
2
  import _ from 'lodash';
3
3
  import { SSRContext } from '../../context/ssrContext';
4
- import { block } from '../../utils';
4
+ import { block, getQaAttrubutes } from '../../utils';
5
5
  import './BalancedMasonry.css';
6
6
  const b = block('BalancedMasonry');
7
7
  const BalancedMasonry = (props) => {
8
- const { className, columnClassName, children = [], breakpointCols } = props;
8
+ const { className, columnClassName, children = [], breakpointCols, qa } = props;
9
+ const qaAttributes = getQaAttrubutes(qa, 'column');
9
10
  const { isServer } = useContext(SSRContext);
10
11
  const getCurrentColumnsCount = useCallback(() => {
11
12
  const breakpoints = Object.entries(breakpointCols).sort(([firstBreakpoint], [secondBreakpoint]) => {
@@ -74,9 +75,9 @@ const BalancedMasonry = (props) => {
74
75
  }
75
76
  return () => observer.disconnect();
76
77
  }, [balanceColumns, children]);
77
- return (React.createElement("div", { className: b(null, className) },
78
+ return (React.createElement("div", { className: b(null, className), "data-qa": qa },
78
79
  React.createElement("div", { className: b('hidden-container'), style: { width: `${100 / columnCount}%` } },
79
80
  React.createElement("div", { ref: containerRef, className: b('hidden-list') }, children)),
80
- columns.map((columnElements, index) => (React.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` } }, columnElements)))));
81
+ columns.map((columnElements, index) => (React.createElement("div", { key: index, className: columnClassName, style: { width: `${100 / columnCount}%` }, "data-qa": qaAttributes.column }, columnElements)))));
81
82
  };
82
83
  export default BalancedMasonry;
package/build/esm/components/Button/Button.css CHANGED
@@ -11,33 +11,35 @@ unpredictable css rules order in build */
11
11
  .pc-button-block__image + .pc-button-block__text, .pc-button-block__text + .pc-button-block__image {
12
12
  margin-left: var(--btn-image-margin);
13
13
  }
14
- .pc-button-block_theme_github.pc-button-block_theme_github {
14
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github {
15
15
  --g-button-background-color: var(--pc-monochrome-button-background-color);
16
16
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
17
17
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
18
18
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
19
19
  }
20
- .pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github:focus {
20
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:link, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:visited, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:active, .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:focus {
21
21
  color: var(--pc-monochrome-button-color);
22
22
  }
23
- .pc-button-block_theme_github.pc-button-block_theme_github:hover {
23
+ .pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github.pc-button-block_theme_github:hover {
24
24
  color: var(--pc-monochrome-button-color);
25
25
  }
26
+
26
27
  .pc-button-block_theme_scale::before, .pc-button-block_theme_scale::after {
27
28
  border-radius: 300px;
28
29
  }
29
- .pc-button-block_theme_monochrome {
30
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome {
30
31
  --g-button-background-color: var(--pc-monochrome-button-background-color);
31
32
  --g-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
32
33
  --yc-button-background-color: var(--pc-monochrome-button-background-color);
33
34
  --yc-button-background-color-hover: var(--pc-monochrome-button-background-color-hover);
34
35
  }
35
- .pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome:focus {
36
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:link, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:visited, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:active, .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:focus {
36
37
  color: var(--pc-monochrome-button-color);
37
38
  }
38
- .pc-button-block_theme_monochrome:hover {
39
+ .pc-button-block_theme_monochrome.pc-button-block_theme_monochrome:hover {
39
40
  color: var(--pc-monochrome-button-color);
40
41
  }
42
+
41
43
  .pc-button-block_size_s {
42
44
  --btn-image-margin: 10px;
43
45
  }
package/build/esm/hooks/useAnalytics.d.ts CHANGED
@@ -1,2 +1,2 @@
1
1
  import { AnalyticsEvent } from '../models';
2
- export declare const useAnalytics: (name?: string, target?: string) => ((e?: AnalyticsEvent | AnalyticsEvent[] | null, additionalContext?: Record<string, string>) => void) & import("lodash").MemoizedFunction;
2
+ export declare const useAnalytics: (name?: string, target?: string) => (e?: AnalyticsEvent | AnalyticsEvent[] | null, additionalContext?: Record<string, string>) => void;
package/build/esm/hooks/useAnalytics.js CHANGED
@@ -1,5 +1,4 @@
1
1
  import { useContext, useMemo } from 'react';
2
- import { memoize } from 'lodash';
3
2
  import { AnalyticsContext } from '../context/analyticsContext';
4
3
  import { BlockIdContext } from '../context/blockIdContext';
5
4
  import { PredefinedEventTypes } from '../models';
@@ -15,10 +14,10 @@ export const useAnalytics = (name = '', target) => {
15
14
  }
16
15
  : undefined, [context, name, target]);
17
16
  if (!sendEvents) {
18
- return memoize(() => { });
17
+ return () => { };
19
18
  }
20
19
  const defaultEvents = defaultEvent && autoEvents ? [defaultEvent] : [];
21
- return memoize((e, additionalContext) => {
20
+ return (e, additionalContext) => {
22
21
  let events = defaultEvents;
23
22
  if (e) {
24
23
  events = Array.isArray(e) ? [...events, ...e] : [...events, e];
@@ -30,5 +29,5 @@ export const useAnalytics = (name = '', target) => {
30
29
  ? events.map((event) => (Object.assign(Object.assign({}, event), additionalContext)))
31
30
  : events;
32
31
  sendEvents(preparedEvents);
33
- });
32
+ };
34
33
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gravity-ui/page-constructor",
3
- "version": "4.13.2-alpha.0",
3
+ "version": "4.15.0",
4
4
  "description": "Gravity UI Page Constructor",
5
5
  "license": "MIT",
6
6
  "repository": {
package/styles/mixins.scss CHANGED
@@ -491,11 +491,13 @@ unpredictable css rules order in build */
491
491
  }
492
492
 
493
493
  @mixin monochrome-button() {
494
- @include button(
495
- var(--pc-monochrome-button-color),
496
- var(--pc-monochrome-button-background-color),
497
- $hoverBackgroundColor: var(--pc-monochrome-button-background-color-hover)
498
- );
494
+ @include add-specificity(&) {
495
+ @include button(
496
+ var(--pc-monochrome-button-color),
497
+ var(--pc-monochrome-button-background-color),
498
+ $hoverBackgroundColor: var(--pc-monochrome-button-background-color-hover)
499
+ );
500
+ }
499
501
  }
500
502
 
501
503
  @mixin centerable-title() {