@vkontakte/vkui 4.29.1 → 4.30.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vkontakte/vkui",
-  "version": "4.29.1",
+  "version": "4.30.0",
   "main": "dist/cjs/index.js",
   "module": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Calendar/Calendar.tsx

@@ -28,6 +28,8 @@ export interface CalendarProps
       | "nextMonthAriaLabel"
       | "changeMonthAriaLabel"
       | "changeYearAriaLabel"
+      | "onNextMonth"
+      | "onPrevMonth"
     >,
     HasRootRef<HTMLDivElement> {
   value?: Date;
@@ -43,6 +45,15 @@ export interface CalendarProps
   onChange?(value?: Date): void;
   shouldDisableDate?(value: Date): boolean;
   onClose?(): void;
+  /**
+   * Дата отображаемого месяца.
+   * При использовании обновление даты должно происходить вне компонента.
+   */
+  viewDate?: Date;
+  /**
+   * Изменение даты в шапке календаря.
+   */
+  onHeaderChange?(value: Date): void;
 }
 
 const warn = warnOnce("Calendar");
@@ -68,6 +79,10 @@ export const Calendar: React.FC<CalendarProps> = ({
   showNeighboringMonth,
   changeDayAriaLabel = "Изменить день",
   size = "m",
+  viewDate: externalViewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
   ...props
 }) => {
   const {
@@ -80,7 +95,15 @@ export const Calendar: React.FC<CalendarProps> = ({
     isDayFocused,
     isDayDisabled,
     resetSelectedDay,
-  } = useCalendar({ value, disableFuture, disablePast, shouldDisableDate });
+  } = useCalendar({
+    value,
+    disableFuture,
+    disablePast,
+    shouldDisableDate,
+    onHeaderChange,
+    onNextMonth,
+    onPrevMonth,
+  });
 
   useIsomorphicLayoutEffect(() => {
     if (value) {
@@ -140,7 +163,7 @@ export const Calendar: React.FC<CalendarProps> = ({
       vkuiClass={classNames("Calendar", `Calendar--size-${size}`)}
     >
       <CalendarHeader
-        viewDate={viewDate}
+        viewDate={externalViewDate || viewDate}
         onChange={setViewDate}
         onNextMonth={setNextMonth}
         onPrevMonth={setPrevMonth}
@@ -152,7 +175,7 @@ export const Calendar: React.FC<CalendarProps> = ({
         changeYearAriaLabel={changeYearAriaLabel}
       />
       <CalendarDays
-        viewDate={viewDate}
+        viewDate={externalViewDate || viewDate}
         value={value}
         weekStartsOn={weekStartsOn}
         isDayFocused={isDayFocused}

package/src/components/CalendarHeader/CalendarHeader.tsx

@@ -30,7 +30,13 @@ export interface CalendarHeaderProps
   changeMonthAriaLabel?: string;
   changeYearAriaLabel?: string;
   onChange(viewDate: Date): void;
+  /**
+   * Нажатие на кнопку переключения на следующий месяц.
+   */
   onNextMonth?(): void;
+  /**
+   * Нажатие на кнопку переключения на предыдущий месяц.
+   */
   onPrevMonth?(): void;
 }
 

package/src/components/DateInput/DateInput.tsx

@@ -40,6 +40,10 @@ export interface DateInputProps
       | "changeDayAriaLabel"
       | "showNeighboringMonth"
       | "size"
+      | "viewDate"
+      | "onHeaderChange"
+      | "onNextMonth"
+      | "onPrevMonth"
     >,
     HasRootRef<HTMLDivElement> {
   calendarPlacement?: Placement;
@@ -118,6 +122,10 @@ export const DateInput: React.FC<DateInputProps> = ({
   changeMinutesAriaLabel = "Изменить минуту",
   clearFieldAriaLabel = "Очистить поле",
   showCalendarAriaLabel = "Показать календарь",
+  viewDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
   ...props
 }) => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -309,6 +317,10 @@ export const DateInput: React.FC<DateInputProps> = ({
             changeDayAriaLabel={changeDayAriaLabel}
             showNeighboringMonth={showNeighboringMonth}
             size={size}
+            viewDate={viewDate}
+            onHeaderChange={onCalendarChange}
+            onNextMonth={onNextMonth}
+            onPrevMonth={onPrevMonth}
           />
         </Popper>
       )}

package/src/components/PanelHeader/PanelHeader.css

@@ -66,10 +66,6 @@
   min-width: 90px;
 }
 
-.PanelHeader--sizeX-compact .PanelHeader__separator {
-  padding-top: 4px;
-}
-
 /**
  * iOS
  */
@@ -234,13 +230,25 @@
   top: calc(var(--panelheader_height_vkcom) + var(--safe-area-inset-top));
 }
 
-.PanelHeader--vkcom.PanelHeader--sep .PanelHeader__in {
+/* TODO: v5.0.0 новая адаптивность */
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)
+  .PanelHeader__in {
   border-top-left-radius: 8px;
   border-top-right-radius: 8px;
   box-shadow: 0 0 0 var(--thin-border) var(--input_border) inset;
   border-bottom: none;
 }
 
+.PanelHeader--vkcom.PanelHeader--sizeX-regular:not(.ModalPageHeader__in)::after {
+  position: absolute;
+  left: var(--thin-border);
+  right: var(--thin-border);
+  bottom: 0;
+  height: var(--thin-border);
+  background-color: var(--header_background);
+  content: "";
+}
+
 .PanelHeader--vkcom .PanelHeader__content {
   text-align: center;
 }

package/src/components/PanelHeader/PanelHeader.tsx

@@ -120,10 +120,10 @@ const PanelHeader: React.FC<PanelHeaderProps> = (props: PanelHeaderProps) => {
       ) : (
         <PanelHeaderIn {...props} />
       )}
-      {separator && visor && platform !== VKCOM && (
+      {separator && visor && (
         <Separator
-          vkuiClass="PanelHeader__separator"
-          expanded={sizeX === SizeType.REGULAR}
+          expanded={sizeX === SizeType.REGULAR && platform !== VKCOM}
+          wide={platform === VKCOM}
         />
       )}
     </div>

package/src/components/Switch/Readme.md

@@ -5,51 +5,27 @@
   <Panel id="switch">
     <PanelHeader>Switch</PanelHeader>
     <Group>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch aria-label="Комментарии к записям" />}
-      >
+      <SimpleCell Component="label" after={<Switch />}>
         Комментарии к записям
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch defaultChecked aria-label="Ссылки" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" after={<Switch defaultChecked />}>
         Ссылки
-      </Cell>
-      <Cell
-        role={null}
-        disabled
-        after={<Switch disabled aria-label="Фотоальбомы" />}
-      >
+      </SimpleCell>
+      <SimpleCell Component="label" disabled after={<Switch disabled />}>
         Фотоальбомы
-      </Cell>
+      </SimpleCell>
     </Group>
     <Group header={<Header mode="secondary">Компактный вид</Header>}>
       <AdaptivityProvider sizeY="compact">
-        <Cell
-          role={null}
-          disabled
-          after={<Switch aria-label="Комментарии к записям" />}
-        >
+        <SimpleCell Component="label" after={<Switch />}>
           Комментарии к записям
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch defaultChecked aria-label="Ссылки" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" after={<Switch defaultChecked />}>
           Ссылки
-        </Cell>
-        <Cell
-          role={null}
-          disabled
-          after={<Switch disabled aria-label="Фотоальбомы" />}
-        >
+        </SimpleCell>
+        <SimpleCell Component="label" disabled after={<Switch disabled />}>
           Фотоальбомы
-        </Cell>
+        </SimpleCell>
       </AdaptivityProvider>
     </Group>
   </Panel>

package/src/hooks/useCalendar.ts

@@ -8,8 +8,13 @@ import {
   isAfter,
   startOfDay,
 } from "../lib/date";
+import { CalendarProps } from "../components/Calendar/Calendar";
 
-export interface UseCalendarDependencies {
+export interface UseCalendarDependencies
+  extends Pick<
+    CalendarProps,
+    "onHeaderChange" | "onNextMonth" | "onPrevMonth"
+  > {
   value?: Array<Date | null> | Date;
   disablePast?: boolean;
   disableFuture?: boolean;
@@ -21,19 +26,30 @@ export function useCalendar({
   disablePast,
   disableFuture,
   shouldDisableDate,
+  onHeaderChange,
+  onNextMonth,
+  onPrevMonth,
 }: UseCalendarDependencies) {
   const [viewDate, setViewDate] = React.useState(
     (Array.isArray(value) ? value[0] : value) ?? new Date()
   );
   const [focusedDay, setFocusedDay] = React.useState<Date>();
 
-  const setPrevMonth = React.useCallback(
-    () => setViewDate(subMonths(viewDate, 1)),
-    [viewDate]
-  );
-  const setNextMonth = React.useCallback(
-    () => setViewDate(addMonths(viewDate, 1)),
-    [viewDate]
+  const setPrevMonth = React.useCallback(() => {
+    onPrevMonth?.();
+    setViewDate(subMonths(viewDate, 1));
+  }, [viewDate, onPrevMonth]);
+  const setNextMonth = React.useCallback(() => {
+    onNextMonth?.();
+    setViewDate(addMonths(viewDate, 1));
+  }, [viewDate, onNextMonth]);
+
+  const handleSetViewDate = React.useCallback(
+    (value: Date) => {
+      onHeaderChange?.(value);
+      setViewDate(value);
+    },
+    [onHeaderChange]
   );
 
   const isDayFocused = React.useCallback(
@@ -66,7 +82,7 @@ export function useCalendar({
 
   return {
     viewDate,
-    setViewDate,
+    setViewDate: handleSetViewDate,
     setPrevMonth,
     setNextMonth,
     focusedDay,