@cloud-ru/uikit-product-mobile-layout 0.20.7

package/src/helperComponents/ButtonDroplist/ButtonDroplist.tsx

@@ -0,0 +1,46 @@
+import { useMemo } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist, AdaptiveDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonFilled, ButtonFilledProps, ButtonFunction, ButtonFunctionProps } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+export type ButtonDroplistProps = WithLayoutType<{
+  button:
+    | (Omit<ButtonFilledProps, 'appearance'> & { buttonType?: 'filled' })
+    | (Omit<ButtonFunctionProps, 'icon' | 'iconPosition' | 'appearance'> & { buttonType?: 'function' });
+  list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'className' | 'open' | 'onOpenChange'>;
+}>;
+
+export function ButtonDroplist({ layoutType, button, list }: ButtonDroplistProps) {
+  const [open, onOpenChange] = useValueControl<boolean>({ onChange: list.onOpenChange, value: list.open });
+
+  const Icon = open ? ChevronUpSVG : ChevronDownSVG;
+
+  const buttonType = button.buttonType ?? 'function';
+
+  const Button = buttonType === 'filled' ? ButtonFilled : ButtonFunction;
+
+  const buttonProps: ButtonDroplistProps['button'] = useMemo(
+    () =>
+      buttonType === 'filled' ? button : { ...button, appearance: 'neutral', icon: <Icon />, iconPosition: 'after' },
+    [buttonType, button, Icon],
+  );
+
+  return (
+    <AdaptiveDroplist
+      {...list}
+      open={open}
+      onOpenChange={onOpenChange}
+      layoutType={layoutType}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      size='m'
+    >
+      <Button {...buttonProps} />
+    </AdaptiveDroplist>
+  );
+}

package/src/helperComponents/ButtonDroplist/index.ts

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

package/src/helperComponents/ButtonKebab/ButtonKebab.tsx

@@ -0,0 +1,31 @@
+import { KebabSVG } from '@cloud-ru/uikit-product-icons';
+import { AdaptiveDroplist, AdaptiveDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { WithLayoutType } from '@cloud-ru/uikit-product-utils';
+import { ButtonOutline, ButtonOutlineProps } from '@snack-uikit/button';
+import { useValueControl } from '@snack-uikit/utils';
+
+export type ButtonKebabProps = WithLayoutType<{
+  button?: Omit<ButtonOutlineProps, 'label' | 'icon'>;
+  list: Pick<AdaptiveDroplistProps, 'items' | 'closeDroplistOnItemClick' | 'open' | 'onOpenChange' | 'className'>;
+}>;
+
+export function ButtonKebab({ layoutType, button, list }: ButtonKebabProps) {
+  const [open, onOpenChange] = useValueControl<boolean>({ onChange: list.onOpenChange, value: list.open });
+
+  return (
+    <AdaptiveDroplist
+      {...list}
+      open={open}
+      onOpenChange={onOpenChange}
+      layoutType={layoutType}
+      selection={{
+        mode: 'single',
+        value: 'null',
+      }}
+      placement='bottom-end'
+      size='m'
+    >
+      <ButtonOutline {...button} icon={<KebabSVG />} appearance='neutral' />
+    </AdaptiveDroplist>
+  );
+}

package/src/helperComponents/ButtonKebab/index.ts

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

package/src/helperComponents/Headline/Headline.tsx

@@ -0,0 +1,29 @@
+import { ReactNode } from 'react';
+
+import styles from './styles.module.scss';
+
+export type HeadlineProps = {
+  title: string;
+  beforeHeadline?: ReactNode;
+  afterHeadline?: ReactNode;
+  moreActions?: ReactNode;
+  subHeader?: ReactNode;
+};
+
+export function Headline({ title, beforeHeadline, afterHeadline, subHeader, moreActions }: HeadlineProps) {
+  return (
+    <div className={styles.headline}>
+      <div className={styles.titleLayout}>
+        {beforeHeadline && <div className={styles.prefixButtonWrapper}>{beforeHeadline}</div>}
+
+        <h1 className={styles.title}>{title}</h1>
+
+        {moreActions}
+      </div>
+
+      {afterHeadline && <div className={styles.statusWrapper}>{afterHeadline}</div>}
+
+      {subHeader && <div className={styles.subHeader}>{subHeader}</div>}
+    </div>
+  );
+}

package/src/helperComponents/Headline/index.ts

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

package/src/helperComponents/Headline/styles.module.scss

@@ -0,0 +1,49 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables';
+
+.headline {
+  display: flex;
+  flex-direction: column;
+  gap: styles-theme-variables.$dimension-1m;
+}
+
+.headlineLayout {
+  display: flex;
+  flex-direction: row;
+  gap: styles-theme-variables.$dimension-1m;
+  align-items: flex-start;
+}
+
+.titleLayout {
+  display: flex;
+  flex-direction: row;
+  gap: styles-theme-variables.$dimension-050m;
+  align-items: flex-start;
+  flex-grow: 1;
+}
+
+.title {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-headline-s);
+
+  color: styles-theme-variables.$sys-neutral-text-main;
+  margin: 0;
+  word-break: break-word;
+  flex: 1;
+}
+
+.prefixButtonWrapper {
+  display: flex;
+  align-items: center;
+  height: styles-theme-variables.$sans-headline-m-line-height;
+  flex-shrink: 0;
+}
+
+.statusWrapper {
+  display: flex;
+  align-items: center;
+  height: styles-theme-variables.$sans-headline-m-line-height;
+  flex-shrink: 0;
+}
+
+.subHeader {
+  margin-top: 8px;
+}

package/src/helperComponents/SidebarSelect/SidebarSelect.tsx

@@ -0,0 +1,78 @@
+import cn from 'classnames';
+import { useMemo, useState } from 'react';
+
+import { ChevronDownSVG, ChevronUpSVG } from '@cloud-ru/uikit-product-icons';
+import { MobileDroplist, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { TruncateString } from '@snack-uikit/truncate-string';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { MobileBlockBasic } from '../../components';
+import { useItemsContent, useSearchFilter, useSelectedItem } from './hooks';
+import styles from './styles.module.scss';
+import { SidebarItem } from './types';
+
+export type SidebarSelectProps = WithSupportProps<{
+  items: SidebarItem[];
+  footerItems?: SidebarItem[];
+  selected?: string | number;
+  onSelect?(id: string | number): void;
+  className?: string;
+  collapse?: MobileDroplistProps['collapse'];
+  hasSearch?: boolean;
+}>;
+
+export function SidebarSelect({
+  className,
+  items,
+  footerItems = [],
+  selected,
+  onSelect,
+  collapse,
+  hasSearch,
+  ...otherProps
+}: SidebarSelectProps) {
+  const [searchValue, setSearchValue] = useState('');
+  const { filteredList, searchCollapseState } = useSearchFilter(items, searchValue);
+  const list = useItemsContent(filteredList, onSelect);
+  const footerList = useItemsContent(footerItems);
+  const [isOpen, setIsOpen] = useState(false);
+  const selectedItem = useSelectedItem(items, selected);
+
+  const selectedCollapsedState = useMemo(() => {
+    if (selectedItem.item) {
+      return { defaultValue: selectedItem.path };
+    }
+  }, [selectedItem.item, selectedItem.path]);
+
+  const handleSelect = (value: string | number) => {
+    if (value) {
+      onSelect?.(value);
+    }
+
+    setIsOpen(false);
+  };
+
+  const allItems = useMemo(() => [...list, ...footerList], [list, footerList]);
+
+  const shouldShowSearch = hasSearch ?? (allItems.length > 15 || searchValue);
+
+  return (
+    <MobileDroplist
+      selection={{ mode: 'single', value: selected, onChange: handleSelect }}
+      items={allItems}
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      collapse={searchValue ? searchCollapseState : collapse || selectedCollapsedState}
+      search={shouldShowSearch ? { value: searchValue, onChange: setSearchValue } : undefined}
+      scrollToSelectedItem
+    >
+      <MobileBlockBasic className={cn(styles.wrapper, className)} {...extractSupportProps(otherProps)}>
+        <TruncateString className={styles.triggerText} text={selectedItem.item?.label || ''} />
+
+        {selectedItem.item?.afterContent}
+
+        {isOpen ? <ChevronUpSVG /> : <ChevronDownSVG />}
+      </MobileBlockBasic>
+    </MobileDroplist>
+  );
+}

package/src/helperComponents/SidebarSelect/hooks/index.ts

@@ -0,0 +1,3 @@
+export { useItemsContent } from './useItemsContent';
+export { useSelectedItem } from './useSelectedItem';
+export { useSearchFilter } from './useSearchFilter';

package/src/helperComponents/SidebarSelect/hooks/useItemsContent.tsx

@@ -0,0 +1,89 @@
+import { MouseEvent, ReactNode, useMemo } from 'react';
+
+import { MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+
+import { SidebarItem } from '../types';
+
+const getItemsContent = (
+  items: SidebarItem[],
+  onSelect?: (id: string | number) => void,
+): MobileDroplistProps['items'] =>
+  items.map(({ id, label, onClick, afterContent, beforeContent, disabledReason, disabledReasonPlacement, ...rest }) => {
+    const href = 'href' in rest ? rest.href : undefined;
+    const newItems = 'items' in rest ? rest.items : undefined;
+    const type = 'type' in rest ? rest.type : undefined;
+
+    const clickHandler = (event: MouseEvent<HTMLElement>) => {
+      if (href && (event?.metaKey || event?.button === 1)) {
+        return;
+      }
+
+      event.preventDefault();
+      onClick?.(event);
+
+      if (!items.length) {
+        onSelect?.(id);
+      }
+    };
+
+    if (type === 'group') {
+      return {
+        ...rest,
+        label,
+        type: 'group',
+        items: getItemsContent(newItems || [], onSelect),
+      };
+    }
+
+    const newItem = {
+      id,
+      content: {
+        option: label,
+      },
+      itemWrapRender: (item: ReactNode) => {
+        if (!disabledReason) {
+          return href ? (
+            <a href={href} onClick={clickHandler}>
+              {item}
+            </a>
+          ) : (
+            item
+          );
+        }
+
+        return (
+          <MobileTooltip
+            hoverDelayOpen={500}
+            open={disabledReason ? undefined : false}
+            tip={disabledReason}
+            placement={disabledReasonPlacement}
+          >
+            {item}
+          </MobileTooltip>
+        );
+      },
+
+      onClick: href ? undefined : clickHandler,
+      afterContent,
+      beforeContent,
+      disabled: Boolean(disabledReason),
+    };
+
+    if (newItems?.length) {
+      return {
+        ...newItem,
+        type: 'collapse',
+        items: getItemsContent(newItems || [], onSelect),
+      };
+    }
+
+    return newItem;
+  });
+
+export function useItemsContent(
+  items: SidebarItem[],
+  onSelect?: (id: string | number) => void,
+): MobileDroplistProps['items'] {
+  return useMemo(() => getItemsContent(items, onSelect), [items, onSelect]);
+}

package/src/helperComponents/SidebarSelect/hooks/useSearchFilter.tsx

@@ -0,0 +1,53 @@
+import { useMemo } from 'react';
+
+import { SidebarItem } from '../types';
+
+const matchString = (value: string, searchValue: string) =>
+  value.trim().toLowerCase().includes(searchValue.trim().toLowerCase());
+
+const filterService = (servicesList: SidebarItem[], searchValue: string): SidebarItem[] => {
+  if (!searchValue) return servicesList;
+
+  return servicesList.reduce((result, service) => {
+    if (service.label && matchString(service.label, searchValue)) {
+      result.push(service);
+      return result;
+    }
+
+    if ('items' in service && service.items?.length) {
+      const items = filterService(service.items, searchValue);
+
+      if (items.length) {
+        result.push({ ...service, items });
+      }
+
+      return result;
+    }
+
+    return result;
+  }, [] as SidebarItem[]);
+};
+
+const getItemIds = (list: SidebarItem[]): (string | number)[] =>
+  list.reduce(
+    (result, el) => {
+      result.push(el.id);
+
+      if ('items' in el && el.items?.length) {
+        const childItems = getItemIds(el.items);
+        result.push(...childItems);
+      }
+      return result;
+    },
+    [] as (string | number)[],
+  );
+
+export const useSearchFilter = (list: SidebarItem[], searchValue: string) => {
+  const filteredList = useMemo(() => filterService(list, searchValue), [list, searchValue]);
+  const searchCollapseState = useMemo(() => ({ value: getItemIds(filteredList) }), [filteredList]);
+
+  return {
+    filteredList,
+    searchCollapseState,
+  };
+};

package/src/helperComponents/SidebarSelect/hooks/useSelectedItem.tsx

@@ -0,0 +1,35 @@
+import { useMemo } from 'react';
+
+import { SidebarItem } from '../types';
+
+type SelectedItem = {
+  item: SidebarItem | undefined;
+  path: (string | number)[];
+};
+
+function findSelectedItem(items: SidebarItem[], selected: string | number | undefined): SelectedItem {
+  return items.reduce(
+    (result, el) => {
+      if (el.id === selected) {
+        result.path.push(el.id);
+        return { ...result, item: el };
+      }
+
+      if ('items' in el && el.items?.length) {
+        const child = findSelectedItem(el.items, selected);
+
+        if (child.item) {
+          result.path.push(el.id, ...child.path);
+          return { ...result, item: child.item };
+        }
+      }
+
+      return result;
+    },
+    { item: undefined, path: [] } as SelectedItem,
+  );
+}
+
+export function useSelectedItem(items: SidebarItem[], selected: string | number | undefined): SelectedItem {
+  return useMemo(() => findSelectedItem(items, selected), [items, selected]);
+}

package/src/helperComponents/SidebarSelect/index.ts

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

package/src/helperComponents/SidebarSelect/styles.module.scss

@@ -0,0 +1,17 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables.scss';
+
+.wrapper {
+  @include styles-theme-variables.composite-var(styles-theme-variables.$sans-body-l);
+
+  padding: 0 calc(styles-theme-variables.$dimension-2m - styles-theme-variables.$dimension-050m);
+  gap: styles-theme-variables.$dimension-1m;
+  height: styles-theme-variables.$dimension-6m;
+  display: flex;
+  align-items: center;
+  color: styles-theme-variables.$sys-neutral-text-support;
+  cursor: pointer;
+}
+
+.triggerText {
+  flex-grow: 1;
+}

package/src/helperComponents/SidebarSelect/types.ts

@@ -0,0 +1 @@
+export type { SidebarItem } from '@cloud-ru/uikit-product-page-layout';

package/src/helperComponents/index.ts

@@ -0,0 +1,3 @@
+export * from './Actions';
+export * from './Headline';
+export * from './SidebarSelect';

package/src/helpers/index.ts

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

package/src/helpers/useGetButtonLabel.ts

@@ -0,0 +1,10 @@
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ButtonPrimaryVariant, ButtonSecondaryVariant } from '@cloud-ru/uikit-product-page-layout';
+
+export function useGetButtonLabel() {
+  const { t } = useLocale('MobileLayout');
+
+  return function getButtonLabel(variant: ButtonPrimaryVariant | ButtonSecondaryVariant): string {
+    return t(variant);
+  };
+}

package/src/index.ts

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