@vkontakte/vkui 4.27.2 → 4.29.0

package/src/components/CalendarRange/CalendarRange.tsx

@@ -0,0 +1,275 @@
+import * as React from "react";
+import {
+  addMonths,
+  isSameMonth,
+  isSameDay,
+  isBefore,
+  isAfter,
+  startOfDay,
+  endOfDay,
+  isWithinInterval,
+} from "../../lib/date";
+import {
+  CalendarHeader,
+  CalendarHeaderProps,
+} from "../CalendarHeader/CalendarHeader";
+import { CalendarDays } from "../CalendarDays/CalendarDays";
+import {
+  navigateDate,
+  setTimeEqual,
+  isLastDay,
+  isFirstDay,
+} from "../../lib/calendar";
+import { useCalendar } from "../../hooks/useCalendar";
+import { HasRootRef } from "../../types";
+import "./CalendarRange.css";
+
+export interface CalendarRangeProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    Pick<
+      CalendarHeaderProps,
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+    >,
+    HasRootRef<HTMLDivElement> {
+  value?: Array<Date | null>;
+  disablePast?: boolean;
+  disableFuture?: boolean;
+  disablePickers?: boolean;
+  changeDayAriaLabel?: string;
+  weekStartsOn?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+  onChange?(value?: Array<Date | null>): void;
+  shouldDisableDate?(value: Date): boolean;
+  onClose?(): void;
+}
+
+const getIsDaySelected = (day: Date, value?: Array<Date | null>) => {
+  if (!value?.[0] || !value[1]) {
+    return false;
+  }
+
+  return Boolean(
+    isWithinInterval(day, startOfDay(value[0]), endOfDay(value[1]))
+  );
+};
+
+export const CalendarRange: React.FC<CalendarRangeProps> = ({
+  value,
+  onChange,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+  onClose,
+  weekStartsOn = 1,
+  getRootRef,
+  disablePickers,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  changeMonthAriaLabel,
+  changeYearAriaLabel,
+  changeDayAriaLabel = "Изменить день",
+  ...props
+}) => {
+  const {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+  const [hintedDate, setHintedDate] = React.useState<Array<Date | null>>();
+  const secondViewDate = addMonths(viewDate, 1);
+
+  const handleKeyDown = React.useCallback(
+    (event: React.KeyboardEvent) => {
+      if (
+        ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)
+      ) {
+        event.preventDefault();
+      }
+
+      const newFocusedDay = navigateDate(focusedDay ?? value?.[1], event.key);
+
+      if (
+        newFocusedDay &&
+        !isSameMonth(newFocusedDay, viewDate) &&
+        !isSameMonth(newFocusedDay, addMonths(viewDate, 1))
+      ) {
+        setViewDate(newFocusedDay);
+      }
+      setFocusedDay(newFocusedDay);
+    },
+    [focusedDay, setFocusedDay, setViewDate, value, viewDate]
+  );
+
+  const getNewValue = React.useCallback(
+    (date: Date) => {
+      if (!value) {
+        return [date, null];
+      }
+
+      const start = value[0];
+      const end = value[1];
+      if ((start && isSameDay(date, start)) || (end && isSameDay(date, end))) {
+        return [setTimeEqual(date, start), setTimeEqual(date, end)];
+      } else if (start && isBefore(date, start)) {
+        return [setTimeEqual(date, start), end];
+      } else if (start && isAfter(date, start)) {
+        return [start, setTimeEqual(date, end)];
+      }
+
+      return value;
+    },
+    [value]
+  );
+
+  const onDayChange = React.useCallback(
+    (date: Date) => {
+      onChange?.(getNewValue(date));
+      setHintedDate(undefined);
+    },
+    [onChange, getNewValue]
+  );
+
+  const isDaySelected = React.useCallback(
+    (day: Date) => getIsDaySelected(day, value),
+    [value]
+  );
+
+  const isDayActive = React.useCallback(
+    (day: Date) =>
+      Boolean(
+        (value?.[0] && isSameDay(day, value[0])) ||
+          (value?.[1] && isSameDay(day, value[1]))
+      ),
+    [value]
+  );
+
+  const isDaySelectionEnd = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isLastDay(day, dayOfWeek) || (value?.[1] && isSameDay(day, value[1]))
+      ),
+    [value]
+  );
+
+  const isHintedDaySelectionEnd = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isLastDay(day, dayOfWeek) ||
+          (hintedDate?.[1] && isSameDay(day, hintedDate[1]))
+      ),
+    [hintedDate]
+  );
+
+  const isDaySelectionStart = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isFirstDay(day, dayOfWeek) || (value?.[0] && isSameDay(day, value[0]))
+      ),
+    [value]
+  );
+
+  const isHintedDaySelectionStart = React.useCallback(
+    (day: Date, dayOfWeek: number) =>
+      Boolean(
+        isFirstDay(day, dayOfWeek) ||
+          (hintedDate?.[0] && isSameDay(day, hintedDate[0]))
+      ),
+    [hintedDate]
+  );
+
+  const onDayEnter = React.useCallback(
+    (date: Date) => setHintedDate(getNewValue(date)),
+    [setHintedDate, getNewValue]
+  );
+
+  const onDayLeave = React.useCallback(
+    () => setHintedDate(undefined),
+    [setHintedDate]
+  );
+
+  const isDayHinted = React.useCallback(
+    (day: Date) => getIsDaySelected(day, hintedDate),
+    [hintedDate]
+  );
+
+  return (
+    <div {...props} ref={getRootRef} vkuiClass="CalendarRange">
+      <div vkuiClass="CalendarRange__inner">
+        <CalendarHeader
+          viewDate={viewDate}
+          onChange={setViewDate}
+          nextMonth={false}
+          onPrevMonth={setPrevMonth}
+          disablePickers={disablePickers}
+          vkuiClass="CalendarRange__header"
+          prevMonthAriaLabel={prevMonthAriaLabel}
+          nextMonthAriaLabel={nextMonthAriaLabel}
+          changeMonthAriaLabel={changeMonthAriaLabel}
+          changeYearAriaLabel={changeYearAriaLabel}
+        />
+        <CalendarDays
+          viewDate={viewDate}
+          value={value}
+          weekStartsOn={weekStartsOn}
+          onKeyDown={handleKeyDown}
+          isDayFocused={isDayFocused}
+          onDayChange={onDayChange}
+          isDaySelected={isDaySelected}
+          isDayActive={isDayActive}
+          isDaySelectionEnd={isDaySelectionEnd}
+          isDaySelectionStart={isDaySelectionStart}
+          isDayHinted={isDayHinted}
+          onDayEnter={onDayEnter}
+          onDayLeave={onDayLeave}
+          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+          isHintedDaySelectionStart={isHintedDaySelectionStart}
+          isDayDisabled={isDayDisabled}
+          aria-label={changeDayAriaLabel}
+        />
+      </div>
+      <div vkuiClass="CalendarRange__inner">
+        <CalendarHeader
+          viewDate={secondViewDate}
+          onChange={setViewDate}
+          prevMonth={false}
+          onNextMonth={setNextMonth}
+          disablePickers={disablePickers}
+          vkuiClass="CalendarRange__header"
+          prevMonthAriaLabel={prevMonthAriaLabel}
+          nextMonthAriaLabel={nextMonthAriaLabel}
+          changeMonthAriaLabel={changeMonthAriaLabel}
+          changeYearAriaLabel={changeYearAriaLabel}
+        />
+        <CalendarDays
+          viewDate={secondViewDate}
+          value={value}
+          weekStartsOn={weekStartsOn}
+          aria-label={changeDayAriaLabel}
+          onKeyDown={handleKeyDown}
+          isDayFocused={isDayFocused}
+          onDayChange={onDayChange}
+          isDaySelected={isDaySelected}
+          isDayActive={isDayActive}
+          isDaySelectionEnd={isDaySelectionEnd}
+          isDaySelectionStart={isDaySelectionStart}
+          isDayHinted={isDayHinted}
+          onDayEnter={onDayEnter}
+          onDayLeave={onDayLeave}
+          isHintedDaySelectionEnd={isHintedDaySelectionEnd}
+          isHintedDaySelectionStart={isHintedDaySelectionStart}
+          isDayDisabled={isDayDisabled}
+          tabIndex={0}
+          onBlur={resetSelectedDay}
+        />
+      </div>
+    </div>
+  );
+};

package/src/components/CalendarRange/Readme.md

@@ -0,0 +1,85 @@
+Компонент выбора диапазона дат.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { addDays, format } from "../../lib/date";
+
+const Example = () => {
+  const [value, setValue] = useState([new Date(), addDays(new Date(), 10)]);
+  const [disablePast, setDisablePast] = useState(false);
+  const [disableFuture, setDisableFuture] = useState(false);
+  const [disablePickers, setDisablePickers] = useState(false);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <FormItem top="Выбранная дата">
+          {format(value[0], "YYYY-MM-DD")} - {format(value[1], "YYYY-MM-DD")}
+        </FormItem>
+        <FormItem top="Запрет выбора прошлых дат">
+          <Checkbox
+            checked={disablePast}
+            onChange={(e) => setDisablePast(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Запрет выбора будущих дат">
+          <Checkbox
+            checked={disableFuture}
+            onChange={(e) => setDisableFuture(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отключить селекты выбора месяца/года">
+          <Checkbox
+            checked={disablePickers}
+            onChange={(e) => setDisablePickers(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Локаль">
+          <Select
+            style={{ width: 100 }}
+            value={locale}
+            onChange={(e) => setLocale(e.target.value)}
+            options={[
+              {
+                label: "ru",
+                value: "ru",
+              },
+              {
+                label: "en",
+                value: "en",
+              },
+              {
+                label: "ar",
+                value: "ar",
+              },
+              {
+                label: "fr",
+                value: "fr",
+              },
+            ]}
+          />
+        </FormItem>
+        <FormItem>
+          <LocaleProviderContext.Provider value={locale}>
+            <CalendarRange
+              value={value}
+              onChange={setValue}
+              disablePast={disablePast}
+              disableFuture={disableFuture}
+              disablePickers={disablePickers}
+            />
+          </LocaleProviderContext.Provider>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/CalendarTime/CalendarTime.css

@@ -0,0 +1,18 @@
+.CalendarTime {
+  display: flex;
+  align-items: center;
+}
+
+.CalendarTime__picker {
+  width: 77px;
+}
+
+.CalendarTime__divider {
+  margin-left: 6px;
+  margin-right: 6px;
+  color: var(--vkui--color_text_primary);
+}
+
+.CalendarTime__button {
+  margin-left: auto;
+}

package/src/components/CalendarTime/CalendarTime.tsx

@@ -0,0 +1,88 @@
+import * as React from "react";
+import { setHours, setMinutes } from "../../lib/date";
+import { CustomSelect } from "../CustomSelect/CustomSelect";
+import { Button } from "../Button/Button";
+import { SizeType } from "../../hoc/withAdaptivity";
+import "./CalendarTime.css";
+
+export interface CalendarTimeProps {
+  value: Date;
+  doneButtonText?: string;
+  changeHoursAriaLabel?: string;
+  changeMinutesAriaLabel?: string;
+  onChange?(value: Date): void;
+  onClose?(): void;
+}
+
+const hours: Array<{
+  value: number;
+  label: string;
+}> = [];
+for (let i = 0; i < 24; i += 1) {
+  hours.push({ value: i, label: String(i).padStart(2, "0") });
+}
+
+const minutes: Array<{
+  value: number;
+  label: string;
+}> = [];
+for (let i = 0; i < 60; i += 1) {
+  minutes.push({ value: i, label: String(i).padStart(2, "0") });
+}
+
+export const CalendarTime: React.FC<CalendarTimeProps> = ({
+  value,
+  doneButtonText = "Готово",
+  onChange,
+  onClose,
+  changeHoursAriaLabel = "Изменить час",
+  changeMinutesAriaLabel = "Изменить минуту",
+}) => {
+  const onHoursChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) =>
+      onChange?.(setHours(value, Number(event.target.value))),
+    [onChange, value]
+  );
+  const onMinutesChange = React.useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) =>
+      onChange?.(setMinutes(value, Number(event.target.value))),
+    [onChange, value]
+  );
+
+  return (
+    <div vkuiClass="CalendarTime">
+      <div vkuiClass="CalendarTime__picker">
+        <CustomSelect
+          value={value.getHours()}
+          options={hours}
+          onChange={onHoursChange}
+          forceDropdownPortal={false}
+          sizeY={SizeType.COMPACT}
+          aria-label={changeHoursAriaLabel}
+        />
+      </div>
+      <div vkuiClass="CalendarTime__divider">:</div>
+      <div vkuiClass="CalendarTime__picker">
+        <CustomSelect
+          value={value.getMinutes()}
+          options={minutes}
+          onChange={onMinutesChange}
+          forceDropdownPortal={false}
+          sizeY={SizeType.COMPACT}
+          aria-label={changeMinutesAriaLabel}
+        />
+      </div>
+      <div vkuiClass="CalendarTime__button">
+        <Button
+          sizeY={SizeType.COMPACT}
+          mode="secondary"
+          onClick={onClose}
+          size="l"
+          aria-label={doneButtonText}
+        >
+          {doneButtonText}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/components/CardScroll/CardScroll.tsx

@@ -3,7 +3,8 @@ import { classNames } from "../../lib/classNames";
 import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import { usePlatform } from "../../hooks/usePlatform";
-import HorizontalScroll, {
+import {
+  HorizontalScroll,
   HorizontalScrollProps,
 } from "../HorizontalScroll/HorizontalScroll";
 import { useDOM } from "../../lib/dom";
@@ -93,6 +94,7 @@ export const CardScroll: React.FC<CardScrollProps> = ({
   return (
     <div
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
         `CardScroll--sizeX-${sizeX}`,

package/src/components/Cell/Cell.tsx

@@ -36,7 +36,7 @@ export interface CellProps
    */
   selectable?: boolean;
   /**
-   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
+   * В режиме selectable реагирует на входящие значения пропса checked, как зависящий напрямую от входящего значения
    */
   checked?: boolean;
   /**
@@ -89,11 +89,11 @@ export const Cell: React.FC<CellProps> = ({
     if (process.env.NODE_ENV === "development") {
       deprecatedSelectable &&
         warn(
-          'Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".'
+          'Свойство selectable устарело и будет удалено в 5.0.0. Используйте mode="selectable".'
         );
       deprecatedRemovable &&
         warn(
-          'Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".'
+          'Свойство removable устарело и будет удалено в 5.0.0. Используйте mode="removable".'
         );
     }
   }
@@ -145,6 +145,7 @@ export const Cell: React.FC<CellProps> = ({
     (draggable && !selectable) || removable || disabled;
   const hasActive = !simpleCellDisabled && !dragging;
 
+  // eslint-disable-next-line vkui/no-object-expression-in-arguments
   const cellClasses = classNames(getClassName("Cell", platform), {
     "Cell--dragging": dragging,
     "Cell--removable": removable,

package/src/components/CellButton/CellButton.tsx

@@ -21,6 +21,7 @@ const CellButton: React.FC<CellButtonProps> = ({
     <SimpleCell
       stopPropagation={true}
       {...restProps}
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("CellButton", platform),
         `CellButton--${mode}`,

package/src/components/Checkbox/Checkbox.tsx

@@ -21,7 +21,7 @@ import {
 import Text from "../Typography/Text/Text";
 import Headline from "../Typography/Headline/Headline";
 import { hasReactNode } from "../../lib/utils";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import "./Checkbox.css";
 
 export interface CheckboxProps
@@ -88,14 +88,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
         >
           <div vkuiClass="Checkbox__children">{children}</div>
           {hasReactNode(description) && (
-            <Caption
-              level="1"
-              Component="span"
-              weight="regular"
-              vkuiClass="Checkbox__description"
-            >
-              {description}
-            </Caption>
+            <Caption vkuiClass="Checkbox__description">{description}</Caption>
           )}
         </ContentComponent>
       </div>

package/src/components/Chip/Chip.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { Icon16Cancel } from "@vkontakte/icons";
 import { getTitleFromChildren, hasReactNode, noop } from "../../lib/utils";
 import { classNames } from "../../lib/classNames";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import Tappable from "../Tappable/Tappable";
 import "./Chip.css";
 
@@ -39,6 +39,7 @@ export const Chip: React.FC<ChipProps> = ({
 
   return (
     <div
+      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames("Chip", { "Chip--removable": removable })}
       role="option"
       aria-label={title}
@@ -46,13 +47,7 @@ export const Chip: React.FC<ChipProps> = ({
     >
       <div vkuiClass="Chip__in" role="presentation">
         {hasReactNode(before) && <div vkuiClass="Chip__before">{before}</div>}
-        <Caption
-          level="1"
-          weight="regular"
-          vkuiClass="Chip__content"
-          title={title}
-          aria-hidden="true"
-        >
+        <Caption vkuiClass="Chip__content" title={title} aria-hidden="true">
           {children}
         </Caption>
         {hasReactNode(after) && <div vkuiClass="Chip__after">{after}</div>}

package/src/components/ChipsInput/ChipsInput.css

@@ -35,7 +35,7 @@
   /* Визуальная компенсация - центрируем строчные буквы */
   font-size: 15px;
   line-height: 26px;
-  color: var(--text_primary);
+  color: var(--text_primary, var(--vkui--color_text_primary));
   background: transparent;
   border: none;
   box-shadow: none;
@@ -52,15 +52,15 @@
 }
 
 .ChipsInput__el:disabled {
-  opacity: 0.4;
+  opacity: var(--vkui--opacity_disable_accessibility);
 }
 
 .ChipsInput__el::placeholder {
-  color: var(--field_text_placeholder);
+  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
 }
 
 .ChipsInput__el:disabled::placeholder {
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 /**

package/src/components/ChipsInput/ChipsInput.tsx

@@ -74,7 +74,7 @@ export const chipsInputDefaultProps: ChipsInputProps<any> = {
   },
 };
 
-const ChipsInput = <Option extends ChipsInputOption>(
+export const ChipsInput = <Option extends ChipsInputOption>(
   props: ChipsInputProps<Option>
 ) => {
   const propsWithDefault = { ...chipsInputDefaultProps, ...props };
@@ -177,10 +177,12 @@ const ChipsInput = <Option extends ChipsInputOption>(
   return (
     <FormField
       getRootRef={getRootRef}
-      vkuiClass={classNames("ChipsInput", `ChipsInput--sizeY-${sizeY}`, {
-        "ChipsInput--focused": focused,
-        "ChipsInput--withChips": !!selectedOptions.length,
-      })}
+      vkuiClass={classNames(
+        "ChipsInput",
+        `ChipsInput--sizeY-${sizeY}`,
+        focused && "ChipsInput--focused",
+        !!selectedOptions.length && "ChipsInput--withChips"
+      )}
       className={className}
       style={style}
       disabled={restProps.disabled}
@@ -233,6 +235,3 @@ const ChipsInput = <Option extends ChipsInputOption>(
     </FormField>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default ChipsInput;

package/src/components/ChipsSelect/ChipsSelect.css

@@ -8,7 +8,7 @@
 
 .ChipsSelect__empty {
   text-align: center;
-  color: var(--text_secondary);
+  color: var(--text_secondary, var(--vkui--color_text_secondary));
 }
 
 .ChipsSelect__open:not(.ChipsSelect__open--popupDirectionTop)