@snack-uikit/chips 0.8.5-preview-85c5f47b.0

package/src/components/ChipChoice/components/ChipChoiceCustom/ChipChoiceCustom.tsx

@@ -0,0 +1,188 @@
+import cn from 'classnames';
+import { KeyboardEventHandler, MouseEventHandler, ReactNode, useCallback, useRef, useState } from 'react';
+
+import { Droplist } from '@snack-uikit/droplist';
+import { Sun } from '@snack-uikit/loaders';
+import { extractSupportProps } from '@snack-uikit/utils';
+
+import { CHIP_CHOICE_TEST_IDS, Size, Variant } from '../../../../constants';
+import { ButtonClearValue } from '../../../../helperComponents';
+import { BUTTON_CLEAR_VALUE_SIZE_MAP, DROPLIST_SIZE_MAP } from '../../constants';
+import { ChipChoiceCommonProps } from '../../types';
+import styles from './styles.module.scss';
+
+export type ChipChoiceCustomProps = ChipChoiceCommonProps & {
+  /** Отображаемое значение */
+  valueToRender?: ReactNode;
+  /** Фактическое значение. Используется для отображения кнопки очистки, если свойство <strong>showClearButton=true</strong> */
+  value?: string | Date | string[] | [Date, Date];
+  /** Колбек для клика по кнопке очистки */
+  onClearButtonClick?: MouseEventHandler<HTMLButtonElement>;
+  /** Контент выпадающего меню
+   <br>
+   <br> Принимает <strong>ReactNode</strong>
+   <br> Или функцию с аргументами:
+   <br> <strong>handleDroplistItemKeyDown</strong>: Обработчик нажатия клавиши на элемент выпадающего меню
+   <br> <strong>closeDroplist</strong>: Метод для закрытия выпадающего меню
+   */
+  children?:
+    | ReactNode
+    | ((props: {
+        handleDroplistItemKeyDown: ReturnType<typeof Droplist.useKeyboardNavigation>['handleDroplistItemKeyDown'];
+        closeDroplist(): void;
+      }) => ReactNode);
+};
+
+export function ChipChoiceCustom({
+  size = Size.S,
+  disabled,
+  loading,
+  icon,
+  label,
+  valueToRender,
+  value,
+  onClick,
+  className,
+  tabIndex = 0,
+  placement = Droplist.placements.BottomStart,
+  widthStrategy = Droplist.widthStrategies.Gte,
+  onClearButtonClick,
+  showClearButton: showClearButtonProp = true,
+  children,
+  'data-test-id': testId,
+  ...rest
+}: ChipChoiceCustomProps) {
+  const variant = icon && size !== Size.Xs ? Variant.IconBefore : Variant.LabelOnly;
+  const spinnerSize = size === Size.Xs ? Sun.sizes.XS : Sun.sizes.S;
+
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
+
+  const [isDroplistOpened, setIsDroplistOpened] = useState(false);
+
+  const {
+    firstElementRefCallback,
+    triggerElementRef,
+    handleDroplistFocusLeave,
+    handleTriggerKeyDown,
+    handleDroplistItemKeyDown,
+  } = Droplist.useKeyboardNavigation<HTMLDivElement>({
+    setDroplistOpen: setIsDroplistOpened,
+  });
+
+  const handleChipClick: MouseEventHandler<HTMLDivElement> = e => {
+    if (loading || disabled) return;
+
+    onClick?.(e);
+
+    !isDroplistOpened && setIsDroplistOpened(true);
+  };
+
+  const handleChipKeyDown: KeyboardEventHandler<HTMLDivElement> = e => {
+    if (e.key === 'ArrowRight') {
+      clearButtonRef.current?.focus();
+    }
+
+    handleTriggerKeyDown(e);
+  };
+
+  const onOpenChangeHandler = (opened: boolean) => !opened && setIsDroplistOpened(false);
+
+  const closeDroplist = useCallback(() => {
+    setIsDroplistOpened(false);
+
+    // TODO: same bug as in FieldDate
+    setTimeout(() => {
+      triggerElementRef.current?.focus();
+    }, 0);
+  }, [triggerElementRef]);
+
+  const handleClearButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
+    onClearButtonClick?.(e);
+    closeDroplist();
+  };
+
+  const handleClearButtonKeyDown: KeyboardEventHandler<HTMLButtonElement> = e => {
+    switch (e.key) {
+      case 'ArrowLeft': {
+        triggerElementRef.current?.focus();
+        return;
+      }
+      case 'Enter':
+      case ' ': {
+        e.stopPropagation();
+        return;
+      }
+      default:
+        break;
+    }
+  };
+
+  const showClearButton = showClearButtonProp && (value instanceof Date || Boolean(value?.length));
+
+  return (
+    <Droplist
+      trigger={Droplist.triggers.Click}
+      open={isDroplistOpened}
+      firstElementRefCallback={firstElementRefCallback}
+      onOpenChange={onOpenChangeHandler}
+      onFocusLeave={handleDroplistFocusLeave}
+      triggerClassName={styles.triggerClassName}
+      widthStrategy={widthStrategy}
+      placement={placement}
+      size={DROPLIST_SIZE_MAP[size]}
+      data-test-id={CHIP_CHOICE_TEST_IDS.droplist}
+      triggerElement={
+        <div
+          {...extractSupportProps(rest)}
+          role='button'
+          ref={triggerElementRef}
+          className={cn(styles.choiceChip, className)}
+          data-size={size}
+          data-variant={variant}
+          data-loading={loading || undefined}
+          data-test-id={testId || undefined}
+          data-disabled={(!loading && disabled) || undefined}
+          onClick={handleChipClick}
+          onKeyDown={handleChipKeyDown}
+          tabIndex={tabIndex}
+        >
+          {variant === Variant.IconBefore && (
+            <span className={styles.icon} data-test-id={CHIP_CHOICE_TEST_IDS.icon}>
+              {icon}
+            </span>
+          )}
+
+          <span className={styles.labelLayout}>
+            {label && (
+              <span className={styles.label} data-test-id={CHIP_CHOICE_TEST_IDS.label}>
+                {label}
+              </span>
+            )}
+
+            {loading ? (
+              <span className={styles.spinner} data-test-id={CHIP_CHOICE_TEST_IDS.spinner}>
+                <Sun size={spinnerSize} />
+              </span>
+            ) : (
+              <span className={styles.value} data-test-id={CHIP_CHOICE_TEST_IDS.value}>
+                {valueToRender}
+              </span>
+            )}
+          </span>
+
+          {!disabled && !loading && showClearButton && (
+            <ButtonClearValue
+              size={BUTTON_CLEAR_VALUE_SIZE_MAP[size]}
+              onClick={handleClearButtonClick}
+              data-test-id={CHIP_CHOICE_TEST_IDS.clearButton}
+              onKeyDown={handleClearButtonKeyDown}
+              ref={clearButtonRef}
+            />
+          )}
+        </div>
+      }
+    >
+      {typeof children === 'function' ? children({ handleDroplistItemKeyDown, closeDroplist }) : children}
+    </Droplist>
+  );
+}

package/src/components/ChipChoice/components/ChipChoiceCustom/index.ts

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

package/src/components/ChipChoice/components/ChipChoiceCustom/styles.module.scss

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

package/src/components/ChipChoice/components/ChipChoiceDate.tsx

@@ -0,0 +1,60 @@
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Calendar } from '@snack-uikit/calendar';
+
+import { DEFAULT_EMPTY_VALUE, Size } from '../../../constants';
+import { CALENDAR_SIZE_MAP } from '../constants';
+import { ChipChoiceCommonProps } from '../types';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+
+export type ChipChoiceDateProps = ChipChoiceCommonProps & {
+  /** Значение компонента */
+  value?: Date;
+  /** Значение компонента по-умолчанию */
+  defaultValue?: Date;
+  /** Колбек смены значения */
+  onChange?(value: Date): void;
+  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение */
+  valueFormatter?(value?: Date): string;
+};
+
+export function ChipChoiceDate({
+  size = Size.S,
+  value,
+  defaultValue,
+  onChange,
+  valueFormatter,
+  ...rest
+}: ChipChoiceDateProps) {
+  const [selectedValue, setSelectedValue] = useUncontrolledProp<Date>(value, defaultValue, onChange);
+
+  const valueToRender = valueFormatter
+    ? valueFormatter(selectedValue)
+    : (selectedValue && new Date(selectedValue).toLocaleDateString()) || DEFAULT_EMPTY_VALUE;
+
+  const clearValue = () => setSelectedValue(undefined);
+
+  return (
+    <ChipChoiceCustom
+      onClearButtonClick={clearValue}
+      value={selectedValue}
+      valueToRender={valueToRender}
+      size={size}
+      {...rest}
+    >
+      {({ closeDroplist }) => (
+        <Calendar
+          mode={Calendar.modes.Date}
+          size={CALENDAR_SIZE_MAP[size]}
+          value={selectedValue}
+          onChangeValue={value => {
+            setSelectedValue(value);
+            closeDroplist();
+          }}
+          navigationStartRef={element => element?.focus()}
+          onFocusLeave={closeDroplist}
+        />
+      )}
+    </ChipChoiceCustom>
+  );
+}

package/src/components/ChipChoice/components/ChipChoiceDateRange.tsx

@@ -0,0 +1,69 @@
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Calendar } from '@snack-uikit/calendar';
+
+import { DEFAULT_EMPTY_VALUE, Size } from '../../../constants';
+import { CALENDAR_SIZE_MAP } from '../constants';
+import { ChipChoiceCommonProps } from '../types';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+
+type Range = [Date, Date];
+
+export type ChipChoiceDateRangeProps = ChipChoiceCommonProps & {
+  /** Значение компонента */
+  value?: Range;
+  /** Значение компонента по умолчанию */
+  defaultValue?: Range;
+  /** Колбек смены значения */
+  onChange?(value: Range): void;
+  /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений */
+  valueFormatter?(value?: Range): string;
+};
+
+function defaultRangeFormatter(value?: Range) {
+  if (!value || !value.length) return DEFAULT_EMPTY_VALUE;
+
+  const [from, to] = value;
+
+  return `${from.toLocaleDateString()} ${DEFAULT_EMPTY_VALUE} ${to.toLocaleDateString()}`;
+}
+
+export function ChipChoiceDateRange({
+  size = Size.S,
+  value,
+  defaultValue,
+  onChange,
+  valueFormatter,
+  ...rest
+}: ChipChoiceDateRangeProps) {
+  const [selectedValue, setSelectedValue] = useUncontrolledProp<Range>(value, defaultValue, onChange);
+
+  const valueToRender = valueFormatter ? valueFormatter(selectedValue) : defaultRangeFormatter(selectedValue);
+
+  const clearValue = () => setSelectedValue(undefined);
+
+  return (
+    <ChipChoiceCustom
+      value={selectedValue}
+      valueToRender={valueToRender}
+      onClearButtonClick={clearValue}
+      size={size}
+      {...rest}
+    >
+      {({ closeDroplist }) => (
+        <Calendar
+          mode={Calendar.modes.Range}
+          size={CALENDAR_SIZE_MAP[size]}
+          value={selectedValue}
+          onChangeValue={range => {
+            setSelectedValue(range);
+            closeDroplist();
+          }}
+          // bug with focus
+          // navigationStartRef={element => element?.focus()}
+          onFocusLeave={closeDroplist}
+        />
+      )}
+    </ChipChoiceCustom>
+  );
+}

package/src/components/ChipChoice/components/ChipChoiceMulti.tsx

@@ -0,0 +1,87 @@
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Droplist } from '@snack-uikit/droplist';
+
+import { Size } from '../../../constants';
+import { ChipChoiceCommonProps, FilterOption } from '../types';
+import { defaultMultiValueLabelFormatter, normalizeValueForMultiChoice } from '../utils';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+
+export type ChipChoiceMultiProps = ChipChoiceCommonProps & {
+  /** Массив опций */
+  options: FilterOption[];
+  /** Значение компонента */
+  value?: string[];
+  /** Значение компонента по умолчанию */
+  defaultValue?: string[];
+  /** Колбек смены значения */
+  onChange?(value: string[]): void;
+  /** Колбек формирующий строковое представление выбранного значения. Принимает массив выбранных значений. По умолчанию для отображения используется кол-во выбранных значений. */
+  valueFormatter?(options: FilterOption[]): string;
+};
+
+export function ChipChoiceMulti({
+  value,
+  defaultValue,
+  options,
+  onChange,
+  valueFormatter,
+  size = Size.S,
+  'data-test-id': dataTestId,
+  ...rest
+}: ChipChoiceMultiProps) {
+  const [selectedValue, setSelectedValue] = useUncontrolledProp<string[]>(
+    normalizeValueForMultiChoice(options, value),
+    normalizeValueForMultiChoice(options, defaultValue) || [],
+    onChange,
+  );
+
+  const selectedOptions = useMemo(
+    () => options.filter(({ value }) => selectedValue?.includes(value)),
+    [options, selectedValue],
+  );
+
+  const valueToRender = valueFormatter
+    ? valueFormatter(selectedOptions)
+    : defaultMultiValueLabelFormatter(selectedOptions, options.length);
+
+  const clearValue = () => setSelectedValue([]);
+
+  return (
+    <ChipChoiceCustom
+      size={size}
+      onClearButtonClick={clearValue}
+      valueToRender={valueToRender}
+      value={selectedValue}
+      data-test-id={dataTestId}
+      {...rest}
+    >
+      {({ handleDroplistItemKeyDown }) =>
+        options.map(({ label, value, ...rest }) => {
+          const selected = selectedValue || [];
+          const checked = selected.includes(value);
+          const onChangeHandler = () => {
+            if (checked) {
+              setSelectedValue(selected.filter(selected => selected !== value));
+            } else {
+              setSelectedValue([...selected, value]);
+            }
+          };
+
+          return (
+            <Droplist.ItemMultiple
+              {...rest}
+              key={value}
+              option={label}
+              checked={checked}
+              onChange={onChangeHandler}
+              onKeyDown={handleDroplistItemKeyDown}
+              data-test-id={dataTestId && `${dataTestId}__option`}
+            />
+          );
+        })
+      }
+    </ChipChoiceCustom>
+  );
+}

package/src/components/ChipChoice/components/ChipChoiceSingle.tsx

@@ -0,0 +1,77 @@
+import { useMemo } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { Droplist } from '@snack-uikit/droplist';
+
+import { DEFAULT_EMPTY_VALUE, Size } from '../../../constants';
+import { ChipChoiceCommonProps, FilterOption } from '../types';
+import { normalizeValueForSingleChoice } from '../utils';
+import { ChipChoiceCustom } from './ChipChoiceCustom';
+
+export type ChipChoiceSingleProps = ChipChoiceCommonProps & {
+  /** Массив опций */
+  options: FilterOption[];
+  /** Значение компонента */
+  value?: string;
+  /** Значение компонента по умолчанию */
+  defaultValue?: string;
+  /** Колбек смены значения */
+  onChange?(value: string): void;
+  /** Колбек формирующий строковое представление выбранного значения. Принимает выбранное значение. По умолчанию для отображения используется FilterOption.label */
+  valueFormatter?(option?: FilterOption): string;
+};
+
+export function ChipChoiceSingle({
+  value,
+  defaultValue,
+  options,
+  onChange,
+  valueFormatter,
+  size = Size.S,
+  'data-test-id': dataTestId,
+  ...rest
+}: ChipChoiceSingleProps) {
+  const [selectedValue, setSelectedValue] = useUncontrolledProp<string>(
+    normalizeValueForSingleChoice(options, value),
+    normalizeValueForSingleChoice(options, defaultValue),
+    onChange,
+  );
+
+  const selectedOption = useMemo(() => options.find(({ value }) => value === selectedValue), [options, selectedValue]);
+
+  const valueToRender = valueFormatter ? valueFormatter(selectedOption) : selectedOption?.label || DEFAULT_EMPTY_VALUE;
+
+  const clearValue = () => setSelectedValue(undefined);
+
+  return (
+    <ChipChoiceCustom
+      onClearButtonClick={clearValue}
+      value={selectedValue}
+      valueToRender={valueToRender}
+      data-test-id={dataTestId}
+      size={size}
+      {...rest}
+    >
+      {({ handleDroplistItemKeyDown, closeDroplist }) =>
+        options.map(({ label, value, ...rest }) => {
+          const onChangeHandler = () => {
+            setSelectedValue(value);
+            closeDroplist();
+          };
+
+          return (
+            <Droplist.ItemSingle
+              {...rest}
+              key={value}
+              option={label}
+              checked={selectedValue === value}
+              onChange={onChangeHandler}
+              onKeyDown={handleDroplistItemKeyDown}
+              data-test-id={dataTestId && `${dataTestId}__option`}
+            />
+          );
+        })
+      }
+    </ChipChoiceCustom>
+  );
+}

package/src/components/ChipChoice/components/index.ts

@@ -0,0 +1,5 @@
+export * from './ChipChoiceCustom';
+export * from './ChipChoiceSingle';
+export * from './ChipChoiceMulti';
+export * from './ChipChoiceDate';
+export * from './ChipChoiceDateRange';

package/src/components/ChipChoice/constants.ts

@@ -0,0 +1,32 @@
+import { Calendar } from '@snack-uikit/calendar';
+import { Droplist } from '@snack-uikit/droplist';
+
+import { ButtonSize, Size } from '../../constants';
+
+export const BUTTON_CLEAR_VALUE_SIZE_MAP = {
+  [Size.Xs]: ButtonSize.Xxs,
+  [Size.S]: ButtonSize.Xs,
+  [Size.M]: ButtonSize.Xs,
+  [Size.L]: ButtonSize.Xs,
+};
+
+export const CALENDAR_SIZE_MAP = {
+  [Size.Xs]: Calendar.sizes.S,
+  [Size.S]: Calendar.sizes.S,
+  [Size.M]: Calendar.sizes.M,
+  [Size.L]: Calendar.sizes.M,
+};
+
+export const DROPLIST_SIZE_MAP = {
+  [Size.Xs]: Droplist.sizes.S,
+  [Size.S]: Droplist.sizes.S,
+  [Size.M]: Droplist.sizes.M,
+  [Size.L]: Droplist.sizes.L,
+};
+
+export enum ChipChoiceType {
+  Multi = 'multi',
+  Date = 'date',
+  DateRange = 'date-range',
+  Single = 'single',
+}

package/src/components/ChipChoice/index.ts

@@ -0,0 +1,39 @@
+import { Droplist } from '@snack-uikit/droplist';
+
+import { Size, Variant } from '../../constants';
+import {
+  ChipChoiceCustom,
+  ChipChoiceCustomProps,
+  ChipChoiceDate,
+  ChipChoiceDateProps,
+  ChipChoiceDateRange,
+  ChipChoiceDateRangeProps,
+  ChipChoiceMulti,
+  ChipChoiceMultiProps,
+  ChipChoiceSingle,
+  ChipChoiceSingleProps,
+} from './components';
+import { ChipChoiceType } from './constants';
+
+export type { FilterOption } from './types';
+
+export type {
+  ChipChoiceCustomProps,
+  ChipChoiceMultiProps,
+  ChipChoiceSingleProps,
+  ChipChoiceDateProps,
+  ChipChoiceDateRangeProps,
+};
+
+export namespace ChipChoice {
+  export const Custom = ChipChoiceCustom;
+  export const Single = ChipChoiceSingle;
+  export const Multi = ChipChoiceMulti;
+  export const Date = ChipChoiceDate;
+  export const DateRange = ChipChoiceDateRange;
+  export const sizes = Size;
+  export const variants = Variant;
+  export const placements = Droplist.placements;
+  export const widthStrategies = Droplist.widthStrategies;
+  export const types = ChipChoiceType;
+}