@cloud-ru/uikit-product-header 5.0.17

package/src/components/MainMenu/Content/styles.module.scss

@@ -0,0 +1,35 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.card {
+  background-color: var.$sys-neutral-background1-level;
+  display: flex;
+  flex-direction: column;
+  padding: var.$dimension-2m;
+  gap: var.$dimension-1m;
+  border-radius: var.$dimension-1m;
+}
+
+.cardTitle {
+  @include var.composite-var(var.$sans-title-m);
+
+  color: var.$sys-neutral-text-main;
+}
+
+.cardBody {
+  display: grid;
+  grid-template-columns: repeat(2, minmax(150px, 1fr));
+  gap: var.$dimension-1m;
+
+  &[data-mobile] {
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+  }
+}
+
+.noData {
+  @include var.composite-var(var.$sans-body-l);
+
+  color: var.$sys-neutral-text-light;
+  display: flex;
+  justify-content: center;
+  padding: var.$dimension-2m;
+}

package/src/components/MainMenu/MainMenu.tsx

@@ -0,0 +1,51 @@
+import { MainMenuSVG } from '@cloud-ru/uikit-product-icons';
+import { ButtonFunction } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { MenuDesktop } from './MenuDesktop';
+import { MenuMobile } from './MenuMobile';
+import { MainMenuProps } from './types';
+
+export function MainMenu({
+  open: openProp,
+  setOpen: setOpenProp,
+  settingItems,
+  leftTop,
+  rightTop,
+  serviceGroups,
+  favorite,
+  search,
+  isMobile,
+  onLinkChange,
+  disabled,
+}: MainMenuProps & { disabled?: boolean }) {
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  const MenuComponent = isMobile ? MenuMobile : MenuDesktop;
+
+  return (
+    <>
+      <ButtonFunction
+        disabled={disabled}
+        size='m'
+        icon={<MainMenuSVG />}
+        onClick={() => {
+          setOpen(true);
+        }}
+        data-test-id='header__drawer-menu-button'
+      />
+
+      <MenuComponent
+        onLinkChange={onLinkChange}
+        settingItems={settingItems}
+        serviceGroups={serviceGroups}
+        search={search}
+        leftTop={leftTop}
+        rightTop={rightTop}
+        favorite={favorite}
+        open={open}
+        setOpen={setOpen}
+      />
+    </>
+  );
+}

package/src/components/MainMenu/MenuDesktop/MenuDesktop.tsx

@@ -0,0 +1,120 @@
+import cn from 'classnames';
+import { useMemo } from 'react';
+
+import { DrawerCustom } from '@snack-uikit/drawer';
+import { isBaseItemProps, List } from '@snack-uikit/list';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { Content } from '../Content';
+import { useMenuItems } from '../hooks';
+import { SearchDesktop } from '../Search';
+import { MainMenuProps } from '../types';
+import styles from './styles.module.scss';
+
+export function MenuDesktop({
+  open: openProp,
+  setOpen: setOpenProp,
+  settingItems,
+  leftTop,
+  rightTop,
+  serviceGroups,
+  favorite,
+  search,
+  onLinkChange,
+}: MainMenuProps) {
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  const { groupItems, scrollRef, searchRef, resultItems } = useMenuItems({
+    serviceGroups,
+    search,
+    favorite,
+  });
+
+  const isInitialEmptyCards = serviceGroups?.length === 0;
+  const isNeedRightBlock = rightTop || !isInitialEmptyCards;
+
+  const settingItemsWithClassName = settingItems.filter(isBaseItemProps).map(item => ({
+    ...item,
+    className: styles.item,
+  }));
+
+  const groupItemsWithClass = useMemo(
+    () =>
+      groupItems.map(item => ({
+        ...item,
+        className: styles.item,
+      })),
+    [groupItems],
+  );
+
+  return (
+    <DrawerCustom
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      size={isNeedRightBlock ? 'm' : 's'}
+      position='left'
+      className={styles.drawer}
+      rootClassName={styles.drawerRoot}
+      data-test-id='header__drawer-menu'
+      data-small={!isNeedRightBlock || undefined}
+    >
+      <div className={styles.menu}>
+        <div className={styles.left} data-test-id='header__drawer-menu__left'>
+          {leftTop && <div className={styles.leftTop}>{leftTop}</div>}
+
+          {!isInitialEmptyCards && (
+            <List
+              items={groupItemsWithClass}
+              pinBottom={settingItemsWithClassName}
+              scroll
+              size='m'
+              barHideStrategy='never'
+              className={styles.list}
+            />
+          )}
+
+          {!leftTop && isInitialEmptyCards && <div />}
+
+          {isInitialEmptyCards && settingItemsWithClassName.length > 0 && (
+            <div className={cn(styles.list, styles.halfList)}>
+              <List
+                items={settingItems.filter(isBaseItemProps).map(item => ({
+                  ...item,
+                  className: styles.item,
+                }))}
+                size='m'
+                barHideStrategy='never'
+              />
+            </div>
+          )}
+        </div>
+
+        {isNeedRightBlock && (
+          <div className={styles.right} data-test-id='header__drawer-menu__right'>
+            <Scroll paddingAbsolute className={styles.scroll} ref={scrollRef} barHideStrategy='never'>
+              {isInitialEmptyCards && rightTop && <div className={styles.bannersWrap}>{rightTop}</div>}
+
+              {!isInitialEmptyCards && (
+                <Content
+                  onClose={() => {
+                    setOpen(false);
+                  }}
+                  className={styles.rightContent}
+                  search={search && <SearchDesktop {...search} ref={searchRef} />}
+                  searchValue={search && search.searchValue}
+                  banners={rightTop}
+                  favorite={favorite}
+                  serviceGroups={resultItems}
+                  onLinkChange={onLinkChange}
+                />
+              )}
+            </Scroll>
+          </div>
+        )}
+      </div>
+    </DrawerCustom>
+  );
+}

package/src/components/MainMenu/MenuDesktop/index.ts

@@ -0,0 +1 @@
+export * from './MenuDesktop';

package/src/components/MainMenu/MenuDesktop/styles.module.scss

@@ -0,0 +1,108 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as var;
+
+.drawer {
+  & [data-test-id='drawer__close-button'] {
+    display: none;
+  }
+
+  svg {
+    fill: currentColor;
+  }
+}
+
+.scroll {
+  padding: 28px 28px 0 12px;
+  box-sizing: border-box;
+}
+
+.left {
+  display: flex;
+  flex-direction: column;
+  padding: 32px 16px 24px 32px;
+  gap: 16px;
+  justify-content: space-between;
+  position: relative;
+  box-sizing: border-box;
+  width: 272px;
+}
+
+.drawerRoot {
+  & [data-test-id='header__drawer-menu'][data-small] {
+    width: 316px;
+
+    .left {
+      width: 316px;
+    }
+  }
+
+  & [data-test-id='header__drawer-menu']:not([data-small]) {
+    min-width: 744px;
+    overflow: hidden;
+  }
+}
+
+.leftTop {
+  display: flex;
+  flex-direction: column;
+  gap: var.$dimension-1m;
+  flex-grow: 1;
+  min-height: var.$dimension-7m;
+}
+
+.right {
+  display: flex;
+  flex-direction: column;
+  height: 100dvh;
+  flex: 1;
+  min-width: 0;
+
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    top: 32px;
+    left: 0;
+    background-color: var.$sys-neutral-decor-default;
+    width: 1px;
+    bottom: 24px;
+  }
+}
+
+.rightContent {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 4px;
+  padding-bottom: 24px;
+}
+
+.menu {
+  display: flex;
+  height: 100%;
+  box-sizing: border-box;
+  background-color: var.$sys-neutral-background;
+}
+
+.list {
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-left: -31px !important;
+  /* stylelint-disable-next-line declaration-no-important */
+  margin-right: -16px !important;
+}
+
+.halfList {
+  border-top: 1px solid var.$sys-neutral-decor-default;
+  padding-top: 8px;
+}
+
+.item {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding-left: 22px !important;
+  box-sizing: border-box;
+}
+
+.bannersWrap {
+  padding: var.$dimension-050m;
+  padding-top: var.$dimension-025m;
+}

package/src/components/MainMenu/MenuMobile/MenuMobile.tsx

@@ -0,0 +1,83 @@
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDrawerCustom } from '@cloud-ru/uikit-product-mobile-drawer';
+import { isBaseItemProps, List } from '@snack-uikit/list';
+import { Scroll } from '@snack-uikit/scroll';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { Content } from '../Content';
+import { useMenuItems } from '../hooks';
+import { SearchMobile } from '../Search';
+import { MainMenuProps } from '../types';
+import styles from './styles.module.scss';
+
+export function MenuMobile({
+  open: openProp,
+  setOpen: setOpenProp,
+  settingItems,
+  leftTop,
+  rightTop,
+  serviceGroups,
+  favorite,
+  search,
+  onLinkChange,
+}: MainMenuProps) {
+  const [open = false, setOpen] = useValueControl<boolean>({ value: openProp, onChange: setOpenProp });
+
+  const { t } = useLocale('Header');
+
+  const isInitialEmptyCards = serviceGroups?.length === 0;
+
+  const { searchRef, resultItems } = useMenuItems({
+    serviceGroups,
+    search,
+    favorite,
+  });
+
+  return (
+    <MobileDrawerCustom
+      open={open}
+      onClose={() => {
+        setOpen(false);
+      }}
+      className={styles.drawerMobile}
+      swipeEnabled={false}
+      data-test-id='header__drawer-menu-mobile'
+      closeOnPopstate
+    >
+      <MobileDrawerCustom.Header title={t('navigation')} />
+
+      <Scroll barHideStrategy='never'>
+        <div className={styles.scrollMobile}>
+          {top && <div className={styles.rightContent}>{leftTop}</div>}
+
+          {!isInitialEmptyCards && (
+            <Content
+              isMobile
+              onClose={() => {
+                setOpen(false);
+              }}
+              onLinkChange={onLinkChange}
+              search={search && <SearchMobile {...search} ref={searchRef} />}
+              className={styles.rightContent}
+              searchValue={search && search.searchValue}
+              banners={rightTop}
+              favorite={favorite}
+              serviceGroups={resultItems}
+            />
+          )}
+
+          {isInitialEmptyCards && rightTop && <div className={styles.bannersWrap}>{rightTop}</div>}
+
+          {settingItems.length > 0 && (
+            <List
+              className={styles.settings}
+              items={[{ type: 'group', items: [], divider: true }, ...settingItems.filter(isBaseItemProps)]}
+              size='m'
+              barHideStrategy='never'
+            />
+          )}
+        </div>
+      </Scroll>
+    </MobileDrawerCustom>
+  );
+}

package/src/components/MainMenu/MenuMobile/index.ts

@@ -0,0 +1 @@
+export * from './MenuMobile';

package/src/components/MainMenu/MenuMobile/styles.module.scss

@@ -0,0 +1,26 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.rightContent {
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-1m;
+  padding-top: 4px;
+}
+
+.drawerMobile {
+  /* stylelint-disable-next-line declaration-no-important */
+  background-color: ste.$sys-neutral-background !important;
+}
+
+.scrollMobile {
+  padding: ste.$dimension-2m;
+  padding-top: 0;
+}
+
+.bannersWrap {
+  margin-top: ste.$dimension-1m;
+}
+
+.settings {
+  margin-top: ste.$dimension-1m;
+}

package/src/components/MainMenu/Search/SearchDesktop/SearchDesktop.tsx

@@ -0,0 +1,46 @@
+import { forwardRef, useState } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ChipToggle } from '@snack-uikit/chips';
+import { Search } from '@snack-uikit/search';
+
+import { SearchSettingsButton } from '../SearchSettingsButton';
+import { SearchProps } from '../types';
+import styles from './styles.module.scss';
+
+export const SearchDesktop = forwardRef<HTMLDivElement, SearchProps>(
+  ({ searchValue, searchFn, searchFunctions, onChangeSearchFn, onSearchValueChange }, ref) => {
+    const { t } = useLocale('Header');
+
+    const [areSearchSettingsVisible, setAreSearchSettingsVisible] = useState<boolean>(false);
+
+    return (
+      <div className={styles.searchItem} ref={ref}>
+        <Search
+          size='m'
+          outline
+          placeholder={t('searchByServices')}
+          value={searchValue}
+          onChange={onSearchValueChange}
+          data-test-id='header__drawer-menu__search'
+          className={styles.search}
+          postfix={<SearchSettingsButton onClick={() => setAreSearchSettingsVisible(prevOpen => !prevOpen)} />}
+        />
+        {areSearchSettingsVisible && (
+          <div className={styles.searchSettingsChips}>
+            {searchFunctions.map(item => (
+              <ChipToggle
+                key={item.id}
+                label={item.label}
+                checked={searchFn === item.id}
+                onChange={() => onChangeSearchFn(item.id)}
+                data-test-id={`header__drawer-menu__search-option-${item.id}`}
+                size='xs'
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  },
+);

package/src/components/MainMenu/Search/SearchDesktop/index.ts

@@ -0,0 +1 @@
+export * from './SearchDesktop';

package/src/components/MainMenu/Search/SearchDesktop/styles.module.scss

@@ -0,0 +1,21 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as ste;
+
+.searchItem {
+  position: sticky;
+  /* stylelint-disable-next-line declaration-property-value-allowed-list */
+  z-index: 1;
+  top: 0;
+  background-color: ste.$sys-neutral-background;
+  padding: 4px;
+  padding-bottom: ste.$dimension-1m;
+
+  display: flex;
+  flex-direction: column;
+  gap: ste.$dimension-1m;
+}
+
+.searchSettingsChips {
+  display: flex;
+  flex-direction: row;
+  gap: ste.$dimension-050m;
+}

package/src/components/MainMenu/Search/SearchMobile/SearchMobile.tsx

@@ -0,0 +1,102 @@
+import { forwardRef, useState } from 'react';
+
+import { SearchSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileModalCustom } from '@cloud-ru/uikit-product-mobile-modal';
+import { ButtonElevated } from '@snack-uikit/button';
+import { List } from '@snack-uikit/list';
+import { Search } from '@snack-uikit/search';
+import { Typography } from '@snack-uikit/typography';
+
+import { SearchSettingsButton } from '../SearchSettingsButton';
+import { SearchProps } from '../types';
+import { SEARCH_TRANSITION_TIMEOUT } from './constants';
+import { useSearchAnimation } from './hooks';
+import styles from './styles.module.scss';
+
+export const SearchMobile = forwardRef<HTMLDivElement, SearchProps>(
+  ({ searchValue, searchFn, searchFunctions, onChangeSearchFn, onSearchValueChange }, ref) => {
+    const { t } = useLocale('Header');
+
+    const [areSearchSettingsVisible, setAreSearchSettingsVisible] = useState<boolean>(false);
+
+    const {
+      searchRef: newSearchRef,
+      animationState,
+      toggleSearchActive,
+      isSearchActive,
+      searchInputTabIndex,
+    } = useSearchAnimation();
+
+    return (
+      <div className={styles.searchItem} ref={ref}>
+        <div
+          className={styles.searchWrap}
+          style={{
+            // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+            // @ts-ignore
+            '--sc-header-animation-enter': SEARCH_TRANSITION_TIMEOUT.enter,
+            '--sc-header-animation-exit': SEARCH_TRANSITION_TIMEOUT.exit,
+          }}
+        >
+          <Typography.SansTitleM>{t('services')}</Typography.SansTitleM>
+
+          <div
+            className={styles.searchMobile}
+            data-transition-status={animationState.status}
+            data-is-mounted={animationState.isMounted || undefined}
+          >
+            <Search
+              size='m'
+              placeholder={t('searchByServices')}
+              value={searchValue}
+              onChange={onSearchValueChange}
+              data-test-id='header__drawer-menu__search'
+              ref={newSearchRef}
+              tabIndex={searchInputTabIndex}
+              postfix={<SearchSettingsButton onClick={() => setAreSearchSettingsVisible(true)} />}
+            />
+
+            <MobileModalCustom
+              open={areSearchSettingsVisible}
+              onClose={() => setAreSearchSettingsVisible(false)}
+              closeOnPopstate
+              closeButtonEnabled
+            >
+              <MobileModalCustom.Header title={t('searchSettingsMobileModalHeader')} />
+              <div className={styles.searchModalBody}>
+                <List
+                  className={styles.searchSettingsMobileOptions}
+                  items={searchFunctions.map(item => ({
+                    id: item.id,
+                    content: {
+                      option: item.label,
+                    },
+                  }))}
+                  size='m'
+                  selection={{
+                    mode: 'single',
+                    value: searchFn,
+                    onChange: value => {
+                      onChangeSearchFn(value);
+                      setAreSearchSettingsVisible(false);
+                    },
+                  }}
+                />
+              </div>
+            </MobileModalCustom>
+          </div>
+
+          <ButtonElevated
+            size='m'
+            className={styles.searchButton}
+            icon={<SearchSVG />}
+            onClick={toggleSearchActive}
+            data-test-id='header__drawer-menu__close-search-icon'
+            data-search-active={isSearchActive || undefined}
+          />
+        </div>
+      </div>
+    );
+  },
+);

package/src/components/MainMenu/Search/SearchMobile/constants.ts

@@ -0,0 +1,4 @@
+export const SEARCH_TRANSITION_TIMEOUT = {
+  enter: 150,
+  exit: 100,
+};

package/src/components/MainMenu/Search/SearchMobile/hooks.ts

@@ -0,0 +1,43 @@
+import { useEffect, useRef, useState } from 'react';
+import useTransition from 'react-transition-state';
+
+import { SEARCH_TRANSITION_TIMEOUT } from './constants';
+
+export function useSearchAnimation() {
+  const searchRef = useRef<HTMLInputElement>(null);
+
+  const [isSearchActive, setIsSearchActive] = useState<boolean>(false);
+
+  const searchInputTabIndex = isSearchActive ? undefined : -1;
+
+  const [animationState, toggle] = useTransition({
+    mountOnEnter: true,
+    unmountOnExit: true,
+    initialEntered: isSearchActive,
+    timeout: SEARCH_TRANSITION_TIMEOUT,
+  });
+
+  useEffect(() => toggle(isSearchActive), [isSearchActive]);
+
+  const toggleSearchActive = () => setIsSearchActive(prevState => !prevState);
+
+  useEffect(() => {
+    if (isSearchActive) {
+      searchRef.current?.focus();
+    }
+
+    return () => {
+      if (isSearchActive) {
+        setIsSearchActive(false);
+      }
+    };
+  }, [isSearchActive]);
+
+  return {
+    searchRef,
+    toggleSearchActive,
+    isSearchActive,
+    animationState,
+    searchInputTabIndex,
+  };
+}

package/src/components/MainMenu/Search/SearchMobile/index.ts

@@ -0,0 +1 @@
+export * from './SearchMobile';