@vkontakte/vkui 4.35.1 → 4.36.0

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -1,20 +1,17 @@
 import * as React from "react";
 import { DropdownIcon } from "../DropdownIcon/DropdownIcon";
 import { classNames } from "../../lib/classNames";
+import { ChipOption, ChipValue, RenderChip } from "../Chip/Chip";
+import { ChipsInputProps } from "../ChipsInput/ChipsInput";
 import {
-  ChipsInput,
-  ChipsInputOption,
-  ChipsInputProps,
-  ChipsInputValue,
-  RenderChip,
+  ChipsInputBase,
   chipsInputDefaultProps,
-} from "../ChipsInput/ChipsInput";
+} from "../ChipsInputBase/ChipsInputBase";
 import {
   CustomSelectOption,
   CustomSelectOptionProps,
 } from "../CustomSelectOption/CustomSelectOption";
-import { useChipsSelect } from "./useChipsSelect";
-import { withAdaptivity, AdaptivityProps } from "../../hoc/withAdaptivity";
+import { useChipsSelect } from "../../hooks/useChipsSelect";
 import { noop } from "../../lib/utils";
 import { useDOM } from "../../lib/dom";
 import { Caption } from "../Typography/Caption/Caption";
@@ -24,11 +21,12 @@ import { useGlobalEventListener } from "../../hooks/useGlobalEventListener";
 import { defaultFilterFn } from "../../lib/select";
 import { Placement } from "../Popper/Popper";
 import { CustomSelectDropdown } from "../CustomSelectDropdown/CustomSelectDropdown";
+import { FormField } from "../FormField/FormField";
+import { IconButton } from "../IconButton/IconButton";
 import "./ChipsSelect.css";
 
-export interface ChipsSelectProps<Option extends ChipsInputOption>
-  extends ChipsInputProps<Option>,
-    AdaptivityProps {
+export interface ChipsSelectProps<Option extends ChipOption>
+  extends Omit<ChipsInputProps<Option>, "after"> {
   popupDirection?: "top" | "bottom";
   options?: Option[];
   filterFn?:
@@ -96,7 +94,10 @@ const chipsSelectDefaultProps: ChipsSelectProps<any> = {
   },
 };
 
-const ChipsSelectComponent = <Option extends ChipsInputOption>(
+/**
+ * @see https://vkcom.github.io/VKUI/#/ChipsSelect
+ */
+export const ChipsSelect = <Option extends ChipOption>(
   props: ChipsSelectProps<Option>
 ) => {
   const propsWithDefault = { ...chipsSelectDefaultProps, ...props };
@@ -123,10 +124,9 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     filterFn,
     inputValue,
     creatableText,
-    sizeY,
     closeAfterSelect,
     onChangeStart,
-    after,
+    before,
     options,
     ...restProps
   } = propsWithDefault;
@@ -166,11 +166,9 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
   };
 
   const handleClickOutside = (e: MouseEvent) => {
-    const { current: rootNode } = rootRef;
     if (
-      rootNode &&
-      e.target !== rootNode &&
-      !rootNode.contains(e.target as Node)
+      e.target !== rootRef.current &&
+      !rootRef.current?.contains(e.target as Node)
     ) {
       setOpened(false);
     }
@@ -323,7 +321,7 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     }
     const onRemoveWrapper = (
       e: React.MouseEvent | undefined,
-      value: ChipsInputValue | undefined
+      value: ChipValue | undefined
     ) => {
       e?.preventDefault();
       e?.stopPropagation();
@@ -355,14 +353,39 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
     [rootRef, scrollBoxRef]
   );
 
+  const toggleOpened = () => {
+    setOpened((prevOpened) => !prevOpened);
+  };
+
   return (
-    <div
-      vkuiClass={classNames("ChipsSelect", `ChipsSelect--sizeY-${sizeY}`)}
-      ref={rootRef}
+    <FormField
+      vkuiClass={classNames(
+        "ChipsSelect",
+        opened && "Select--open",
+        opened && (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")
+      )}
+      getRootRef={rootRef}
       style={style}
       className={className}
+      disabled={disabled}
+      role="application"
+      aria-disabled={disabled}
+      aria-readonly={restProps.readOnly}
+      after={
+        <IconButton
+          vkuiClass="ChipsSelect__dropdown"
+          activeMode=""
+          hoverMode=""
+          // TODO: add label customization
+          aria-label={opened ? "Скрыть" : "Развернуть"}
+          onClick={toggleOpened}
+        >
+          <DropdownIcon vkuiClass="ChipsSelect__icon" opened={opened} />
+        </IconButton>
+      }
+      before={before}
     >
-      <ChipsInput
+      <ChipsInputBase
         {...restProps}
         tabIndex={tabIndex}
         value={selectedOptions}
@@ -374,15 +397,9 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
         onFocus={handleFocus}
         onKeyDown={handleKeyDown}
         placeholder={placeholder}
-        vkuiClass={classNames(
-          opened && "Select--open",
-          opened &&
-            (isPopperDirectionTop ? "Select--pop-up" : "Select--pop-down")
-        )}
         getRef={getRef}
         disabled={disabled}
         onInputChange={handleInputChange}
-        after={<DropdownIcon />}
       />
       {opened && (
         <CustomSelectDropdown
@@ -452,15 +469,6 @@ const ChipsSelectComponent = <Option extends ChipsInputOption>(
           )}
         </CustomSelectDropdown>
       )}
-    </div>
+    </FormField>
   );
 };
-
-/**
- * @see https://vkcom.github.io/VKUI/#/ChipsSelect
- */
-export const ChipsSelect = withAdaptivity(ChipsSelectComponent, {
-  sizeY: true,
-});
-
-ChipsSelect.displayName = "ChipsSelect";

package/src/components/CustomSelect/CustomSelect.css

@@ -2,6 +2,7 @@
   width: 100%;
   position: relative;
   display: block;
+  cursor: pointer;
 }
 
 .CustomSelect__control {

package/src/components/CustomSelect/CustomSelect.tsx

@@ -101,7 +101,6 @@ const filter = (
 };
 
 const defaultOptions: CustomSelectOptionInterface[] = [];
-const defaultIcon = <DropdownIcon />;
 
 type SelectValue = React.SelectHTMLAttributes<HTMLSelectElement>["value"];
 
@@ -175,6 +174,7 @@ export interface CustomSelectProps
 type MouseEventHandler = (event: React.MouseEvent<HTMLElement>) => void;
 
 function CustomSelectComponent(props: CustomSelectProps) {
+  const [opened, setOpened] = React.useState(false);
   const {
     before,
     name,
@@ -201,7 +201,7 @@ function CustomSelectComponent(props: CustomSelectProps) {
     options: optionsProp = defaultOptions,
     emptyText = "Ничего не найдено",
     filterFn = defaultFilterFn,
-    icon = defaultIcon,
+    icon = <DropdownIcon opened={opened} />,
     dropdownOffsetDistance = 0,
     fixDropdownWidth = true,
     ...restProps
@@ -233,7 +233,6 @@ function CustomSelectComponent(props: CustomSelectProps) {
   const [selectedOptionIndex, setSelectedOptionIndex] = React.useState<
     number | undefined
   >(findSelectedIndex(optionsProp, props.value ?? props.defaultValue));
-  const [opened, setOpened] = React.useState(false);
 
   React.useEffect(() => {
     setIsControlledOutside(props.value !== undefined);
@@ -243,7 +242,7 @@ function CustomSelectComponent(props: CustomSelectProps) {
   }, [props.value]);
 
   useIsomorphicLayoutEffect(() => {
-    if (nativeSelectValue) {
+    if (nativeSelectValue !== undefined) {
       const event = new Event("change", { bubbles: true });
 
       selectElRef.current?.dispatchEvent(event);

package/src/components/CustomSelect/Readme.md

@@ -154,7 +154,11 @@ const CustomSearchLogicSelect = () => {
       onInputChange={onCustomSearchInputChange}
       renderOption={({ option, ...restProps }) => (
         <CustomSelectOption
-          style={option.value === "0" ? { color: "var(--accent)" } : {}}
+          style={
+            option.value === "0"
+              ? { color: "var(--vkui--color_background_accent)" }
+              : {}
+          }
           {...restProps}
         >
           {option.label}
@@ -263,7 +267,9 @@ const AsyncCustomSelect = () => {
   const renderDropdown = ({ defaultDropdownContent }) => {
     if (remoteQuery.length < 3) {
       return (
-        <Text style={{ padding: 12, color: "var(--text_secondary)" }}>
+        <Text
+          style={{ padding: 12, color: "var(--vkui--color_text_secondary)" }}
+        >
           Нужно ввести хотя бы три символа
         </Text>
       );

package/src/components/CustomSelectDropdown/CustomSelectDropdown.tsx

@@ -7,6 +7,7 @@ import { Popper, Placement } from "../Popper/Popper";
 import { Spinner } from "../Spinner/Spinner";
 import { HasRef } from "../../types";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
+import { noop } from "../../lib/utils";
 import "./CustomSelectDropdown.css";
 
 export interface CustomSelectDropdownProps
@@ -35,6 +36,7 @@ function getObserverModifier<T extends HTMLElement>(
     name: "customSelectChildrenChange",
     enabled: true,
     phase: "main",
+    fn: noop,
     effect: ({ instance }) => {
       const observer = new MutationObserver(instance.forceUpdate);
 

package/src/components/DateInput/DateInput.css

@@ -3,7 +3,7 @@
   margin-left: 10px;
   margin-right: 14px;
   font-size: 16px;
-  z-index: 2;
+  z-index: 6;
   cursor: text;
   white-space: nowrap;
   user-select: text;

package/src/components/DateInput/DateInput.tsx

@@ -6,7 +6,7 @@ import { Popper, Placement } from "../Popper/Popper";
 import { multiRef } from "../../lib/utils";
 import { IconButton } from "../IconButton/IconButton";
 import { classNames } from "../../lib/classNames";
-import { FormField } from "../FormField/FormField";
+import { FormField, FormFieldProps } from "../FormField/FormField";
 import { HasRootRef } from "../../types";
 import { useDateInput } from "../../hooks/useDateInput";
 import { InputLike } from "../InputLike/InputLike";
@@ -47,11 +47,13 @@ export interface DateInputProps
       | "prevMonthIcon"
       | "nextMonthIcon"
     >,
-    HasRootRef<HTMLDivElement> {
+    HasRootRef<HTMLDivElement>,
+    FormFieldProps {
   calendarPlacement?: Placement;
   closeOnChange?: boolean;
   clearFieldAriaLabel?: string;
   showCalendarAriaLabel?: string;
+  disableCalendar?: boolean;
 }
 
 const elementsConfig = (index: number) => {
@@ -133,6 +135,7 @@ export const DateInput = ({
   onPrevMonth,
   prevMonthIcon,
   nextMonthIcon,
+  disableCalendar = false,
   ...props
 }: DateInputProps) => {
   const daysRef = React.useRef<HTMLSpanElement>(null);
@@ -298,7 +301,7 @@ export const DateInput = ({
           </React.Fragment>
         )}
       </span>
-      {open && (
+      {open && !disableCalendar && (
         <Popper
           targetRef={rootRef}
           offsetDistance={8}

package/src/components/DateInput/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора даты.
 
+- Если нужен календарь без поля ввода, используйте [Calendar](#!/Calendar).
+- Если нужен выбор диапазона дат, используйте [DateRangeInput](#!/DateRangeInput).
+
 > ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
 
 ```jsx { "props": { "layout": false, "iframe": false } }
@@ -13,6 +16,7 @@ const Example = () => {
   const [disablePickers, setDisablePickers] = useState(false);
   const [closeOnChange, setCloseOnChange] = useState(true);
   const [showNeighboringMonth, setShowNeighboringMonth] = useState(false);
+  const [disableCalendar, setDisableCalendar] = useState(false);
   const [locale, setLocale] = useState("ru");
 
   return (
@@ -66,6 +70,14 @@ const Example = () => {
             Включено
           </Checkbox>
         </FormItem>
+        <FormItem top="Отключить отображение выпадающего календаря">
+          <Checkbox
+            checked={disableCalendar}
+            onChange={(e) => setDisableCalendar(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
         <FormItem top="Локаль">
           <Select
             style={{ width: 100 }}
@@ -103,6 +115,7 @@ const Example = () => {
                 closeOnChange={closeOnChange}
                 disablePickers={disablePickers}
                 showNeighboringMonth={showNeighboringMonth}
+                disableCalendar={disableCalendar}
               />
             </LocaleProviderContext.Provider>
           </div>

package/src/components/DateRangeInput/DateRangeInput.css

@@ -3,7 +3,7 @@
   margin-left: 10px;
   margin-right: 14px;
   font-size: 16px;
-  z-index: 2;
+  z-index: 6;
   cursor: text;
   white-space: nowrap;
   user-select: text;

package/src/components/DateRangeInput/DateRangeInput.tsx

@@ -12,7 +12,7 @@ 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 { FormField, FormFieldProps } from "../FormField/FormField";
 import { InputLike } from "../InputLike/InputLike";
 import { InputLikeDivider } from "../InputLike/InputLikeDivider";
 import { callMultiple } from "../../lib/callMultiple";
@@ -37,7 +37,8 @@ export interface DateRangeInputProps
       | "prevMonthIcon"
       | "nextMonthIcon"
     >,
-    HasRootRef<HTMLDivElement> {
+    HasRootRef<HTMLDivElement>,
+    FormFieldProps {
   calendarPlacement?: Placement;
   closeOnChange?: boolean;
   clearFieldAriaLabel?: string;
@@ -48,6 +49,7 @@ export interface DateRangeInputProps
   changeEndDayAriaLabel?: string;
   changeEndMonthAriaLabel?: string;
   changeEndYearAriaLabel?: string;
+  disableCalendar?: boolean;
 }
 
 const elementsConfig = (index: number) => {
@@ -125,6 +127,7 @@ export const DateRangeInput = ({
   showCalendarAriaLabel = "Показать календарь",
   prevMonthIcon,
   nextMonthIcon,
+  disableCalendar = false,
   ...props
 }: DateRangeInputProps) => {
   const daysStartRef = React.useRef<HTMLSpanElement>(null);
@@ -329,7 +332,7 @@ export const DateRangeInput = ({
           aria-label={changeEndYearAriaLabel}
         />
       </span>
-      {open && (
+      {open && !disableCalendar && (
         <Popper
           targetRef={rootRef}
           offsetDistance={8}

package/src/components/DateRangeInput/Readme.md

@@ -1,5 +1,8 @@
 Компонент выбора даты.
 
+- Если нужен календарь без поля ввода, используйте [CalendarRange](#!/CalendarRange).
+- Если нужен выбор одной даты, используйте [DateInput](#!/DateInput).
+
 > ⚠️ Данный компонент предназначен для использования на desktop. При использовании на ios/android работа компонента не гарантируется
 
 ```jsx { "props": { "layout": false, "iframe": false } }
@@ -11,6 +14,7 @@ const Example = () => {
   const [disableFuture, setDisableFuture] = useState(false);
   const [disablePickers, setDisablePickers] = useState(false);
   const [closeOnChange, setCloseOnChange] = useState(true);
+  const [disableCalendar, setDisableCalendar] = useState(false);
   const [locale, setLocale] = useState("ru");
 
   return (
@@ -48,6 +52,14 @@ const Example = () => {
             Включено
           </Checkbox>
         </FormItem>
+        <FormItem top="Отключить отображение выпадающего календаря">
+          <Checkbox
+            checked={disableCalendar}
+            onChange={(e) => setDisableCalendar(e.target.checked)}
+          >
+            Включено
+          </Checkbox>
+        </FormItem>
         <FormItem top="Локаль">
           <Select
             style={{ width: 100 }}
@@ -83,6 +95,7 @@ const Example = () => {
                 disableFuture={disableFuture}
                 closeOnChange={closeOnChange}
                 disablePickers={disablePickers}
+                disableCalendar={disableCalendar}
               />
             </LocaleProviderContext.Provider>
           </div>

package/src/components/DropdownIcon/DropdownIcon.tsx

@@ -1,16 +1,30 @@
 import * as React from "react";
-import { Icon20Dropdown, Icon24ChevronDown } from "@vkontakte/icons";
+import {
+  Icon20Dropdown,
+  Icon24ChevronDown,
+  Icon24ChevronUp,
+  Icon20ChevronUp,
+} from "@vkontakte/icons";
+import { classNames } from "../../lib/classNames";
 import { SizeType } from "../AdaptivityProvider/AdaptivityContext";
-import { getClassName } from "../../helpers/getClassName";
 import { useAdaptivity } from "../../hooks/useAdaptivity";
-import { usePlatform } from "../../hooks/usePlatform";
-import "./DropdownIcon.css";
 
-export const DropdownIcon = (props: React.HTMLAttributes<HTMLDivElement>) => {
-  const platform = usePlatform();
+export interface DropdownIconProps
+  extends React.HTMLAttributes<HTMLDivElement> {
+  opened?: boolean;
+}
+
+export const DropdownIcon = ({
+  opened = false,
+  ...restProps
+}: DropdownIconProps) => {
   const { sizeY } = useAdaptivity();
 
-  const Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
+  let Icon = sizeY === SizeType.COMPACT ? Icon20Dropdown : Icon24ChevronDown;
+
+  if (opened) {
+    Icon = sizeY === SizeType.COMPACT ? Icon20ChevronUp : Icon24ChevronUp;
+  }
 
-  return <Icon vkuiClass={getClassName("DropdownIcon", platform)} {...props} />;
+  return <Icon vkuiClass={classNames("DropdownIcon")} {...restProps} />;
 };

package/src/components/Epic/Readme.md

@@ -39,7 +39,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "feed"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -55,7 +56,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "services"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -71,7 +73,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "messages"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -87,7 +90,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "clips"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}
@@ -103,7 +107,8 @@ const Example = withAdaptivity(
                   style={
                     activeStory === "profile"
                       ? {
-                          backgroundColor: "var(--button_secondary_background)",
+                          backgroundColor:
+                            "var(--vkui--color_background_secondary)",
                           borderRadius: 8,
                         }
                       : {}

package/src/components/FormField/FormField.css

@@ -1,11 +1,18 @@
 .FormField {
   position: relative;
+  z-index: 1;
   display: flex;
   align-items: center;
   box-sizing: border-box;
   min-height: var(--vkui--size_field_height--regular);
 }
 
+/* stylelint-disable-next-line vkui/atomic */
+.FormField > * {
+  border-radius: inherit;
+  z-index: 6;
+}
+
 /**
  * TODO v5.0.0 поправить под новую адаптивность
  */
@@ -16,7 +23,7 @@
 .FormField__before,
 .FormField__after {
   position: relative;
-  z-index: 2;
+  z-index: 7;
   display: flex;
   align-items: center;
   align-content: center;
@@ -70,16 +77,20 @@
  * CMP:
  * FormItem
  */
-.FormItem--error .FormField__border {
+.FormItem--error .FormField__border,
+.FormField--status-error .FormField__border {
   background-color: var(
     --field_error_background,
     var(--vkui--color_background_negative_tint)
   );
   border-color: var(--field_error_border, var(--vkui--color_stroke_negative));
+  z-index: 3;
 }
 
-.FormItem--valid .FormField__border {
+.FormItem--valid .FormField__border,
+.FormField--status-valid .FormField__border {
   border-color: var(--field_valid_border, var(--vkui--color_stroke_positive));
+  z-index: 3;
 }
 /* [end] */
 
@@ -101,15 +112,16 @@
     --icon_tertiary_alpha,
     var(--vkui--color_field_border_alpha--hover)
   );
+  z-index: 4;
 }
 
 /**
  * FIXME: необходимо заменить на `useFocusVisible()`
  */
 .FormField:focus-within .FormField__border,
-.FormField *:focus ~ .FormField__border,
-.ChipsInput--focused .FormField__border {
+.FormField *:focus ~ .FormField__border {
   border-color: var(--accent, var(--vkui--color_stroke_accent));
+  z-index: 5;
 }
 
 /**
@@ -149,5 +161,45 @@
  * ChipsInput
  */
 .ChipsInput .FormField__after {
-  z-index: 3;
+  z-index: 7;
+}
+
+/**
+ * CMP:
+ * FormLayoutGroup
+ */
+.FormLayoutGroup--segmented .FormField {
+  z-index: auto;
+}
+
+.FormLayoutGroup--segmented
+  > .FormItem:not(:first-of-type):not(:last-of-type)
+  .FormField__border,
+.FormLayoutGroup--segmented
+  .Removable__content
+  > .FormItem:not(:first-of-type):not(:last-of-type)
+  .FormField__border {
+  border-radius: 0;
+}
+
+.FormLayoutGroup--segmented
+  > *:first-of-type:not(:last-of-type)
+  .FormField__border,
+.FormLayoutGroup--segmented
+  .Removable__content
+  > *:first-of-type:not(:last-of-type)
+  .FormField__border {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.FormLayoutGroup--segmented
+  > .FormItem:not(:first-of-type):last-of-type
+  .FormField__border,
+.FormLayoutGroup--segmented
+  .Removable__content
+  > .FormItem:not(:first-of-type):last-of-type
+  .FormField__border {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
 }

package/src/components/FormField/FormField.tsx

@@ -10,6 +10,7 @@ export const FormFieldMode = {
 } as const;
 
 export interface FormFieldProps {
+  status?: "default" | "error" | "valid";
   /**
    * Добавляет иконку слева.
    *
@@ -44,6 +45,7 @@ interface FormFieldOwnProps
  */
 export const FormField = ({
   Component = "div",
+  status = "default",
   children,
   getRootRef,
   before,
@@ -75,6 +77,7 @@ export const FormField = ({
       vkuiClass={classNames(
         "FormField",
         `FormField--${mode}`,
+        `FormField--status-${status}`,
         `FormField--sizeY-${sizeY}`, // TODO v5.0.0 поправить под новую адаптивность
         disabled && "FormField--disabled",
         !disabled && hover && "FormField--hover"