@doyourjob/gravity-ui-page-constructor 5.31.16

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/EventsFeedHeaderControls.css

@@ -0,0 +1,78 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-events-feed-header-controls {
+  position: relative;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  border-radius: var(--bc-border-radius);
+}
+.pc-events-feed-header-controls__title, .pc-events-feed-header-controls__filters {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.pc-events-feed-header-controls__title {
+  padding-top: 112px;
+  padding-bottom: 96px;
+  font-size: var(--g-text-display-4-font-size, var(--pc-text-display-4-font-size));
+  line-height: var(--g-text-display-4-line-height, var(--pc-text-display-4-line-height));
+}
+.pc-events-feed-header-controls__filter-input, .pc-events-feed-header-controls__filter-select {
+  width: 100%;
+}
+.pc-events-feed-header-controls__popup {
+  max-height: 500px;
+  border-radius: 12px;
+}
+.pc-events-feed-header-controls__popup .g-select-list::-webkit-scrollbar {
+  display: none;
+}
+.pc-events-feed-header-controls__popup .g-select-list .g-list {
+  max-height: calc(500px - var(--g-text-body-3-line-height) - 12px);
+}
+.pc-events-feed-header-controls__popup .g-list__item {
+  margin: 4px;
+  border-radius: 8px;
+}
+.pc-events-feed-header-controls__popup_mobile {
+  max-height: inherit;
+}
+.pc-events-feed-header-controls__popup_mobile .pc-events-feed-header-controls__popup-filter {
+  position: relative;
+  border: none;
+}
+.pc-events-feed-header-controls__popup_mobile .pc-events-feed-header-controls__popup-filter::before {
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  width: 100vw;
+  height: 2px;
+  content: "";
+  border-bottom: 2px solid var(--g-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  transform: translateX(-50%);
+}
+.pc-events-feed-header-controls__popup-filter {
+  padding: 4px 12px;
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  border: none;
+  border-bottom: 1px solid var(--g-color-line-generic);
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+}
+.pc-events-feed-header-controls__filter-item {
+  flex-grow: 1;
+  min-width: 230px;
+  margin-right: 8px;
+  margin-bottom: 12px;
+  margin-left: 8px;
+}
+@media (min-width: 577px) {
+  .pc-events-feed-header-controls__filter-item {
+    max-width: 240px;
+  }
+}

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/EventsFeedHeaderControls.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import './EventsFeedHeaderControls.css';
+export type EventsFeedHeaderControlsProps = {
+    title?: string;
+};
+export declare const EventsFeedHeaderControls: ({ title }: EventsFeedHeaderControlsProps) => JSX.Element;
+declare const _default: React.MemoExoticComponent<({ title }: EventsFeedHeaderControlsProps) => JSX.Element>;
+export default _default;

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/EventsFeedHeaderControls.js

@@ -0,0 +1,49 @@
+import React, { useCallback, useContext, useMemo } from 'react';
+import { Select } from '@gravity-ui/uikit';
+import { EventsHeaderFilterContext, EventsHeaderFiltersContext, EventsHeaderFunctionsContext, } from '../../../../context/eventsContext';
+import { MobileContext } from '../../../../context/mobileContext';
+import { block } from '../../../../utils';
+import { EventsFeedHeaderSearch } from '../EventsFeedHeaderSearch/EventsFeedHeaderSearch';
+import { renderFilter, renderOption, renderSwitcher } from './customRenders';
+import './EventsFeedHeaderControls.css';
+const b = block('events-feed-header-controls');
+const VIRTUALIZATION_THRESHOLD = 1000;
+const FilterInput = ({ value, onChange, label, }) => (React.createElement("div", { className: b('filter-item') },
+    React.createElement(EventsFeedHeaderSearch, { className: b('filter-input'), placeholder: label, initialValue: value, onSubmit: onChange })));
+const FilterSelect = ({ label, value, onChange, items = [], }) => {
+    const isMobile = useContext(MobileContext);
+    const handleUpdate = (selected) => {
+        const asString = selected.join(',');
+        onChange(asString);
+    };
+    const valueLocal = useMemo(() => (value ? [...value.split(',')] : []), [value]);
+    return (React.createElement("div", { className: b('filter-item') },
+        React.createElement(Select, { className: b('filter-select'), size: "xl", options: items, defaultValue: [], value: valueLocal, onUpdate: handleUpdate, popupClassName: b('popup', { mobile: isMobile }), renderControl: renderSwitcher({
+                initial: valueLocal,
+                list: items,
+                defaultLabel: label || '',
+            }), disablePortal: true, virtualizationThreshold: VIRTUALIZATION_THRESHOLD, renderOption: renderOption, renderFilter: renderFilter, multiple: true, filterable: true, hasClear: true })));
+};
+const Filter = ({ name, type, value, label, items, }) => {
+    const { onChangeFilter } = useContext(EventsHeaderFunctionsContext);
+    const handleChangeFilter = useCallback((data) => {
+        onChangeFilter === null || onChangeFilter === void 0 ? void 0 : onChangeFilter({ [name]: data });
+    }, [name, onChangeFilter]);
+    switch (type) {
+        case 'input':
+            return React.createElement(FilterInput, { label: label, value: value, onChange: handleChangeFilter });
+        case 'select':
+            return (React.createElement(FilterSelect, { label: label, items: items, value: value, onChange: handleChangeFilter }));
+        default:
+            return null;
+    }
+};
+const FilterMemo = React.memo(Filter);
+export const EventsFeedHeaderControls = ({ title }) => {
+    const { filter } = useContext(EventsHeaderFilterContext);
+    const { filters } = useContext(EventsHeaderFiltersContext);
+    return (React.createElement("div", { className: b() },
+        React.createElement("h1", { className: b('title') }, title),
+        React.createElement("div", { className: b('filters') }, filters.map((item) => (React.createElement(FilterMemo, { key: item.name, name: item.name, type: item.type, value: filter[item.name], label: item.label, items: item.items }))))));
+};
+export default React.memo(EventsFeedHeaderControls);

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/customRenders.d.ts

@@ -0,0 +1,12 @@
+import { SelectOption, SelectProps } from '@gravity-ui/uikit';
+import { EventsFeedHeaderSwitcherProps } from '../EventsFeedHeaderSwitcher/EventsFeedHeaderSwitcher';
+import './EventsFeedHeaderControls.css';
+type RenderSwitcherType = ({ initial, list, defaultLabel, }: {
+    initial: EventsFeedHeaderSwitcherProps['initial'];
+    list: EventsFeedHeaderSwitcherProps['list'];
+    defaultLabel: string;
+}) => SelectProps['renderControl'];
+export declare const renderSwitcher: RenderSwitcherType;
+export declare const renderFilter: SelectProps['renderFilter'];
+export declare const renderOption: (option: SelectOption) => JSX.Element;
+export {};

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderControls/customRenders.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import { TextInput } from '@gravity-ui/uikit';
+import { block } from '../../../../utils';
+import { i18n } from '../../i18n';
+import { EventsFeedHeaderSelectOption } from '../EventsFeedHeaderSelectOption/EventsFeedHeaderSelectOption';
+import { EventsFeedHeaderSwitcher, } from '../EventsFeedHeaderSwitcher/EventsFeedHeaderSwitcher';
+import './EventsFeedHeaderControls.css';
+const b = block('events-feed-header-controls');
+export const renderSwitcher = ({ initial, list, defaultLabel }) => {
+    const Switcher = ({ onClick, ref, onKeyDown, open, renderClear, popupId, activeIndex, }) => {
+        return (React.createElement(EventsFeedHeaderSwitcher, { initial: initial, defaultLabel: defaultLabel, list: list, controlRef: ref, onClick: onClick, onKeyDown: onKeyDown, renderClear: renderClear, open: open, popupId: popupId, activeIndex: activeIndex }));
+    };
+    return Switcher;
+};
+export const renderFilter = ({ value, onChange, onKeyDown }) => {
+    return (React.createElement(TextInput, { controlProps: { size: 1 }, value: value, view: 'clear', placeholder: i18n('search'), onUpdate: onChange, onKeyDown: onKeyDown, className: b('popup-filter') }));
+};
+export const renderOption = (option) => {
+    return React.createElement(EventsFeedHeaderSelectOption, { data: option });
+};

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSearch/EventsFeedHeaderSearch.css

@@ -0,0 +1,45 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-events-feed-header-search {
+  position: relative;
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  transition: width 0.3s;
+}
+.pc-events-feed-header-search__input-icon {
+  display: flex;
+  padding-right: 7px;
+  font: inherit;
+  cursor: pointer;
+  color: var(--g-color-text-hint);
+  border: none;
+  background: none;
+}
+.pc-events-feed-header-search__suggest {
+  display: flex;
+  align-items: center;
+  height: 44px;
+  border: 1px solid var(--g-color-base-background);
+  border-radius: var(--bc-text-input-border-radius);
+  background-color: var(--g-color-base-background);
+}
+.pc-events-feed-header-search__suggest:hover, .pc-events-feed-header-search__suggest:focus {
+  border: 1px solid var(--g-color-base-generic-hover);
+}
+.pc-events-feed-header-search__control.pc-events-feed-header-search__control {
+  padding-right: 32px;
+  padding-left: 12px;
+}
+
+.pc-events-feed-header-search_size_s {
+  --bc-text-input-border-radius: var(--g-border-radius-l);
+  width: 352px;
+  max-width: 100%;
+  height: 36px;
+}
+.pc-events-feed-header-search_size_m {
+  --bc-text-input-border-radius: var(--g-border-radius-xl);
+}

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSearch/EventsFeedHeaderSearch.d.ts

@@ -0,0 +1,12 @@
+import './EventsFeedHeaderSearch.css';
+export type SearchSize = 's' | 'm';
+type EventsFeedHeaderSearchProps = {
+    className?: string;
+    initialValue?: string;
+    onSubmit: (value: string) => void;
+    debounce?: number;
+    placeholder?: string;
+    size?: SearchSize;
+};
+export declare const EventsFeedHeaderSearch: ({ className, initialValue, onSubmit, debounce, placeholder, size, }: EventsFeedHeaderSearchProps) => JSX.Element;
+export default EventsFeedHeaderSearch;

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSearch/EventsFeedHeaderSearch.js

@@ -0,0 +1,45 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { Icon, TextInput } from '@gravity-ui/uikit';
+import lodashDebounce from 'lodash/debounce';
+import { CloseIcon } from '../../../../icons/CloseIcon';
+import { SearchIcon } from '../../../../icons/SearchIcon';
+import { block } from '../../../../utils';
+import { i18n } from '../../i18n';
+import './EventsFeedHeaderSearch.css';
+const b = block('events-feed-header-search');
+const SEARCH_ICON_SIZE = 16;
+const CLOSE_ICON_SIZE = 12;
+export const EventsFeedHeaderSearch = ({ className, initialValue, onSubmit, debounce = 300, placeholder, size = 'm', }) => {
+    const handleChange = lodashDebounce(onSubmit, debounce);
+    const [isSetInitValue, setIsSetInitValue] = useState(false);
+    const [value, setValue] = useState(initialValue);
+    const inputRef = useRef(null);
+    useEffect(() => {
+        if (!isSetInitValue && !value && initialValue) {
+            setIsSetInitValue(true);
+            setValue(initialValue);
+        }
+    }, [isSetInitValue, value, initialValue]);
+    const iconData = value ? CloseIcon : SearchIcon;
+    const iconSize = value ? CLOSE_ICON_SIZE : SEARCH_ICON_SIZE;
+    const handleClick = useCallback(() => {
+        var _a;
+        if (value) {
+            handleChange.cancel();
+            setValue('');
+            onSubmit('');
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    }, [value, handleChange, onSubmit]);
+    const rightContent = useMemo(() => (React.createElement("button", { className: b('input-icon'), onClick: handleClick, "aria-label": i18n('clear'), disabled: !value },
+        React.createElement(Icon, { data: iconData, size: iconSize }))), [handleClick, value, iconData, iconSize]);
+    const handleUpdate = useCallback((query) => {
+        setValue(query);
+        handleChange(query);
+    }, [handleChange]);
+    return (React.createElement("div", { className: b({ size }, className) },
+        React.createElement(TextInput, { className: b('suggest'), value: value, onUpdate: handleUpdate, placeholder: placeholder, size: size === 'm' ? 'xl' : 'l', controlRef: inputRef, view: "clear", controlProps: {
+                className: b('control'),
+            }, rightContent: rightContent })));
+};
+export default EventsFeedHeaderSearch;

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSelectOption/EventsFeedHeaderSelectOption.css

@@ -0,0 +1,7 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-events-feed-header-select-option {
+  display: flex;
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+}

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSelectOption/EventsFeedHeaderSelectOption.d.ts

@@ -0,0 +1,7 @@
+import { SelectOption } from '@gravity-ui/uikit';
+import './EventsFeedHeaderSelectOption.css';
+type EventsFeedHeaderSelectOptionProps = {
+    data: SelectOption;
+};
+export declare const EventsFeedHeaderSelectOption: ({ data }: EventsFeedHeaderSelectOptionProps) => JSX.Element;
+export default EventsFeedHeaderSelectOption;

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSelectOption/EventsFeedHeaderSelectOption.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import { block } from '../../../../utils';
+import './EventsFeedHeaderSelectOption.css';
+const b = block('events-feed-header-select-option');
+export const EventsFeedHeaderSelectOption = ({ data }) => {
+    return (React.createElement("div", { className: b() },
+        React.createElement("span", null, data.content)));
+};
+export default EventsFeedHeaderSelectOption;

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSwitcher/EventsFeedHeaderSwitcher.css

@@ -0,0 +1,85 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-events-feed-header-switcher {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  font-family: inherit;
+  font-size: var(--g-text-body-2-font-size, var(--pc-text-body-2-font-size));
+  line-height: var(--g-text-body-2-line-height, var(--pc-text-body-2-line-height));
+  text-align: initial;
+  border: 1px solid var(--g-color-base-background);
+  border-radius: var(--g-border-radius-xl);
+  background-color: var(--g-color-base-background);
+}
+.pc-events-feed-header-switcher:focus {
+  outline: 2px solid var(--g-color-line-focus);
+  outline-offset: 0;
+}
+.pc-events-feed-header-switcher:focus:not(:focus-visible) {
+  outline: 0;
+}
+.pc-events-feed-header-switcher + .g-popup.g-popup.g-popup_open {
+  position: absolute;
+  inset: auto;
+  transform: translate3d(0, 4px, 0);
+}
+.pc-events-feed-header-switcher .g-select-clear {
+  width: 11px;
+  height: 11px;
+  margin-right: 9px;
+}
+.pc-events-feed-header-switcher:hover {
+  cursor: pointer;
+  border-color: var(--g-color-base-generic-hover);
+}
+.pc-events-feed-header-switcher__element {
+  color: var(--g-color-text-primary);
+}
+.pc-events-feed-header-switcher__element_content {
+  display: inline-block;
+  overflow: hidden;
+  flex-grow: 1;
+  line-height: 42px;
+  padding: 0 12px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.pc-events-feed-header-switcher__element_counter {
+  align-items: center;
+  height: 20px;
+  padding: 0 6px;
+  font-size: var(--g-text-body-1-font-size, var(--pc-text-body-1-font-size));
+  line-height: var(--g-text-body-1-line-height, var(--pc-text-body-1-line-height));
+  border-radius: 4px;
+  background-color: var(--g-color-base-selection);
+  transition: backgound-color 0.1s linear;
+}
+.pc-events-feed-header-switcher__element_arrow {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-width: 30px;
+  height: 100%;
+}
+.pc-events-feed-header-switcher__element_overlay {
+  position: absolute;
+  inset: 0;
+  cursor: pointer;
+  border: none;
+  border-radius: var(--g-border-radius-xl);
+  background: transparent;
+}
+.pc-events-feed-header-switcher__arrow {
+  width: 16px;
+  height: 16px;
+}
+.pc-events-feed-header-switcher__clear {
+  width: 11px;
+  height: 11px;
+  color: var(--g-color-text-primary);
+}

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSwitcher/EventsFeedHeaderSwitcher.d.ts

@@ -0,0 +1,12 @@
+import { SelectProps } from '@gravity-ui/uikit';
+import { EventsOption } from '../../../../context/eventsContext';
+import './EventsFeedHeaderSwitcher.css';
+type RenderControlParameters = Partial<Parameters<Required<SelectProps>['renderControl']>[0]>;
+export type EventsFeedHeaderSwitcherProps = {
+    initial: (string | number | null)[];
+    defaultLabel: string;
+    list: EventsOption[];
+    controlRef: RenderControlParameters['ref'];
+} & Omit<RenderControlParameters, 'ref'>;
+export declare const EventsFeedHeaderSwitcher: ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown, open, renderClear, popupId, activeIndex, }: EventsFeedHeaderSwitcherProps) => JSX.Element;
+export default EventsFeedHeaderSwitcher;

package/build/esm/blocks/EventsFeed/EventsFeedHeader/EventsFeedHeaderSwitcher/EventsFeedHeaderSwitcher.js

@@ -0,0 +1,30 @@
+import React, { useMemo } from 'react';
+import { Icon, useUniqId } from '@gravity-ui/uikit';
+import { CloseIcon } from '../../../../icons/CloseIcon';
+import { DropdownArrowIcon } from '../../../../icons/DropdownArrowIcon';
+import { block } from '../../../../utils';
+import './EventsFeedHeaderSwitcher.css';
+const b = block('events-feed-header-switcher');
+const ICON_SIZE = 12;
+const CLEAR_ICON_SIZE = 11;
+export const EventsFeedHeaderSwitcher = ({ initial, defaultLabel, list, onClick, controlRef, onKeyDown, open, renderClear, popupId, activeIndex, }) => {
+    const itemsNames = useMemo(() => {
+        const items = list
+            .filter((item) => initial.includes(item.value))
+            .map((item) => item.content);
+        return items.length ? items : [defaultLabel];
+    }, [defaultLabel, initial, list]);
+    const hasCounter = itemsNames.length > 1;
+    const contentElementId = useUniqId();
+    return (React.createElement("div", { className: b(), ref: controlRef },
+        React.createElement("button", { onClick: onClick, className: b('element', { overlay: true }), onKeyDown: onKeyDown, "aria-expanded": open, "aria-labelledby": contentElementId, "aria-activedescendant": activeIndex === undefined ? undefined : `${popupId}-item-${activeIndex}` }),
+        React.createElement("div", { id: contentElementId, className: b('element', { content: true }), "aria-hidden": true }, itemsNames === null || itemsNames === void 0 ? void 0 : itemsNames.join(', ')),
+        renderClear &&
+            renderClear({
+                renderIcon: () => (React.createElement(Icon, { data: CloseIcon, size: CLEAR_ICON_SIZE, className: b('clear') })),
+            }),
+        hasCounter && React.createElement("div", { className: b('element', { counter: true }) }, itemsNames.length),
+        React.createElement("div", { className: b('element', { arrow: true }) },
+            React.createElement(Icon, { data: DropdownArrowIcon, size: ICON_SIZE, className: b('arrow') }))));
+};
+export default EventsFeedHeaderSwitcher;

package/build/esm/blocks/EventsFeed/EventsFeedRecent/EventsFeedRecent.css

@@ -0,0 +1,6 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-events-feed-recent {
+  margin-top: 48px;
+  padding-bottom: 48px;
+}

package/build/esm/blocks/EventsFeed/EventsFeedRecent/EventsFeedRecent.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './EventsFeedRecent.css';
+export declare const EventsFeedRecent: () => JSX.Element | null;
+declare const _default: React.MemoExoticComponent<() => JSX.Element | null>;
+export default _default;

package/build/esm/blocks/EventsFeed/EventsFeedRecent/EventsFeedRecent.js

@@ -0,0 +1,29 @@
+import React, { useContext } from 'react';
+import { CardLayoutBlock } from '../..';
+import { Anchor, InfiniteScroll } from '../../../components';
+import { EventsRecentContext } from '../../../context/eventsContext';
+import { block } from '../../../utils';
+import EventsFeedCard from '../EventsFeedCard/EventsFeedCard';
+import { i18n } from '../i18n';
+import './EventsFeedRecent.css';
+const b = block('events-feed-recent');
+const colSizes = {
+    sm: 12,
+    md: 6,
+    lg: 6,
+    xl: 4,
+    all: 12,
+};
+export const EventsFeedRecent = () => {
+    const { recent, page, pageSize, onLoadMore } = useContext(EventsRecentContext);
+    const itemsToShow = recent.slice(0, page * pageSize);
+    const hasMore = page < Math.ceil(recent.length / pageSize);
+    if (recent.length === 0) {
+        return null;
+    }
+    return (React.createElement("div", { className: b() },
+        React.createElement(Anchor, { id: "recent" }),
+        React.createElement(CardLayoutBlock, { title: i18n('recent_events'), colSizes: colSizes }, itemsToShow.map((item) => (React.createElement(EventsFeedCard, Object.assign({ key: item.slug }, item))))),
+        React.createElement(InfiniteScroll, { hasMore: hasMore, onNext: onLoadMore })));
+};
+export default React.memo(EventsFeedRecent);

package/build/esm/blocks/EventsFeed/EventsFeedUpcoming/EventsFeedUpcoming.css

@@ -0,0 +1,6 @@
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+.pc-events-feed-upcoming {
+  margin-top: 48px;
+  padding-bottom: 48px;
+}

package/build/esm/blocks/EventsFeed/EventsFeedUpcoming/EventsFeedUpcoming.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import './EventsFeedUpcoming.css';
+export declare const EventsFeedUpcoming: () => JSX.Element;
+declare const _default: React.MemoExoticComponent<() => JSX.Element>;
+export default _default;

package/build/esm/blocks/EventsFeed/EventsFeedUpcoming/EventsFeedUpcoming.js

@@ -0,0 +1,22 @@
+import React, { useContext } from 'react';
+import { CardLayoutBlock } from '../..';
+import { Anchor } from '../../../components';
+import { EventsUpcomingContext } from '../../../context/eventsContext';
+import { block } from '../../../utils';
+import EventsFeedCard from './../EventsFeedCard/EventsFeedCard';
+import './EventsFeedUpcoming.css';
+const b = block('events-feed-upcoming');
+const colSizes = {
+    sm: 12,
+    md: 6,
+    lg: 6,
+    xl: 4,
+    all: 12,
+};
+export const EventsFeedUpcoming = () => {
+    const { upcoming } = useContext(EventsUpcomingContext);
+    return (React.createElement("div", { className: b() },
+        React.createElement(Anchor, { id: "upcoming" }),
+        React.createElement(CardLayoutBlock, { colSizes: colSizes }, upcoming.map((item) => (React.createElement(EventsFeedCard, Object.assign({ key: item.slug }, item)))))));
+};
+export default React.memo(EventsFeedUpcoming);

package/build/esm/blocks/EventsFeed/i18n/en.json

@@ -0,0 +1,5 @@
+{
+  "search": "Search",
+  "recent_events": "Recent events",
+  "clear": "Clear"
+}

package/build/esm/blocks/EventsFeed/i18n/index.d.ts

@@ -0,0 +1 @@
+export declare const i18n: (key: "search" | "clear" | "recent_events", params?: import("@gravity-ui/i18n").Params | undefined) => string;

package/build/esm/blocks/EventsFeed/i18n/index.js

@@ -0,0 +1,5 @@
+import { addComponentKeysets } from '@gravity-ui/uikit/i18n';
+import { NAMESPACE } from '../../../utils/cn';
+import en from './en.json';
+import ru from './ru.json';
+export const i18n = addComponentKeysets({ en, ru }, `${NAMESPACE}EventsFeed`);

package/build/esm/blocks/EventsFeed/i18n/ru.json

@@ -0,0 +1,5 @@
+{
+  "search": "Поиск",
+  "recent_events": "Последние события",
+  "clear": "Очистить"
+}

package/build/esm/blocks/EventsFeed/schema.d.ts

@@ -0,0 +1,18 @@
+export declare const EventsFeedBlock: {
+    'events-feed-block': {
+        additionalProperties: boolean;
+        required: never[];
+        properties: {
+            title: {
+                type: string;
+            };
+            image: {
+                type: string;
+            };
+            type: {};
+            when: {
+                type: string;
+            };
+        };
+    };
+};

package/build/esm/blocks/EventsFeed/schema.js

@@ -0,0 +1,12 @@
+import { BaseProps } from './../../schema/validators/common';
+export const EventsFeedBlock = {
+    'events-feed-block': {
+        additionalProperties: false,
+        required: [],
+        properties: Object.assign(Object.assign({}, BaseProps), { title: {
+                type: 'string',
+            }, image: {
+                type: 'string',
+            } }),
+    },
+};