@vkontakte/vkui 5.8.2 → 5.9.1

package/src/components/Button/Button.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { classNames, hasReactNode } from '@vkontakte/vkjs';
+import { useAdaptivity } from '../../hooks/useAdaptivity';
+import { usePlatform } from '../../hooks/usePlatform';
+import { SizeType } from '../../lib/adaptivity';
+import { Platform } from '../../lib/platform';
+import { HasAlign } from '../../types';
+import { Spinner } from '../Spinner/Spinner';
+import { Tappable, TappableProps } from '../Tappable/Tappable';
+import '../Spinner/Spinner.module.css';
+import styles from './Button.module.css';
+
+const stylesSize = {
+  s: styles['Button--size-s'],
+  m: styles['Button--size-m'],
+  l: styles['Button--size-l'],
+};
+
+const stylesMode = {
+  primary: styles['Button--mode-primary'],
+  secondary: styles['Button--mode-secondary'],
+  tertiary: styles['Button--mode-tertiary'],
+  outline: styles['Button--mode-outline'],
+  link: styles['Button--mode-link'],
+};
+
+const stylesAppearance = {
+  'accent': styles['Button--appearance-accent'],
+  'positive': styles['Button--appearance-positive'],
+  'negative': styles['Button--appearance-negative'],
+  'neutral': styles['Button--appearance-neutral'],
+  'overlay': styles['Button--appearance-overlay'],
+  'accent-invariable': styles['Button--appearance-accent-invariable'],
+};
+
+const stylesAlign = {
+  left: styles['Button--align-left'],
+  center: styles['Button--align-center'],
+  right: styles['Button--align-right'],
+};
+
+const sizeYClassNames = {
+  none: styles['Button--sizeY-none'],
+  [SizeType.REGULAR]: styles['Button--sizeY-regular'],
+};
+
+export interface VKUIButtonProps extends HasAlign {
+  mode?: 'primary' | 'secondary' | 'tertiary' | 'outline' | 'link';
+  appearance?: 'accent' | 'positive' | 'negative' | 'neutral' | 'overlay' | 'accent-invariable';
+  size?: 's' | 'm' | 'l';
+  stretched?: boolean;
+  before?: React.ReactNode;
+  after?: React.ReactNode;
+  loading?: boolean;
+  disableSpinnerAnimation?: boolean;
+  rounded?: boolean;
+}
+
+export interface ButtonProps extends Omit<TappableProps, 'size'>, VKUIButtonProps {}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Button
+ */
+export const Button = ({
+  size = 's',
+  mode = 'primary',
+  appearance = 'accent',
+  stretched = false,
+  align = 'center',
+  children,
+  before,
+  after,
+  getRootRef,
+  loading,
+  onClick,
+  stopPropagation = true,
+  className,
+  disableSpinnerAnimation,
+  rounded,
+  ...restProps
+}: ButtonProps) => {
+  const hasIcons = Boolean(before || after);
+  const hasIconOnly = !children && Boolean(after) !== Boolean(before);
+  const { sizeY = 'none' } = useAdaptivity();
+  const platform = usePlatform();
+
+  return (
+    <Tappable
+      hoverMode={styles['Button--hover']}
+      activeMode={styles['Button--active']}
+      Component={restProps.href ? 'a' : 'button'}
+      focusVisibleMode="outside"
+      {...restProps}
+      onClick={loading ? undefined : onClick}
+      stopPropagation={stopPropagation}
+      className={classNames(
+        className,
+        styles.Button,
+        stylesSize[size],
+        stylesMode[mode],
+        stylesAppearance[appearance],
+        stylesAlign[align],
+        sizeY !== SizeType.COMPACT && sizeYClassNames[sizeY],
+        platform === Platform.IOS && styles['Button--ios'],
+        stretched && styles['Button--stretched'],
+        hasIcons && styles['Button--with-icon'],
+        hasIconOnly && !stretched && styles['Button--singleIcon'],
+        loading && styles['Button--loading'],
+        rounded && styles['Button--rounded'],
+      )}
+      getRootRef={getRootRef}
+    >
+      {loading && (
+        <Spinner
+          size="small"
+          className={styles.Button__spinner}
+          disableAnimation={disableSpinnerAnimation}
+        />
+      )}
+      <span className={styles.Button__in}>
+        {hasReactNode(before) && (
+          <span
+            className={styles.Button__before}
+            role="presentation"
+            data-testid={process.env.NODE_ENV === 'test' ? 'before' : undefined}
+          >
+            {before}
+          </span>
+        )}
+        {hasReactNode(children) && (
+          <span
+            className={styles.Button__content}
+            data-testid={process.env.NODE_ENV === 'test' ? 'children' : undefined}
+          >
+            {children}
+          </span>
+        )}
+        {hasReactNode(after) && (
+          <span
+            className={styles.Button__after}
+            role="presentation"
+            data-testid={process.env.NODE_ENV === 'test' ? 'after' : undefined}
+          >
+            {after}
+          </span>
+        )}
+      </span>
+    </Tappable>
+  );
+};

package/src/components/ButtonGroup/ButtonGroup.module.css

@@ -0,0 +1,89 @@
+.ButtonGroup {
+  display: inline-flex;
+  max-width: 100%; /* [Примечание 2] Чтобы блок не выходил за границы контейнера (связано с [Примечание 4]) */
+}
+
+.ButtonGroup--stretched {
+  display: flex;
+  width: 100%;
+}
+
+.ButtonGroup--mode-vertical {
+  flex-direction: column;
+}
+
+.ButtonGroup--mode-horizontal {
+  flex-direction: row;
+  /* чтобы блоки не растягивались на всю высоту контейнера */
+  align-items: flex-start;
+}
+
+/* stylelint-disable @project-tools/stylelint-atomic, selector-max-universal */
+
+/**
+ * [Примечание 3] Чтобы не завязываться на класс компонента, используем каскад и универсальный селектор.
+ */
+
+/* "gap" для mode="vertical" */
+.ButtonGroup--mode-vertical.ButtonGroup--gap-space > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-s > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--gap-m > *:not(:first-child) {
+  margin-top: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* "gap" для mode="horizontal" */
+.ButtonGroup--mode-horizontal > *:not(.ButtonGroup) {
+  /**
+   * [Примечание 4]
+   *
+   * `min-width` в контексте Flexbox по умолчанию имеет значение `auto`,
+   * из-за чего элементы при переполнении будут выходить за границы контейнера.
+   *
+   * Подробности по ссылке https://stackoverflow.com/a/66689926/2903061
+   */
+  min-width: 0;
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-space > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_space--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-s > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_small--regular);
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--gap-m > *:not(:last-child) {
+  margin-right: var(--vkui--size_button_group_gap_medium--regular);
+}
+
+/* stylelint-enable @project-tools/stylelint-atomic, selector-max-universal */
+
+.ButtonGroup--mode-vertical.ButtonGroup--align-left {
+  align-items: flex-start;
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--align-center {
+  align-items: center;
+}
+
+.ButtonGroup--mode-vertical.ButtonGroup--align-right {
+  align-items: flex-end;
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--align-left {
+  justify-content: flex-start;
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--align-center {
+  justify-content: center;
+}
+
+.ButtonGroup--mode-horizontal.ButtonGroup--align-right {
+  justify-content: flex-end;
+}

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import type { AlignType, HTMLAttributesWithRootRef } from '../../types';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './ButtonGroup.module.css';
+
+const stylesMode = {
+  vertical: styles['ButtonGroup--mode-vertical'],
+  horizontal: styles['ButtonGroup--mode-horizontal'],
+};
+
+const stylesGap = {
+  space: styles['ButtonGroup--gap-space'],
+  s: styles['ButtonGroup--gap-s'],
+  m: styles['ButtonGroup--gap-m'],
+};
+
+const stylesAlign = {
+  left: styles['ButtonGroup--align-left'],
+  center: styles['ButtonGroup--align-center'],
+  right: styles['ButtonGroup--align-right'],
+};
+
+export interface ButtonGroupProps extends HTMLAttributesWithRootRef<HTMLDivElement> {
+  /**
+   * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
+   */
+  mode?: 'vertical' | 'horizontal';
+  /**
+   * Выставляет в зависимости от `mode` отступ по вертикали или горизонтали.
+   */
+  gap?: 'none' | 'space' | 's' | 'm';
+  /**
+   * Растягивает компонент на всю ширину контейнера.
+   *
+   * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
+   */
+  stretched?: boolean;
+  /**
+   * Горизонтальное выравнивание элементов внутри группы.
+   */
+  align?: AlignType;
+}
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/ButtonGroup
+ */
+export const ButtonGroup = ({
+  mode = 'horizontal',
+  gap = 'm',
+  stretched = false,
+  align = 'left' /* NOTE: Чтобы блоки по-умолчанию не растягивались на всю ширину контейнера */,
+  ...restProps
+}: ButtonGroupProps) => {
+  return (
+    <RootComponent
+      baseClassName={classNames(
+        styles.ButtonGroup,
+        stylesMode[mode],
+        gap !== 'none' && stylesGap[gap],
+        stretched && styles['ButtonGroup--stretched'],
+        stylesAlign[align],
+      )}
+      role="group"
+      {...restProps}
+    />
+  );
+};

package/src/components/Calendar/Calendar.module.css

@@ -0,0 +1,30 @@
+.Calendar {
+  display: flex;
+  flex-direction: column;
+  background: var(--vkui--color_background_modal);
+  border: 0.5px solid var(--vkui--color_separator_primary);
+  box-sizing: border-box;
+  box-shadow: var(--vkui--elevation1);
+  border-radius: 8px;
+  width: 305px;
+  padding: 12px;
+}
+
+.Calendar__time {
+  border-top: 1px solid var(--vkui--color_separator_primary);
+  margin: 12px -12px 0;
+  padding: 12px 12px 0;
+}
+
+.Calendar__header {
+  margin-bottom: 4px;
+}
+
+.Calendar--size-s {
+  width: 220px;
+  padding: 8px;
+}
+
+.Calendar--size-s .Calendar__header {
+  margin-bottom: 0;
+}

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,209 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { useCalendar } from '../../hooks/useCalendar';
+import { isFirstDay, isLastDay, navigateDate, setTimeEqual } from '../../lib/calendar';
+import { isSameDay, isSameMonth } from '../../lib/date';
+import { useIsomorphicLayoutEffect } from '../../lib/useIsomorphicLayoutEffect';
+import { warnOnce } from '../../lib/warnOnce';
+import { HTMLAttributesWithRootRef } from '../../types';
+import { CalendarDays, CalendarDaysProps } from '../CalendarDays/CalendarDays';
+import { CalendarHeader, CalendarHeaderProps } from '../CalendarHeader/CalendarHeader';
+import { CalendarTime, CalendarTimeProps } from '../CalendarTime/CalendarTime';
+import { RootComponent } from '../RootComponent/RootComponent';
+import styles from './Calendar.module.css';
+
+export interface CalendarProps
+  extends Omit<HTMLAttributesWithRootRef<HTMLDivElement>, 'onChange'>,
+    Pick<CalendarTimeProps, 'changeHoursAriaLabel' | 'changeMinutesAriaLabel'>,
+    Pick<
+      CalendarHeaderProps,
+      | 'prevMonthAriaLabel'
+      | 'nextMonthAriaLabel'
+      | 'changeMonthAriaLabel'
+      | 'changeYearAriaLabel'
+      | 'onNextMonth'
+      | 'onPrevMonth'
+      | 'prevMonthIcon'
+      | 'nextMonthIcon'
+      | 'prevMonthProps'
+      | 'nextMonthProps'
+    >,
+    Pick<CalendarDaysProps, 'dayProps' | 'listenDayChangesForUpdate'> {
+  value?: Date;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  enableTime?: boolean;
+  disablePickers?: boolean;
+  doneButtonText?: string;
+  changeDayAriaLabel?: string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  showNeighboringMonth?: boolean;
+  size?: 's' | 'm';
+  onChange?(value?: Date): void;
+  shouldDisableDate?(value: Date): boolean;
+  onClose?(): void;
+  /**
+   * Дата отображаемого месяца.
+   * При использовании обновление даты должно происходить вне компонента.
+   */
+  viewDate?: Date;
+  /**
+   * Изменение даты в шапке календаря.
+   */
+  onHeaderChange?(value: Date): void;
+}
+
+const warn = warnOnce('Calendar');
+
+/**
+ * @see https://vkcom.github.io/VKUI/#/Calendar
+ */
+export const Calendar = ({
+  value,
+  onChange,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+  onClose,
+  enableTime = false,
+  doneButtonText,
+  weekStartsOn = 1,
+  disablePickers,
+  changeHoursAriaLabel,
+  changeMinutesAriaLabel,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  changeMonthAriaLabel,
+  changeYearAriaLabel,
+  showNeighboringMonth,
+  changeDayAriaLabel = 'Изменить день',
+  size = 'm',
+  viewDate: externalViewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
+  prevMonthIcon,
+  nextMonthIcon,
+  prevMonthProps,
+  nextMonthProps,
+  dayProps,
+  listenDayChangesForUpdate,
+  ...props
+}: CalendarProps) => {
+  const {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  } = useCalendar({
+    value,
+    disableFuture,
+    disablePast,
+    shouldDisableDate,
+    onHeaderChange,
+    onNextMonth,
+    onPrevMonth,
+  });
+
+  useIsomorphicLayoutEffect(() => {
+    if (value) {
+      setViewDate(value);
+    }
+  }, [value]);
+
+  if (process.env.NODE_ENV === 'development' && !disablePickers && size === 's') {
+    warn("Нельзя включить селекты выбора месяца/года, если размер календаря 's'", 'error');
+  }
+
+  if (process.env.NODE_ENV === 'development' && enableTime && size === 's') {
+    warn("Нельзя включить выбор времени, если размер календаря 's'", 'error');
+  }
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+        event.preventDefault();
+      }
+
+      const newFocusedDay = navigateDate(focusedDay ?? value, event.key);
+
+      if (newFocusedDay && !isSameMonth(newFocusedDay, viewDate)) {
+        setViewDate(newFocusedDay);
+      }
+      setFocusedDay(newFocusedDay);
+    },
+    [focusedDay, setFocusedDay, setViewDate, value, viewDate],
+  );
+
+  const onDayChange = React.useCallback(
+    (date: Date) => {
+      onChange?.(setTimeEqual(date, value as Date | undefined | null));
+    },
+    [value, onChange],
+  );
+
+  const isDayActive = React.useCallback(
+    (day: Date) => Boolean(value && isSameDay(day, value)),
+    [value],
+  );
+
+  return (
+    <RootComponent
+      {...props}
+      baseClassName={classNames(styles['Calendar'], size === 's' && styles['Calendar--size-s'])}
+    >
+      <CalendarHeader
+        viewDate={externalViewDate || viewDate}
+        onChange={setViewDate}
+        onNextMonth={setNextMonth}
+        onPrevMonth={setPrevMonth}
+        disablePickers={disablePickers || size === 's'}
+        className={styles['Calendar__header']}
+        prevMonthAriaLabel={prevMonthAriaLabel}
+        nextMonthAriaLabel={nextMonthAriaLabel}
+        changeMonthAriaLabel={changeMonthAriaLabel}
+        changeYearAriaLabel={changeYearAriaLabel}
+        prevMonthIcon={prevMonthIcon}
+        nextMonthIcon={nextMonthIcon}
+        prevMonthProps={prevMonthProps}
+        nextMonthProps={nextMonthProps}
+      />
+      <CalendarDays
+        viewDate={externalViewDate || viewDate}
+        value={value}
+        weekStartsOn={weekStartsOn}
+        isDayFocused={isDayFocused}
+        tabIndex={0}
+        aria-label={changeDayAriaLabel}
+        onKeyDown={handleKeyDown}
+        onDayChange={onDayChange}
+        isDayActive={isDayActive}
+        isDaySelectionStart={isFirstDay}
+        isDaySelectionEnd={isLastDay}
+        isDayDisabled={isDayDisabled}
+        onBlur={resetSelectedDay}
+        showNeighboringMonth={showNeighboringMonth}
+        size={size}
+        dayProps={dayProps}
+        listenDayChangesForUpdate={listenDayChangesForUpdate}
+      />
+      {enableTime && value && size !== 's' && (
+        <div className={styles['Calendar__time']}>
+          <CalendarTime
+            value={value}
+            onChange={onChange}
+            onClose={onClose}
+            doneButtonText={doneButtonText}
+            changeHoursAriaLabel={changeHoursAriaLabel}
+            changeMinutesAriaLabel={changeMinutesAriaLabel}
+          />
+        </div>
+      )}
+    </RootComponent>
+  );
+};

package/src/components/CalendarDay/CalendarDay.module.css

@@ -0,0 +1,84 @@
+.CalendarDay {
+  border-radius: 0;
+  font-size: 14px;
+  color: var(--vkui--color_text_primary);
+  font-family: var(--vkui--font_family_base);
+}
+
+.CalendarDay__hidden,
+.CalendarDay {
+  height: 36px;
+  flex-basis: calc(100% / 7);
+  flex-grow: 0;
+}
+
+.CalendarDay__hidden--size-s,
+.CalendarDay--size-s {
+  height: 34px;
+}
+
+.CalendarDay--disabled,
+.CalendarDay--not-same-month {
+  color: var(--vkui--color_text_tertiary);
+}
+
+.CalendarDay--selected {
+  background-color: var(--vkui--color_background_secondary);
+}
+
+.CalendarDay--selection-start.CalendarDay--selected,
+.CalendarDay__hinted--selection-start {
+  border-top-left-radius: 8px;
+  border-bottom-left-radius: 8px;
+}
+
+.CalendarDay--selection-end.CalendarDay--selected,
+.CalendarDay__hinted--selection-end {
+  border-top-right-radius: 8px;
+  border-bottom-right-radius: 8px;
+}
+
+.CalendarDay__day-number {
+  text-align: center;
+}
+
+.CalendarDay--today {
+  font-weight: 600;
+}
+
+.CalendarDay--today .CalendarDay__day-number::after {
+  content: '';
+  border-bottom: 2px solid var(--vkui--color_stroke_accent);
+  width: 16px;
+  display: block;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.CalendarDay--today .CalendarDay__inner--active .CalendarDay__day-number::after {
+  border-bottom-color: var(--vkui--color_stroke_contrast);
+}
+
+.CalendarDay__inner,
+.CalendarDay__hinted {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+  width: 100%;
+}
+
+.CalendarDay__inner {
+  border-radius: 8px;
+}
+
+.CalendarDay__hinted--active,
+.CalendarDay--hover :not(.CalendarDay__hinted--active) .CalendarDay__inner {
+  background-color: var(--vkui--color_background_secondary_alpha--hover);
+}
+
+.CalendarDay__inner--active {
+  background-color: var(--vkui--color_background_accent);
+  color: var(--vkui--color_text_contrast);
+}