@vkontakte/vkui 4.27.1 → 4.28.1

package/src/components/ButtonGroup/Readme.md

@@ -0,0 +1,311 @@
+Группирует компонент [Button](#!/Button). Позволяет вкладывать внутрь себя же.
+
+## Что следует знать?
+
+1. [ButtonGroup](#!/ButtonGroup) не отвечает за параметры [Button](#!/Button) и вложенных [ButtonGroup](#!/ButtonGroup).
+2. Исходя из п. 1, параметр `stretched` растягивает тот [ButtonGroup](#!/ButtonGroup), который имеет это св-во. Для компонента [Button](#!/Button) и вложенных [ButtonGroup](#!/ButtonGroup) его следует определять самостоятельно, где это необходимо.
+
+```jsx { "props": { "layout": false, "iframe": false } }
+const ButtonGroupPropsForm = ({ caption, defaultProps, onChange }) => {
+  const [{ mode, gap }, setProps] = React.useState(() => defaultProps);
+
+  const handleChange = React.useCallback(
+    (key, value) => {
+      setProps((prevState) => {
+        const newState = { ...prevState, [key]: value };
+        onChange(newState);
+        return newState;
+      });
+    },
+    [onChange]
+  );
+
+  return (
+    <React.Fragment>
+      <FormItem top="mode">
+        <Select
+          value={mode}
+          onChange={(e) => handleChange("mode", e.target.value)}
+          options={[
+            { label: "vertical", value: "vertical" },
+            { label: "horizontal", value: "horizontal" },
+          ]}
+        />
+      </FormItem>
+      <FormItem top="gap">
+        <Select
+          value={gap}
+          onChange={(e) => handleChange("gap", e.target.value)}
+          options={[
+            { label: "none", value: "none" },
+            { label: "space", value: "space" },
+            { label: "s", value: "s" },
+            { label: "m", value: "m" },
+          ]}
+        />
+      </FormItem>
+      <Checkbox onChange={(e) => handleChange("stretched", e.target.checked)}>
+        stretched
+      </Checkbox>
+      {caption && (
+        <FormItem>
+          <Caption level="1">({caption})</Caption>
+        </FormItem>
+      )}
+    </React.Fragment>
+  );
+};
+
+const ExampleUseCases = () => {
+  return (
+    <React.Fragment>
+      <Div>
+        <Title level="3">Примеры использования</Title>
+      </Div>
+      <Div>
+        <ButtonGroup mode="vertical" gap="m" style={{ minWidth: 328 }}>
+          <Button size="l" appearance="accent" stretched>
+            Разрешить
+          </Button>
+          <Button size="l" appearance="accent" stretched>
+            Завершить
+          </Button>
+          <ButtonGroup mode="horizontal" gap="m" stretched>
+            <Button size="l" appearance="negative" stretched>
+              Не сейчас
+            </Button>
+            <Button size="l" appearance="positive" stretched>
+              Продолжить
+            </Button>
+          </ButtonGroup>
+        </ButtonGroup>
+      </Div>
+      <br />
+      <Div>
+        <ButtonGroup mode="vertical" gap="m" style={{ minWidth: 328 }}>
+          <Button size="l" appearance="accent" stretched>
+            Разрешить
+          </Button>
+          <Button size="l" appearance="accent" mode="secondary" stretched>
+            Завершить
+          </Button>
+          <Button size="l" appearance="accent" mode="tertiary" stretched>
+            Не сейчас
+          </Button>
+        </ButtonGroup>
+      </Div>
+      <br />
+      <Div>
+        <ButtonGroup mode="horizontal" gap="space" stretched>
+          <Button
+            size="l"
+            appearance="accent"
+            mode="tertiary"
+            before={<Icon24Attach />}
+          >
+            Прикрепить файл
+          </Button>
+          <Button
+            size="l"
+            appearance="accent"
+            mode="tertiary"
+            before={<Icon20AddCircle />}
+            after={<Icon16ArrowTriangleDown />}
+          >
+            Создать
+          </Button>
+          <Button
+            size="l"
+            appearance="accent"
+            mode="tertiary"
+            before={<Icon24Send />}
+          >
+            Отправить
+          </Button>
+        </ButtonGroup>
+      </Div>
+    </React.Fragment>
+  );
+};
+
+const buttonText = "Button";
+const stretchedButtonText = "Button (stretched)";
+
+const ExampleBase = () => {
+  const [props, setProps] = useState({
+    mode: "horizontal",
+    gap: "s",
+    stretched: false,
+  });
+
+  return (
+    <React.Fragment>
+      <Div>
+        <Title level="3">Пример без вложенного ButtonGroup</Title>
+      </Div>
+      <ButtonGroupPropsForm defaultProps={props} onChange={setProps} />
+      <Div>
+        <ButtonGroup {...props}>
+          <Button size="l" appearance="accent">
+            {buttonText}
+          </Button>
+          <Button size="l" appearance="accent" stretched>
+            {stretchedButtonText}
+          </Button>
+          <Button size="l" appearance="accent" before={<Icon24Add />} />
+          <Button
+            size="l"
+            appearance="accent"
+            before={<Icon24Add />}
+            stretched
+          />
+        </ButtonGroup>
+      </Div>
+    </React.Fragment>
+  );
+};
+
+const buttonGroupHighlightStyles = {
+  border: "2px dotted tomato",
+};
+
+const ExampleNested = () => {
+  const [props, setProps] = useState({
+    mode: "vertical",
+    gap: "s",
+    stretched: false,
+  });
+
+  return (
+    <React.Fragment>
+      <Div>
+        <Title level="3">Пример с вложенным ButtonGroup</Title>
+      </Div>
+      <ButtonGroupPropsForm
+        caption="параметры передаются корневому элементу"
+        defaultProps={props}
+        onChange={setProps}
+      />
+      <Div>
+        <ButtonGroup {...props}>
+          <ButtonGroup
+            mode="horizontal"
+            gap="m"
+            stretched
+            style={buttonGroupHighlightStyles}
+          >
+            <Button size="l" appearance="accent" stretched>
+              {stretchedButtonText}
+            </Button>
+            <Button size="l" appearance="accent" before={<Icon24Add />} />
+          </ButtonGroup>
+
+          <ButtonGroup
+            mode="horizontal"
+            gap="m"
+            stretched
+            style={buttonGroupHighlightStyles}
+          >
+            <Button size="l" appearance="accent">
+              {buttonText}
+            </Button>
+            <Button size="l" appearance="accent" before={<Icon24Add />} />
+          </ButtonGroup>
+
+          <ButtonGroup
+            mode="horizontal"
+            gap="m"
+            stretched={false}
+            style={buttonGroupHighlightStyles}
+          >
+            <Button size="l" appearance="accent">
+              {buttonText}
+            </Button>
+            <Button size="l" appearance="accent" before={<Icon24Add />} />
+          </ButtonGroup>
+
+          <ButtonGroup
+            mode="horizontal"
+            gap="m"
+            stretched
+            style={buttonGroupHighlightStyles}
+          >
+            <Button size="l" appearance="accent">
+              {buttonText}
+            </Button>
+            <Button size="l" appearance="accent" stretched>
+              {stretchedButtonText}
+            </Button>
+            <Button size="l" appearance="accent">
+              {buttonText}
+            </Button>
+          </ButtonGroup>
+          <ButtonGroup
+            mode="vertical"
+            gap="m"
+            stretched={false}
+            style={buttonGroupHighlightStyles}
+          >
+            <Button size="l" appearance="accent" stretched>
+              {stretchedButtonText}
+            </Button>
+            <Button
+              size="l"
+              appearance="accent"
+              before={<Icon24Add />}
+              stretched
+            />
+            <ButtonGroup
+              mode="horizontal"
+              stretched
+              style={buttonGroupHighlightStyles}
+            >
+              <Button size="l" appearance="accent" before={<Icon24Add />} />
+              <Button size="l" appearance="accent" stretched>
+                {stretchedButtonText}
+              </Button>
+            </ButtonGroup>
+          </ButtonGroup>
+        </ButtonGroup>
+      </Div>
+    </React.Fragment>
+  );
+};
+
+const containerStyles = {
+  display: "flex",
+  flexDirection: "column",
+  justifyContent: "center",
+  width: "100%",
+};
+
+const Example = () => {
+  const [sizeY, setSizeY] = useState("compact");
+
+  return (
+    <div style={{ display: "flex", flexDirection: "row-reverse" }}>
+      <AdaptivityProvider sizeY={sizeY}>
+        <div style={containerStyles}>
+          <ExampleUseCases />
+          <ExampleBase />
+          <ExampleNested />
+        </div>
+      </AdaptivityProvider>
+      <div style={{ minWidth: 200 }}>
+        <FormItem top="sizeY">
+          <Select
+            value={sizeY}
+            onChange={(e) => setSizeY(e.target.value)}
+            options={[
+              { label: "compact", value: "compact" },
+              { label: "regular", value: "regular" },
+            ]}
+          />
+        </FormItem>
+      </div>
+    </div>
+  );
+};
+
+<Example />;
+```

package/src/components/Calendar/Calendar.css

@@ -0,0 +1,31 @@
+.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 -12px;
+  padding: 12px 12px 0 12px;
+}
+
+.Calendar__header {
+  margin-bottom: 4px;
+  z-index: 1;
+}
+
+.Calendar--size-s {
+  width: 220px;
+  padding: 8px;
+}
+
+.Calendar--size-s .Calendar__header {
+  margin-bottom: 0;
+}

package/src/components/Calendar/Calendar.tsx

@@ -0,0 +1,184 @@
+import * as React from "react";
+import { isSameMonth, isSameDay } from "date-fns";
+import {
+  CalendarHeader,
+  CalendarHeaderProps,
+} from "../CalendarHeader/CalendarHeader";
+import { CalendarDays } from "../CalendarDays/CalendarDays";
+import { CalendarTime, CalendarTimeProps } from "../CalendarTime/CalendarTime";
+import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import {
+  navigateDate,
+  setTimeEqual,
+  isFirstDay,
+  isLastDay,
+} from "../../lib/calendar";
+import { useCalendar } from "../../hooks/useCalendar";
+import { HasRootRef } from "../../types";
+import { classNames } from "../../lib/classNames";
+import { warnOnce } from "../../lib/warnOnce";
+import "./Calendar.css";
+
+export interface CalendarProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange">,
+    Pick<CalendarTimeProps, "changeHoursAriaLabel" | "changeMinutesAriaLabel">,
+    Pick<
+      CalendarHeaderProps,
+      | "prevMonthAriaLabel"
+      | "nextMonthAriaLabel"
+      | "changeMonthAriaLabel"
+      | "changeYearAriaLabel"
+    >,
+    HasRootRef<HTMLDivElement> {
+  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;
+}
+
+const warn = warnOnce("Calendar");
+
+export const Calendar: React.FC<CalendarProps> = ({
+  value,
+  onChange,
+  disablePast,
+  disableFuture,
+  shouldDisableDate,
+  onClose,
+  enableTime = false,
+  doneButtonText,
+  weekStartsOn = 1,
+  getRootRef,
+  disablePickers,
+  changeHoursAriaLabel,
+  changeMinutesAriaLabel,
+  prevMonthAriaLabel,
+  nextMonthAriaLabel,
+  changeMonthAriaLabel,
+  changeYearAriaLabel,
+  showNeighboringMonth,
+  changeDayAriaLabel = "Изменить день",
+  size = "m",
+  ...props
+}) => {
+  const {
+    viewDate,
+    setViewDate,
+    setPrevMonth,
+    setNextMonth,
+    focusedDay,
+    setFocusedDay,
+    isDayFocused,
+    isDayDisabled,
+    resetSelectedDay,
+  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+
+  useIsomorphicLayoutEffect(() => {
+    if (value) {
+      setViewDate(value);
+    }
+  }, [value]);
+
+  if (
+    process.env.NODE_ENV === "development" &&
+    !disablePickers &&
+    size === "s"
+  ) {
+    warn(
+      "Нельзя включить селекты выбора месяца/года если размер календаря 's'"
+    );
+  }
+
+  if (process.env.NODE_ENV === "development" && enableTime && size === "s") {
+    warn("Нельзя включить выбор времени если размер календаря 's'");
+  }
+
+  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 (
+    <div
+      {...props}
+      ref={getRootRef}
+      vkuiClass={classNames("Calendar", `Calendar--size-${size}`)}
+    >
+      <CalendarHeader
+        viewDate={viewDate}
+        onChange={setViewDate}
+        onNextMonth={setNextMonth}
+        onPrevMonth={setPrevMonth}
+        disablePickers={disablePickers || size === "s"}
+        vkuiClass="Calendar__header"
+        prevMonthAriaLabel={prevMonthAriaLabel}
+        nextMonthAriaLabel={nextMonthAriaLabel}
+        changeMonthAriaLabel={changeMonthAriaLabel}
+        changeYearAriaLabel={changeYearAriaLabel}
+      />
+      <CalendarDays
+        viewDate={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}
+      />
+      {enableTime && value && size !== "s" && (
+        <div vkuiClass="Calendar__time">
+          <CalendarTime
+            value={value}
+            onChange={onChange}
+            onClose={onClose}
+            doneButtonText={doneButtonText}
+            changeHoursAriaLabel={changeHoursAriaLabel}
+            changeMinutesAriaLabel={changeMinutesAriaLabel}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

package/src/components/Calendar/Readme.md

@@ -0,0 +1,124 @@
+Компонент выбора даты.
+
+```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 [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
+  const [locale, setLocale] = useState("ru");
+  const [size, setSize] = useState("m");
+
+  return (
+    <FormLayout>
+      <FormLayoutGroup mode="vertical">
+        <FormItem top="Выбранная дата">
+          {format(value, "yyyy-MM-dd HH:mm:ss")}
+        </FormItem>
+        <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={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 top="Размер">
+          <Select
+            style={{ width: 100 }}
+            value={size}
+            onChange={(e) => setSize(e.target.value)}
+            options={[
+              {
+                label: "s",
+                value: "s",
+              },
+              {
+                label: "m",
+                value: "m",
+              },
+            ]}
+          />
+        </FormItem>
+        <FormItem>
+          <LocaleProviderContext.Provider value={locale}>
+            <Calendar
+              value={value}
+              onChange={setValue}
+              enableTime={enableTime}
+              disablePast={disablePast}
+              disableFuture={disableFuture}
+              disablePickers={disablePickers}
+              showNeighboringMonth={showNeighboringMonth}
+              size={size}
+            />
+          </LocaleProviderContext.Provider>
+        </FormItem>
+      </FormLayoutGroup>
+    </FormLayout>
+  );
+};
+
+<Example />;
+```