@vkontakte/vkui 4.27.2 → 4.28.0

package/src/components/CardGrid/Readme.md

@@ -1,41 +0,0 @@
-Сетка для [Card](#!/Card). Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В
-примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
-
-- `size="s"`: высота равна 92% ширины;
-- `size="m"`: высота равна 62% ширины;
-- `size="l"`: высота равна 30% ширины.
-
-```jsx
-<View activePanel="card">
-  <Panel id="card">
-    <PanelHeader>CardGrid</PanelHeader>
-    <Group description="Внутри Group">
-      <CardGrid size="s">
-        <Card>
-          <div style={{ paddingBottom: "92%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "92%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "92%" }} />
-        </Card>
-      </CardGrid>
-    </Group>
-    <CardGrid size="m">
-      <Card>
-        <div style={{ paddingBottom: "62%" }} />
-      </Card>
-      <Card>
-        <div style={{ paddingBottom: "62%" }} />
-      </Card>
-    </CardGrid>
-    <CardGrid size="l">
-      <Card>
-        <div style={{ paddingBottom: "30%" }} />
-      </Card>
-    </CardGrid>
-    <Separator expanded />
-  </Panel>
-</View>
-```

package/src/components/CardScroll/CardScroll.css

@@ -1,47 +0,0 @@
-.CardScroll__in {
-  display: flex;
-  align-items: stretch;
-}
-
-.CardScroll__gap {
-  display: block;
-  flex-shrink: 0;
-}
-
-.CardScroll + .CardScroll {
-  margin-top: 16px;
-}
-
-.CardScroll--withSpaces .CardScroll__gap {
-  width: var(--vkui--size_base_padding_horizontal--regular);
-}
-
-/**
- * CMP:
- * SplitCol
- */
-.SplitCol--spaced .CardScroll--withSpaces .CardScroll {
-  margin-left: -16px;
-  margin-right: -16px;
-}
-
-.SplitCol--spaced .CardScroll--withSpaces .CardScroll__gap {
-  width: 16px;
-}
-
-/**
- * CMP:
- * Group
- */
-.Group--card .CardScroll--withSpaces {
-  margin-left: -8px;
-  margin-right: -8px;
-}
-
-.Group--card .CardScroll--withSpaces:first-child {
-  padding-top: var(--vkui--size_cardgrid_padding_vertical--regular);
-}
-
-.Group--card .CardScroll--withSpaces:last-child {
-  padding-bottom: var(--vkui--size_cardgrid_padding_vertical--regular);
-}

package/src/components/CardScroll/CardScroll.tsx

@@ -1,116 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { getClassName } from "../../helpers/getClassName";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
-import HorizontalScroll, {
-  HorizontalScrollProps,
-} from "../HorizontalScroll/HorizontalScroll";
-import { useDOM } from "../../lib/dom";
-import "./CardScroll.css";
-
-export interface CardScrollProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * При `size=false` ширина `Card` будет регулироваться контентом внутри. В остальных случаях — будет явно задана в процентах.
-   */
-  size?: "s" | "m" | "l" | false;
-  showArrows?: HorizontalScrollProps["showArrows"];
-  withSpaces?: boolean;
-}
-
-export const CardScroll: React.FC<CardScrollProps> = ({
-  children,
-  size = "s",
-  showArrows = true,
-  withSpaces = true,
-  ...restProps
-}: CardScrollProps) => {
-  const platform = usePlatform();
-  const { sizeX } = useAdaptivity();
-
-  const refContainer = React.useRef<HTMLDivElement>(null);
-  const gapRef = React.useRef<HTMLDivElement>(null);
-
-  const { window } = useDOM();
-
-  function getScrollToLeft(offset: number): number {
-    if (!refContainer.current || !gapRef.current) {
-      return offset;
-    }
-    const containerWidth = refContainer.current.offsetWidth;
-    const slideIndex = (
-      Array.from(refContainer.current.children) as HTMLElement[]
-    ).findIndex(
-      (el: HTMLElement) =>
-        el.offsetLeft +
-          el.offsetWidth +
-          parseInt(window!.getComputedStyle(el).marginRight) -
-          offset >=
-        0
-    );
-
-    if (slideIndex === -1) {
-      return offset;
-    }
-
-    if (slideIndex === 0) {
-      return 0;
-    }
-
-    const slide = refContainer.current.children[slideIndex] as HTMLElement;
-
-    const scrollTo =
-      slide.offsetLeft -
-      (containerWidth - slide.offsetWidth) +
-      gapRef.current.offsetWidth;
-
-    if (scrollTo <= 2 * gapRef.current.offsetWidth) {
-      return 0;
-    }
-
-    return scrollTo;
-  }
-
-  function getScrollToRight(offset: number): number {
-    if (!refContainer.current || !gapRef.current) {
-      return offset;
-    }
-
-    const containerWidth = refContainer.current.offsetWidth;
-    const slide = Array.prototype.find.call(
-      refContainer.current.children,
-      (el: HTMLElement) =>
-        el.offsetLeft + el.offsetWidth - offset > containerWidth
-    ) as HTMLElement;
-
-    if (!slide) {
-      return offset;
-    }
-
-    return slide.offsetLeft - gapRef.current.offsetWidth;
-  }
-
-  return (
-    <div
-      {...restProps}
-      vkuiClass={classNames(
-        getClassName("CardScroll", platform),
-        `CardScroll--sizeX-${sizeX}`,
-        `CardScroll--${size}`,
-        { ["CardScroll--withSpaces"]: withSpaces }
-      )}
-    >
-      <HorizontalScroll
-        getScrollToLeft={getScrollToLeft}
-        getScrollToRight={getScrollToRight}
-        showArrows={showArrows}
-      >
-        <div vkuiClass="CardScroll__in" ref={refContainer}>
-          <span vkuiClass="CardScroll__gap" ref={gapRef} />
-          {children}
-          <span vkuiClass="CardScroll__gap" />
-        </div>
-      </HorizontalScroll>
-    </div>
-  );
-};

package/src/components/CardScroll/Readme.md

@@ -1,62 +0,0 @@
-Горизонтальный скролл для [Card](#!/Card).
-
-Согласно дизайну, высота `Card` должна масштабироваться относительно её ширины. В примерах это достигается с помощью процентного `padding-bottom`. Пропорции следующие:
-
-- `size="s"`: высота равна 66% ширины;
-- `size="m"`: высота равна 42% ширины;
-- `size="l"`: высота равна 29% ширины.
-
-```jsx
-<View activePanel="card">
-  <Panel id="card">
-    <PanelHeader>CardScroll</PanelHeader>
-    <Group description="Внутри Group">
-      <CardScroll size="s">
-        <Card>
-          <div style={{ paddingBottom: "66%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "66%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "66%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "66%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "66%" }} />
-        </Card>
-        <Card>
-          <div style={{ paddingBottom: "66%" }} />
-        </Card>
-      </CardScroll>
-    </Group>
-    <CardScroll size="m">
-      <Card>
-        <div style={{ paddingBottom: "42%" }} />
-      </Card>
-      <Card>
-        <div style={{ paddingBottom: "42%" }} />
-      </Card>
-      <Card>
-        <div style={{ paddingBottom: "42%" }} />
-      </Card>
-      <Card>
-        <div style={{ paddingBottom: "42%" }} />
-      </Card>
-    </CardScroll>
-    <CardScroll size="l">
-      <Card>
-        <div style={{ paddingBottom: "29%" }} />
-      </Card>
-      <Card>
-        <div style={{ paddingBottom: "29%" }} />
-      </Card>
-      <Card>
-        <div style={{ paddingBottom: "29%" }} />
-      </Card>
-    </CardScroll>
-  </Panel>
-</View>
-```

package/src/components/Cell/Cell.css

@@ -1,56 +0,0 @@
-.List--dragging .Cell:not(.Cell--dragging) {
-  transition: transform 0.3s ease;
-  pointer-events: none;
-}
-
-.Cell--dragging {
-  background-color: var(--background_content);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.25);
-  z-index: 3;
-}
-
-.Cell--selectable.Cell--disabled {
-  opacity: 0.6;
-}
-
-.Cell__checkbox,
-.Cell__dragger {
-  position: relative;
-  flex-shrink: 0;
-  margin-right: 16px;
-}
-
-.Cell__dragger {
-  z-index: 2;
-}
-
-.Cell__content {
-  max-width: 100%;
-  min-width: 0;
-}
-
-.Cell--removable .Cell__content {
-  flex-grow: 1;
-  padding-right: 0;
-  padding-left: 0;
-}
-
-/**
- * iOS
- */
-.Cell--ios .Cell__dragger {
-  margin-right: 0;
-  margin-left: 12px;
-}
-
-.Cell--ios .Cell__checkbox {
-  margin-right: 12px;
-}
-
-/**
- * CMP:
- * FormItem
- */
-.FormItem > .Cell {
-  margin: 0 calc(-1 * var(--formitem_padding));
-}

package/src/components/Cell/Cell.tsx

@@ -1,204 +0,0 @@
-import * as React from "react";
-import { classNames } from "../../lib/classNames";
-import { noop } from "../../lib/utils";
-import { warnOnce } from "../../lib/warnOnce";
-import { getClassName } from "../../helpers/getClassName";
-import { ANDROID, IOS, VKCOM } from "../../lib/platform";
-import SimpleCell, { SimpleCellProps } from "../SimpleCell/SimpleCell";
-import { HasPlatform } from "../../types";
-import { Removable, RemovableProps } from "../Removable/Removable";
-import { usePlatform } from "../../hooks/usePlatform";
-import { useDraggable } from "./useDraggable";
-import { ListContext } from "../List/ListContext";
-import { CellDragger } from "./CellDragger/CellDragger";
-import { CellCheckbox, CellCheckboxProps } from "./CellCheckbox/CellCheckbox";
-import "./Cell.css";
-
-export interface CellProps
-  extends SimpleCellProps,
-    HasPlatform,
-    RemovableProps {
-  mode?: "removable" | "selectable";
-  /**
-   * В режиме перетаскивания ячейка перестает быть кликабельной, то есть при клике переданный onClick вызываться не будет
-   */
-  draggable?: boolean;
-  /**
-   * @deprecated Будет удалено в 5.0.0. Используйте mode="removable"
-   */
-  removable?: boolean;
-  /**
-   * Имя для input в режиме selectable
-   */
-  name?: string;
-  /**
-   * @deprecated Будет удалено в 5.0.0. Используйте mode="selectable"
-   */
-  selectable?: boolean;
-  /**
-   * В режиме selectable реагирует на входящие значения пропса cheсked, как зависящий напрямую от входящего значения
-   */
-  checked?: boolean;
-  /**
-   * В режиме selectable реагирует на входящие значения пропса defaultChecked как неконтролируемый компонент
-   */
-  defaultChecked?: boolean;
-  /**
-   * Коллбэк срабатывает при завершении перетаскивания.
-   * **Важно:** режим перетаскивания не меняет порядок ячеек в DOM. В коллбэке есть объект с полями `from` и `to`.
-   * Эти числа нужны для того, чтобы разработчик понимал, с какого индекса на какой произошел переход. В песочнице
-   * есть рабочий пример с обработкой этих чисел и перерисовкой списка.
-   */
-  onDragFinish?: ({ from, to }: { from: number; to: number }) => void;
-  /**
-   * aria-label для кнопки перетаскивания ячейки
-   */
-  draggerLabel?: string;
-}
-
-const warn = warnOnce("Cell");
-export const Cell: React.FC<CellProps> = ({
-  mode: propsMode, // TODO: убрать переименование в propsMode перед 5.0.0
-  onRemove = noop,
-  removePlaceholder = "Удалить",
-  onDragFinish,
-  before,
-  after,
-  disabled,
-  removable: deprecatedRemovable, // TODO: удалить перед 5.0.0
-  draggable,
-  selectable: deprecatedSelectable, // TODO: удалить перед 5.0.0
-  Component,
-  onChange,
-  name,
-  value,
-  checked,
-  defaultChecked,
-  getRootRef,
-  draggerLabel = "Перенести ячейку",
-  className,
-  style,
-  ...restProps
-}: CellProps) => {
-  // TODO: удалить перед 5.0.0
-  let mode: CellProps["mode"] = propsMode;
-
-  if (!propsMode && (deprecatedSelectable || deprecatedRemovable)) {
-    mode = deprecatedSelectable ? "selectable" : "removable";
-
-    if (process.env.NODE_ENV === "development") {
-      deprecatedSelectable &&
-        warn(
-          'Свойство selectable устарелo и будет удалено в 5.0.0. Используйте mode="selectable".'
-        );
-      deprecatedRemovable &&
-        warn(
-          'Свойство removable устарелo и будет удалено в 5.0.0. Используйте mode="removable".'
-        );
-    }
-  }
-  // /end TODO
-
-  const selectable = mode === "selectable";
-  const removable = mode === "removable";
-
-  const platform = usePlatform();
-
-  const { dragging, rootElRef, ...draggableProps } = useDraggable({
-    onDragFinish,
-  });
-
-  const { toggleDrag } = React.useContext(ListContext);
-  React.useEffect(() => {
-    if (dragging) {
-      toggleDrag(true);
-      return () => toggleDrag(false);
-    }
-    return undefined;
-  }, [dragging, toggleDrag]);
-
-  let dragger;
-  if (draggable) {
-    dragger = (
-      <CellDragger
-        vkuiClass="Cell__dragger"
-        aria-label={draggerLabel}
-        {...draggableProps}
-      />
-    );
-  }
-
-  let checkbox;
-  if (selectable) {
-    const checkboxProps: CellCheckboxProps = {
-      name,
-      value,
-      onChange,
-      defaultChecked,
-      checked,
-      disabled,
-    };
-    checkbox = <CellCheckbox vkuiClass="Cell__checkbox" {...checkboxProps} />;
-  }
-
-  const simpleCellDisabled =
-    (draggable && !selectable) || removable || disabled;
-  const hasActive = !simpleCellDisabled && !dragging;
-
-  const cellClasses = classNames(getClassName("Cell", platform), {
-    "Cell--dragging": dragging,
-    "Cell--removable": removable,
-    "Cell--selectable": selectable,
-    "Cell--disabled": disabled,
-  });
-
-  const simpleCell = (
-    <SimpleCell
-      hasActive={hasActive}
-      hasHover={hasActive}
-      {...restProps}
-      vkuiClass="Cell__content"
-      disabled={simpleCellDisabled}
-      Component={selectable ? "label" : Component}
-      before={
-        <React.Fragment>
-          {draggable && (platform === ANDROID || platform === VKCOM) && dragger}
-          {selectable && checkbox}
-          {before}
-        </React.Fragment>
-      }
-      after={
-        <React.Fragment>
-          {draggable && platform === IOS && dragger}
-          {after}
-        </React.Fragment>
-      }
-    />
-  );
-
-  if (removable) {
-    return (
-      <Removable
-        vkuiClass={cellClasses}
-        className={className}
-        style={style}
-        getRootRef={rootElRef}
-        removePlaceholder={removePlaceholder}
-        onRemove={(e) => onRemove(e, rootElRef?.current)}
-      >
-        {simpleCell}
-      </Removable>
-    );
-  }
-
-  return (
-    <div
-      vkuiClass={cellClasses}
-      className={className}
-      style={style}
-      ref={rootElRef}
-    >
-      {simpleCell}
-    </div>
-  );
-};

package/src/components/Cell/CellCheckbox/CellCheckbox.css

@@ -1,17 +0,0 @@
-.CellCheckbox__icon {
-  color: var(--icon_tertiary);
-}
-
-.CellCheckbox__input,
-.CellCheckbox__icon {
-  display: none;
-}
-
-.CellCheckbox__icon--on {
-  color: var(--accent);
-}
-
-.CellCheckbox__input:not(:checked) ~ .CellCheckbox__icon--off,
-.CellCheckbox__input:checked ~ .CellCheckbox__icon--on {
-  display: block;
-}

package/src/components/Cell/CellCheckbox/CellCheckbox.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-import {
-  Icon24CheckBoxOff,
-  Icon24CheckBoxOn,
-  Icon24CheckCircleOff,
-  Icon24CheckCircleOn,
-} from "@vkontakte/icons";
-import { getClassName } from "../../../helpers/getClassName";
-import { usePlatform } from "../../../hooks/usePlatform";
-import { classNames } from "../../../lib/classNames";
-import { ANDROID } from "../../../lib/platform";
-import { CellProps } from "../Cell";
-import "./CellCheckbox.css";
-
-export type CellCheckboxProps = Pick<CellProps, "defaultChecked" | "checked"> &
-  React.InputHTMLAttributes<HTMLInputElement>;
-
-export const CellCheckbox: React.FC<CellCheckboxProps> = ({
-  className,
-  style,
-  ...restProps
-}) => {
-  const platform = usePlatform();
-
-  const IconOff =
-    platform === ANDROID ? Icon24CheckBoxOff : Icon24CheckCircleOff;
-
-  const IconOn = platform === ANDROID ? Icon24CheckBoxOn : Icon24CheckCircleOn;
-
-  return (
-    <div
-      vkuiClass={classNames(getClassName("CellCheckbox", platform))}
-      className={className}
-      style={style}
-    >
-      <input vkuiClass="CellCheckbox__input" type="checkbox" {...restProps} />
-      <IconOff vkuiClass="CellCheckbox__icon CellCheckbox__icon--off" />
-      <IconOn vkuiClass="CellCheckbox__icon CellCheckbox__icon--on" />
-    </div>
-  );
-};

package/src/components/Cell/CellDragger/CellDragger.css

@@ -1,4 +0,0 @@
-.CellDragger {
-  cursor: ns-resize;
-  color: var(--icon_secondary);
-}

package/src/components/Cell/CellDragger/CellDragger.tsx

@@ -1,37 +0,0 @@
-import * as React from "react";
-import { Icon24Reorder, Icon24ReorderIos } from "@vkontakte/icons";
-import { getClassName } from "../../../helpers/getClassName";
-import { usePlatform } from "../../../hooks/usePlatform";
-import { classNames } from "../../../lib/classNames";
-import { IOS } from "../../../lib/platform";
-import { Touch } from "../../Touch/Touch";
-import { DraggableProps } from "../useDraggable";
-import "./CellDragger.css";
-
-type CellDraggerProps = DraggableProps & React.HTMLAttributes<HTMLElement>;
-
-export const CellDragger: React.FC<CellDraggerProps> = ({
-  onDragStart,
-  onDragMove,
-  onDragEnd,
-  ...restProps
-}) => {
-  const platform = usePlatform();
-
-  const onClick = React.useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-  }, []);
-
-  return (
-    <Touch
-      vkuiClass={classNames(getClassName("CellDragger", platform))}
-      onStart={onDragStart}
-      onMoveY={onDragMove}
-      onEnd={onDragEnd}
-      onClick={onClick}
-      {...restProps}
-    >
-      {platform === IOS ? <Icon24ReorderIos /> : <Icon24Reorder />}
-    </Touch>
-  );
-};