@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/CalendarDay/CalendarDay.css

@@ -0,0 +1,85 @@
+.CalendarDay {
+  border-radius: 0;
+  font-size: 14px;
+  color: var(--vkui--color_text_primary);
+}
+
+.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);
+}

package/src/components/CalendarDay/CalendarDay.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { classNames } from "../../lib/classNames";
+import Tappable from "../Tappable/Tappable";
+import { ENABLE_KEYBOARD_INPUT_EVENT_NAME } from "../../hooks/useKeyboardInputTracker";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import "./CalendarDay.css";
+
+export interface CalendarDayProps {
+  day: Date;
+  today?: boolean;
+  selected?: boolean;
+  selectionStart?: boolean;
+  selectionEnd?: boolean;
+  hintedSelectionStart?: boolean;
+  hintedSelectionEnd?: boolean;
+  active?: boolean;
+  hidden?: boolean;
+  disabled?: boolean;
+  focused?: boolean;
+  hinted?: boolean;
+  sameMonth?: boolean;
+  size?: "s" | "m";
+  onChange(value: Date): void;
+  onEnter?(value: Date): void;
+  onLeave?(value: Date): void;
+}
+
+export const CalendarDay: React.FC<CalendarDayProps> = React.memo(
+  ({
+    day,
+    today,
+    selected,
+    onChange,
+    hidden,
+    disabled,
+    active,
+    selectionStart,
+    selectionEnd,
+    focused,
+    onEnter,
+    onLeave,
+    hinted,
+    hintedSelectionStart,
+    hintedSelectionEnd,
+    sameMonth,
+    size,
+  }) => {
+    const locale = React.useContext(LocaleProviderContext);
+    const ref = React.useRef<HTMLElement>(null);
+    const onClick = React.useCallback(() => onChange(day), [day, onChange]);
+    const handleEnter = React.useCallback(() => onEnter?.(day), [day, onEnter]);
+    const handleLeave = React.useCallback(() => onLeave?.(day), [day, onLeave]);
+
+    React.useEffect(() => {
+      if (focused && ref.current) {
+        ref.current.dispatchEvent(
+          new Event(ENABLE_KEYBOARD_INPUT_EVENT_NAME, { bubbles: true })
+        );
+        ref.current.focus();
+      }
+    }, [focused]);
+
+    if (hidden) {
+      return <div vkuiClass="CalendarDay__hidden"></div>;
+    }
+
+    return (
+      <Tappable
+        vkuiClass={classNames("CalendarDay", `CalendarDay--size-${size}`, {
+          "CalendarDay--today": today,
+          "CalendarDay--selected": selected && !disabled,
+          "CalendarDay--active": active && !disabled,
+          "CalendarDay--selection-start": selectionStart,
+          "CalendarDay--selection-end": selectionEnd,
+          "CalendarDay--disabled": disabled,
+          "CalendarDay--not-same-month": !sameMonth,
+        })}
+        hoverMode={active ? "CalendarDay--active-hover" : "CalendarDay--hover"}
+        hasActive={false}
+        onClick={onClick}
+        disabled={disabled}
+        aria-label={new Intl.DateTimeFormat(locale, {
+          weekday: "long",
+          year: "numeric",
+          month: "long",
+          day: "numeric",
+        }).format(day)}
+        tabIndex={-1}
+        getRootRef={ref}
+        focusVisibleMode={active ? "outside" : "inside"}
+        onEnter={handleEnter}
+        onLeave={handleLeave}
+      >
+        <div
+          vkuiClass={classNames("CalendarDay__hinted", {
+            "CalendarDay__hinted--active": hinted,
+            "CalendarDay__hinted--selection-start": hintedSelectionStart,
+            "CalendarDay__hinted--selection-end": hintedSelectionEnd,
+          })}
+        >
+          <div
+            vkuiClass={classNames("CalendarDay__inner", {
+              "CalendarDay__inner--active": active && !disabled,
+            })}
+          >
+            <div vkuiClass="CalendarDay__day-number">{day.getDate()}</div>
+          </div>
+        </div>
+      </Tappable>
+    );
+  }
+);
+
+CalendarDay.displayName = "CalendarDay";

package/src/components/CalendarDays/CalendarDays.css

@@ -0,0 +1,31 @@
+.CalendarDays {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  flex-grow: 1;
+}
+
+.CalendarDays__row {
+  display: flex;
+  justify-content: center;
+  flex-grow: 1;
+}
+
+.CalendarDays__row:not(:last-child) {
+  margin-bottom: 4px;
+}
+
+.CalendarDays__row--size-s:not(:last-child) {
+  margin-bottom: 0;
+}
+
+.CalendarDays__weekday {
+  text-transform: capitalize;
+  color: var(--vkui--color_text_subhead);
+  height: 32px;
+  flex-basis: calc(100% / 7);
+  flex-grow: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}

package/src/components/CalendarDays/CalendarDays.tsx

@@ -0,0 +1,131 @@
+import * as React from "react";
+import { isSameDay, isSameMonth } from "date-fns";
+import { CalendarDay } from "../CalendarDay/CalendarDay";
+import { getDaysNames, getWeeks } from "../../lib/calendar";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import { classNames } from "../../lib/classNames";
+import { Caption } from "../Typography/Caption/Caption";
+import "./CalendarDays.css";
+
+export interface CalendarDaysProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  value?: Date | Array<Date | null>;
+  viewDate: Date;
+  weekStartsOn: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  showNeighboringMonth?: boolean;
+  size?: "s" | "m";
+  onDayChange(value: Date): void;
+  isDayDisabled(value: Date): boolean;
+  isDaySelectionStart(value: Date, dayOfWeek: number): boolean;
+  isDaySelectionEnd(value: Date, dayOfWeek: number): boolean;
+  isHintedDaySelectionStart?(value: Date, dayOfWeek: number): boolean;
+  isHintedDaySelectionEnd?(value: Date, dayOfWeek: number): boolean;
+  isDayActive(value: Date): boolean;
+  isDayHinted?(value: Date): boolean;
+  isDaySelected?(value: Date): boolean;
+  isDayFocused(value: Date): boolean;
+  onDayEnter?(value: Date): void;
+  onDayLeave?(value: Date): void;
+}
+
+export const CalendarDays: React.FC<CalendarDaysProps> = ({
+  viewDate,
+  value,
+  weekStartsOn,
+  onDayChange,
+  isDaySelected,
+  isDayActive,
+  isDaySelectionEnd,
+  isDaySelectionStart,
+  onDayEnter,
+  onDayLeave,
+  isDayHinted,
+  isHintedDaySelectionStart,
+  isHintedDaySelectionEnd,
+  isDayFocused,
+  isDayDisabled,
+  size,
+  showNeighboringMonth = false,
+  ...props
+}) => {
+  const locale = React.useContext(LocaleProviderContext);
+  const ref = React.useRef<HTMLDivElement>(null);
+  const [now] = React.useState(new Date());
+
+  const weeks = React.useMemo(
+    () => getWeeks(viewDate, weekStartsOn),
+    [weekStartsOn, viewDate]
+  );
+
+  const daysNames = React.useMemo(
+    () => getDaysNames(now, weekStartsOn, locale),
+    [locale, now, weekStartsOn]
+  );
+
+  const handleDayChange = React.useCallback(
+    (date: Date) => {
+      onDayChange(date);
+
+      ref.current?.focus();
+    },
+    [onDayChange]
+  );
+
+  return (
+    <div {...props} vkuiClass="CalendarDays" ref={ref}>
+      <div
+        vkuiClass={classNames(
+          "CalendarDays__row",
+          `CalendarDays__row--size-${size}`
+        )}
+      >
+        {daysNames.map((dayName) => (
+          <Caption
+            level="1"
+            weight="regular"
+            vkuiClass="CalendarDays__weekday"
+            key={dayName}
+          >
+            {dayName}
+          </Caption>
+        ))}
+      </div>
+
+      {weeks.map((week, i) => (
+        <div
+          vkuiClass={classNames(
+            "CalendarDays__row",
+            `CalendarDays__row--size-${size}`
+          )}
+          key={i}
+        >
+          {week.map((day, i) => {
+            const sameMonth = isSameMonth(day, viewDate);
+            return (
+              <CalendarDay
+                key={day.toISOString()}
+                day={day}
+                today={isSameDay(day, now)}
+                active={isDayActive(day)}
+                onChange={handleDayChange}
+                hidden={!showNeighboringMonth && !sameMonth}
+                disabled={isDayDisabled(day)}
+                selectionStart={isDaySelectionStart(day, i)}
+                selectionEnd={isDaySelectionEnd(day, i)}
+                hintedSelectionStart={isHintedDaySelectionStart?.(day, i)}
+                hintedSelectionEnd={isHintedDaySelectionEnd?.(day, i)}
+                selected={isDaySelected?.(day)}
+                focused={isDayFocused(day)}
+                onEnter={onDayEnter}
+                onLeave={onDayLeave}
+                hinted={isDayHinted?.(day)}
+                sameMonth={sameMonth}
+                size={size}
+              />
+            );
+          })}
+        </div>
+      ))}
+    </div>
+  );
+};

package/src/components/CalendarHeader/CalendarHeader.css

@@ -0,0 +1,50 @@
+.CalendarHeader {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  min-height: 36px;
+}
+
+.CalendarHeader__pickers {
+  display: flex;
+  position: absolute;
+}
+
+.CalendarHeader__pickers > :not(:last-child) {
+  margin-right: 4px;
+}
+
+.CalendarHeader__nav-icon {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 3px;
+  color: var(--vkui--color_icon_accent);
+}
+
+.CalendarHeader__nav-icon-next {
+  right: 0;
+}
+
+.CalendarHeader__nav-icon-prev {
+  left: 0;
+}
+
+.CalendarHeader__picker-icon {
+  margin-top: -4px;
+  color: var(--vkui--color_icon_secondary);
+}
+
+.CalendarHeader__month_name {
+  text-transform: capitalize;
+}
+
+.CalendarHeader__pickers-placeholder {
+  text-transform: capitalize;
+}
+
+.CalendarHeader__pickers .CustomSelectDropdown__CustomScrollView {
+  max-height: 184px;
+}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -0,0 +1,167 @@
+import * as React from "react";
+import { setMonth, setYear, subMonths, addMonths } from "date-fns";
+import {
+  Icon20ChevronLeftOutline,
+  Icon20ChevronRightOutline,
+  Icon12Dropdown,
+} from "@vkontakte/icons";
+import Tappable from "../Tappable/Tappable";
+import { classNames } from "../../lib/classNames";
+import CustomSelect, {
+  CustomSelectProps,
+  SelectType,
+} from "../CustomSelect/CustomSelect";
+import CustomSelectOption from "../CustomSelectOption/CustomSelectOption";
+import { SizeType } from "../../hoc/withAdaptivity";
+import { getMonths, getYears } from "../../lib/calendar";
+import { LocaleProviderContext } from "../LocaleProviderContext/LocaleProviderContext";
+import Text from "../Typography/Text/Text";
+import "./CalendarHeader.css";
+
+export interface CalendarHeaderProps
+  extends Pick<React.HTMLAttributes<HTMLDivElement>, "className"> {
+  viewDate: Date;
+  prevMonth?: boolean;
+  nextMonth?: boolean;
+  disablePickers?: boolean;
+  prevMonthAriaLabel?: string;
+  nextMonthAriaLabel?: string;
+  changeMonthAriaLabel?: string;
+  changeYearAriaLabel?: string;
+  onChange(viewDate: Date): void;
+  onNextMonth?(): void;
+  onPrevMonth?(): void;
+}
+
+const renderOption: CustomSelectProps["renderOption"] = ({
+  option,
+  children,
+  ...props
+}) => {
+  return (
+    <CustomSelectOption {...props}>
+      <span vkuiClass="CalendarHeader__month_name">{children}</span>
+    </CustomSelectOption>
+  );
+};
+
+export const CalendarHeader: React.FC<CalendarHeaderProps> = ({
+  viewDate,
+  onChange,
+  prevMonth = true,
+  nextMonth = true,
+  disablePickers = false,
+  onNextMonth,
+  onPrevMonth,
+  className,
+  prevMonthAriaLabel = "Предыдущий месяц",
+  nextMonthAriaLabel = "Следующий месяц",
+  changeMonthAriaLabel = "Изменить месяц",
+  changeYearAriaLabel = "Изменить год",
+}) => {
+  const locale = React.useContext(LocaleProviderContext);
+  const onMonthsChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) =>
+      onChange(setMonth(viewDate, Number(event.target.value))),
+    [onChange, viewDate]
+  );
+  const onYearChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) =>
+      onChange(setYear(viewDate, Number(event.target.value))),
+    [onChange, viewDate]
+  );
+
+  const months = React.useMemo(() => getMonths(locale), [locale]);
+
+  const currentYear = viewDate.getFullYear();
+
+  const years = React.useMemo(() => getYears(currentYear, 100), [currentYear]);
+
+  const formatter = new Intl.DateTimeFormat(locale, {
+    year: "numeric",
+    month: "long",
+  });
+
+  return (
+    <div vkuiClass="CalendarHeader" className={className}>
+      {prevMonth && (
+        <Tappable
+          vkuiClass={classNames(
+            "CalendarHeader__nav-icon",
+            "CalendarHeader__nav-icon-prev"
+          )}
+          onClick={onPrevMonth}
+          aria-label={`${prevMonthAriaLabel}, ${formatter.format(
+            subMonths(viewDate, 1)
+          )}`}
+        >
+          <Icon20ChevronLeftOutline width={30} height={30} />
+        </Tappable>
+      )}
+      <div vkuiClass="CalendarHeader__pickers">
+        {disablePickers ? (
+          <React.Fragment>
+            <Text
+              weight="medium"
+              vkuiClass="CalendarHeader__pickers-placeholder"
+            >
+              {new Intl.DateTimeFormat(locale, {
+                month: "long",
+              }).format(viewDate)}
+            </Text>
+            <Text
+              weight="medium"
+              vkuiClass="CalendarHeader__pickers-placeholder"
+            >
+              {new Intl.DateTimeFormat(locale, {
+                year: "numeric",
+              }).format(viewDate)}
+            </Text>
+          </React.Fragment>
+        ) : (
+          <React.Fragment>
+            <CustomSelect
+              value={viewDate.getMonth()}
+              options={months}
+              renderOption={renderOption}
+              dropdownOffsetDistance={4}
+              fixDropdownWidth={false}
+              sizeY={SizeType.COMPACT}
+              icon={<Icon12Dropdown />}
+              onChange={onMonthsChange}
+              forceDropdownPortal={false}
+              selectType={SelectType.Plain}
+              aria-label={changeMonthAriaLabel}
+            />
+            <CustomSelect
+              value={viewDate.getFullYear()}
+              options={years}
+              dropdownOffsetDistance={4}
+              fixDropdownWidth={false}
+              sizeY={SizeType.COMPACT}
+              icon={<Icon12Dropdown />}
+              onChange={onYearChange}
+              forceDropdownPortal={false}
+              selectType={SelectType.Plain}
+              aria-label={changeYearAriaLabel}
+            />
+          </React.Fragment>
+        )}
+      </div>
+      {nextMonth && (
+        <Tappable
+          vkuiClass={classNames(
+            "CalendarHeader__nav-icon",
+            "CalendarHeader__nav-icon-next"
+          )}
+          onClick={onNextMonth}
+          aria-label={`${nextMonthAriaLabel}, ${formatter.format(
+            addMonths(viewDate, 1)
+          )}`}
+        >
+          <Icon20ChevronRightOutline width={30} height={30} />
+        </Tappable>
+      )}
+    </div>
+  );
+};

package/src/components/CalendarRange/CalendarRange.css

@@ -0,0 +1,27 @@
+.CalendarRange {
+  display: flex;
+  justify-content: space-around;
+  flex-wrap: wrap;
+  width: 610px;
+  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;
+  padding: 12px;
+}
+
+.CalendarRange__inner {
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+}
+
+.CalendarRange__inner:not(:last-child) {
+  margin-right: 24px;
+}
+
+.CalendarRange__header {
+  margin-bottom: 4px;
+  z-index: 1;
+}