@vuu-ui/vuu-layout 0.8.4-debug → 0.8.5-debug

package/types/overflow-container/OverflowContainer.d.ts

@@ -0,0 +1,10 @@
+import React, { HTMLAttributes } from "react";
+import "./OverflowContainer.css";
+import { OverflowItem } from "./overflow-utils";
+export interface OverflowContainerProps extends HTMLAttributes<HTMLDivElement> {
+    debugId?: string;
+    height: number;
+    onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
+    overflowIcon?: string;
+}
+export declare const OverflowContainer: React.ForwardRefExoticComponent<OverflowContainerProps & React.RefAttributes<HTMLDivElement>>;

package/types/overflow-container/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./OverflowContainer";
+export * from "./overflow-utils";

package/types/overflow-container/overflow-utils.d.ts

@@ -0,0 +1,47 @@
+export type OverflowItem = {
+    index: string;
+    label: string;
+    overflowPriority: string;
+};
+export declare const sortByScreenOrder: (elements: HTMLElement[]) => HTMLElement[];
+export declare const NO_WRAPPED_ITEMS: OverflowItem[];
+/**
+    Identify wrapped items by comparing position of each item. Any item
+    not to the right of preceeding item has wrapped. Note: on-screen
+    position of items does not necessarily match document position, due
+    to use of css order. This is taken into account by sorting.
+    TODO support Vertical orientation
+ */
+export declare const getNonWrappedAndWrappedItems: (container: HTMLElement) => [OverflowItem[], OverflowItem[]];
+export declare const applyOverflowClassToWrappedItems: (container: HTMLElement, overflowedItems: OverflowItem[]) => void;
+export declare const overflowIndicatorHasWrappedButShouldNotHave: (wrappedItems: OverflowItem[]) => boolean;
+export declare const highPriorityItemsHaveWrappedButShouldNotHave: (nonWrappedItems: OverflowItem[], wrappedItems: OverflowItem[]) => boolean;
+/**
+  An edge case that may occur when reducing width from unwrapped to
+  wrapped, or on first render.
+  We overflow one or more items. Then, when the overflowIndicator assumes
+  full width, it may itself overflow.
+*/
+export declare const correctForWrappedOverflowIndicator: (container: HTMLElement, overflowedItems: OverflowItem[]) => Promise<OverflowItem[]>;
+/**
+  An edge case that may occur when reducing width from unwrapped to
+  wrapped, or on first render.
+  We overflow one or more items. Then, when the overflowIndicator assumes
+  full width, it may itself overflow.
+*/
+export declare const correctForWrappedHighPriorityItems: (container: HTMLElement, nonWrapped: OverflowItem[], wrapped: OverflowItem[]) => Promise<[OverflowItem[], OverflowItem[]]>;
+export declare const markElementAsWrapped: (container: HTMLElement, item: OverflowItem) => void;
+export declare const getElementsMarkedAsWrapped: (container: HTMLElement) => HTMLElement[];
+export declare const unmarkItemsWhichAreNoLongerWrapped: (container: HTMLElement, wrappedItems: OverflowItem[]) => void;
+/**
+    An edge case. If container has grown but we still have one
+    wrapped item - could the wrapped item return to the fold if the overflow
+    indicaor were removed ?
+ */
+export declare const removeOverflowIndicatorIfNoLongerNeeded: (container: HTMLElement) => boolean;
+/**
+ * This is used both when an overflow menu is used to select an overflowed item
+ * and when a high priority item has overflowed, whilst lower priority items
+ * remain in view.
+ */
+export declare const switchWrappedItemIntoView: (container: HTMLElement, overflowItem: OverflowItem) => [OverflowItem[], OverflowItem[]];

package/types/overflow-container/useOverflowContainer.d.ts

@@ -0,0 +1,11 @@
+import { MenuActionHandler, MenuBuilder } from "@vuu-ui/vuu-data-types";
+import { OverflowItem } from "./overflow-utils";
+export interface OverflowContainerHookProps {
+    itemCount: number;
+    onSwitchWrappedItemIntoView?: (overflowItem: OverflowItem) => void;
+}
+export declare const useOverflowContainer: ({ itemCount, onSwitchWrappedItemIntoView, }: OverflowContainerHookProps) => {
+    menuActionHandler: MenuActionHandler;
+    menuBuilder: MenuBuilder<string, unknown>;
+    rootRef: (el: HTMLDivElement | null) => void;
+};

package/types/responsive/useResizeObserver.d.ts

@@ -9,4 +9,5 @@ export type measurements<T = string | number> = {
     width?: T;
 };
 export type ResizeHandler = (measurements: measurements<number>) => void;
+export declare const resizeObserver: ResizeObserver;
 export declare function useResizeObserver(ref: RefObject<Element | HTMLElement | null>, dimensions: string[], onResize: ResizeHandler, reportInitialSize?: boolean): void;

package/types/stack/stackTypes.d.ts

@@ -1,15 +1,14 @@
-import { TabstripProps } from "@heswell/salt-lab";
+import { TabstripProps } from "@vuu-ui/vuu-ui-controls";
 import { HTMLAttributes, MouseEvent, ReactElement, ReactNode } from "react";
 export interface StackProps extends Omit<HTMLAttributes<HTMLDivElement>, "onMouseDown"> {
     active?: number;
     createNewChild?: (index: number) => ReactElement;
-    enableAddTab?: boolean;
-    enableCloseTabs?: boolean;
     getTabIcon?: (component: ReactElement, index: number) => string | undefined;
     getTabLabel?: (component: ReactElement, index: number) => string | undefined;
     keyBoardActivation?: "automatic" | "manual";
+    onAddTab?: () => void;
+    onMoveTab?: (fromIndex: number, toIndex: number) => void;
     onMouseDown?: (e: MouseEvent, tabIndex: number) => void;
-    onTabAdd?: (tabIndex: number) => void;
     onTabClose?: (tabIndex: number) => void;
     onTabEdit?: (tabIndex: number, label: string) => void;
     onTabSelectionChanged?: (nextIndex: number) => void;

package/types/utils/index.d.ts

@@ -1,5 +1,6 @@
 export * from "./pathUtils";
 export * from "./propUtils";
 export * from "./refUtils";
+export * from "./react-utils";
 export * from "./styleUtils";
 export * from "./typeOf";

package/types/utils/react-utils.d.ts

@@ -0,0 +1,4 @@
+import { DependencyList, EffectCallback, ReactElement, ReactNode } from "react";
+export declare const asReactElements: (children: ReactNode) => ReactElement[];
+export declare const useLayoutEffectSkipFirst: (func: EffectCallback, deps: DependencyList) => void;
+export declare const useId: (id?: string) => string;