@vkontakte/vkui 4.24.0 → 4.25.0

package/src/components/ChipsSelect/ChipsSelect.tsx

@@ -35,7 +35,7 @@ export interface ChipsSelectProps<Option extends ChipsInputOption>
         value?: string,
         option?: Option,
         getOptionLabel?: Pick<
-          ChipsInputProps<ChipsInputOption>,
+          ChipsInputProps<Option>,
           "getOptionLabel"
         >["getOptionLabel"]
       ) => boolean);
@@ -78,9 +78,26 @@ type focusActionType = "next" | "prev";
 const FOCUS_ACTION_NEXT: focusActionType = "next";
 const FOCUS_ACTION_PREV: focusActionType = "prev";
 
+const chipsSelectDefaultProps: ChipsSelectProps<any> = {
+  ...chipsInputDefaultProps,
+  emptyText: "Ничего не найдено",
+  creatableText: "Создать значение",
+  onChangeStart: noop,
+  creatable: false,
+  fetching: false,
+  showSelected: true,
+  closeAfterSelect: true,
+  options: [],
+  filterFn: defaultFilterFn,
+  renderOption({ option, ...restProps }) {
+    return <CustomSelectOption {...restProps} />;
+  },
+};
+
 const ChipsSelect = <Option extends ChipsInputOption>(
   props: ChipsSelectProps<Option>
 ) => {
+  const propsWithDefault = { ...chipsSelectDefaultProps, ...props };
   const {
     style,
     onFocus,
@@ -110,18 +127,19 @@ const ChipsSelect = <Option extends ChipsInputOption>(
     after,
     options,
     ...restProps
-  } = props;
+  } = propsWithDefault;
 
   const { document } = useDOM();
 
-  const [popperPlacement, setPopperPlacement] =
-    React.useState<Placement>(undefined);
+  const [popperPlacement, setPopperPlacement] = React.useState<
+    Placement | undefined
+  >(undefined);
 
   const scrollBoxRef = React.useRef<HTMLDivElement>(null);
   const rootRef = useExternRef(getRef);
   const {
     fieldValue,
-    selectedOptions,
+    selectedOptions = [],
     opened,
     setOpened,
     addOptionFromInput,
@@ -133,7 +151,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(
     setFocusedOption,
     focusedOptionIndex,
     setFocusedOptionIndex,
-  } = useChipsSelect(props);
+  } = useChipsSelect(propsWithDefault);
 
   const showCreatable = Boolean(
     creatable && creatableText && !filteredOptions.length && fieldValue
@@ -142,7 +160,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     setOpened(true);
     setFocusedOptionIndex(0);
-    onFocus(e);
+    onFocus!(e);
   };
 
   const handleClickOutside = (e: MouseEvent) => {
@@ -162,7 +180,7 @@ const ChipsSelect = <Option extends ChipsInputOption>(
     const dropdown = scrollBoxRef.current;
     const item = chipsSelectOptions[index];
 
-    if (!item) {
+    if (!item || !dropdown) {
       return;
     }
 
@@ -206,11 +224,13 @@ const ChipsSelect = <Option extends ChipsInputOption>(
       index = index - 1;
     }
 
-    focusOptionByIndex(index, focusedOptionIndex);
+    if (focusedOptionIndex != null) {
+      focusOptionByIndex(index, focusedOptionIndex);
+    }
   };
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
-    onKeyDown(e);
+    onKeyDown!(e);
 
     if (e.key === "ArrowUp" && !e.defaultPrevented) {
       e.preventDefault();
@@ -234,11 +254,16 @@ const ChipsSelect = <Option extends ChipsInputOption>(
       }
     }
 
-    if (e.key === "Enter" && !e.defaultPrevented && opened) {
+    if (
+      e.key === "Enter" &&
+      !e.defaultPrevented &&
+      opened &&
+      focusedOptionIndex != null
+    ) {
       const option = filteredOptions[focusedOptionIndex];
 
       if (option) {
-        onChangeStart(e, option);
+        onChangeStart!(e, option);
 
         if (!e.defaultPrevented) {
           addOption(option);
@@ -258,12 +283,12 @@ const ChipsSelect = <Option extends ChipsInputOption>(
   };
 
   React.useEffect(() => {
-    if (filteredOptions[focusedOptionIndex]) {
+    if (focusedOptionIndex != null && filteredOptions[focusedOptionIndex]) {
       setFocusedOption(filteredOptions[focusedOptionIndex]);
     } else if (focusedOptionIndex === null || focusedOptionIndex === 0) {
       setFocusedOption(null);
     }
-  }, [focusedOptionIndex, filteredOptions]);
+  }, [focusedOptionIndex, filteredOptions, setFocusedOption]);
 
   React.useEffect(() => {
     const index = focusedOption
@@ -278,21 +303,36 @@ const ChipsSelect = <Option extends ChipsInputOption>(
     ) {
       setFocusedOption(filteredOptions[0]);
     }
-  }, [filteredOptions, focusedOption, showCreatable, closeAfterSelect]);
+  }, [
+    filteredOptions,
+    focusedOption,
+    showCreatable,
+    closeAfterSelect,
+    setFocusedOption,
+  ]);
 
   useGlobalEventListener(document, "click", handleClickOutside);
 
-  const renderChipWrapper = (renderChipProps: RenderChip<Option>) => {
-    const { onRemove } = renderChipProps;
-
-    const onRemoveWrapper = (e: React.MouseEvent, value: ChipsInputValue) => {
-      e.preventDefault();
-      e.stopPropagation();
-
-      onRemove(e, value);
+  const renderChipWrapper = (
+    renderChipProps: RenderChip<Option> | undefined
+  ) => {
+    if (renderChipProps === undefined) {
+      return null;
+    }
+    const onRemoveWrapper = (
+      e: React.MouseEvent | undefined,
+      value: ChipsInputValue | undefined
+    ) => {
+      e?.preventDefault();
+      e?.stopPropagation();
+
+      renderChipProps.onRemove?.(e, value);
     };
 
-    return renderChip({ ...renderChipProps, onRemove: onRemoveWrapper });
+    return renderChip!({
+      ...renderChipProps,
+      onRemove: onRemoveWrapper,
+    });
   };
 
   const isPopperDirectionTop = popperPlacement?.includes("top");
@@ -361,30 +401,35 @@ const ChipsSelect = <Option extends ChipsInputOption>(
             </Caption>
           ) : (
             filteredOptions.map((option: Option, index: number) => {
-              const label = getOptionLabel(option);
+              const label = getOptionLabel!(option);
               const hovered =
                 focusedOption &&
-                getOptionValue(option) === getOptionValue(focusedOption);
+                getOptionValue!(option) === getOptionValue!(focusedOption);
               const selected = selectedOptions.find(
                 (selectedOption: Option) => {
                   return (
-                    getOptionValue(selectedOption) === getOptionValue(option)
+                    getOptionValue!(selectedOption) === getOptionValue!(option)
                   );
                 }
               );
-              const value = getOptionValue(option);
+              const value = getOptionValue!(option);
 
               return (
                 <React.Fragment key={`${typeof value}-${value}`}>
-                  {renderOption({
+                  {renderOption!({
                     className: prefixClass("ChipsSelect__option"),
                     option,
-                    hovered,
+                    hovered: Boolean(hovered),
                     children: label,
                     selected: !!selected,
-                    getRootRef: (e) => (chipsSelectOptions[index] = e),
+                    getRootRef: (e) => {
+                      if (e) {
+                        return (chipsSelectOptions[index] = e);
+                      }
+                      return undefined;
+                    },
                     onMouseDown: (e: React.MouseEvent<HTMLDivElement>) => {
-                      onChangeStart(e, option);
+                      onChangeStart?.(e, option);
 
                       if (!e.defaultPrevented) {
                         closeAfterSelect && setOpened(false);
@@ -404,25 +449,5 @@ const ChipsSelect = <Option extends ChipsInputOption>(
   );
 };
 
-const chipsSelectDefaultProps: ChipsSelectProps<any> = {
-  ...chipsInputDefaultProps,
-  emptyText: "Ничего не найдено",
-  creatableText: "Создать значение",
-  onChangeStart: noop,
-  creatable: false,
-  fetching: false,
-  showSelected: true,
-  closeAfterSelect: true,
-  options: [],
-  filterFn: defaultFilterFn,
-  renderOption({
-    option,
-    ...restProps
-  }: CustomSelectOptionProps): React.ReactNode {
-    return <CustomSelectOption {...restProps} />;
-  },
-};
-
-ChipsSelect.defaultProps = chipsSelectDefaultProps;
-
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(ChipsSelect, { sizeY: true });

package/src/components/ChipsSelect/Readme.md

@@ -8,7 +8,7 @@
 >
 > Это нестабильный компонент. Его API может меняться в рамках одной мажорной версии. [Подробнее про нестабильные компоненты](#/Unstable).
 
-```jsx
+```jsx { "props": { "layout": false, "iframe": false } }
 const colors = [
   { value: "red", label: "Красный" },
   { value: "blue", label: "Синий" },
@@ -64,63 +64,50 @@ const Example = () => {
   };
 
   return (
-    <View activePanel="profile" id="profile">
-      <Panel id="profile">
-        <PanelHeader>Предпочтения</PanelHeader>
-        <Group>
-          <FormItem top="Выберите группы">
-            <ChipsSelect
-              {...groupsChipsProps}
-              showSelected={false}
-              closeAfterSelect={false}
-              onChangeStart={(e, option) => {
-                if (option.value === "download") {
-                  e.preventDefault();
-                  alert("download!");
+    <Group separator="hide">
+      <FormItem top="Выберите группы">
+        <ChipsSelect
+          {...groupsChipsProps}
+          showSelected={false}
+          closeAfterSelect={false}
+          onChangeStart={(e, option) => {
+            if (option.value === "download") {
+              e.preventDefault();
+              alert("download!");
+            }
+          }}
+          renderChip={({ value, label, option: { src, icon }, ...rest }) => (
+            <Chip
+              value={value}
+              before={<Avatar size={20} src={src} />}
+              {...rest}
+            >
+              {label}
+            </Chip>
+          )}
+          renderOption={({ option: { src, value, icon }, ...otherProps }) => {
+            return (
+              <CustomSelectOption
+                before={
+                  icon ? (
+                    <Avatar size={20}>{icon}</Avatar>
+                  ) : (
+                    <Avatar size={20} src={src} />
+                  )
                 }
-              }}
-              renderChip={({
-                value,
-                label,
-                option: { src, icon },
-                ...rest
-              }) => (
-                <Chip
-                  value={value}
-                  before={<Avatar size={20} src={src} />}
-                  {...rest}
-                >
-                  {label}
-                </Chip>
-              )}
-              renderOption={({
-                option: { src, value, icon },
-                ...otherProps
-              }) => {
-                return (
-                  <CustomSelectOption
-                    before={
-                      icon ? (
-                        <Avatar size={20}>{icon}</Avatar>
-                      ) : (
-                        <Avatar size={20} src={src} />
-                      )
-                    }
-                    {...otherProps}
-                  />
-                );
-              }}
-            />
-          </FormItem>
-          <FormItem top="Выберите или добавьте цвета">
-            <ChipsSelect {...colorsChipsProps} />
-          </FormItem>
-          <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
-            <ChipsSelect {...colorsCopyChipsProps} />
-          </FormItem>
-        </Group>
-      </Panel>
-    </View>
+                {...otherProps}
+              />
+            );
+          }}
+        />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета">
+        <ChipsSelect {...colorsChipsProps} />
+      </FormItem>
+      <FormItem top="Выберите или добавьте цвета (creatable без кнопки создания)">
+        <ChipsSelect {...colorsCopyChipsProps} />
+      </FormItem>
+    </Group>
   );
 };
 

package/src/components/ChipsSelect/useChipsSelect.ts

@@ -6,17 +6,23 @@ import { ChipsSelectProps } from "./ChipsSelect";
 export const useChipsSelect = <Option extends ChipsInputOption>(
   props: Partial<ChipsSelectProps<Option>>
 ) => {
-  const { options, filterFn, getOptionLabel, getOptionValue, showSelected } =
-    props;
+  const { options, filterFn, getOptionLabel, getOptionValue } = props;
 
   const [opened, setOpened] = React.useState(false);
-  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<number>(0);
-  const [focusedOption, setFocusedOption] = React.useState<Option>(null);
+  const [focusedOptionIndex, setFocusedOptionIndex] = React.useState<
+    number | null
+  >(0);
+  const [focusedOption, setFocusedOption] = React.useState<Option | null>(null);
 
   const { fieldValue, selectedOptions, ...chipsInputState } =
     useChipsInput(props);
 
-  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+  const handleInputChange = (
+    e: React.ChangeEvent<HTMLInputElement> | undefined
+  ) => {
+    if (!e) {
+      return;
+    }
     chipsInputState.handleInputChange(e);
 
     if (!opened) {
@@ -27,10 +33,10 @@ export const useChipsSelect = <Option extends ChipsInputOption>(
 
   let filteredOptions = React.useMemo(() => {
     return filterFn
-      ? options.filter((option: Option) =>
+      ? options!.filter((option) =>
           filterFn(fieldValue, option, getOptionLabel)
         )
-      : options;
+      : (options as Option[]);
   }, [options, filterFn, fieldValue, getOptionLabel]);
 
   filteredOptions = React.useMemo(() => {
@@ -39,16 +45,16 @@ export const useChipsSelect = <Option extends ChipsInputOption>(
     }
 
     const filteredSet = new Set(filteredOptions);
-    const selected = selectedOptions.map((item) => getOptionValue(item));
+    const selected = selectedOptions.map((item) => getOptionValue!(item));
 
     for (const item of filteredSet) {
-      if (selected.includes(getOptionValue(item))) {
+      if (selected.includes(getOptionValue!(item))) {
         filteredSet.delete(item);
       }
     }
 
     return [...filteredSet];
-  }, [showSelected, filteredOptions, selectedOptions]);
+  }, [filteredOptions, selectedOptions, getOptionValue]);
 
   return {
     ...chipsInputState,

package/src/components/ClickPopper/ClickPopper.tsx

@@ -12,7 +12,7 @@ export interface ClickPopperProps extends PopperCommonProps {
    */
   content?: React.ReactNode;
   /**
-   * Если передан, то тултип будет показыван/скрыт в зависимости от значения свойства
+   * Если передан, то тултип будет показан/скрыт в зависимости от значения свойства
    */
   shown?: boolean;
   /**
@@ -34,13 +34,15 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   ...restProps
 }: ClickPopperProps) => {
   const [computedShown, setComputedShown] = React.useState(_shown || false);
-  const [dropdownNode, setPopperNode] = React.useState(null);
+  const [dropdownNode, setPopperNode] = React.useState<HTMLElement | null>(
+    null
+  );
 
   const shown = typeof _shown === "boolean" ? _shown : computedShown;
 
   const { document } = useDOM();
 
-  const patchedPopperRef = useExternRef(setPopperNode, getRef);
+  const patchedPopperRef = useExternRef<HTMLDivElement>(setPopperNode, getRef);
 
   const [childRef, child] = usePatchChildrenRef(children);
 
@@ -54,8 +56,8 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   useGlobalEventListener(document, "click", (e: MouseEvent) => {
     if (
       dropdownNode &&
-      !childRef.current.contains(e.target as Node) &&
-      !dropdownNode.contains(e.target)
+      !childRef.current?.contains(e.target as Node) &&
+      !dropdownNode.contains(e.target as Node)
     ) {
       setShown(false);
     }
@@ -66,8 +68,10 @@ export const ClickPopper: React.FC<ClickPopperProps> = ({
   });
 
   React.useEffect(() => {
-    targetClickEvent.add(childRef.current);
-  }, []);
+    if (childRef.current !== null) {
+      targetClickEvent.add(childRef.current);
+    }
+  }, [childRef, targetClickEvent]);
 
   return (
     <React.Fragment>

package/src/components/ConfigProvider/ConfigProvider.tsx

@@ -2,20 +2,24 @@ import * as React from "react";
 import { AppearanceType } from "@vkontakte/vk-bridge";
 import { canUseDOM, useDOM } from "../../lib/dom";
 import {
-  AppearanceScheme,
   ConfigProviderContext,
   ConfigProviderContextInterface,
   defaultConfigProviderProps,
-  Scheme,
 } from "./ConfigProviderContext";
-import { PlatformType, VKCOM } from "../../lib/platform";
 import { useIsomorphicLayoutEffect } from "../../lib/useIsomorphicLayoutEffect";
 import { useObjectMemo } from "../../hooks/useObjectMemo";
 import { noop } from "../../lib/utils";
 import { warnOnce } from "../../lib/warnOnce";
+import {
+  normalizeScheme,
+  AppearanceScheme,
+  Scheme,
+} from "../../helpers/scheme";
+import { AppearanceProvider } from "../AppearanceProvider/AppearanceProvider";
 
 export interface ConfigProviderProps extends ConfigProviderContextInterface {
   /**
+   * @deprecated будет удалено в 5.0.0, устанавливать тему следует через appearance
    * Цветовая схема приложения
    */
   scheme?: AppearanceScheme;
@@ -23,77 +27,50 @@ export interface ConfigProviderProps extends ConfigProviderContextInterface {
 
 const warn = warnOnce("ConfigProvider");
 
-function useSchemeDetector(node: HTMLElement, _scheme: Scheme | "inherit") {
+function useSchemeDetector(
+  node: HTMLElement | undefined | null,
+  _scheme: Scheme | "inherit"
+) {
   const inherit = _scheme === "inherit";
-  const getScheme = () => {
-    if (!inherit || !canUseDOM) {
+  const getScheme = React.useCallback(() => {
+    if (!inherit || !canUseDOM || !node) {
       return undefined;
     }
     return node.getAttribute("scheme") as Scheme;
-  };
+  }, [inherit, node]);
   const [resolvedScheme, setScheme] = React.useState(getScheme());
 
   React.useEffect(() => {
-    if (!inherit) {
+    if (!inherit || !node) {
       return noop;
     }
     setScheme(getScheme());
     const observer = new MutationObserver(() => setScheme(getScheme()));
     observer.observe(node, { attributes: true, attributeFilter: ["scheme"] });
     return () => observer.disconnect();
-  }, [inherit]);
+  }, [getScheme, inherit, node]);
 
   return _scheme === "inherit" ? resolvedScheme : _scheme;
 }
 
-const deriveAppearance = (scheme: Scheme): AppearanceType =>
+const deriveAppearance = (scheme: Scheme | undefined): AppearanceType =>
   scheme === Scheme.SPACE_GRAY || scheme === Scheme.VKCOM_DARK
     ? "dark"
     : "light";
 
-function normalizeScheme(
-  scheme: AppearanceScheme,
-  platform: PlatformType
-): Scheme | "inherit" {
-  if (scheme === "inherit") {
-    return scheme;
-  }
-  if (scheme === Scheme.VKCOM) {
-    process.env.NODE_ENV === "development" &&
-      warn(
-        `Схема "${Scheme.VKCOM}" устарела и будет удалена 5.0.0. Вместо неё используйте "${Scheme.VKCOM_LIGHT}"`
-      );
-    return Scheme.VKCOM_LIGHT;
-  }
-  if (
-    platform === VKCOM &&
-    (scheme === Scheme.BRIGHT_LIGHT || scheme === Scheme.SPACE_GRAY)
-  ) {
-    process.env.NODE_ENV === "development" &&
-      warn(
-        `Платформа "vkcom" и схема "${scheme}" несовместимы. С этой платформой можно использовать схемы "${Scheme.VKCOM_LIGHT}" или "${Scheme.VKCOM_DARK}"`
-      );
-    return Scheme.VKCOM_LIGHT;
-  }
-  switch (scheme) {
-    case Scheme.DEPRECATED_CLIENT_LIGHT:
-      return Scheme.BRIGHT_LIGHT;
-    case Scheme.DEPRECATED_CLIENT_DARK:
-      return Scheme.SPACE_GRAY;
-    default:
-      return scheme as Scheme;
-  }
-}
-
 const ConfigProvider: React.FC<ConfigProviderProps> = ({
   children,
   schemeTarget,
-  ...config
-}: ConfigProviderProps & {
-  children?: React.ReactNode;
+  ...props
+}: React.PropsWithChildren<ConfigProviderProps> & {
   schemeTarget?: HTMLElement;
 }) => {
-  const scheme = normalizeScheme(config.scheme, config.platform);
+  const config = { ...defaultConfigProviderProps, ...props };
+  const scheme = normalizeScheme({
+    scheme: config.scheme,
+    platform: config.platform,
+    appearance: config.appearance,
+  });
   const { document } = useDOM();
   const target = schemeTarget || document?.body;
 
@@ -103,14 +80,14 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
     }
     if (
       process.env.NODE_ENV === "development" &&
-      target.hasAttribute("scheme")
+      target?.hasAttribute("scheme")
     ) {
       warn(
         '<body scheme> was set before VKUI mount - did you forget scheme="inherit"?'
       );
     }
-    target.setAttribute("scheme", scheme);
-    return () => target.removeAttribute("scheme");
+    target?.setAttribute("scheme", scheme);
+    return () => target?.removeAttribute("scheme");
   }, [scheme]);
 
   const realScheme = useSchemeDetector(target, scheme);
@@ -121,13 +98,12 @@ const ConfigProvider: React.FC<ConfigProviderProps> = ({
 
   return (
     <ConfigProviderContext.Provider value={configContext}>
-      {children}
+      <AppearanceProvider appearance={configContext.appearance}>
+        {children}
+      </AppearanceProvider>
     </ConfigProviderContext.Provider>
   );
 };
 
-// Деструктуризация нужна из бага в react-docgen-typescript
-// https://github.com/styleguidist/react-docgen-typescript/issues/195
-ConfigProvider.defaultProps = { ...defaultConfigProviderProps };
-
+// eslint-disable-next-line import/no-default-export
 export default ConfigProvider;