@vuu-ui/vuu-ui-controls 0.8.5-debug

package/types/tabstrip/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./Tabstrip";
+export * from "./Tab";
+export * from "./TabsTypes";
+export * from "./tabstrip-dom-utils";

package/types/tabstrip/tabstrip-dom-utils.d.ts

@@ -0,0 +1,3 @@
+export declare const getElementIndex: (el: HTMLElement | null) => number;
+export declare const getIndexOfSelectedTab: (container: HTMLElement | null) => number;
+export declare const getIndexOfEditedItem: (container: HTMLElement | null) => number;

package/types/tabstrip/useAnimatedSelectionThumb.d.ts

@@ -0,0 +1,6 @@
+import { CSSProperties, RefObject } from "react";
+export declare const useAnimatedSelectionThumb: (containerRef: RefObject<HTMLElement>, activeTabIndex: number) => {
+    containerStyle: CSSProperties;
+    resumeAnimation: () => void;
+    suspendAnimation: () => void;
+};

package/types/tabstrip/useKeyboardNavigation.d.ts

@@ -0,0 +1,29 @@
+import { FocusEvent, FocusEventHandler, KeyboardEvent, MouseEvent as ReactMouseEvent, MouseEventHandler, RefObject } from "react";
+type orientationType = "horizontal" | "vertical";
+export interface ContainerNavigationProps {
+    onBlur: FocusEventHandler;
+    onFocus: FocusEventHandler;
+    onMouseDownCapture: MouseEventHandler;
+    onMouseLeave: MouseEventHandler;
+}
+interface TabstripNavigationHookProps {
+    containerRef: RefObject<HTMLElement>;
+    defaultHighlightedIdx?: number;
+    highlightedIdx?: number;
+    keyBoardActivation?: "manual" | "automatic";
+    orientation: orientationType;
+    selectedIndex: number | null;
+}
+interface TabstripNavigationHookResult {
+    containerProps: ContainerNavigationProps;
+    highlightedIdx: number;
+    focusTab: (tabIndex: number, immediateFocus?: boolean, withKeyboard?: boolean, delay?: number) => void;
+    focusVisible: number;
+    focusIsWithinComponent: boolean;
+    onClick: (evt: ReactMouseEvent, tabIndex: number) => void;
+    onFocus: (evt: FocusEvent<HTMLElement>) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    setHighlightedIdx: (highlightedIndex: number) => void;
+}
+export declare const useKeyboardNavigation: ({ containerRef, defaultHighlightedIdx, highlightedIdx: highlightedIdxProp, keyBoardActivation, orientation, selectedIndex: selectedTabIndex, }: TabstripNavigationHookProps) => TabstripNavigationHookResult;
+export {};

package/types/tabstrip/useSelection.d.ts

@@ -0,0 +1,14 @@
+import { KeyboardEvent, MouseEvent } from "react";
+export declare const isTabElement: (el: HTMLElement) => boolean;
+export declare const useSelection: ({ defaultSelected, highlightedIdx, onSelectionChange, selected: selectedProp, }: {
+    defaultSelected?: number | undefined;
+    highlightedIdx: number;
+    onSelectionChange?: ((tabIndex: number) => void) | undefined;
+    selected?: number | undefined;
+}) => {
+    activateTab: (tabIndex: number) => void;
+    isControlled: boolean;
+    onClick: (evt: MouseEvent<Element>, tabIndex: number) => void;
+    onKeyDown: (evt: KeyboardEvent) => void;
+    selected: number;
+};

package/types/tabstrip/useTabstrip.d.ts

@@ -0,0 +1,49 @@
+import type { MenuActionHandler } from "@vuu-ui/vuu-data-types";
+import type { OverflowItem } from "@vuu-ui/vuu-layout";
+import { KeyboardEvent, MouseEvent as ReactMouseEvent, RefObject } from "react";
+import type { orientationType } from "./TabsTypes";
+export type ExitEditModeHandler = (originalValue: string, editedValue: string, allowDeactivation: boolean, tabIndex: number) => void;
+export interface TabstripHookProps {
+    activeTabIndex: number;
+    allowDragDrop: boolean;
+    animateSelectionThumb: boolean;
+    containerRef: RefObject<HTMLElement>;
+    onActiveChange?: (tabIndex: number) => void;
+    onAddTab?: () => void;
+    onCloseTab?: (tabIndex: number, newActiveTabIndex: number) => void;
+    onExitEditMode?: ExitEditModeHandler;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
+    orientation: orientationType;
+    keyBoardActivation?: "manual" | "automatic";
+}
+export declare const useTabstrip: ({ activeTabIndex: activeTabIndexProp, allowDragDrop, animateSelectionThumb, containerRef, onActiveChange, onAddTab, onCloseTab, onExitEditMode, onMoveTab, orientation, keyBoardActivation, }: TabstripHookProps) => {
+    draggable?: JSX.Element | undefined;
+    dropIndicator?: JSX.Element | undefined;
+    draggedItemIndex?: number | undefined;
+    isDragging: boolean;
+    isScrolling: RefObject<boolean>;
+    revealOverflowedItems: boolean;
+    activeTabIndex: number;
+    containerStyle: import("react").CSSProperties;
+    focusVisible: number;
+    containerProps: {
+        onSwitchWrappedItemIntoView: (item: OverflowItem) => void;
+        onBlur: import("react").FocusEventHandler<Element>;
+        onFocus: import("react").FocusEventHandler<Element>;
+        onMouseDownCapture: import("react").MouseEventHandler<Element>;
+        onMouseLeave: import("react").MouseEventHandler<Element>;
+    };
+    navigationProps: {
+        onFocus: (evt: import("react").FocusEvent<HTMLElement, Element>) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+    };
+    onClickAddTab: () => void;
+    tabProps: {
+        onClick: (evt: ReactMouseEvent<HTMLElement>, tabIndex: number) => void;
+        onKeyDown: (evt: KeyboardEvent) => void;
+        onExitEditMode: ExitEditModeHandler;
+        onMenuAction: MenuActionHandler;
+        onMenuClose: () => void;
+        onMouseDown: import("react").MouseEventHandler<Element> | undefined;
+    };
+};