@cloud-ru/uikit-product-mobile-chips 0.8.36

package/src/components/MobileChipChoice/components/MobileChipChoiceTime.tsx

@@ -0,0 +1,122 @@
+import { ReactNode, useCallback, useMemo, useRef } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { MobileDropdown } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { TimePicker, TimePickerProps } from '@snack-uikit/calendar';
+import { useValueControl } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_TEST_IDS, SIZE } from '../../../constants';
+import { DEFAULT_LOCALE } from '../constants';
+import { useHandleOnKeyDown } from '../hooks';
+import { ChipChoiceCommonProps } from '../types';
+import { ChipChoiceBase } from './ChipChoiceBase';
+import styles from './styles.module.scss';
+
+const getStringTimeValue = (
+  time: TimePickerProps['value'],
+  { showSeconds, locale }: Pick<TimePickerProps, 'showSeconds'> & { locale: Intl.Locale },
+) => {
+  if (!time) {
+    return '';
+  }
+
+  const date = new Date();
+  date.setHours(time.hours ?? 0);
+  date.setMinutes(time.minutes ?? 0);
+  date.setSeconds(time.seconds ?? 0);
+
+  return date.toLocaleTimeString(locale, {
+    hour: 'numeric',
+    minute: 'numeric',
+    second: showSeconds ? 'numeric' : undefined,
+  });
+};
+
+type TimeValue = TimePickerProps['value'];
+
+export type MobileChipChoiceTimeProps = Omit<ChipChoiceCommonProps, 'widthStrategy'> &
+  Pick<TimePickerProps, 'value' | 'defaultValue' | 'showSeconds'> & {
+    /** Колбек смены значения */
+    onChange?(value: TimeValue): void;
+    /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+    valueRender?(value?: TimeValue): ReactNode;
+  };
+
+export function MobileChipChoiceTime({
+  size = SIZE.S,
+  value,
+  defaultValue,
+  onChange,
+  valueRender,
+  showSeconds = true,
+  onClearButtonClick,
+  open: openProp,
+  onOpenChange,
+  ...rest
+}: MobileChipChoiceTimeProps) {
+  const [selectedValue, setSelectedValue] = useValueControl<TimeValue>({ value, defaultValue, onChange });
+
+  const localRef = useRef<HTMLDivElement>(null);
+
+  const [open, setOpen] = useUncontrolledProp(openProp, false, onOpenChange);
+  const handleOnKeyDown = useHandleOnKeyDown({ setOpen });
+
+  const closeDroplist = useCallback(() => {
+    setOpen(false);
+    setTimeout(() => localRef.current?.focus(), 0);
+  }, [setOpen]);
+
+  const { t } = useLocale('Chips');
+
+  const valueToRender = useMemo(() => {
+    if (valueRender) {
+      return valueRender(selectedValue);
+    }
+
+    if (!selectedValue) return t('allLabel');
+
+    return getStringTimeValue(selectedValue, { showSeconds, locale: DEFAULT_LOCALE });
+  }, [selectedValue, showSeconds, t, valueRender]);
+
+  const handleChangeValue = useCallback(
+    (value: TimeValue) => {
+      setSelectedValue(value);
+      closeDroplist();
+    },
+    [closeDroplist, setSelectedValue],
+  );
+
+  const navigationStartRef = useRef<HTMLButtonElement>(null);
+  const focusNavigationStartItem = () => setTimeout(() => navigationStartRef.current?.focus(), 0);
+
+  return (
+    <MobileDropdown
+      content={
+        <TimePicker
+          className={styles.timeWrapper}
+          value={selectedValue}
+          size='l'
+          fitToContainer={false}
+          onChangeValue={handleChangeValue}
+          navigationStartRef={navigationStartRef}
+          onFocusLeave={closeDroplist}
+          showSeconds={showSeconds}
+        />
+      }
+      open={open}
+      onOpenChange={setOpen}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+    >
+      <ChipChoiceBase
+        {...rest}
+        ref={localRef}
+        onClearButtonClick={onClearButtonClick}
+        value={selectedValue}
+        valueToRender={valueToRender}
+        size={size}
+        onKeyDown={handleOnKeyDown(focusNavigationStartItem)}
+      />
+    </MobileDropdown>
+  );
+}

package/src/components/MobileChipChoice/components/index.ts

@@ -0,0 +1,6 @@
+export * from './MobileChipChoiceCustom';
+export * from './MobileChipChoiceSingle';
+export * from './MobileChipChoiceMultiple';
+export * from './MobileChipChoiceDate';
+export * from './MobileChipChoiceDateRange';
+export * from './MobileChipChoiceTime';

package/src/components/MobileChipChoice/components/styles.module.scss

@@ -0,0 +1,36 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-fields';
+
+.footer {
+  width: 100%;
+}
+
+.footerTopLine {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 4px;
+}
+
+.counter {
+  color: styles-tokens-fields.$sys-neutral-text-light;
+
+  @include styles-tokens-fields.composite-var(styles-tokens-fields.$sans-body-m);
+}
+
+.bodyNoPadding {
+  /* stylelint-disable-next-line declaration-no-important */
+  padding: 0 !important;
+}
+
+.dateWrapper {
+  height: 384px;
+}
+
+.dateTimeWrapper {
+  height: 458px;
+  padding-bottom: 8px;
+}
+
+.timeWrapper {
+  min-width: 100%;
+}

package/src/components/MobileChipChoice/constants.ts

@@ -0,0 +1,20 @@
+import { BUTTON_SIZE, SIZE } from '../../constants';
+
+export const BUTTON_CLEAR_VALUE_SIZE_MAP = {
+  [SIZE.Xs]: BUTTON_SIZE.Xxs,
+  [SIZE.S]: BUTTON_SIZE.Xs,
+  [SIZE.M]: BUTTON_SIZE.Xs,
+  [SIZE.L]: BUTTON_SIZE.Xs,
+};
+
+export const CHIP_CHOICE_TYPE = {
+  Multiple: 'multiple',
+  Date: 'date',
+  DateTime: 'date-time',
+  DateRange: 'date-range',
+  Single: 'single',
+  Custom: 'custom',
+  Time: 'time',
+} as const;
+
+export const DEFAULT_LOCALE = new Intl.Locale('ru-RU');

package/src/components/MobileChipChoice/hooks.tsx

@@ -0,0 +1,127 @@
+import FuzzySearch from 'fuzzy-search';
+import { KeyboardEvent, KeyboardEventHandler, useCallback, useMemo } from 'react';
+
+import { useLocale } from '@cloud-ru/uikit-product-locale';
+import { ItemId, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+import { ButtonFilled, ButtonFunction } from '@snack-uikit/button';
+
+import { CHIP_CHOICE_TEST_IDS } from '../../constants';
+import styles from './styles.module.scss';
+import { AccordionOption, BaseOption, ContentRenderProps, FilterOption, NestListOption } from './types';
+
+type UseHandleOnKeyDownProps = {
+  setOpen(open: boolean): void;
+};
+
+export function useHandleOnKeyDown({ setOpen }: UseHandleOnKeyDownProps) {
+  return useCallback(
+    (onKeyDown?: KeyboardEventHandler<HTMLElement>) => (e: KeyboardEvent<HTMLDivElement>) => {
+      if (e.code === 'Space') {
+        e.stopPropagation();
+      } else {
+        onKeyDown?.(e);
+      }
+
+      if (['ArrowDown'].includes(e.key)) {
+        e.preventDefault();
+        setOpen(true);
+      }
+
+      if (['ArrowUp'].includes(e.key)) {
+        e.preventDefault();
+        setOpen(false);
+      }
+
+      if (e.key === 'Tab') {
+        setOpen(false);
+      }
+    },
+    [setOpen],
+  );
+}
+
+const DEFAULT_MIN_SEARCH_INPUT_LENGTH = 2;
+
+/**
+ * Нечеткий поиск среди айтемов по полям 'content.option', 'content.caption', 'content.description', 'label'
+ */
+export function useOptionSearch<T extends ContentRenderProps = ContentRenderProps>({
+  options,
+  flatMapOptions,
+  minSearchInputLength,
+  disableFuzzySearch,
+}: {
+  options: FilterOption<T>[];
+  flatMapOptions: (BaseOption<T> | AccordionOption<T> | NestListOption<T>)[];
+  minSearchInputLength?: number;
+  disableFuzzySearch?: boolean;
+}) {
+  return useCallback(
+    (search: string) => {
+      if (search.length < (minSearchInputLength ?? DEFAULT_MIN_SEARCH_INPUT_LENGTH)) return options;
+
+      if (disableFuzzySearch) {
+        return options.filter(option => {
+          const fieldsForSearch = [option.label];
+
+          if ('contentRenderProps' in option) {
+            fieldsForSearch.push(option?.contentRenderProps?.description);
+            fieldsForSearch.push(option?.contentRenderProps?.caption);
+          }
+
+          return fieldsForSearch
+            .filter((v): v is ItemId => Boolean(v))
+            .some(value => value.toString().includes(search));
+        });
+      }
+
+      return new FuzzySearch(
+        flatMapOptions,
+        ['label', 'contentRenderProps.description', 'contentRenderProps.caption'],
+        {},
+      ).search(search);
+    },
+    [disableFuzzySearch, flatMapOptions, minSearchInputLength, options],
+  );
+}
+
+type UseAutoApplyProps = {
+  autoApply: boolean;
+  onApprove(): void;
+  onCancel(): void;
+};
+
+export function useAutoApplyFooter({
+  autoApply,
+  onApprove,
+  onCancel,
+}: UseAutoApplyProps): MobileDroplistProps['footer'] {
+  const { t } = useLocale('Chips');
+
+  return useMemo(() => {
+    if (autoApply) {
+      return null;
+    }
+
+    return (
+      <div className={styles.autoApplyFooter} data-test-id={CHIP_CHOICE_TEST_IDS.footer}>
+        <ButtonFunction
+          fullWidth
+          size='l'
+          appearance='neutral'
+          label={t('cancel')}
+          onClick={onCancel}
+          data-test-id={CHIP_CHOICE_TEST_IDS.cancelButton}
+        />
+        <ButtonFilled
+          size='l'
+          fullWidth
+          appearance='primary'
+          label={t('apply')}
+          onClick={onApprove}
+          data-test-id={CHIP_CHOICE_TEST_IDS.approveButton}
+        />
+      </div>
+    );
+  }, [t, autoApply, onApprove, onCancel]);
+}

package/src/components/MobileChipChoice/index.ts

@@ -0,0 +1,38 @@
+import {
+  CustomContentRenderProps,
+  MobileChipChoiceCustom,
+  MobileChipChoiceCustomProps,
+  MobileChipChoiceDate,
+  MobileChipChoiceDateProps,
+  MobileChipChoiceDateRange,
+  MobileChipChoiceDateRangeProps,
+  MobileChipChoiceMultiple,
+  MobileChipChoiceSingle,
+  MobileChipChoiceTime,
+  MobileChipChoiceTimeProps,
+} from './components';
+
+export type {
+  FilterOption,
+  MobileChipChoiceMultipleProps,
+  MobileChipChoiceSingleProps,
+  ContentRenderProps,
+} from './types';
+export type {
+  MobileChipChoiceCustomProps,
+  MobileChipChoiceDateProps,
+  MobileChipChoiceDateRangeProps,
+  MobileChipChoiceTimeProps,
+  CustomContentRenderProps,
+};
+
+export namespace MobileChipChoice {
+  export const Custom = MobileChipChoiceCustom;
+  export const Single = MobileChipChoiceSingle;
+  export const Multiple = MobileChipChoiceMultiple;
+  export const Date = MobileChipChoiceDate;
+  export const DateRange = MobileChipChoiceDateRange;
+  export const Time = MobileChipChoiceTime;
+}
+
+export { isAccordionOption, isBaseOption, isGroupOption, isGroupSelectOption, isNextListOption } from './utils';

package/src/components/MobileChipChoice/styles.module.scss

@@ -0,0 +1,103 @@
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-chips-chipChoice';
+@use '@sbercloud/figma-tokens-cloud-platform/build/scss/components/styles-tokens-element';
+@use '../../styles.module';
+
+$sizes: 'xs', 's', 'm', 'l';
+
+$labelTypography: (
+  'xs': styles-tokens-element.$light-label-s,
+  's': styles-tokens-element.$light-label-m,
+  'm': styles-tokens-element.$sans-label-l,
+  'l': styles-tokens-element.$light-label-l,
+);
+
+$valueTypography: (
+  'xs': styles-tokens-element.$sans-label-s,
+  's': styles-tokens-element.$sans-label-m,
+  'm': styles-tokens-element.$sans-label-l,
+  'l': styles-tokens-element.$sans-label-l,
+);
+
+.label,
+.value {
+  display: inline-flex;
+  align-items: center;
+}
+
+.choiceChip {
+  background-color: styles-tokens-element.$sys-neutral-background1-level;
+  border-color: styles-tokens-element.$sys-neutral-decor-default;
+
+  @include styles.chip-defaults;
+  @include styles.chip-anatomy-styles(styles-tokens-chips-chipChoice.$chip-choice, $sizes, $labelTypography);
+
+  .label,
+  .value {
+    color: styles-tokens-element.$sys-neutral-text-support;
+  }
+
+  .icon {
+    color: styles-tokens-element.$sys-neutral-text-light;
+  }
+
+  @each $size in $sizes {
+    &[data-size='#{$size}'] {
+      .value {
+        @include styles-tokens-element.composite-var($valueTypography, $size);
+      }
+    }
+  }
+
+  &:hover,
+  &:active,
+  &:focus-visible {
+    background-color: styles-tokens-element.$sys-neutral-background2-level;
+    border-color: styles-tokens-element.$sys-neutral-decor-hovered;
+
+    .label {
+      color: styles-tokens-element.$sys-neutral-text-support;
+    }
+
+    .value {
+      color: styles-tokens-element.$sys-neutral-text-main;
+    }
+  }
+
+  &:focus-visible {
+    @include styles.chip-outline;
+  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    background-color: styles-tokens-element.$sys-neutral-background;
+    border-color: styles-tokens-element.$sys-neutral-decor-disabled;
+
+    .label,
+    .value {
+      color: styles-tokens-element.$sys-neutral-text-light;
+    }
+  }
+
+  &[data-loading] {
+    background-color: styles-tokens-element.$sys-neutral-background;
+    border-color: styles-tokens-element.$sys-neutral-decor-activated;
+
+    @include styles.chip-loading-state(styles-tokens-chips-chipChoice.$chip-choice, true, null, null, true);
+
+    .label,
+    .value {
+      color: styles-tokens-element.$sys-neutral-text-support;
+    }
+  }
+}
+
+.triggerClassName {
+  --offset: #{styles-tokens-element.$space-drop-list-drop-offset};
+}
+
+.autoApplyFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}

package/src/components/MobileChipChoice/types.ts

@@ -0,0 +1,139 @@
+import { MouseEventHandler, ReactNode } from 'react';
+
+import {
+  BaseItemProps,
+  DroplistProps,
+  GroupItemProps,
+  GroupSelectItemProps,
+  ItemContentProps,
+  ItemId,
+  NextListItemProps,
+  SelectionMultipleState,
+  SelectionSingleState,
+} from '@cloud-ru/uikit-product-mobile-dropdown';
+import { TruncateStringProps } from '@snack-uikit/truncate-string';
+import { WithSupportProps } from '@snack-uikit/utils';
+
+import { BaseChipProps, Size } from '../../types';
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export type AnyType = any;
+
+export type ContentRenderProps = Omit<ItemContentProps, 'option' | 'disabled'>;
+
+export type FilterOption<T extends ContentRenderProps = ContentRenderProps> =
+  // eslint-disable-next-line no-use-before-define
+  | BaseOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | AccordionOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | GroupOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | GroupSelectOption<T>
+  // eslint-disable-next-line no-use-before-define
+  | NestListOption<T>;
+
+export type BaseOption<T extends ContentRenderProps = ContentRenderProps> = Omit<BaseItemProps, 'content' | 'id'> & {
+  value: ItemId;
+  label: ItemId;
+  contentRenderProps?: T;
+};
+
+export type AccordionOption<T extends ContentRenderProps = ContentRenderProps> = Omit<
+  BaseOption<T>,
+  'switch' | 'inactive' | 'value'
+> & {
+  id?: ItemId;
+  type: 'collapse';
+  options: FilterOption<T>[];
+};
+
+export type GroupOption<T extends ContentRenderProps = ContentRenderProps> = Omit<GroupItemProps, 'items'> & {
+  options: FilterOption<T>[];
+};
+
+export type GroupSelectOption<T extends ContentRenderProps = ContentRenderProps> = Omit<
+  GroupSelectItemProps,
+  'items'
+> & {
+  options: FilterOption<T>[];
+};
+
+export type NestListOption<T extends ContentRenderProps = ContentRenderProps> = Omit<
+  NextListItemProps,
+  'items' | 'content'
+> & {
+  label: ItemId;
+  contentRenderProps?: T;
+  options: FilterOption<T>[];
+};
+
+export type ChipChoiceCommonProps = WithSupportProps<
+  Partial<BaseChipProps> & {
+    /** Размер */
+    size?: Size;
+    /** Колбек обработки клика */
+    onClick?: MouseEventHandler<HTMLButtonElement | HTMLDivElement>;
+    /** Колбек для клика по кнопке очистки */
+    onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+    /** Управляет состоянием показан/не показан. */
+    open?: boolean;
+    /** Колбек отображения компонента. Срабатывает при изменении состояния open. */
+    onOpenChange?(isOpen: boolean): void;
+    /** Вариант обрезания значения */
+    truncateVariant?: TruncateStringProps['variant'];
+  }
+>;
+
+export type ChipChoiceSelectCommonProps<T extends ContentRenderProps = ContentRenderProps> = ChipChoiceCommonProps & {
+  options: FilterOption<T>[];
+
+  contentRender?(option: { label: ItemId; value?: ItemId; contentRenderProps?: T }): ReactNode;
+  filterFn?(option: { label: ItemId; value?: ItemId; contentRenderProps?: T }): boolean;
+
+  searchable?: boolean;
+  /**
+   * Отключает Fuzzy Search. Иногда в дроплисте могут быть различные айдишники - нам важно искать их без Fuzzy Search
+   * @default false
+   */
+  disableFuzzySearch?: boolean;
+
+  /** Флаг, отвечающий за применение выбранного значения по умолчанию  */
+  autoApply?: boolean;
+  /** Колбек основной кнопки */
+  onApprove?(): void;
+  /** Колбек кнопки отмены */
+  onCancel?(): void;
+} & Pick<
+    DroplistProps,
+    | 'selection'
+    | 'scrollRef'
+    | 'scrollContainerRef'
+    | 'noDataState'
+    | 'footer'
+    | 'footerActiveElementsRefs'
+    | 'dataError'
+    | 'errorDataState'
+    | 'dataFiltered'
+    | 'noResultsState'
+    | 'loading'
+    | 'virtualized'
+  >;
+
+export type MobileChipChoiceSingleProps<T extends ContentRenderProps = ContentRenderProps> =
+  ChipChoiceSelectCommonProps<T> &
+    Omit<SelectionSingleState, 'mode'> & {
+      /** Массив опций */
+      options: FilterOption<T>[];
+      /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+      valueRender?(option?: BaseOption<T>): ReactNode;
+    };
+
+export type MobileChipChoiceMultipleProps<T extends ContentRenderProps = ContentRenderProps> =
+  ChipChoiceSelectCommonProps<T> &
+    Omit<SelectionMultipleState, 'mode'> & {
+      /** Массив опций */
+      options: FilterOption<T>[];
+      /** Колбек формирующий отображение выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+      valueRender?(option?: BaseOption<T>[]): ReactNode;
+    };

package/src/components/MobileChipChoice/utils/index.ts

@@ -0,0 +1,3 @@
+export * from './typeGuards';
+
+export * from './utils';

package/src/components/MobileChipChoice/utils/options.tsx

@@ -0,0 +1,61 @@
+import { ReactNode } from 'react';
+
+import { ItemId, MobileDroplistProps } from '@cloud-ru/uikit-product-mobile-dropdown';
+
+import { ItemContent } from '../../../helperComponents';
+import { BaseOption, ContentRenderProps, FilterOption } from '../types';
+import { isAccordionOption, isGroupOption, isGroupSelectOption, isNextListOption } from './typeGuards';
+
+export function transformOptionsToItems<T extends ContentRenderProps = ContentRenderProps>(
+  options: FilterOption<T>[],
+  contentRender?: (option: { label: ItemId; value?: ItemId; contentRenderProps?: T; disabled?: boolean }) => ReactNode,
+): MobileDroplistProps['items'] {
+  return options.map(option => {
+    if (isAccordionOption<T>(option) || isNextListOption<T>(option)) {
+      const { label, options, id, contentRenderProps, disabled, ...rest } = option;
+
+      return {
+        ...rest,
+        disabled,
+        id,
+        content: contentRender ? (
+          contentRender({ label, contentRenderProps, disabled })
+        ) : (
+          <ItemContent option={label} {...contentRenderProps} disabled={disabled} />
+        ),
+        items: transformOptionsToItems<T>(options),
+      };
+    }
+
+    if (isGroupSelectOption<T>(option)) {
+      const { options, ...rest } = option;
+
+      return {
+        ...rest,
+        items: transformOptionsToItems<T>(options),
+      };
+    }
+
+    if (isGroupOption(option)) {
+      const { options, ...rest } = option;
+
+      return {
+        ...rest,
+        items: transformOptionsToItems(options),
+      };
+    }
+
+    const { label, value, contentRenderProps, disabled, ...rest } = option as BaseOption<T>;
+
+    return {
+      ...rest,
+      disabled,
+      id: value,
+      content: contentRender ? (
+        contentRender({ label, contentRenderProps, disabled, value })
+      ) : (
+        <ItemContent option={label} {...contentRenderProps} disabled={disabled} />
+      ),
+    };
+  });
+}

package/src/components/MobileChipChoice/utils/typeGuards.ts

@@ -0,0 +1,35 @@
+import {
+  AccordionOption,
+  AnyType,
+  BaseOption,
+  ContentRenderProps,
+  GroupOption,
+  GroupSelectOption,
+  NestListOption,
+} from '../types';
+
+export function isBaseOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is BaseOption<T> {
+  return !('options' in option);
+}
+export function isAccordionOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is AccordionOption<T> {
+  return option && 'options' in option && option['type'] === 'collapse';
+}
+export function isNextListOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is NestListOption<T> {
+  return option && 'options' in option && option['type'] === 'next-list';
+}
+export function isGroupOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is GroupOption<T> {
+  return option && 'options' in option && option['type'] === 'group';
+}
+export function isGroupSelectOption<T extends ContentRenderProps = ContentRenderProps>(
+  option: AnyType,
+): option is GroupSelectOption<T> {
+  return option && 'options' in option && option['type'] === 'group-select';
+}