@snack-uikit/fields 0.14.2 → 0.15.0

package/src/components/FieldSelect/hooks/useFilteredOptions.ts

@@ -1,23 +0,0 @@
-import { useMemo } from 'react';
-
-import { Option } from '../types';
-
-export function useFilteredOptions({
-  searchable,
-  touched,
-  inputValue,
-  options,
-}: {
-  searchable: boolean;
-  touched: boolean;
-  inputValue: string;
-  options: Option[];
-}) {
-  return useMemo(
-    () =>
-      searchable && touched && inputValue
-        ? options.filter(item => item.label.toLowerCase().includes(inputValue.toLowerCase().trim()))
-        : options,
-    [inputValue, options, searchable, touched],
-  );
-}

package/src/components/FieldSelect/hooks/useList.ts

@@ -1,87 +0,0 @@
-import { useEffect, useRef } from 'react';
-import { useUncontrolledProp } from 'uncontrollable';
-
-import { FieldSelectProps } from '../FieldSelect';
-import { Option } from '../types';
-import { useFilteredOptions } from './useFilteredOptions';
-import { useListNavigation } from './useListNavigation';
-
-type UseListProps = Pick<
-  FieldSelectProps,
-  'readonly' | 'disabled' | 'open' | 'onOpenChange' | 'options' | 'showCopyButton'
-> & {
-  searchable: NonNullable<FieldSelectProps['searchable']>;
-  showAdditionalButton: boolean;
-  showClearButton: boolean;
-  inputValue: string;
-  setInputValue(value: string): void;
-  isChecked(option: Option): boolean;
-};
-
-export function useList({
-  open,
-  onOpenChange,
-  readonly,
-  disabled,
-  searchable,
-  showAdditionalButton,
-  showCopyButton: showCopyButtonProp,
-  showClearButton: showClearButtonProp,
-  inputValue,
-  setInputValue,
-  options,
-  isChecked,
-}: UseListProps) {
-  const touched = useRef(false);
-  const localRef = useRef<HTMLInputElement>(null);
-  const clearButtonRef = useRef<HTMLButtonElement>(null);
-  const copyButtonRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useUncontrolledProp(open, false, onOpenChange);
-  const showDropList = isOpen && !readonly && !disabled;
-  const showClearButton = showClearButtonProp && !readonly && (showAdditionalButton || inputValue.length > 0);
-  const showCopyButton = Boolean(showAdditionalButton && showCopyButtonProp && readonly);
-
-  const { extendedOptions, onInputKeyDown, onButtonKeyDown, onDroplistFocusLeave, firstDroplistItemRefCallback } =
-    useListNavigation({
-      inputRef: localRef,
-      options: useFilteredOptions({ searchable, options, touched: touched.current, inputValue }),
-      toggleListOpen: setIsOpen,
-      isChecked,
-    });
-
-  const handleOpenChange = (value: boolean) => {
-    if (!value) {
-      touched.current = false;
-    }
-
-    setIsOpen(value);
-  };
-
-  const handleInputValueChange = (value: string) => {
-    touched.current = true;
-    setIsOpen(true);
-    setInputValue(value);
-  };
-
-  useEffect(() => {
-    if (open) {
-      localRef.current?.focus();
-    }
-  }, [localRef, open]);
-
-  return {
-    isOpen: showDropList,
-    setIsOpen: handleOpenChange,
-    localRef,
-    clearButtonRef,
-    showClearButton,
-    copyButtonRef,
-    showCopyButton,
-    extendedOptions,
-    onInputKeyDown,
-    onButtonKeyDown,
-    onInputValueChange: handleInputValueChange,
-    firstDroplistItemRefCallback,
-    onDroplistFocusLeave,
-  };
-}

package/src/components/FieldSelect/hooks/useListNavigation.ts

@@ -1,81 +0,0 @@
-import { KeyboardEvent, KeyboardEventHandler, RefObject, useCallback, useMemo, useRef } from 'react';
-
-import { moveCursorToEnd, runAfterRerender } from '@snack-uikit/input-private';
-
-import { Option } from '../types';
-
-type UseListNavigationProps = {
-  options: Option[];
-  toggleListOpen(value: boolean): void;
-  inputRef: RefObject<HTMLInputElement>;
-  isChecked(option: Option): boolean;
-};
-
-export function useListNavigation({ options, toggleListOpen, inputRef, isChecked }: UseListNavigationProps) {
-  const setInputFocus = useCallback(() => {
-    runAfterRerender(() => {
-      inputRef.current?.focus();
-      moveCursorToEnd(inputRef.current);
-    });
-  }, [inputRef]);
-
-  const firstDroplistItemRef = useRef<HTMLButtonElement | null>(null);
-
-  const firstDroplistItemRefCallback = useCallback(
-    (element: HTMLButtonElement | null) => {
-      firstDroplistItemRef.current = element;
-    },
-    [firstDroplistItemRef],
-  );
-
-  const setOptionFocus = useCallback(() => {
-    runAfterRerender(() => firstDroplistItemRef.current?.focus());
-  }, [firstDroplistItemRef]);
-
-  const leaveElement = (event: KeyboardEvent) => {
-    if (event.key === 'ArrowDown') {
-      event.preventDefault();
-      toggleListOpen(true);
-      setOptionFocus();
-    }
-
-    if (event.key === 'Tab') {
-      toggleListOpen(false);
-    }
-  };
-
-  const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
-    leaveElement(event);
-
-    if (event.key === 'Enter') {
-      toggleListOpen(true);
-      setOptionFocus();
-    }
-  };
-
-  const onDroplistFocusLeave = useCallback(
-    (direction: string) => {
-      if (['top', 'common'].includes(direction)) {
-        setInputFocus();
-      }
-    },
-    [setInputFocus],
-  );
-
-  const extendedOptions = useMemo(
-    () =>
-      options.map(option => ({
-        ...option,
-        checked: isChecked(option),
-      })),
-    [isChecked, options],
-  );
-
-  return {
-    onInputKeyDown: handleInputKeyDown,
-    onButtonKeyDown: leaveElement,
-    onDroplistFocusLeave,
-    extendedOptions,
-    firstDroplistItemRefCallback,
-  };
-}