@cloud-ru/uikit-product-mobile-toolbar 0.4.3

package/src/components/MobileToolbar/typesUtils.ts

@@ -0,0 +1,17 @@
+export type IsEqual<A, B> = (<G>() => G extends A ? 1 : 2) extends <G>() => G extends B ? 1 : 2 ? true : false;
+
+type Filter<KeyType, ExcludeType> =
+  IsEqual<KeyType, ExcludeType> extends true ? never : KeyType extends ExcludeType ? never : KeyType;
+
+type Except<ObjectType, KeysType extends keyof ObjectType> = {
+  [KeyType in keyof ObjectType as Filter<KeyType, KeysType>]: ObjectType[KeyType];
+};
+
+export type RequireAtLeastOne<ObjectType, KeysType extends keyof ObjectType = keyof ObjectType> = {
+  [Key in KeysType]-?: Required<Pick<ObjectType, Key>> & Partial<Pick<ObjectType, Exclude<KeysType, Key>>>;
+}[KeysType] &
+  Except<ObjectType, KeysType>;
+
+export type NeverOrUndefined<T> = {
+  [P in keyof T]?: never;
+};

package/src/components/index.ts

@@ -0,0 +1,2 @@
+export * from './AdaptiveToolbar';
+export * from './MobileToolbar';

package/src/constants.ts

@@ -0,0 +1,19 @@
+export const TEST_IDS = {
+  main: 'toolbar',
+  checkbox: 'toolbar__checkbox',
+  confirmAction: 'toolbar__confirm-action',
+  rejectAction: 'toolbar__reject-action',
+  deleteAction: 'toolbar__delete-action',
+  deactivateAction: 'toolbar__deactivate-action',
+  disabledAction: 'toolbar__disabled-action',
+  bulkActions: 'toolbar__bulk-actions',
+  moreBulkActionsButton: 'toolbar__more-bulk-actions-button',
+  refreshButton: 'toolbar__refresh-button',
+  search: 'toolbar__search',
+  filterButton: 'toolbar__filter-button',
+  filterRow: 'toolbar__filter-row',
+  moreActionsButton: 'toolbar__more-actions-button',
+  droplist: 'toolbar__droplist',
+  option: 'toolbar__droplist-option',
+  after: 'toolbar__after',
+};

package/src/helperComponents/BulkActions/BulkActions.tsx

@@ -0,0 +1,95 @@
+import { useRef, useState } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { MobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Counter } from '@snack-uikit/counter';
+import { useDynamicList } from '@snack-uikit/utils';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+import { BulkActionsProps } from './types';
+
+export function BulkActions({ actions = [], selectedCount, outline }: BulkActionsProps & { outline?: boolean }) {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const parentContainerRef = useRef<HTMLDivElement>(null);
+
+  const { t } = useLocale('MobileToolbar');
+
+  const { visibleItems, hiddenItems } = useDynamicList({
+    items: actions,
+    parentContainerRef,
+    maxVisibleItems: 3,
+  });
+
+  return (
+    <div className={styles.bulkActionsContainer} data-outline={outline}>
+      <div className={styles.counter}>
+        {selectedCount && <Counter value={selectedCount} appearance='primary' color='decor' />}
+      </div>
+      <div className={styles.bulkActionsWrapper} data-test-id={TEST_IDS.bulkActions} ref={parentContainerRef}>
+        <div className={styles.smallSeparator} />
+        <div className={styles.bulkActions}>
+          {visibleItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => (
+            <MobileTooltip
+              tip={tooltip}
+              key={label}
+              open={tooltip ? undefined : false}
+              placement='top'
+              data-test-id={`${testId}-tooltip`}
+            >
+              <ButtonFunction
+                className={styles.action}
+                data-test-id={testId}
+                iconPosition='before'
+                icon={<Icon />}
+                label={label}
+                size='m'
+                onClick={onClick}
+                disabled={disabled}
+              />
+            </MobileTooltip>
+          ))}
+        </div>
+
+        {hiddenItems.length > 0 && (
+          <MobileDroplist
+            open={isOpen}
+            onOpenChange={setIsOpen}
+            items={hiddenItems.map(({ label, icon: Icon, onClick, disabled, tooltip, 'data-test-id': testId }) => ({
+              id: label,
+              content: { option: label },
+              beforeContent: <Icon />,
+              onClick: () => {
+                onClick?.();
+                setIsOpen(false);
+              },
+              disabled,
+              itemWrapRender: item => (
+                <MobileTooltip
+                  tip={tooltip}
+                  open={tooltip ? undefined : false}
+                  placement='right'
+                  data-test-id={`${testId}-tooltip`}
+                >
+                  {item}
+                </MobileTooltip>
+              ),
+              'data-test-id': testId,
+            }))}
+          >
+            <ButtonFunction
+              className={styles.moreActionButton}
+              size='m'
+              appearance='primary'
+              label={t('more')}
+              data-test-id={TEST_IDS.moreBulkActionsButton}
+            />
+          </MobileDroplist>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/helperComponents/BulkActions/constants.ts

@@ -0,0 +1,4 @@
+export const SELECTION_MODE = {
+  Single: 'single',
+  Multiple: 'multiple',
+} as const;

package/src/helperComponents/BulkActions/index.ts

@@ -0,0 +1,3 @@
+export * from './BulkActions';
+export * from './constants';
+export * from './types';

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

@@ -0,0 +1,72 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-toolbar' as toolbar;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as element;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/styles-theme-variables' as vars;
+
+.bulkActionsContainer {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.counter {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  flex-grow: 0;
+  width: 40px;
+  height: 40px;
+}
+
+.bulkActionsWrapper {
+  @include toolbar.composite-var(toolbar.$toolbar-bulk-action-wrap);
+
+  width: 100%;
+  scrollbar-width: none;  /* Firefox */
+
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  justify-content: start;
+  align-items: center;
+
+  min-width: 0;
+
+  /* Hide scrollbar */
+  -ms-overflow-style: none;  /* IE and Edge */
+
+  &::-webkit-scrollbar {
+    display: none; /* Chrome, Safari and Opera */
+  }
+}
+
+.bulkActions {
+  @include toolbar.composite-var(toolbar.$toolbar-bulk-action);
+
+  display: flex;
+  flex-grow: 1;
+  flex-shrink: 1;
+  padding-left: 8px;
+}
+
+.moreActionButton {
+  flex-shrink: 0;
+  padding-left: 4px;
+}
+
+.action {
+  white-space: nowrap;
+
+  &[data-full-width]:not([data-variant="icon-only"]) {
+    flex-shrink: 0;
+    width: auto;
+  }
+}
+
+.smallSeparator {
+  box-sizing: border-box;
+  width: toolbar.$border-width-toolbar-separator;
+  height: 16px;
+  background-color: toolbar.$sys-neutral-decor-default;
+}

package/src/helperComponents/BulkActions/types.ts

@@ -0,0 +1,31 @@
+import { JSXElementConstructor } from 'react';
+
+import { MobileTooltipProps } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+
+import { SELECTION_MODE } from './constants';
+
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+
+export type BulkAction = WithSupportProps<{
+  label: string;
+  icon: JSXElementConstructor<{ className?: string }>;
+  disabled?: boolean;
+  tooltip?: MobileTooltipProps['tip'];
+  onClick?(): void;
+}>;
+
+export type BulkActionsProps = {
+  /** Список массовых действий */
+  actions?: BulkAction[];
+  /** Колбек смены значения чекбокса */
+  onCheck?(): void;
+  /** Значение чекбокса */
+  checked?: boolean;
+  /** Состояние частичного выбора */
+  indeterminate?: boolean;
+  /** Режим выбора @default 'multiple'*/
+  selectionMode?: SelectionMode;
+  /** Количество выбранных элементов */
+  selectedCount?: number;
+};

package/src/helperComponents/BulkActionsCheckbox/BulkActionsCheckbox.tsx

@@ -0,0 +1,37 @@
+import { KeyboardEvent, useCallback } from 'react';
+
+import { Checkbox } from '@snack-uikit/toggles';
+
+import { TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+
+export type BulkActionsCheckboxProps = {
+  onCheck?: () => void;
+  checked?: boolean;
+  indeterminate?: boolean;
+};
+
+export function BulkActionsCheckbox({ onCheck, checked, indeterminate }: BulkActionsCheckboxProps) {
+  const handleKeyDown = useCallback(
+    (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === ' ' || e.key === 'Enter') {
+        onCheck?.();
+      }
+    },
+    [onCheck],
+  );
+
+  return (
+    <div
+      className={styles.checkboxWrapper}
+      onClick={onCheck}
+      tabIndex={0}
+      role='checkbox'
+      aria-checked={checked}
+      onKeyDown={handleKeyDown}
+      data-test-id={TEST_IDS.checkbox}
+    >
+      <Checkbox size='s' checked={checked} indeterminate={indeterminate} tabIndex={-1} />
+    </div>
+  );
+}

package/src/helperComponents/BulkActionsCheckbox/index.ts

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

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

@@ -0,0 +1,23 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-toolbar' as toolbar;
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element' as element;
+
+.checkboxWrapper {
+  @include toolbar.composite-var(toolbar.$toolbar-checkbox);
+
+  cursor: pointer;
+
+  position: relative;
+
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  justify-content: center;
+
+  box-sizing: border-box;
+
+  &:focus-visible {
+    @include element.outline-var(element.$container-focused-s);
+
+    outline-color: toolbar.$sys-available-complementary;
+  }
+}

package/src/helperComponents/FilterButton/FilterButton.tsx

@@ -0,0 +1,28 @@
+import { FilterSVG } from '@cloud-ru/uikit-product-icons';
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileTooltip } from '@cloud-ru/uikit-product-mobile-tooltip';
+import { ButtonFunction } from '@snack-uikit/button';
+
+import { TEST_IDS } from '../../constants';
+
+export type FilterButtonProps = {
+  open: boolean;
+  onOpenChange(open: boolean): void;
+  numberOfFilters?: number;
+};
+
+export function FilterButton({ open, onOpenChange, numberOfFilters }: FilterButtonProps) {
+  const { t } = useLocale('Toolbar');
+
+  return (
+    <MobileTooltip tip={open ? t('hideFilters') : t('showFilters')}>
+      <ButtonFunction
+        size='m'
+        icon={<FilterSVG />}
+        onClick={() => onOpenChange(!open)}
+        counter={numberOfFilters ? { value: numberOfFilters, appearance: 'neutral' } : undefined}
+        data-test-id={TEST_IDS.filterButton}
+      />
+    </MobileTooltip>
+  );
+}

package/src/helperComponents/FilterButton/index.ts

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

package/src/helperComponents/MoreActions/MoreActions.tsx

@@ -0,0 +1,57 @@
+import { ReactNode, useState } from 'react';
+
+import { MoreSVG } from '@cloud-ru/uikit-product-icons';
+import { BaseItemProps, MobileDroplist } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFunction } from '@snack-uikit/button';
+import { Tag } from '@snack-uikit/tag';
+
+import { TEST_IDS } from '../../constants';
+
+type Action = {
+  tagLabel?: string;
+  icon?: ReactNode;
+} & Pick<BaseItemProps, 'content' | 'disabled' | 'onClick'>;
+
+export type MoreActionsProps = {
+  items?: Action[];
+  pinTop?: Action[];
+};
+
+export function MoreActions({ items = [], pinTop }: MoreActionsProps) {
+  const [isOpen, setIsOpen] = useState<boolean>(false);
+
+  return (
+    <MobileDroplist
+      open={isOpen}
+      data-test-id={TEST_IDS.droplist}
+      onOpenChange={setIsOpen}
+      scroll
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      size='l'
+      pinTop={pinTop?.map(item => ({
+        ...item,
+        beforeContent: item.icon,
+        onClick: e => {
+          item.onClick?.(e);
+          setIsOpen(false);
+          e.stopPropagation();
+        },
+      }))}
+      items={items.map(item => ({
+        onClick: e => {
+          item.onClick?.(e);
+          setIsOpen(false);
+          e.stopPropagation();
+        },
+        disabled: item.disabled,
+        content: item.content,
+        beforeContent: item.icon,
+        afterContent: item.tagLabel ? <Tag label={item.tagLabel} /> : undefined,
+        'data-test-id': TEST_IDS.option,
+      }))}
+    >
+      <ButtonFunction icon={<MoreSVG size={24} />} size='m' data-test-id={TEST_IDS.moreActionsButton} />
+    </MobileDroplist>
+  );
+}

package/src/helperComponents/MoreActions/constants.ts

@@ -0,0 +1,6 @@
+export const TRIGGER_OPEN_DROPLIST_KEY_KEYS = [
+  ' ', // <- Space key
+  'ArrowDown',
+];
+
+export const TRIGGER_CLOSE_DROPLIST_KEY_CODES = ['Escape', 'Tab'];

package/src/helperComponents/MoreActions/index.ts

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

package/src/helperComponents/Separator/Separator.tsx

@@ -0,0 +1,9 @@
+import styles from './styles.module.scss';
+
+export function Separator() {
+  return (
+    <div className={styles.separatorWrapper}>
+      <div className={styles.separator}></div>
+    </div>
+  );
+}

package/src/helperComponents/Separator/index.ts

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

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

@@ -0,0 +1,15 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-toolbar' as toolbar;
+
+.separatorWrapper {
+  @include toolbar.composite-var(toolbar.$toolbar-separator-wrap);
+
+  flex-shrink: 0;
+}
+
+
+.separator {
+  box-sizing: border-box;
+  width: toolbar.$border-width-toolbar-separator;
+  height: 100%;
+  background-color: toolbar.$sys-neutral-decor-default;
+}

package/src/helperComponents/index.ts

@@ -0,0 +1,5 @@
+export * from './BulkActions';
+export * from './FilterButton';
+export * from './MoreActions';
+export * from './Separator';
+export * from './BulkActionsCheckbox';

package/src/index.ts

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