@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/DateInput/Readme.md

@@ -0,0 +1,116 @@
+Компонент выбора даты.
+
+> ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { format } from "date-fns";
+
+const Example = () => {
+  const [value, setValue] = useState(new Date());
+  const [enableTime, setEnableTime] = useState(false);
+  const [disablePast, setDisablePast] = useState(false);
+  const [disableFuture, setDisableFuture] = useState(false);
+  const [disablePickers, setDisablePickers] = useState(false);
+  const [closeOnChange, setCloseOnChange] = useState(true);
+  const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <FormItem top="Выбор времени">
+          <Checkbox
+            checked={enableTime}
+            onChange={(e) => setEnableTime(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </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={closeOnChange}
+            onChange={(e) => setCloseOnChange(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отключить селекты выбора месяца/года">
+          <Checkbox
+            checked={disablePickers}
+            onChange={(e) => setDisablePickers(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
+        <FormItem top="Отображать даты с прошлого и следующего месяца">
+          <Checkbox
+            checked={showNeighboringMonth}
+            onChange={(e) => setShowNeighboringMonth(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>
+          <div style={{ display: "flex" }}>
+            <LocaleProviderContext.Provider value={locale}>
+              <DateInput
+                value={value}
+                onChange={setValue}
+                enableTime={enableTime}
+                disablePast={disablePast}
+                disableFuture={disableFuture}
+                closeOnChange={closeOnChange}
+                disablePickers={disablePickers}
+                showNeighboringMonth={showNeighboringMonth}
+              />
+            </LocaleProviderContext.Provider>
+          </div>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/DateRangeInput/DateRangeInput.css

@@ -0,0 +1,16 @@
+.DateRangeInput__input {
+  flex-grow: 1;
+  margin-left: 10px;
+  margin-right: 14px;
+  font-size: 16px;
+  z-index: 2;
+  cursor: text;
+  white-space: nowrap;
+  user-select: text;
+  font-variant-numeric: tabular-nums;
+}
+
+.DateRangeInput--sizeY-compact .DateRangeInput__input {
+  font-size: 15px;
+  margin-right: 22px;
+}

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -0,0 +1,350 @@
+import * as React from "react";
+import { format, isMatch, parse, isAfter } from "date-fns";
+import { Icon16Clear, Icon20CalendarOutline } from "@vkontakte/icons";
+import {
+  CalendarRange,
+  CalendarRangeProps,
+} from "../CalendarRange/CalendarRange";
+import { Popper, Placement } from "../Popper/Popper";
+import IconButton from "../IconButton/IconButton";
+import { HasRootRef } from "../../types";
+import { useDateInput } from "../../hooks/useDateInput";
+import { useAdaptivity } from "../../hooks/useAdaptivity";
+import { classNames } from "../../lib/classNames";
+import { multiRef } from "../../lib/utils";
+import { FormField } from "../FormField/FormField";
+import { InputLike } from "../InputLike/InputLike";
+import { InputLikeDivider } from "../InputLike/InputLikeDivider";
+import { callMultiple } from "../../lib/callMultiple";
+import "./DateRangeInput.css";
+
+export interface DateRangeInputProps
+  extends Omit<React.InputHTMLAttributes<HTMLDivElement>, "value" | "onChange">,
+    Pick<
+      CalendarRangeProps,
+      | "disablePast"
+      | "disableFuture"
+      | "shouldDisableDate"
+      | "onChange"
+      | "value"
+      | "weekStartsOn"
+      | "disablePickers"
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+      | "changeDayAriaLabel"
+    >,
+    HasRootRef<HTMLDivElement> {
+  calendarPlacement?: Placement;
+  closeOnChange?: boolean;
+  clearFieldAriaLabel?: string;
+  showCalendarAriaLabel?: string;
+  changeStartDayAriaLabel?: string;
+  changeStartMonthAriaLabel?: string;
+  changeStartYearAriaLabel?: string;
+  changeEndDayAriaLabel?: string;
+  changeEndMonthAriaLabel?: string;
+  changeEndYearAriaLabel?: string;
+}
+
+const elementsConfig = (index: number) => {
+  let length = 2;
+  let min = 1;
+  let max = 0;
+
+  switch (index) {
+    case 0:
+    case 3:
+      max = 31;
+      break;
+    case 1:
+    case 4:
+      max = 12;
+      break;
+    case 2:
+    case 5:
+      max = 2100;
+      min = 1900;
+      length = 4;
+      break;
+  }
+
+  return { length, min, max };
+};
+
+const getInternalValue = (value: CalendarRangeProps["value"]) => {
+  const newValue = ["", "", "", "", "", ""];
+  if (value?.[0]) {
+    newValue[0] = String(value[0].getDate()).padStart(2, "0");
+    newValue[1] = String(value[0].getMonth() + 1).padStart(2, "0");
+    newValue[2] = String(value[0].getFullYear()).padStart(4, "0");
+  }
+  if (value?.[1]) {
+    newValue[3] = String(value[1].getDate()).padStart(2, "0");
+    newValue[4] = String(value[1].getMonth() + 1).padStart(2, "0");
+    newValue[5] = String(value[1].getFullYear()).padStart(4, "0");
+  }
+  return newValue;
+};
+
+export const DateRangeInput: React.FC<DateRangeInputProps> = ({
+  shouldDisableDate,
+  disableFuture,
+  disablePast,
+  value,
+  onChange,
+  calendarPlacement = "bottom-start",
+  style,
+  className,
+  closeOnChange = true,
+  disablePickers,
+  getRootRef,
+  name,
+  autoFocus,
+  disabled,
+  onClick,
+  onFocus,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  changeDayAriaLabel,
+  changeMonthAriaLabel,
+  changeYearAriaLabel,
+  changeStartDayAriaLabel = "Изменить день начала",
+  changeStartMonthAriaLabel = "Изменить месяц начала",
+  changeStartYearAriaLabel = "Изменить год начала",
+  changeEndDayAriaLabel = "Изменить день окончания",
+  changeEndMonthAriaLabel = "Изменить месяц окончания",
+  changeEndYearAriaLabel = "Изменить год окончания",
+  clearFieldAriaLabel = "Очистить поле",
+  showCalendarAriaLabel = "Показать календарь",
+  ...props
+}) => {
+  const daysStartRef = React.useRef<HTMLSpanElement>(null);
+  const monthsStartRef = React.useRef<HTMLSpanElement>(null);
+  const yearsStartRef = React.useRef<HTMLSpanElement>(null);
+  const daysEndRef = React.useRef<HTMLSpanElement>(null);
+  const monthsEndRef = React.useRef<HTMLSpanElement>(null);
+  const yearsEndRef = React.useRef<HTMLSpanElement>(null);
+
+  const onInternalValueChange = React.useCallback(
+    (internalValue: string[]) => {
+      let isStartValid = true;
+      let isEndValid = true;
+      for (let i = 0; i <= 2; i += 1) {
+        if (internalValue[i].length < elementsConfig(i).length) {
+          isStartValid = false;
+        }
+      }
+      for (let i = 3; i <= 5; i += 1) {
+        if (internalValue[i].length < elementsConfig(i).length) {
+          isEndValid = false;
+        }
+      }
+      const formattedStartValue = `${internalValue[0]}.${internalValue[1]}.${internalValue[2]}`;
+      const formattedEndValue = `${internalValue[3]}.${internalValue[4]}.${internalValue[5]}`;
+      const mask = "dd.MM.yyyy";
+
+      if (!isMatch(formattedStartValue, mask)) {
+        isStartValid = false;
+      }
+      if (!isMatch(formattedEndValue, mask)) {
+        isEndValid = false;
+      }
+
+      if (!isStartValid && !isEndValid) {
+        return;
+      }
+
+      const valueExists = Array.isArray(value);
+      const now = new Date();
+      const start = isStartValid
+        ? parse(formattedStartValue, mask, (valueExists && value?.[0]) || now)
+        : null;
+      const end = isEndValid
+        ? parse(formattedEndValue, mask, (valueExists && value?.[1]) || now)
+        : null;
+      if (start && end && isAfter(end, start)) {
+        onChange?.([start, end]);
+      }
+    },
+    [onChange, value]
+  );
+
+  const refs = React.useMemo(
+    () => [
+      daysStartRef,
+      monthsStartRef,
+      yearsStartRef,
+      daysEndRef,
+      monthsEndRef,
+      yearsEndRef,
+    ],
+    [
+      daysStartRef,
+      monthsStartRef,
+      yearsStartRef,
+      daysEndRef,
+      monthsEndRef,
+      yearsEndRef,
+    ]
+  );
+
+  const {
+    rootRef,
+    calendarRef,
+    open,
+    openCalendar,
+    closeCalendar,
+    internalValue,
+    handleKeyDown,
+    setFocusedElement,
+    handleFieldEnter,
+    clear,
+    removeFocusFromField,
+  } = useDateInput({
+    maxElement: 5,
+    refs,
+    autoFocus,
+    disabled,
+    elementsConfig,
+    onChange,
+    onInternalValueChange,
+    getInternalValue,
+    value,
+  });
+
+  const { sizeY } = useAdaptivity();
+
+  const onCalendarChange = React.useCallback(
+    (newValue?: Array<Date | null> | undefined) => {
+      onChange?.(newValue);
+      if (closeOnChange && newValue?.[1] && newValue[1] !== value?.[1]) {
+        removeFocusFromField();
+      }
+    },
+    [onChange, closeOnChange, value, removeFocusFromField]
+  );
+
+  return (
+    <FormField
+      vkuiClass={classNames("DateRangeInput", `DateRangeInput--sizeY-${sizeY}`)}
+      style={style}
+      className={className}
+      getRootRef={multiRef(rootRef, getRootRef)}
+      after={
+        value ? (
+          <IconButton
+            hoverMode="opacity"
+            aria-label={clearFieldAriaLabel}
+            onClick={clear}
+          >
+            <Icon16Clear />
+          </IconButton>
+        ) : (
+          <IconButton
+            hoverMode="opacity"
+            aria-label={showCalendarAriaLabel}
+            onClick={openCalendar}
+          >
+            <Icon20CalendarOutline />
+          </IconButton>
+        )
+      }
+      disabled={disabled}
+      onClick={callMultiple(handleFieldEnter, onClick)}
+      onFocus={callMultiple(handleFieldEnter, onFocus)}
+      {...props}
+    >
+      <input
+        type="hidden"
+        name={name}
+        value={
+          value
+            ? `${value[0] ? format(value[0], "dd.MM.yyyy") : ""} - ${
+                value[1] ? format(value[1], "dd.MM.yyyy") : ""
+              }`
+            : ""
+        }
+      />
+      <span vkuiClass="DateInput__input" onKeyDown={handleKeyDown}>
+        <InputLike
+          length={2}
+          getRootRef={daysStartRef}
+          index={0}
+          onElementSelect={setFocusedElement}
+          value={internalValue[0]}
+          aria-label={changeStartDayAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={monthsStartRef}
+          index={1}
+          onElementSelect={setFocusedElement}
+          value={internalValue[1]}
+          aria-label={changeStartMonthAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={4}
+          getRootRef={yearsStartRef}
+          index={2}
+          onElementSelect={setFocusedElement}
+          value={internalValue[2]}
+          aria-label={changeStartYearAriaLabel}
+        />
+        <InputLikeDivider>{" — "}</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={daysEndRef}
+          index={3}
+          onElementSelect={setFocusedElement}
+          value={internalValue[3]}
+          aria-label={changeEndDayAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={2}
+          getRootRef={monthsEndRef}
+          index={4}
+          onElementSelect={setFocusedElement}
+          value={internalValue[4]}
+          aria-label={changeEndMonthAriaLabel}
+        />
+        <InputLikeDivider>.</InputLikeDivider>
+        <InputLike
+          length={4}
+          getRootRef={yearsEndRef}
+          index={5}
+          onElementSelect={setFocusedElement}
+          value={internalValue[5]}
+          aria-label={changeEndYearAriaLabel}
+        />
+      </span>
+      {open && (
+        <Popper
+          targetRef={rootRef}
+          offsetDistance={8}
+          placement={calendarPlacement}
+        >
+          <CalendarRange
+            value={value}
+            onChange={onCalendarChange}
+            disablePast={disablePast}
+            disableFuture={disableFuture}
+            shouldDisableDate={shouldDisableDate}
+            onClose={closeCalendar}
+            getRootRef={calendarRef}
+            disablePickers={disablePickers}
+            prevMonthAriaLabel={prevMonthAriaLabel}
+            nextMonthAriaLabel={nextMonthAriaLabel}
+            changeMonthAriaLabel={changeMonthAriaLabel}
+            changeYearAriaLabel={changeYearAriaLabel}
+            changeDayAriaLabel={changeDayAriaLabel}
+          />
+        </Popper>
+      )}
+    </FormField>
+  );
+};

package/src/components/DateRangeInput/Readme.md

@@ -0,0 +1,96 @@
+Компонент выбора даты.
+
+> ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
+
+```jsx { "props": { "layout": false, "iframe": false } }
+import { format, addDays } from "date-fns";
+
+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 [closeOnChange, setCloseOnChange] = useState(true);
+  const [locale, setLocale] = useState("ru");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <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={closeOnChange}
+            onChange={(e) => setCloseOnChange(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>
+          <div style={{ display: "flex" }}>
+            <LocaleProviderContext.Provider value={locale}>
+              <DateRangeInput
+                value={value}
+                onChange={setValue}
+                disablePast={disablePast}
+                disableFuture={disableFuture}
+                closeOnChange={closeOnChange}
+                disablePickers={disablePickers}
+              />
+            </LocaleProviderContext.Provider>
+          </div>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```

package/src/components/Div/Div.css

@@ -1,14 +1,7 @@
 .Div {
+  padding: 12px 16px;
 }
 
 .Div--ios {
   padding: 12px;
 }
-
-.Div--android {
-  padding: 12px 16px;
-}
-
-.Div--vkcom {
-  padding: 12px 16px;
-}

package/src/components/Div/Div.tsx

@@ -8,11 +8,11 @@ export interface DivProps
   extends React.HTMLAttributes<HTMLDivElement>,
     HasRootRef<HTMLDivElement> {}
 
-export const Div: React.FunctionComponent<DivProps> = ({
+export const Div: React.FC<DivProps> = ({
   children,
   getRootRef,
   ...restProps
-}: DivProps) => {
+}) => {
   const platform = usePlatform();
   return (
     <div
@@ -24,6 +24,3 @@ export const Div: React.FunctionComponent<DivProps> = ({
     </div>
   );
 };
-
-// eslint-disable-next-line import/no-default-export
-export default Div;

package/src/components/Footer/Footer.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { HasComponent } from "../../types";
-import Caption from "../Typography/Caption/Caption";
+import { Caption } from "../Typography/Caption/Caption";
 import "./Footer.css";
 
 export type FooterProps = React.AllHTMLAttributes<HTMLElement> & HasComponent;
@@ -10,13 +10,7 @@ export const Footer: React.FC<FooterProps> = ({
   ...restProps
 }: FooterProps) => {
   return (
-    <Caption
-      Component="footer"
-      {...restProps}
-      level="1"
-      weight="regular"
-      vkuiClass="Footer"
-    >
+    <Caption Component="footer" {...restProps} vkuiClass="Footer">
       {children}
     </Caption>
   );

package/src/components/Footer/Readme.md

@@ -17,7 +17,7 @@
         </Cell>
       </List>
     </Group>
-    <Footer>3 cообщества</Footer>
+    <Footer>3 сообщества</Footer>
   </Panel>
 </View>
 ```

package/src/components/FormField/FormField.css

@@ -117,3 +117,36 @@
 .ModalCardBase__subheader + .FormField {
   margin-top: 16px;
 }
+
+/**
+ * Select
+ */
+
+.Select--mimicry-plain .FormField__after,
+.Select--mimicry-plain .FormField--sizeY-compact .FormField__after {
+  justify-content: flex-start;
+  min-width: 0;
+  height: auto;
+}
+
+.CustomSelect__open.Select--mimicry:focus .FormField__border {
+  border-color: var(--field_border);
+}
+
+.CustomSelect__open:not(.CustomSelect__open--popupDirectionTop):not(.CustomSelect__open--not-adjacent)
+  .FormField__border {
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.CustomSelect__open.CustomSelect__open--popupDirectionTop:not(.CustomSelect__open--not-adjacent)
+  .FormField__border {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.CustomSelect__open.Select--mimicry-plain.Select--mimicry:focus
+  .FormField__border,
+.FormField:not(.FormField--disabled) .FormField__border--hover {
+  background-color: var(--vkui--color_background);
+}