@vkontakte/vkui 4.35.3 → 4.36.0

package/src/components/AppRoot/AppRoot.css

@@ -1,3 +1,4 @@
+/* stylelint-disable vkui/atomic */
 .vkui__root--embedded {
   transform: translate3d(0, 0, 0);
   overflow-x: hidden;
@@ -12,7 +13,7 @@
 }
 
 .vkui--sizeX-regular {
-  background: var(--background_page);
+  background: var(--background_page, var(--vkui--color_background));
 }
 
 .AppRoot--no-mouse {

package/src/components/AppRoot/AppRoot.tsx

@@ -227,10 +227,7 @@ export const AppRoot = withAdaptivity<AppRootProps>(
     ) : (
       <div
         ref={rootRef}
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames("AppRoot", {
-          "AppRoot--no-mouse": !hasMouse,
-        })}
+        vkuiClass={classNames("AppRoot", !hasMouse && "AppRoot--no-mouse")}
         {...props}
       >
         {content}

package/src/components/Avatar/Avatar.tsx

@@ -96,15 +96,12 @@ export const Avatar = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         "Avatar",
         `Avatar--type-${mode}`,
         `Avatar--sz-${size}`,
-        {
-          "Avatar--shadow": shadow,
-          "Avatar--failed": failedImage,
-        }
+        shadow && "Avatar--shadow",
+        failedImage && "Avatar--failed"
       )}
       className={className}
       ref={getRootRef}
@@ -136,12 +133,12 @@ export const Avatar = ({
       {overlayIcon && (
         <Tappable
           Component="button"
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("Avatar__overlay", {
-            "Avatar__overlay--visible": overlayAction === "always",
-            "Avatar__overlay--light": overlayMode === "light",
-            "Avatar__overlay--dark": overlayMode === "dark",
-          })}
+          vkuiClass={classNames(
+            "Avatar__overlay",
+            overlayAction === "always" && "Avatar__overlay--visible",
+            overlayMode === "light" && "Avatar__overlay--light",
+            overlayMode === "dark" && "Avatar__overlay--dark"
+          )}
           hoverMode="Avatar__overlay--visible"
           focusVisibleMode="Avatar__overlay--focus-visible"
           hasActive={false}
@@ -152,12 +149,13 @@ export const Avatar = ({
       )}
       {badge && (
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("Avatar__badge", {
-            "Avatar__badge--large": size >= 96,
-            "Avatar__badge--shadow":
-              badge !== "online" && badge !== "online-mobile",
-          })}
+          vkuiClass={classNames(
+            "Avatar__badge",
+            size >= 96 && "Avatar__badge--large",
+            badge !== "online" &&
+              badge !== "online-mobile" &&
+              "Avatar__badge--shadow"
+          )}
         >
           {badge === "online" ? (
             <div vkuiClass="Avatar__badge-online">

package/src/components/Avatar/Readme.md

@@ -551,14 +551,14 @@
           <Avatar mode="image" src={getAvatarUrl("audio_arctic_monkeys")} />
         }
         description="Arctic Monkeys"
-        after={<Icon24MoreHorizontal fill="var(--accent)" />}
+        after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         I Wanna Be Yours
       </SimpleCell>
       <SimpleCell
         before={<Avatar mode="image" src={getAvatarUrl("audio_leto_zveri")} />}
         description="Лето (звери)"
-        after={<Icon24MoreHorizontal fill="var(--accent)" />}
+        after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         6 утра
       </SimpleCell>
@@ -567,7 +567,7 @@
           <Avatar mode="image" src={getAvatarUrl("audio_depeche_mode")} />
         }
         description="Depeche Mode"
-        after={<Icon24MoreHorizontal fill="var(--accent)" />}
+        after={<Icon24MoreHorizontal fill="var(--vkui--color_icon_accent)" />}
       >
         Enjoy the Silence
       </SimpleCell>

package/src/components/ButtonGroup/ButtonGroup.tsx

@@ -1,12 +1,11 @@
 import * as React from "react";
 import { classNames } from "../../lib/classNames";
-import type { HasRootRef, HasAlign } from "../../types";
+import type { HasRootRef, AlignType } from "../../types";
 import "./ButtonGroup.css";
 
 export interface ButtonGroupProps
   extends React.HTMLAttributes<HTMLDivElement>,
-    HasRootRef<HTMLDivElement>,
-    HasAlign {
+    HasRootRef<HTMLDivElement> {
   /**
    * Задает расположение элементов внутри группы, вертикальное или горизонтальное.
    */
@@ -21,6 +20,10 @@ export interface ButtonGroupProps
    * Note: Для потомков соответствующее поведение нужно определять самостоятельно, где это необходимо.
    */
   stretched?: boolean;
+  /**
+   * Горизонтальное выравнивание элементов внутри группы. Работает только с mode="vertical".
+   */
+  align?: AlignType;
 }
 
 /**

package/src/components/ButtonGroup/Readme.md

@@ -44,17 +44,19 @@ const ButtonGroupPropsForm = ({ caption, defaultProps, onChange }) => {
           ]}
         />
       </FormItem>
-      <FormItem top="align">
-        <Select
-          value={align}
-          onChange={(e) => handleChange("align", e.target.value)}
-          options={[
-            { label: "left", value: "left" },
-            { label: "center", value: "center" },
-            { label: "right", value: "right" },
-          ]}
-        />
-      </FormItem>
+      {mode === "vertical" && (
+        <FormItem top="align">
+          <Select
+            value={align}
+            onChange={(e) => handleChange("align", e.target.value)}
+            options={[
+              { label: "left", value: "left" },
+              { label: "center", value: "center" },
+              { label: "right", value: "right" },
+            ]}
+          />
+        </FormItem>
+      )}
       <Checkbox onChange={(e) => handleChange("stretched", e.target.checked)}>
         stretched
       </Checkbox>

package/src/components/Calendar/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора даты.
 
+- Если нужно поле ввода с выпадающим календарем, используйте [DateInput](#!/DateInput).
+- Если нужен выбор диапазона дат, используйте [CalendarRange](#!/CalendarRange).
+
 ```jsx { "props": { "layout": false, "iframe": false } }
 import { format } from "../../lib/date";
 

package/src/components/CalendarDay/CalendarDay.tsx

@@ -66,16 +66,17 @@ export const CalendarDay = React.memo(
 
     return (
       <Tappable
-        // eslint-disable-next-line vkui/no-object-expression-in-arguments
-        vkuiClass={classNames("CalendarDay", `CalendarDay--size-${size}`, {
-          "CalendarDay--today": today,
-          "CalendarDay--selected": selected && !disabled,
-          "CalendarDay--active": active && !disabled,
-          "CalendarDay--selection-start": selectionStart,
-          "CalendarDay--selection-end": selectionEnd,
-          "CalendarDay--disabled": disabled,
-          "CalendarDay--not-same-month": !sameMonth,
-        })}
+        vkuiClass={classNames(
+          "CalendarDay",
+          `CalendarDay--size-${size}`,
+          today && "CalendarDay--today",
+          selected && !disabled && "CalendarDay--selected",
+          active && !disabled && "CalendarDay--active",
+          selectionStart && "CalendarDay--selection-start",
+          selectionEnd && "CalendarDay--selection-end",
+          disabled && "CalendarDay--disabled",
+          !sameMonth && "CalendarDay--not-same-month"
+        )}
         hoverMode={active ? "CalendarDay--active-hover" : "CalendarDay--hover"}
         hasActive={false}
         onClick={onClick}
@@ -93,18 +94,18 @@ export const CalendarDay = React.memo(
         onLeave={handleLeave}
       >
         <div
-          // eslint-disable-next-line vkui/no-object-expression-in-arguments
-          vkuiClass={classNames("CalendarDay__hinted", {
-            "CalendarDay__hinted--active": hinted,
-            "CalendarDay__hinted--selection-start": hintedSelectionStart,
-            "CalendarDay__hinted--selection-end": hintedSelectionEnd,
-          })}
+          vkuiClass={classNames(
+            "CalendarDay__hinted",
+            hinted && "CalendarDay__hinted--active",
+            hintedSelectionStart && "CalendarDay__hinted--selection-start",
+            hintedSelectionEnd && "CalendarDay__hinted--selection-end"
+          )}
         >
           <div
-            // eslint-disable-next-line vkui/no-object-expression-in-arguments
-            vkuiClass={classNames("CalendarDay__inner", {
-              "CalendarDay__inner--active": active && !disabled,
-            })}
+            vkuiClass={classNames(
+              "CalendarDay__inner",
+              active && !disabled && "CalendarDay__inner--active"
+            )}
           >
             <div vkuiClass="CalendarDay__day-number">{day.getDate()}</div>
           </div>

package/src/components/CalendarRange/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора диапазона дат.
 
+- Если нужно поле ввода с выпадающим календарем, используйте [DateRangeInput](#!/DateRangeInput).
+- Если нужен выбор одной даты, используйте [Calendar](#!/Calendar).
+
 ```jsx { "props": { "layout": false, "iframe": false } }
 import { addDays, format } from "../../lib/date";
 

package/src/components/CardScroll/CardScroll.tsx

@@ -97,12 +97,11 @@ export const CardScroll = ({
   return (
     <div
       {...restProps}
-      // eslint-disable-next-line vkui/no-object-expression-in-arguments
       vkuiClass={classNames(
         getClassName("CardScroll", platform),
         `CardScroll--sizeX-${sizeX}`,
         `CardScroll--${size}`,
-        { ["CardScroll--withSpaces"]: withSpaces }
+        withSpaces && "CardScroll--withSpaces"
       )}
     >
       <HorizontalScroll

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

@@ -1,5 +1,5 @@
 .CellCheckbox__icon {
-  color: var(--icon_tertiary);
+  color: var(--icon_tertiary, var(--vkui--color_icon_tertiary));
 }
 
 .CellCheckbox__input,
@@ -8,7 +8,7 @@
 }
 
 .CellCheckbox__icon--on {
-  color: var(--accent);
+  color: var(--accent, var(--vkui--color_icon_accent));
 }
 
 .CellCheckbox__input:not(:checked) ~ .CellCheckbox__icon--off,

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

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

package/src/components/Chip/Chip.css

@@ -46,6 +46,7 @@
   border-radius: 2px;
   background: transparent;
   box-sizing: border-box;
+  cursor: pointer;
 }
 
 .Chip__before {

package/src/components/Chip/Chip.tsx

@@ -7,11 +7,17 @@ import { Tappable } from "../Tappable/Tappable";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
 import "./Chip.css";
 
-type ChipValue = string | number;
+export type ChipValue = string | number;
+
+export interface ChipOption {
+  value?: ChipValue;
+  label?: string;
+  [otherProp: string]: any;
+}
 
 export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   value: ChipValue;
-  option?: { value?: ChipValue };
+  option?: ChipOption;
   onRemove?: (event?: React.MouseEvent, value?: ChipValue) => void;
   removable?: boolean;
   removeAriaLabel?: string;
@@ -19,6 +25,12 @@ export interface ChipProps extends React.HTMLAttributes<HTMLDivElement> {
   after?: React.ReactNode;
 }
 
+export interface RenderChip<T> extends ChipProps {
+  label: string;
+  option: T;
+  disabled: boolean;
+}
+
 /**
  * @see https://vkcom.github.io/VKUI/#/Chip
  */

package/src/components/ChipsInput/ChipsInput.css

@@ -1,74 +1,3 @@
 .ChipsInput {
   max-width: 100%;
 }
-
-.ChipsInput__container {
-  flex-grow: 1;
-  flex-shrink: 1;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  max-width: 100%;
-  padding: 3px;
-  z-index: 2;
-  overflow: hidden;
-}
-
-.ChipsInput__chip {
-  max-width: 100%;
-  margin: 2px;
-}
-
-.ChipsInput__input-container {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  margin: 2px;
-  margin-left: 10px;
-}
-
-.ChipsInput__el {
-  position: relative;
-  width: 100%;
-  margin-bottom: 2px;
-  padding: 0;
-  /* Визуальная компенсация - центрируем строчные буквы */
-  font-size: 15px;
-  line-height: 26px;
-  color: var(--text_primary, var(--vkui--color_text_primary));
-  background: transparent;
-  border: none;
-  box-shadow: none;
-  appearance: none;
-  z-index: 2;
-}
-
-.ChipsInput__el:focus {
-  min-width: 64px;
-}
-
-.ChipsInput__el::-ms-clear {
-  display: none;
-}
-
-.ChipsInput__el:disabled {
-  opacity: var(--vkui--opacity_disable_accessibility);
-}
-
-.ChipsInput__el::placeholder {
-  color: var(--field_text_placeholder, var(--vkui--color_text_secondary));
-  /* Для Firefox */
-  opacity: 1;
-}
-
-.ChipsInput__el:disabled::placeholder {
-  color: var(--text_secondary, var(--vkui--color_text_secondary));
-}
-
-/**
- * sizeY COMPACT
- */
-
-.ChipsInput--sizeY-compact .ChipsInput__container {
-  padding: 1px;
-}

package/src/components/ChipsInput/ChipsInput.tsx

@@ -1,242 +1,42 @@
-import * as React from "react";
-import { HasAlign, HasRef, HasRootRef } from "../../types";
 import { FormField, FormFieldProps } from "../FormField/FormField";
-import { classNames } from "../../lib/classNames";
-import { Chip, ChipProps } from "../Chip/Chip";
-import { noop } from "../../lib/utils";
-import { useChipsInput } from "./useChipsInput";
-import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { prefixClass } from "../../lib/prefixClass";
-import { useExternRef } from "../../hooks/useExternRef";
+import { ChipOption } from "../Chip/Chip";
+import {
+  ChipsInputBase,
+  ChipsInputBaseProps,
+} from "../ChipsInputBase/ChipsInputBase";
 import "./ChipsInput.css";
 
-export type ChipsInputValue = string | number;
-
-export interface ChipsInputOption {
-  value?: ChipsInputValue;
-  label?: string;
-  [otherProp: string]: any;
-}
-
-export interface RenderChip<Option extends ChipsInputOption> extends ChipProps {
-  label: string;
-  option: Option;
-  disabled: boolean;
-}
-
-export interface ChipsInputProps<Option extends ChipsInputOption>
-  extends Omit<
-      React.InputHTMLAttributes<HTMLInputElement>,
-      "value" | "onChange"
-    >,
-    HasRef<HTMLInputElement>,
-    HasRootRef<HTMLDivElement>,
-    HasAlign,
-    FormFieldProps {
-  value: Option[];
-  inputValue?: string;
-  onChange?: (o: Option[]) => void;
-  onInputChange?: (e?: React.ChangeEvent<HTMLInputElement>) => void;
-  getOptionValue?: (o?: Option) => ChipsInputValue;
-  getOptionLabel?: (o?: Option) => string;
-  getNewOptionData?: (v?: ChipsInputValue, l?: string) => Option;
-  renderChip?: (props?: RenderChip<Option>) => React.ReactNode;
-  inputAriaLabel?: string;
-}
-
-export const chipsInputDefaultProps: ChipsInputProps<any> = {
-  type: "text",
-  onChange: noop,
-  onInputChange: noop,
-  onKeyDown: noop,
-  onBlur: noop,
-  onFocus: noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: (option) => option.value,
-  getOptionLabel: (option) => option.label,
-  getNewOptionData: (_, label) => ({
-    value: label,
-    label,
-  }),
-  renderChip(props) {
-    if (!props) {
-      return null;
-    }
-
-    const { disabled, value, label, ...rest } = props;
-    return (
-      <Chip value={value} removable={!disabled} {...rest}>
-        {label}
-      </Chip>
-    );
-  },
-};
+export interface ChipsInputProps<Option extends ChipOption>
+  extends ChipsInputBaseProps<Option>,
+    FormFieldProps {}
 
 /**
  * @see https://vkcom.github.io/VKUI/#/ChipsInput
  */
-export const ChipsInput = <Option extends ChipsInputOption>(
-  props: ChipsInputProps<Option>
-) => {
-  const propsWithDefault = { ...chipsInputDefaultProps, ...props };
-  const {
-    style,
-    value,
-    onChange,
-    onInputChange,
-    onKeyDown,
-    onBlur,
-    onFocus,
-    children,
-    className,
-    inputValue,
-    getRef,
-    getRootRef,
-    placeholder,
-    getOptionValue,
-    getOptionLabel,
-    getNewOptionData,
-    renderChip,
-    before,
-    after,
-    inputAriaLabel,
-    ...restProps
-  } = propsWithDefault;
-  const { sizeY } = useAdaptivity();
-
-  const [focused, setFocused] = React.useState(false);
-  const {
-    fieldValue,
-    addOptionFromInput,
-    removeOption,
-    selectedOptions,
-    handleInputChange,
-  } = useChipsInput(propsWithDefault);
-  const inputRef = useExternRef(getRef);
-
-  const isDisabled = restProps.disabled || restProps.readOnly;
-
-  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    onKeyDown!(e);
-
-    if (
-      e.key === "Backspace" &&
-      !e.defaultPrevented &&
-      !fieldValue &&
-      selectedOptions.length
-    ) {
-      removeOption(
-        getOptionValue!(selectedOptions[selectedOptions.length - 1])
-      );
-      e.preventDefault();
-    }
-
-    if (e.key === "Enter" && !e.defaultPrevented && fieldValue) {
-      addOptionFromInput();
-      e.preventDefault();
-    }
-  };
-
-  const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (focused) {
-      setFocused(false);
-    }
-    onBlur!(e);
-  };
-
-  const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    if (!focused) {
-      setFocused(true);
-    }
-    onFocus!(e);
-  };
-
-  const handleChipRemove = (
-    _: React.MouseEvent | undefined,
-    value: ChipsInputValue | undefined
-  ) => {
-    if (value !== undefined) {
-      removeOption(value);
-    }
-  };
-
-  const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isDisabled) {
-      e.preventDefault();
-      return;
-    }
-
-    if (inputRef?.current !== null && !focused) {
-      inputRef.current.focus();
-    }
-  };
-
+export const ChipsInput = <Option extends ChipOption>({
+  style,
+  className,
+  getRootRef,
+  before,
+  after,
+  status,
+  ...restProps
+}: ChipsInputProps<Option>) => {
   return (
     <FormField
       getRootRef={getRootRef}
-      vkuiClass={classNames(
-        "ChipsInput",
-        `ChipsInput--sizeY-${sizeY}`,
-        focused && "ChipsInput--focused",
-        !!selectedOptions.length && "ChipsInput--withChips"
-      )}
+      vkuiClass="ChipsInput"
       className={className}
       style={style}
       disabled={restProps.disabled}
       before={before}
       after={after}
-      onClick={handleClick}
       role="application"
       aria-disabled={restProps.disabled}
       aria-readonly={restProps.readOnly}
+      status={status}
     >
-      <div vkuiClass="ChipsInput__container" role="presentation">
-        {selectedOptions.map((option: Option) => {
-          const value = getOptionValue!(option);
-          const label = getOptionLabel!(option);
-
-          return (
-            <React.Fragment key={`${typeof value}-${value}`}>
-              {renderChip!({
-                option,
-                value,
-                label,
-                onRemove: handleChipRemove,
-                disabled: Boolean(restProps.disabled),
-                className: prefixClass("ChipsInput__chip"),
-              })}
-            </React.Fragment>
-          );
-        })}
-        <label
-          vkuiClass="ChipsInput__input-container"
-          aria-label={inputAriaLabel}
-        >
-          <input
-            ref={inputRef}
-            value={fieldValue}
-            autoCapitalize="none"
-            autoComplete="off"
-            autoCorrect="off"
-            spellCheck={false}
-            aria-autocomplete="list"
-            vkuiClass="ChipsInput__el"
-            onChange={handleInputChange}
-            onKeyDown={handleKeyDown}
-            onFocus={handleFocus}
-            onBlur={handleBlur}
-            placeholder={selectedOptions.length ? undefined : placeholder}
-            {...restProps}
-          />
-        </label>
-      </div>
+      <ChipsInputBase {...restProps} />
     </FormField>
   );
 };