@snack-uikit/list 0.10.0 → 0.10.1-preview-69abc1d3.0

package/dist/components/Items/NextListItem/hooks.js

@@ -1,80 +0,0 @@
-import { useCallback, useEffect, useState } from 'react';
-import { useParentListContext } from '../../Lists/contexts';
-export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }) {
-    const { triggerRef, parentResetNestedIndex, parentIds, parentItemRefs, parentOpenNestedIndex } = useParentListContext();
-    const [activeFocusIndex, setActiveFocusIndex] = useState(-1);
-    const [openNestedIndex, setOpenNestedIndex] = useState(-1);
-    const [open, setOpen] = useState(false);
-    const handleListKeyDown = (e) => {
-        var _a, _b;
-        switch (e.key) {
-            case 'ArrowDown': {
-                setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-                e.stopPropagation();
-                e.preventDefault();
-                return;
-            }
-            case 'ArrowUp': {
-                setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
-                e.preventDefault();
-                e.stopPropagation();
-                return;
-            }
-            case 'ArrowRight': {
-                e.stopPropagation();
-                e.preventDefault();
-                if (expandedIds.includes(ids[activeFocusIndex])) {
-                    setOpenNestedIndex(activeFocusIndex);
-                }
-                return;
-            }
-            case 'ArrowLeft': {
-                (_a = parentItemRefs === null || parentItemRefs === void 0 ? void 0 : parentItemRefs[parentOpenNestedIndex].current) === null || _a === void 0 ? void 0 : _a.focus();
-                parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-                setActiveFocusIndex(-1);
-                setOpenNestedIndex(-1);
-                setOpen(false);
-                e.stopPropagation();
-                e.preventDefault();
-                return;
-            }
-            case 'Tab': {
-                (_b = triggerRef === null || triggerRef === void 0 ? void 0 : triggerRef.current) === null || _b === void 0 ? void 0 : _b.focus();
-                parentResetNestedIndex === null || parentResetNestedIndex === void 0 ? void 0 : parentResetNestedIndex();
-                setActiveFocusIndex(-1);
-                setOpen(false);
-                e.preventDefault();
-                return;
-            }
-            default: {
-                break;
-            }
-        }
-    };
-    useEffect(() => {
-        var _a, _b;
-        (_b = (_a = itemRefs === null || itemRefs === void 0 ? void 0 : itemRefs[activeFocusIndex]) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.focus();
-    }, [activeFocusIndex, itemRefs]);
-    useEffect(() => {
-        if (parentIds[parentOpenNestedIndex] === id && openNestedIndex === -1) {
-            setOpen(true);
-            setActiveFocusIndex(activeIndex => (activeIndex === -1 ? 0 : activeIndex));
-        }
-    }, [id, openNestedIndex, parentIds, parentOpenNestedIndex]);
-    const resetNestedIndex = () => {
-        setActiveFocusIndex(openNestedIndex);
-        setOpenNestedIndex(-1);
-    };
-    const resetActiveFocusIndex = useCallback(() => setActiveFocusIndex(-1), []);
-    return {
-        activeFocusIndex,
-        setActiveFocusIndex,
-        openNestedIndex,
-        setOpenNestedIndex,
-        resetNestedIndex,
-        resetActiveFocusIndex,
-        handleListKeyDown,
-        open,
-        setOpen,
-    };
-}

package/dist/components/Lists/contexts/ListProvider.d.ts

@@ -1,17 +0,0 @@
-import { ReactNode } from 'react';
-export type ListContextType = {
-    /** Размер списка */
-    size?: 's' | 'm' | 'l';
-    /** Отображать ли маркер у выбранного жлемента списка */
-    marker?: boolean;
-};
-export type ListContextPrivateType = {
-    parent?: 'list' | 'droplist';
-};
-type Child = {
-    children: ReactNode;
-};
-export declare const ListContext: import("react").Context<ListContextType & ListContextPrivateType>;
-export declare const useListContext: () => ListContextType & ListContextPrivateType;
-export declare function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/components/Lists/contexts/ParentListProvider.d.ts

@@ -1,18 +0,0 @@
-import { RefObject } from 'react';
-export type ParentListContextType = {
-    parentActiveFocusIndex: number;
-    parentSetActiveFocusIndex?(idx: number): void;
-    parentResetActiveFocusIndex?(): void;
-    parentIds: Array<string | number>;
-    parentExpandedIds: Array<string | number>;
-    parentItemRefs: Array<RefObject<HTMLElement>>;
-    parentOpenNestedIndex: number;
-    parentResetNestedIndex?(): void;
-    openCollapsedItems?: Array<string | number>;
-    toggleOpenCollapsedItems?(id: string | number): void;
-    triggerRef?: RefObject<HTMLElement>;
-    parentRef?: RefObject<HTMLElement>;
-};
-export declare const ParentListContext: import("react").Context<ParentListContextType>;
-export declare const useParentListContext: () => ParentListContextType;
-export declare function ParentListProvider(): null;

package/dist/components/Lists/contexts/ParentListProvider.js

@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-export const ParentListContext = createContext({
-    parentActiveFocusIndex: -1,
-    parentOpenNestedIndex: -1,
-    parentIds: [],
-    parentExpandedIds: [],
-    parentItemRefs: [],
-});
-export const useParentListContext = () => useContext(ParentListContext);
-export function ParentListProvider() {
-    return null;
-}

package/src/components/Items/NextListItem/hooks.ts

@@ -1,105 +0,0 @@
-import { KeyboardEvent, RefObject, useCallback, useEffect, useState } from 'react';
-
-import { useParentListContext } from '../../Lists/contexts';
-
-type UseKeyboardNavigationProps = {
-  ids: Array<number | string>;
-  expandedIds: Array<number | string>;
-  itemRefs?: RefObject<HTMLElement>[];
-  id?: string | number;
-};
-
-export function useKeyboardNavigation({ ids, expandedIds, itemRefs, id }: UseKeyboardNavigationProps) {
-  const { triggerRef, parentResetNestedIndex, parentIds, parentItemRefs, parentOpenNestedIndex } =
-    useParentListContext();
-
-  const [activeFocusIndex, setActiveFocusIndex] = useState<number>(-1);
-  const [openNestedIndex, setOpenNestedIndex] = useState<number>(-1);
-  const [open, setOpen] = useState<boolean>(false);
-
-  const handleListKeyDown = (e: KeyboardEvent<HTMLElement>) => {
-    switch (e.key) {
-      case 'ArrowDown': {
-        setActiveFocusIndex(activeIndex => Math.min(activeIndex + 1, ids.length - 1));
-
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-      case 'ArrowUp': {
-        setActiveFocusIndex(activeIndex => Math.max(activeIndex - 1, 0));
-
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      case 'ArrowRight': {
-        e.stopPropagation();
-        e.preventDefault();
-
-        if (expandedIds.includes(ids[activeFocusIndex])) {
-          setOpenNestedIndex(activeFocusIndex);
-        }
-
-        return;
-      }
-      case 'ArrowLeft': {
-        parentItemRefs?.[parentOpenNestedIndex].current?.focus();
-
-        parentResetNestedIndex?.();
-        setActiveFocusIndex(-1);
-        setOpenNestedIndex(-1);
-
-        setOpen(false);
-
-        e.stopPropagation();
-        e.preventDefault();
-        return;
-      }
-
-      case 'Tab': {
-        triggerRef?.current?.focus();
-        parentResetNestedIndex?.();
-        setActiveFocusIndex(-1);
-        setOpen(false);
-        e.preventDefault();
-
-        return;
-      }
-
-      default: {
-        break;
-      }
-    }
-  };
-
-  useEffect(() => {
-    itemRefs?.[activeFocusIndex]?.current?.focus();
-  }, [activeFocusIndex, itemRefs]);
-
-  useEffect(() => {
-    if (parentIds[parentOpenNestedIndex] === id && openNestedIndex === -1) {
-      setOpen(true);
-      setActiveFocusIndex(activeIndex => (activeIndex === -1 ? 0 : activeIndex));
-    }
-  }, [id, openNestedIndex, parentIds, parentOpenNestedIndex]);
-
-  const resetNestedIndex = () => {
-    setActiveFocusIndex(openNestedIndex);
-    setOpenNestedIndex(-1);
-  };
-
-  const resetActiveFocusIndex = useCallback(() => setActiveFocusIndex(-1), []);
-
-  return {
-    activeFocusIndex,
-    setActiveFocusIndex,
-    openNestedIndex,
-    setOpenNestedIndex,
-    resetNestedIndex,
-    resetActiveFocusIndex,
-    handleListKeyDown,
-    open,
-    setOpen,
-  };
-}

package/src/components/Lists/contexts/CollapseProvider.ts

@@ -1,9 +0,0 @@
-import { createContext, useContext } from 'react';
-
-export type CollapseContextType = {
-  level?: number;
-};
-
-export const CollapseContext = createContext<CollapseContextType>({});
-
-export const useCollapseContext = () => useContext(CollapseContext);

package/src/components/Lists/contexts/ListProvider.tsx

@@ -1,28 +0,0 @@
-import { createContext, ReactNode, useContext } from 'react';
-
-export type ListContextType = {
-  /** Размер списка */
-  size?: 's' | 'm' | 'l';
-  /** Отображать ли маркер у выбранного жлемента списка */
-  marker?: boolean;
-};
-
-export type ListContextPrivateType = {
-  parent?: 'list' | 'droplist';
-};
-
-type Child = {
-  children: ReactNode;
-};
-
-export const ListContext = createContext<ListContextType & ListContextPrivateType>({});
-
-export const useListContext = () => useContext(ListContext);
-
-function extractListProps<T extends ListContextType & ListContextPrivateType>({ size, marker, parent }: T) {
-  return { size, marker, parent };
-}
-
-export function ListContextProvider({ children, ...props }: ListContextType & Child & ListContextPrivateType) {
-  return <ListContext.Provider value={extractListProps(props)}>{children}</ListContext.Provider>;
-}

package/src/components/Lists/contexts/ParentListProvider.tsx

@@ -1,35 +0,0 @@
-import { createContext, RefObject, useContext } from 'react';
-
-export type ParentListContextType = {
-  parentActiveFocusIndex: number;
-  parentSetActiveFocusIndex?(idx: number): void;
-  parentResetActiveFocusIndex?(): void;
-
-  parentIds: Array<string | number>;
-  parentExpandedIds: Array<string | number>;
-  parentItemRefs: Array<RefObject<HTMLElement>>;
-
-  parentOpenNestedIndex: number;
-  parentResetNestedIndex?(): void;
-
-  openCollapsedItems?: Array<string | number>;
-  toggleOpenCollapsedItems?(id: string | number): void;
-
-  triggerRef?: RefObject<HTMLElement>;
-  parentRef?: RefObject<HTMLElement>;
-};
-
-export const ParentListContext = createContext<ParentListContextType>({
-  parentActiveFocusIndex: -1,
-  parentOpenNestedIndex: -1,
-
-  parentIds: [],
-  parentExpandedIds: [],
-  parentItemRefs: [],
-});
-
-export const useParentListContext = () => useContext(ParentListContext);
-
-export function ParentListProvider() {
-  return null;
-}