@gravity-ui/page-constructor 4.3.0 → 4.5.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 (72) hide show
  1. package/build/cjs/components/ButtonTabs/ButtonTabs.js +6 -1
  2. package/build/cjs/components/CardBase/CardBase.css +4 -4
  3. package/build/cjs/components/HTML/HTML.d.ts +3 -1
  4. package/build/cjs/components/HTML/HTML.js +2 -1
  5. package/build/cjs/components/Table/Table.js +11 -5
  6. package/build/cjs/components/YFMWrapper/YFMWrapper.d.ts +3 -3
  7. package/build/cjs/components/YFMWrapper/YFMWrapper.js +1 -1
  8. package/build/cjs/constructor-items.d.ts +7 -0
  9. package/build/cjs/constructor-items.js +11 -1
  10. package/build/cjs/containers/PageConstructor/PageConstructor.d.ts +2 -1
  11. package/build/cjs/containers/PageConstructor/PageConstructor.js +9 -4
  12. package/build/cjs/context/innerContext/InnerContext.d.ts +3 -1
  13. package/build/cjs/context/innerContext/InnerContext.js +2 -0
  14. package/build/cjs/editor/store/index.js +1 -1
  15. package/build/cjs/editor/utils/index.d.ts +1 -0
  16. package/build/cjs/grid/Col/Col.d.ts +2 -4
  17. package/build/cjs/models/constructor-items/blocks.d.ts +4 -0
  18. package/build/cjs/models/constructor-items/common.d.ts +5 -2
  19. package/build/cjs/models/constructor.d.ts +1 -0
  20. package/build/cjs/models/navigation.d.ts +1 -0
  21. package/build/cjs/models/navigation.js +2 -1
  22. package/build/cjs/navigation/components/MobileMenuButton/MobileMenuButton.js +1 -0
  23. package/build/cjs/navigation/components/NavigationItem/NavigationItem.js +3 -15
  24. package/build/cjs/navigation/components/NavigationItem/index.d.ts +6 -0
  25. package/build/cjs/navigation/components/NavigationItem/index.js +14 -0
  26. package/build/cjs/navigation/components/NavigationListItem/NavigationListItem.js +1 -1
  27. package/build/cjs/navigation/components/NavigationPopup/NavigationPopup.js +1 -1
  28. package/build/cjs/sub-blocks/BackgroundCard/BackgroundCard.js +1 -2
  29. package/build/cjs/sub-blocks/Quote/Quote.css +0 -3
  30. package/build/cjs/utils/blocks.d.ts +2 -6
  31. package/build/cjs/utils/blocks.js +11 -16
  32. package/build/esm/components/ButtonTabs/ButtonTabs.js +6 -1
  33. package/build/esm/components/CardBase/CardBase.css +4 -4
  34. package/build/esm/components/HTML/HTML.d.ts +3 -1
  35. package/build/esm/components/HTML/HTML.js +2 -1
  36. package/build/esm/components/Table/Table.js +11 -5
  37. package/build/esm/components/YFMWrapper/YFMWrapper.d.ts +3 -3
  38. package/build/esm/components/YFMWrapper/YFMWrapper.js +1 -1
  39. package/build/esm/constructor-items.d.ts +7 -0
  40. package/build/esm/constructor-items.js +10 -1
  41. package/build/esm/containers/PageConstructor/PageConstructor.d.ts +2 -1
  42. package/build/esm/containers/PageConstructor/PageConstructor.js +12 -7
  43. package/build/esm/context/innerContext/InnerContext.d.ts +3 -1
  44. package/build/esm/context/innerContext/InnerContext.js +2 -0
  45. package/build/esm/editor/store/index.js +2 -2
  46. package/build/esm/editor/utils/index.d.ts +1 -0
  47. package/build/esm/grid/Col/Col.d.ts +2 -4
  48. package/build/esm/models/constructor-items/blocks.d.ts +4 -0
  49. package/build/esm/models/constructor-items/common.d.ts +5 -2
  50. package/build/esm/models/constructor.d.ts +1 -0
  51. package/build/esm/models/navigation.d.ts +1 -0
  52. package/build/esm/models/navigation.js +1 -0
  53. package/build/esm/navigation/components/MobileMenuButton/MobileMenuButton.js +1 -0
  54. package/build/esm/navigation/components/NavigationItem/NavigationItem.js +4 -16
  55. package/build/esm/navigation/components/NavigationItem/index.d.ts +6 -0
  56. package/build/esm/navigation/components/NavigationItem/index.js +6 -0
  57. package/build/esm/navigation/components/NavigationListItem/NavigationListItem.js +1 -1
  58. package/build/esm/navigation/components/NavigationPopup/NavigationPopup.js +1 -1
  59. package/build/esm/sub-blocks/BackgroundCard/BackgroundCard.js +1 -2
  60. package/build/esm/sub-blocks/Quote/Quote.css +0 -3
  61. package/build/esm/utils/blocks.d.ts +2 -6
  62. package/build/esm/utils/blocks.js +8 -11
  63. package/package.json +2 -1
  64. package/server/models/constructor-items/blocks.d.ts +4 -0
  65. package/server/models/constructor-items/common.d.ts +5 -2
  66. package/server/models/constructor.d.ts +1 -0
  67. package/server/models/navigation.d.ts +1 -0
  68. package/server/models/navigation.js +2 -1
  69. package/server/utils/blocks.d.ts +2 -6
  70. package/server/utils/blocks.js +11 -16
  71. package/styles/mixins.scss +3 -1
  72. package/widget/index.js +1 -1
@@ -17,6 +17,11 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
17
17
  onSelectTab(tabId, e);
18
18
  }
19
19
  }, [onSelectTab]);
20
- return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: handleClick(id) })))));
20
+ return (react_1.default.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
21
+ const isActive = id === activeTabId;
22
+ return (react_1.default.createElement(index_1.Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
23
+ 'aria-current': isActive,
24
+ } }));
25
+ })));
21
26
  };
22
27
  exports.default = ButtonTabs;
@@ -22,9 +22,6 @@ unpredictable css rules order in build */
22
22
  .pc-card-base-block_border_line {
23
23
  border: 1px solid var(--g-color-line-generic);
24
24
  }
25
- .pc-card-base-block_border_line, .pc-card-base-block_border_none {
26
- cursor: default;
27
- }
28
25
  @media (min-width: 577px) {
29
26
  .slick-slide:not(.slick-active) .pc-card-base-block {
30
27
  box-shadow: none;
@@ -80,7 +77,10 @@ a.pc-card-base-block_border_line {
80
77
  border: 1px solid var(--g-color-line-generic);
81
78
  }
82
79
  a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
83
- cursor: default;
80
+ transition: transform 0.3s ease-out;
81
+ }
82
+ a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
83
+ transform: translateY(-8px);
84
84
  }
85
85
  a.pc-card-base-block_border_shadow {
86
86
  transition: transform 0.3s ease-out;
@@ -5,12 +5,14 @@ export interface HTMLProps {
5
5
  block?: boolean;
6
6
  className?: string;
7
7
  itemProp?: string;
8
+ id?: string;
8
9
  }
9
- declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
10
+ declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
10
11
  dangerouslySetInnerHTML: {
11
12
  __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
12
13
  };
13
14
  className: string | undefined;
14
15
  itemProp: string | undefined;
16
+ id: string | undefined;
15
17
  }, HTMLElement> | null;
16
18
  export default HTML;
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const utils_1 = require("../../utils");
6
- const HTML = ({ children, block = false, className, itemProp }) => {
6
+ const HTML = ({ children, block = false, className, itemProp, id }) => {
7
7
  if (!children) {
8
8
  return null;
9
9
  }
@@ -11,6 +11,7 @@ const HTML = ({ children, block = false, className, itemProp }) => {
11
11
  dangerouslySetInnerHTML: { __html: children },
12
12
  className,
13
13
  itemProp,
14
+ id,
14
15
  });
15
16
  };
16
17
  exports.default = HTML;
@@ -4,28 +4,34 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const __1 = require("../");
6
6
  const utils_1 = require("../../utils");
7
+ function getMarkerId(index) {
8
+ if (isNaN(index)) {
9
+ return undefined;
10
+ }
11
+ return `marker-${index}`;
12
+ }
7
13
  const b = (0, utils_1.block)('table');
8
14
  class Table extends react_1.default.Component {
9
15
  render() {
10
- const { content, legend, marker = 'disk', className } = this.props;
16
+ const { content, legend, marker = 'disk', className, caption } = this.props;
11
17
  if (!content || !content.length || !content[0].length) {
12
18
  return null;
13
19
  }
14
- return (react_1.default.createElement("div", { className: b(null, className) },
20
+ return (react_1.default.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
15
21
  this.renderTable(content, marker, legend),
16
22
  legend && this.renderLegend(legend, marker)));
17
23
  }
18
24
  renderTable(content, marker, legend) {
19
25
  const justify = this.getDefaultJustify(content, this.props.justify);
20
- return (react_1.default.createElement("div", { className: b('table') }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
26
+ return (react_1.default.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (react_1.default.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (react_1.default.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (react_1.default.createElement(__1.HTML, null, cell))))))))));
21
27
  }
22
28
  renderMarker(type, cell) {
23
- return react_1.default.createElement("div", { className: b('marker', { type, index: String(cell) }) });
29
+ return (react_1.default.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
24
30
  }
25
31
  renderLegend(legend, marker) {
26
32
  return (react_1.default.createElement("div", { className: b('legend') }, legend.map((item, index) => (react_1.default.createElement("div", { key: item, className: b('legend-item') },
27
33
  this.renderMarker(marker, String(index)),
28
- react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
34
+ react_1.default.createElement(__1.YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
29
35
  }
30
36
  getDefaultJustify(content, justify) {
31
37
  return justify || new Array(content[0].length).fill('center');
@@ -1,9 +1,9 @@
1
1
  import { ClassNameProps, Modifiers } from '../../models';
2
- export interface YFMWrapperProps {
3
- className?: string;
2
+ export interface YFMWrapperProps extends ClassNameProps {
4
3
  content: string;
5
4
  modifiers?: Modifiers;
6
5
  itemProp?: string;
6
+ id?: string;
7
7
  }
8
- declare const YFMWrapper: ({ content, modifiers, className, itemProp, }: YFMWrapperProps & ClassNameProps) => JSX.Element;
8
+ declare const YFMWrapper: ({ content, modifiers, className, itemProp, id }: YFMWrapperProps) => JSX.Element;
9
9
  export default YFMWrapper;
@@ -8,5 +8,5 @@ const bem_cn_lite_1 = tslib_1.__importDefault(require("bem-cn-lite"));
8
8
  const snakecase_keys_1 = tslib_1.__importDefault(require("snakecase-keys"));
9
9
  const components_1 = require("../../components");
10
10
  const yfm = (0, bem_cn_lite_1.default)('yfm');
11
- const YFMWrapper = ({ content, modifiers, className, itemProp, }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp }, content));
11
+ const YFMWrapper = ({ content, modifiers, className, itemProp, id }) => (react_1.default.createElement(components_1.HTML, { className: yfm(modifiers ? (0, snakecase_keys_1.default)(modifiers) : {}, className), itemProp: itemProp, id: id }, content));
12
12
  exports.default = YFMWrapper;
@@ -29,3 +29,10 @@ export declare const subBlockMap: {
29
29
  content: (props: import("./models").ContentBlockProps & import("./models").ClassNameProps) => JSX.Element;
30
30
  quote: (props: import("./models").QuoteProps) => JSX.Element;
31
31
  };
32
+ export declare const navItemMap: {
33
+ button: import("react").FC<Pick<import("./navigation/models").NavigationItemProps, "className"> & import("./models").ButtonProps>;
34
+ social: import("react").FC<import("./navigation/components/SocialIcon/SocialIcon").NavigationSocialItemOwnProps>;
35
+ dropdown: ({ text, icon, className, iconSize, hidePopup, items, isActive, ...props }: import("./navigation/models").NavigationItemProps & import("./models").NavigationDropdownItem) => JSX.Element;
36
+ link: import("react").FC<import("./navigation/models").NavigationItemProps & import("./models").NavigationLinkItem>;
37
+ "github-button": ({ text, url, className, label, size, icon, }: import("./navigation/models").NavigationItemProps & import("./models").NavigationGithubButton) => JSX.Element;
38
+ };
@@ -1,8 +1,11 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.subBlockMap = exports.blockMap = void 0;
3
+ exports.navItemMap = exports.subBlockMap = exports.blockMap = void 0;
4
+ const tslib_1 = require("tslib");
4
5
  const blocks_1 = require("./blocks");
5
6
  const models_1 = require("./models");
7
+ const NavigationItem_1 = require("./navigation/components/NavigationItem");
8
+ const SocialIcon_1 = tslib_1.__importDefault(require("./navigation/components/SocialIcon/SocialIcon"));
6
9
  const sub_blocks_1 = require("./sub-blocks");
7
10
  exports.blockMap = {
8
11
  [models_1.BlockType.SliderBlock]: blocks_1.SliderBlock,
@@ -35,3 +38,10 @@ exports.subBlockMap = {
35
38
  [models_1.SubBlockType.Content]: sub_blocks_1.Content,
36
39
  [models_1.SubBlockType.Quote]: sub_blocks_1.Quote,
37
40
  };
41
+ exports.navItemMap = {
42
+ [models_1.NavigationItemType.Button]: NavigationItem_1.NavigationButton,
43
+ [models_1.NavigationItemType.Social]: SocialIcon_1.default,
44
+ [models_1.NavigationItemType.Dropdown]: NavigationItem_1.NavigationDropdown,
45
+ [models_1.NavigationItemType.Link]: NavigationItem_1.NavigationLink,
46
+ [models_1.NavigationItemType.GithubButton]: NavigationItem_1.GithubButton,
47
+ };
@@ -1,8 +1,9 @@
1
1
  import React from 'react';
2
2
  import '@doc-tools/transform/dist/js/yfm';
3
- import { blockMap, subBlockMap } from '../../constructor-items';
3
+ import { blockMap, navItemMap, subBlockMap } from '../../constructor-items';
4
4
  import { CustomConfig, CustomItems, NavigationData, PageContent, ShouldRenderBlock } from '../../models';
5
5
  export type ItemMap = typeof blockMap & typeof subBlockMap & CustomItems;
6
+ export type NavItemMap = typeof navItemMap & CustomItems;
6
7
  export interface PageConstructorProps {
7
8
  content?: PageContent;
8
9
  shouldRenderBlock?: ShouldRenderBlock;
@@ -24,10 +24,15 @@ const Constructor = (props) => {
24
24
  const { content: { blocks = [], background = {} } = {}, renderMenu, shouldRenderBlock, navigation, custom, } = props;
25
25
  const { context } = (0, react_1.useMemo)(() => ({
26
26
  context: {
27
- blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomBlockTypes)(custom)],
28
- subBlockTypes: [...models_1.SubBlockTypes, ...(0, utils_1.getCustomSubBlockTypes)(custom)],
29
- headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)],
30
- itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(custom)),
27
+ blockTypes: [...models_1.BlockTypes, ...(0, utils_1.getCustomTypes)(['blocks', 'headers'], custom)],
28
+ subBlockTypes: [...models_1.SubBlockTypes, ...(0, utils_1.getCustomTypes)(['subBlocks'], custom)],
29
+ headerBlockTypes: [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomTypes)(['headers'], custom)],
30
+ navigationBlockTypes: [
31
+ ...models_1.NavigationItemTypes,
32
+ ...(0, utils_1.getCustomTypes)(['navigation'], custom),
33
+ ],
34
+ itemMap: Object.assign(Object.assign(Object.assign({}, constructor_items_1.blockMap), constructor_items_1.subBlockMap), (0, utils_1.getCustomItems)(['blocks', 'headers', 'subBlocks'], custom)),
35
+ navItemMap: Object.assign(Object.assign({}, constructor_items_1.navItemMap), (0, utils_1.getCustomItems)(['navigation'], custom)),
31
36
  loadables: custom === null || custom === void 0 ? void 0 : custom.loadable,
32
37
  shouldRenderBlock,
33
38
  customization: {
@@ -1,11 +1,13 @@
1
1
  import React from 'react';
2
- import { ItemMap } from '../../containers/PageConstructor/PageConstructor';
2
+ import { ItemMap, NavItemMap } from '../../containers/PageConstructor/PageConstructor';
3
3
  import { CustomConfig, LoadableConfig, ShouldRenderBlock } from '../../models';
4
4
  export interface InnerContextType {
5
5
  blockTypes: string[];
6
6
  subBlockTypes: string[];
7
7
  headerBlockTypes: string[];
8
+ navigationBlockTypes: string[];
8
9
  itemMap: ItemMap;
10
+ navItemMap: NavItemMap;
9
11
  loadables?: LoadableConfig;
10
12
  shouldRenderBlock?: ShouldRenderBlock;
11
13
  customization?: Pick<CustomConfig, 'decorators'>;
@@ -7,5 +7,7 @@ exports.InnerContext = react_1.default.createContext({
7
7
  blockTypes: [],
8
8
  subBlockTypes: [],
9
9
  headerBlockTypes: [],
10
+ navigationBlockTypes: [],
10
11
  itemMap: {},
12
+ navItemMap: {},
11
13
  });
@@ -19,7 +19,7 @@ function useEditorState({ content: intialContent, custom }) {
19
19
  theme: constants_1.DEFAULT_THEME,
20
20
  });
21
21
  return (0, react_1.useMemo)(() => {
22
- const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomHeaderTypes)(custom)];
22
+ const headerBlockTypes = [...models_1.HeaderBlockTypes, ...(0, utils_1.getCustomTypes)(['headers'], custom)];
23
23
  const contentHasHeader = Boolean((0, utils_1.getHeaderBlock)(content.blocks, headerBlockTypes));
24
24
  const checkIsHeader = (type) => headerBlockTypes.includes(type);
25
25
  const onAdd = (block) => {
@@ -8,6 +8,7 @@ export declare const addCustomDecorator: (decorators: BlockDecorator[], custom?:
8
8
  blocks?: import("../../models").CustomItems | undefined;
9
9
  subBlocks?: import("../../models").CustomItems | undefined;
10
10
  headers?: import("../../models").CustomItems | undefined;
11
+ navigation?: import("../../models").CustomItems | undefined;
11
12
  loadable?: import("../../models").LoadableConfig | undefined;
12
13
  };
13
14
  export declare const getBlockId: ({ index, type }: BlockDecorationProps) => string;
@@ -1,10 +1,8 @@
1
1
  import React, { CSSProperties } from 'react';
2
- import { QAProps, Refable } from '../../models/common';
3
- import { WithChildren } from '../../models/react';
2
+ import { QAProps, Refable, Roleable, WithChildren } from '../../models';
4
3
  import { GridColumnClassParams } from '../types';
5
- export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps {
4
+ export interface GridColumnProps extends GridColumnClassParams, Refable<HTMLDivElement>, QAProps, Roleable {
6
5
  style?: CSSProperties;
7
6
  children?: React.ReactNode;
8
- role?: React.AriaRole;
9
7
  }
10
8
  export declare const Col: React.ForwardRefExoticComponent<Pick<WithChildren<GridColumnProps>, "style" | "children" | "sizes" | "className" | "hidden" | "role" | "qa" | "reset" | "visible" | "offsets" | "orders" | "alignSelf" | "justifyContent"> & React.RefAttributes<HTMLDivElement>>;
@@ -189,6 +189,10 @@ export interface TableProps {
189
189
  legend?: string[];
190
190
  justify?: Justify[];
191
191
  marker?: LegendTableMarkerType;
192
+ /**
193
+ * Only as accessible name, not displayed explicitly
194
+ */
195
+ caption?: string;
192
196
  }
193
197
  export interface TableBlockProps {
194
198
  title: string;
@@ -1,4 +1,4 @@
1
- import { CSSProperties, ReactNode } from 'react';
1
+ import React, { CSSProperties, ReactNode } from 'react';
2
2
  import { ButtonView, ButtonProps as UikitButtonProps } from '@gravity-ui/uikit';
3
3
  import { ThemeSupporting } from '../../utils';
4
4
  import { AnalyticsEventsBase, ClassNameProps, PixelEventType, QAProps } from '../common';
@@ -64,6 +64,9 @@ export interface Animatable {
64
64
  export interface Tabbable {
65
65
  tabIndex?: number;
66
66
  }
67
+ export interface Roleable {
68
+ role?: React.AriaRole;
69
+ }
67
70
  export interface Background {
68
71
  image?: string;
69
72
  color?: string;
@@ -129,7 +132,7 @@ export interface FileLinkProps extends ClassNameProps, Tabbable {
129
132
  onClick?: () => void;
130
133
  }
131
134
  export type ButtonTheme = ButtonView | 'github' | 'app-store' | 'google-play' | 'scale' | 'monochrome';
132
- export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width'> {
135
+ export interface ButtonProps extends AnalyticsEventsBase, Pick<UikitButtonProps, 'size' | 'width' | 'extraProps'> {
133
136
  text: string;
134
137
  url: string;
135
138
  primary?: boolean;
@@ -39,6 +39,7 @@ export interface CustomConfig {
39
39
  blocks?: CustomItems;
40
40
  subBlocks?: CustomItems;
41
41
  headers?: CustomItems;
42
+ navigation?: CustomItems;
42
43
  loadable?: LoadableConfig;
43
44
  decorators?: {
44
45
  block?: ((props: BlockDecorationProps) => React.ReactElement)[];
@@ -7,6 +7,7 @@ export declare enum NavigationItemType {
7
7
  Social = "social",
8
8
  GithubButton = "github-button"
9
9
  }
10
+ export declare const NavigationItemTypes: NavigationItemType[];
10
11
  export interface NavigationItemBase {
11
12
  text: string;
12
13
  icon?: ImageProps;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.NavigationGithubButtonIcon = exports.NavigationItemType = void 0;
3
+ exports.NavigationGithubButtonIcon = exports.NavigationItemTypes = exports.NavigationItemType = void 0;
4
4
  var NavigationItemType;
5
5
  (function (NavigationItemType) {
6
6
  NavigationItemType["Link"] = "link";
@@ -9,6 +9,7 @@ var NavigationItemType;
9
9
  NavigationItemType["Social"] = "social";
10
10
  NavigationItemType["GithubButton"] = "github-button";
11
11
  })(NavigationItemType = exports.NavigationItemType || (exports.NavigationItemType = {}));
12
+ exports.NavigationItemTypes = Object.values(NavigationItemType);
12
13
  var NavigationGithubButtonIcon;
13
14
  (function (NavigationGithubButtonIcon) {
14
15
  NavigationGithubButtonIcon["heart"] = "octicon-heart";
@@ -10,6 +10,7 @@ const b = (0, utils_1.block)('mobile-menu-button');
10
10
  const ICON_SIZE = 36;
11
11
  const MobileMenuButton = ({ isSidebarOpened, onSidebarOpenedChange, }) => (react_1.default.createElement(components_1.Control, { className: b(), onClick: (e) => {
12
12
  e.stopPropagation();
13
+ e.nativeEvent.stopImmediatePropagation();
13
14
  onSidebarOpenedChange(!isSidebarOpened);
14
15
  }, size: "l", icon: isSidebarOpened ? icons_1.NavigationClose : icons_1.NavigationOpen, iconSize: ICON_SIZE }));
15
16
  exports.MobileMenuButton = MobileMenuButton;
@@ -4,28 +4,16 @@ const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importStar(require("react"));
5
5
  const lodash_1 = require("lodash");
6
6
  const blockIdContext_1 = require("../../../context/blockIdContext");
7
+ const innerContext_1 = require("../../../context/innerContext");
7
8
  const models_1 = require("../../../models");
8
9
  const utils_1 = require("../../../utils");
9
- const SocialIcon_1 = tslib_1.__importDefault(require("../SocialIcon/SocialIcon"));
10
- const GithubButton_1 = require("./components/GithubButton/GithubButton");
11
- const NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
12
- const NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
13
- const NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
14
10
  const b = (0, utils_1.block)('navigation-item');
15
11
  const ANALYTICS_ID = 'navigation';
16
- //todo: add types support form component in map
17
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
18
- const NavigationItemsMap = {
19
- [models_1.NavigationItemType.Button]: NavigationButton_1.NavigationButton,
20
- [models_1.NavigationItemType.Social]: SocialIcon_1.default,
21
- [models_1.NavigationItemType.Dropdown]: NavigationDropdown_1.NavigationDropdown,
22
- [models_1.NavigationItemType.Link]: NavigationLink_1.NavigationLink,
23
- [models_1.NavigationItemType.GithubButton]: GithubButton_1.GithubButton,
24
- };
25
12
  const NavigationItem = (_a) => {
26
13
  var { data, className, menuLayout } = _a, props = tslib_1.__rest(_a, ["data", "className", "menuLayout"]);
27
14
  const { type = models_1.NavigationItemType.Link } = data;
28
- const Component = NavigationItemsMap[type];
15
+ const { navItemMap } = (0, react_1.useContext)(innerContext_1.InnerContext);
16
+ const Component = navItemMap[type];
29
17
  const componentProps = (0, react_1.useMemo)(() => {
30
18
  const componentProperties = Object.assign(Object.assign({}, data), props);
31
19
  if (type !== models_1.NavigationItemType.Dropdown) {
@@ -0,0 +1,6 @@
1
+ export { GithubButton } from './components/GithubButton/GithubButton';
2
+ export { NavigationButton } from './components/NavigationButton/NavigationButton';
3
+ export { NavigationDropdown } from './components/NavigationDropdown/NavigationDropdown';
4
+ export { NavigationLink } from './components/NavigationLink/NavigationLink';
5
+ import NavigationItem from './NavigationItem';
6
+ export default NavigationItem;
@@ -0,0 +1,14 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.NavigationLink = exports.NavigationDropdown = exports.NavigationButton = exports.GithubButton = void 0;
4
+ const tslib_1 = require("tslib");
5
+ var GithubButton_1 = require("./components/GithubButton/GithubButton");
6
+ Object.defineProperty(exports, "GithubButton", { enumerable: true, get: function () { return GithubButton_1.GithubButton; } });
7
+ var NavigationButton_1 = require("./components/NavigationButton/NavigationButton");
8
+ Object.defineProperty(exports, "NavigationButton", { enumerable: true, get: function () { return NavigationButton_1.NavigationButton; } });
9
+ var NavigationDropdown_1 = require("./components/NavigationDropdown/NavigationDropdown");
10
+ Object.defineProperty(exports, "NavigationDropdown", { enumerable: true, get: function () { return NavigationDropdown_1.NavigationDropdown; } });
11
+ var NavigationLink_1 = require("./components/NavigationLink/NavigationLink");
12
+ Object.defineProperty(exports, "NavigationLink", { enumerable: true, get: function () { return NavigationLink_1.NavigationLink; } });
13
+ const NavigationItem_1 = tslib_1.__importDefault(require("./NavigationItem"));
14
+ exports.default = NavigationItem_1.default;
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
3
3
  const tslib_1 = require("tslib");
4
4
  const react_1 = tslib_1.__importDefault(require("react"));
5
5
  const utils_1 = require("../../utils");
6
- const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
6
+ const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem"));
7
7
  const NavigationListItem = (_a) => {
8
8
  var { column, index, activeItemId, onActiveItemChange } = _a, props = tslib_1.__rest(_a, ["column", "index", "activeItemId", "onActiveItemChange"]);
9
9
  const id = `${column}-${index}`;
@@ -6,7 +6,7 @@ const react_1 = tslib_1.__importDefault(require("react"));
6
6
  const uikit_1 = require("@gravity-ui/uikit");
7
7
  const utils_1 = require("../../../utils");
8
8
  const models_1 = require("../../models");
9
- const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem/NavigationItem"));
9
+ const NavigationItem_1 = tslib_1.__importDefault(require("../NavigationItem"));
10
10
  const b = (0, utils_1.block)('navigation-popup');
11
11
  const OFFSET_RESET = [0, 0];
12
12
  const NavigationPopup = ({ anchorRef, items, onClose, className, open, }) => (react_1.default.createElement(uikit_1.Popup
@@ -11,9 +11,8 @@ const BackgroundCard = (props) => {
11
11
  const { url, title, text, border, background, paddingBottom, backgroundColor, additionalInfo, theme: cardTheme = 'default', links, buttons, } = props;
12
12
  const theme = (0, theme_1.useTheme)();
13
13
  const hasBackgroundColor = backgroundColor || cardTheme !== 'default';
14
- const link = hasBackgroundColor || border === 'line' ? undefined : url;
15
14
  const borderType = hasBackgroundColor ? 'none' : border;
16
- return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: link, border: borderType },
15
+ return (react_1.default.createElement(components_1.CardBase, { className: b({ padding: paddingBottom, theme: cardTheme }), url: url, border: borderType },
17
16
  react_1.default.createElement(components_1.CardBase.Content, null,
18
17
  react_1.default.createElement(components_1.BackgroundImage, Object.assign({ className: b('image') }, (0, utils_1.getThemedValue)(background, theme), { style: { backgroundColor } })),
19
18
  react_1.default.createElement(Content_1.default, { title: title, text: text, additionalInfo: additionalInfo, size: "s", theme: cardTheme, links: links, buttons: buttons, colSizes: { all: 12, md: 12 } }))));
@@ -31,9 +31,6 @@ unpredictable css rules order in build */
31
31
  .pc-quote_border_line {
32
32
  border: 1px solid var(--g-color-line-generic);
33
33
  }
34
- .pc-quote_border_line, .pc-quote_border_none {
35
- cursor: default;
36
- }
37
34
  @media (min-width: 577px) {
38
35
  .slick-slide:not(.slick-active) .pc-quote {
39
36
  box-shadow: none;
@@ -2,12 +2,8 @@ import { ConstructorBlock, CustomConfig, PCShareSocialNetwork, TextSize } from '
2
2
  export declare function getHeaderTag(size: TextSize): "h1" | "h2" | "h3" | "h4";
3
3
  export declare function hasBlockTag(content: string): boolean;
4
4
  export declare function getBlockKey(block: ConstructorBlock, index: number): string;
5
- export declare const getCustomBlockTypes: ({ blocks, headers }?: CustomConfig) => string[];
6
- export declare const getCustomItems: ({ blocks, headers, subBlocks }?: CustomConfig) => {
7
- [x: string]: any;
8
- };
9
- export declare const getCustomSubBlockTypes: (customBlocks?: CustomConfig) => string[];
10
- export declare const getCustomHeaderTypes: (customBlocks?: CustomConfig) => string[];
5
+ export declare const getCustomItems: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => {};
6
+ export declare const getCustomTypes: (types: (keyof CustomConfig)[], customBlocks?: CustomConfig) => string[];
11
7
  export declare const getOrderedBlocks: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock[];
12
8
  export declare const getHeaderBlock: (blocks: ConstructorBlock[], headerBlockTypes?: string[]) => ConstructorBlock | undefined;
13
9
  export declare const getShareLink: (url: string, type: PCShareSocialNetwork, title?: string, text?: string) => string | undefined;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomHeaderTypes = exports.getCustomSubBlockTypes = exports.getCustomItems = exports.getCustomBlockTypes = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
3
+ exports.getShareLink = exports.getHeaderBlock = exports.getOrderedBlocks = exports.getCustomTypes = exports.getCustomItems = exports.getBlockKey = exports.hasBlockTag = exports.getHeaderTag = void 0;
4
4
  const models_1 = require("../models");
5
5
  const BLOCK_ELEMENTS = [
6
6
  'div',
@@ -62,23 +62,18 @@ function getBlockKey(block, index) {
62
62
  return `${block.type}-${index}`;
63
63
  }
64
64
  exports.getBlockKey = getBlockKey;
65
- const getCustomBlockTypes = ({ blocks = {}, headers = {} } = {}) => [
66
- ...Object.keys(blocks),
67
- ...Object.keys(headers),
68
- ];
69
- exports.getCustomBlockTypes = getCustomBlockTypes;
70
- const getCustomItems = ({ blocks = {}, headers = {}, subBlocks = {} } = {}) => (Object.assign(Object.assign(Object.assign({}, blocks), headers), subBlocks));
71
- exports.getCustomItems = getCustomItems;
72
- const getCustomSubBlockTypes = (customBlocks = {}) => {
73
- const { subBlocks = {} } = customBlocks;
74
- return Object.keys(subBlocks);
65
+ const getCustomItems = (types, customBlocks = {}) => {
66
+ return types.reduce((result, type) => {
67
+ return Object.assign(result, customBlocks[type] || {});
68
+ }, {});
75
69
  };
76
- exports.getCustomSubBlockTypes = getCustomSubBlockTypes;
77
- const getCustomHeaderTypes = (customBlocks = {}) => {
78
- const { headers = {} } = customBlocks;
79
- return Object.keys(headers);
70
+ exports.getCustomItems = getCustomItems;
71
+ const getCustomTypes = (types, customBlocks = {}) => {
72
+ return types.reduce((result, type) => {
73
+ return result.concat(Object.keys(customBlocks[type] || {}));
74
+ }, []);
80
75
  };
81
- exports.getCustomHeaderTypes = getCustomHeaderTypes;
76
+ exports.getCustomTypes = getCustomTypes;
82
77
  const getShareUrlWithParams = (url, params = {}) => {
83
78
  const result = new URL(url);
84
79
  Object.entries(params).forEach(([name, value]) => {
@@ -15,6 +15,11 @@ const ButtonTabs = ({ className, items, activeTab, onSelectTab, tabSize = 'l', q
15
15
  onSelectTab(tabId, e);
16
16
  }
17
17
  }, [onSelectTab]);
18
- return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => (React.createElement(Button, { text: title, className: b('item', { active: id === activeTabId }), key: title, size: tabSize, onClick: handleClick(id) })))));
18
+ return (React.createElement("div", { className: b(null, className), "data-qa": qa }, items.map(({ id, title }) => {
19
+ const isActive = id === activeTabId;
20
+ return (React.createElement(Button, { text: title, className: b('item', { active: isActive }), key: title, size: tabSize, onClick: handleClick(id), extraProps: {
21
+ 'aria-current': isActive,
22
+ } }));
23
+ })));
19
24
  };
20
25
  export default ButtonTabs;
@@ -22,9 +22,6 @@ unpredictable css rules order in build */
22
22
  .pc-card-base-block_border_line {
23
23
  border: 1px solid var(--g-color-line-generic);
24
24
  }
25
- .pc-card-base-block_border_line, .pc-card-base-block_border_none {
26
- cursor: default;
27
- }
28
25
  @media (min-width: 577px) {
29
26
  .slick-slide:not(.slick-active) .pc-card-base-block {
30
27
  box-shadow: none;
@@ -80,7 +77,10 @@ a.pc-card-base-block_border_line {
80
77
  border: 1px solid var(--g-color-line-generic);
81
78
  }
82
79
  a.pc-card-base-block_border_line, a.pc-card-base-block_border_none {
83
- cursor: default;
80
+ transition: transform 0.3s ease-out;
81
+ }
82
+ a.pc-card-base-block_border_line:hover, a.pc-card-base-block_border_none:hover {
83
+ transform: translateY(-8px);
84
84
  }
85
85
  a.pc-card-base-block_border_shadow {
86
86
  transition: transform 0.3s ease-out;
@@ -5,12 +5,14 @@ export interface HTMLProps {
5
5
  block?: boolean;
6
6
  className?: string;
7
7
  itemProp?: string;
8
+ id?: string;
8
9
  }
9
- declare const HTML: ({ children, block, className, itemProp }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
10
+ declare const HTML: ({ children, block, className, itemProp, id }: WithChildren<HTMLProps>) => React.DetailedReactHTMLElement<{
10
11
  dangerouslySetInnerHTML: {
11
12
  __html: string | (string & React.ReactElement<any, string | React.JSXElementConstructor<any>>) | (string & React.ReactFragment) | (string & React.ReactPortal);
12
13
  };
13
14
  className: string | undefined;
14
15
  itemProp: string | undefined;
16
+ id: string | undefined;
15
17
  }, HTMLElement> | null;
16
18
  export default HTML;
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  import { hasBlockTag } from '../../utils';
3
- const HTML = ({ children, block = false, className, itemProp }) => {
3
+ const HTML = ({ children, block = false, className, itemProp, id }) => {
4
4
  if (!children) {
5
5
  return null;
6
6
  }
@@ -8,6 +8,7 @@ const HTML = ({ children, block = false, className, itemProp }) => {
8
8
  dangerouslySetInnerHTML: { __html: children },
9
9
  className,
10
10
  itemProp,
11
+ id,
11
12
  });
12
13
  };
13
14
  export default HTML;
@@ -2,28 +2,34 @@ import React from 'react';
2
2
  import { HTML, YFMWrapper } from '../';
3
3
  import { block } from '../../utils';
4
4
  import './Table.css';
5
+ function getMarkerId(index) {
6
+ if (isNaN(index)) {
7
+ return undefined;
8
+ }
9
+ return `marker-${index}`;
10
+ }
5
11
  const b = block('table');
6
12
  export default class Table extends React.Component {
7
13
  render() {
8
- const { content, legend, marker = 'disk', className } = this.props;
14
+ const { content, legend, marker = 'disk', className, caption } = this.props;
9
15
  if (!content || !content.length || !content[0].length) {
10
16
  return null;
11
17
  }
12
- return (React.createElement("div", { className: b(null, className) },
18
+ return (React.createElement("div", { className: b(null, className), role: 'table', "aria-label": caption },
13
19
  this.renderTable(content, marker, legend),
14
20
  legend && this.renderLegend(legend, marker)));
15
21
  }
16
22
  renderTable(content, marker, legend) {
17
23
  const justify = this.getDefaultJustify(content, this.props.justify);
18
- return (React.createElement("div", { className: b('table') }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row') }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }) }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
24
+ return (React.createElement("div", { className: b('table'), role: 'rowgroup' }, content.map((row, i) => (React.createElement("div", { key: i, className: b('row'), role: 'row' }, row.map((cell, j) => (React.createElement("div", { key: j, className: b('cell', { justify: justify[j] }), role: 'cell' }, legend && i && j ? (this.renderMarker(marker, cell)) : (React.createElement(HTML, null, cell))))))))));
19
25
  }
20
26
  renderMarker(type, cell) {
21
- return React.createElement("div", { className: b('marker', { type, index: String(cell) }) });
27
+ return (React.createElement("div", { "aria-labelledby": getMarkerId(Number(cell)), className: b('marker', { type, index: String(cell) }) }));
22
28
  }
23
29
  renderLegend(legend, marker) {
24
30
  return (React.createElement("div", { className: b('legend') }, legend.map((item, index) => (React.createElement("div", { key: item, className: b('legend-item') },
25
31
  this.renderMarker(marker, String(index)),
26
- React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true } }))))));
32
+ React.createElement(YFMWrapper, { className: b('legent-item-text'), content: item, modifiers: { constructor: true }, id: getMarkerId(index) }))))));
27
33
  }
28
34
  getDefaultJustify(content, justify) {
29
35
  return justify || new Array(content[0].length).fill('center');