@vkontakte/vkui 4.24.0 → 4.26.0

package/src/components/Cell/useDraggable.tsx

@@ -17,22 +17,28 @@ export const useDraggable = ({
   onDragFinish,
 }: Pick<CellProps, "onDragFinish">) => {
   const [dragging, setDragging] = React.useState<boolean>(false);
-  const rootElRef = React.useRef(null);
+  const rootElRef = React.useRef<HTMLElement>(null);
 
-  const [siblings, setSiblings] = React.useState<HTMLElement[]>(undefined);
-  const [dragStartIndex, setDragStartIndex] = React.useState<number>(undefined);
-  const [dragEndIndex, setDragEndIndex] = React.useState<number>(undefined);
+  const [siblings, setSiblings] = React.useState<HTMLElement[]>([]);
+  const [dragStartIndex, setDragStartIndex] = React.useState<number>(0);
+  const [dragEndIndex, setDragEndIndex] = React.useState<number>(0);
   const [dragShift, setDragShift] = React.useState<number>(0);
-  const [dragDirection, setDragDirection] = React.useState<"down" | "up">(
-    undefined
-  );
+  const [dragDirection, setDragDirection] = React.useState<
+    "down" | "up" | undefined
+  >(undefined);
 
   const onDragStart = () => {
     const rootEl = rootElRef.current;
+    if (!rootEl) {
+      return;
+    }
 
     setDragging(true);
 
-    const _siblings: HTMLElement[] = [...rootEl.parentElement.childNodes];
+    let _siblings: HTMLElement[] = [];
+    if (rootEl.parentElement?.childNodes) {
+      _siblings = Array.from(rootEl.parentElement.children) as HTMLElement[];
+    }
     const idx = _siblings.indexOf(rootEl);
 
     setDragStartIndex(idx);
@@ -46,60 +52,62 @@ export const useDraggable = ({
 
     const rootEl = rootElRef.current;
 
-    rootEl.style.transform = `translateY(${e.shiftY}px)`;
-    const rootGesture = rootEl.getBoundingClientRect();
+    if (rootEl) {
+      rootEl.style.transform = `translateY(${e.shiftY}px)`;
+      const rootGesture = rootEl.getBoundingClientRect();
 
-    setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
-    setDragShift(e.shiftY);
-    setDragEndIndex(dragStartIndex);
+      setDragDirection(dragShift - e.shiftY < 0 ? "down" : "up");
+      setDragShift(e.shiftY);
+      setDragEndIndex(dragStartIndex);
 
-    siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
-      const siblingGesture = sibling.getBoundingClientRect();
-      const siblingHalfHeight = siblingGesture.height / 2;
+      siblings.forEach((sibling: HTMLElement, siblingIndex: number) => {
+        const siblingGesture = sibling.getBoundingClientRect();
+        const siblingHalfHeight = siblingGesture.height / 2;
 
-      const rootOverSibling =
-        rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
-      const rootUnderSibling =
-        rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
+        const rootOverSibling =
+          rootGesture.bottom > siblingGesture.top + siblingHalfHeight;
+        const rootUnderSibling =
+          rootGesture.top < siblingGesture.bottom - siblingHalfHeight;
 
-      if (dragStartIndex < siblingIndex) {
-        if (rootOverSibling) {
-          if (dragDirection === "down") {
-            sibling.style.transform = "translateY(-100%)";
-          }
+        if (dragStartIndex < siblingIndex) {
+          if (rootOverSibling) {
+            if (dragDirection === "down") {
+              sibling.style.transform = "translateY(-100%)";
+            }
 
-          setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
-        }
-        if (rootUnderSibling && dragDirection === "up") {
-          sibling.style.transform = "translateY(0)";
-        }
-      } else if (dragStartIndex > siblingIndex) {
-        if (rootUnderSibling) {
-          if (dragDirection === "up") {
-            sibling.style.transform = "translateY(100%)";
+            setDragEndIndex((dragEndIndex) => dragEndIndex + 1);
           }
+          if (rootUnderSibling && dragDirection === "up") {
+            sibling.style.transform = "translateY(0)";
+          }
+        } else if (dragStartIndex > siblingIndex) {
+          if (rootUnderSibling) {
+            if (dragDirection === "up") {
+              sibling.style.transform = "translateY(100%)";
+            }
 
-          setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
-        }
-        if (rootOverSibling && dragDirection === "down") {
-          sibling.style.transform = "translateY(0)";
+            setDragEndIndex((dragEndIndex) => dragEndIndex - 1);
+          }
+          if (rootOverSibling && dragDirection === "down") {
+            sibling.style.transform = "translateY(0)";
+          }
         }
-      }
-    });
+      });
+    }
   };
 
   const onDragEnd = () => {
     const [from, to] = [dragStartIndex, dragEndIndex];
 
     siblings.forEach((sibling: HTMLElement) => {
-      sibling.style.transform = null;
+      sibling.style.transform = "";
     });
 
-    setSiblings(undefined);
-    setDragEndIndex(undefined);
-    setDragStartIndex(undefined);
+    setSiblings([]);
+    setDragEndIndex(0);
+    setDragStartIndex(0);
     setDragDirection(undefined);
-    setDragShift(undefined);
+    setDragShift(0);
 
     setDragging(false);
 

package/src/components/Checkbox/Checkbox.tsx

@@ -103,6 +103,7 @@ export const Checkbox: React.FunctionComponent<CheckboxProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default withAdaptivity(Checkbox, {
   sizeY: true,
 });

package/src/components/Chip/Chip.tsx

@@ -74,4 +74,5 @@ const Chip: React.FC<ChipProps> = ({
   );
 };
 
+// eslint-disable-next-line import/no-default-export
 export default Chip;

package/src/components/ChipsInput/ChipsInput.tsx

@@ -44,9 +44,40 @@ export interface ChipsInputProps<Option extends ChipsInputOption>
   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>
+    );
+  },
+};
+
 const ChipsInput = <Option extends ChipsInputOption>(
   props: ChipsInputProps<Option>
 ) => {
+  const propsWithDefault = { ...chipsInputDefaultProps, ...props };
   const {
     style,
     value,
@@ -68,7 +99,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
     after,
     inputAriaLabel,
     ...restProps
-  } = props;
+  } = propsWithDefault;
   const { sizeY } = useAdaptivity();
 
   const [focused, setFocused] = React.useState(false);
@@ -78,7 +109,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
     removeOption,
     selectedOptions,
     handleInputChange,
-  } = useChipsInput(props);
+  } = useChipsInput(propsWithDefault);
   const inputRef = useExternRef(getRef);
 
   const isDisabled = restProps.disabled || restProps.readOnly;
@@ -89,7 +120,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
       return;
     }
 
-    onKeyDown(e);
+    onKeyDown!(e);
 
     if (
       e.key === "Backspace" &&
@@ -97,7 +128,9 @@ const ChipsInput = <Option extends ChipsInputOption>(
       !fieldValue &&
       selectedOptions.length
     ) {
-      removeOption(getOptionValue(selectedOptions[selectedOptions.length - 1]));
+      removeOption(
+        getOptionValue!(selectedOptions[selectedOptions.length - 1])
+      );
       e.preventDefault();
     }
 
@@ -111,21 +144,23 @@ const ChipsInput = <Option extends ChipsInputOption>(
     if (focused) {
       setFocused(false);
     }
-    onBlur(e);
+    onBlur!(e);
   };
 
   const handleFocus = (e: React.FocusEvent<HTMLInputElement>) => {
     if (!focused) {
       setFocused(true);
     }
-    onFocus(e);
+    onFocus!(e);
   };
 
   const handleChipRemove = (
-    _: React.MouseEvent<HTMLInputElement>,
-    value: ChipsInputValue
+    _: React.MouseEvent | undefined,
+    value: ChipsInputValue | undefined
   ) => {
-    removeOption(value);
+    if (value !== undefined) {
+      removeOption(value);
+    }
   };
 
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
@@ -157,17 +192,17 @@ const ChipsInput = <Option extends ChipsInputOption>(
     >
       <div vkuiClass="ChipsInput__container" role="presentation">
         {selectedOptions.map((option: Option) => {
-          const value = getOptionValue(option);
-          const label = getOptionLabel(option);
+          const value = getOptionValue!(option);
+          const label = getOptionLabel!(option);
 
           return (
             <React.Fragment key={`${typeof value}-${value}`}>
-              {renderChip({
+              {renderChip!({
                 option,
                 value,
                 label,
                 onRemove: handleChipRemove,
-                disabled: restProps.disabled,
+                disabled: Boolean(restProps.disabled),
                 className: prefixClass("ChipsInput__chip"),
               })}
             </React.Fragment>
@@ -190,7 +225,7 @@ const ChipsInput = <Option extends ChipsInputOption>(
             onKeyDown={handleKeyDown}
             onFocus={handleFocus}
             onBlur={handleBlur}
-            placeholder={selectedOptions.length ? null : placeholder}
+            placeholder={selectedOptions.length ? undefined : placeholder}
             {...restProps}
           />
         </label>
@@ -199,35 +234,5 @@ const ChipsInput = <Option extends ChipsInputOption>(
   );
 };
 
-export const chipsInputDefaultProps: ChipsInputProps<any> = {
-  type: "text",
-  onChange: noop,
-  onInputChange: noop,
-  onKeyDown: noop,
-  onBlur: noop,
-  onFocus: noop,
-  value: [],
-  inputValue: "",
-  inputAriaLabel: "Введите ваше значение...",
-  getOptionValue: (option: ChipsInputOption): ChipsInputValue => option.value,
-  getOptionLabel: (option: ChipsInputOption): string => option.label,
-  getNewOptionData: (_: ChipsInputValue, label: string): ChipsInputOption => ({
-    value: label,
-    label,
-  }),
-  renderChip({
-    disabled,
-    value,
-    label,
-    ...rest
-  }: RenderChip<ChipsInputOption>) {
-    return (
-      <Chip value={value} removable={!disabled} {...rest}>
-        {label}
-      </Chip>
-    );
-  },
-};
-ChipsInput.defaultProps = chipsInputDefaultProps;
-
+// eslint-disable-next-line import/no-default-export
 export default ChipsInput;

package/src/components/ChipsInput/useChipsInput.ts

@@ -12,17 +12,17 @@ export const useChipsInput = <Option extends ChipsInputOption>(
     props;
 
   const [fieldValue, setFieldValue] = React.useState(props.inputValue);
-  const [selectedOptions, setSelectedOptions] = React.useState(value);
+  const [selectedOptions, setSelectedOptions] = React.useState(value ?? []);
 
   const clearInput = React.useCallback(() => {
     setFieldValue("");
-    onInputChange({ target: { value: "" } } as any);
+    onInputChange!({ target: { value: "" } } as any);
   }, [onInputChange]);
 
   const handleInputChange = React.useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
       setFieldValue(e.target.value);
-      onInputChange(e);
+      onInputChange!(e);
     },
     [onInputChange]
   );
@@ -30,7 +30,8 @@ export const useChipsInput = <Option extends ChipsInputOption>(
   const toggleOption = React.useCallback(
     (newOption: Option, value?: boolean) => {
       const newSelectedOptions = selectedOptions.filter(
-        (option: Option) => getOptionValue(newOption) !== getOptionValue(option)
+        (option: Option) =>
+          getOptionValue!(newOption) !== getOptionValue!(option)
       );
 
       if (value === true) {
@@ -38,7 +39,7 @@ export const useChipsInput = <Option extends ChipsInputOption>(
       }
 
       setSelectedOptions(newSelectedOptions);
-      onChange(newSelectedOptions);
+      onChange!(newSelectedOptions);
     },
     [selectedOptions, getOptionValue, onChange]
   );
@@ -51,22 +52,22 @@ export const useChipsInput = <Option extends ChipsInputOption>(
     const trimmedValue = fieldValue?.trim();
 
     if (trimmedValue) {
-      addOption(getNewOptionData(undefined, trimmedValue));
+      addOption(getNewOptionData!(undefined, trimmedValue));
       clearInput();
     }
   }, [addOption, clearInput, getNewOptionData, fieldValue]);
   const removeOption = React.useCallback(
     (value: ChipsInputValue) => {
-      toggleOption(getNewOptionData(undefined, value as string), false);
+      toggleOption(getNewOptionData!(undefined, value as string), false);
     },
     [toggleOption, getNewOptionData]
   );
 
   React.useEffect(() => {
-    setSelectedOptions(value);
+    setSelectedOptions(value as Option[]);
 
     return () => setSelectedOptions([]);
-  }, [props.value]);
+  }, [props.value, value]);
 
   React.useEffect(() => {
     setFieldValue(props.inputValue);

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 });