@elliemae/ds-tabs 2.0.0-rc.1 → 2.0.0-rc.13

package/types/DSTabs.d.ts

@@ -1,64 +1,14 @@
-/// <reference types="react" />
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+import type { WeakValidationMap } from 'react';
+import type { DSTabsPropsT } from './DSTabsTypes';
 declare const DSTabs: {
-    ({ containerProps, innerRef, animated, enableMouseEvents, allowTextSelection, onTabChange, tabsListAriaLabel, type, tabBarExtraContent, children: tabs, onlyRenderActiveTab, activeTab, withCarousel, firstSubtabRef, lastTabRef, flexibleTabsHeaders, fixedTabsHeaders, isDSMobile, }: {
-        containerProps?: {} | undefined;
-        innerRef: any;
-        animated?: boolean | undefined;
-        enableMouseEvents?: boolean | undefined;
-        allowTextSelection?: boolean | undefined;
-        onTabChange?: (() => null) | undefined;
-        tabsListAriaLabel?: string | undefined;
-        type?: string | undefined;
-        tabBarExtraContent?: undefined;
-        children: any;
-        onlyRenderActiveTab?: boolean | undefined;
-        activeTab: any;
-        withCarousel?: boolean | undefined;
-        firstSubtabRef: any;
-        lastTabRef: any;
-        flexibleTabsHeaders: any;
-        fixedTabsHeaders: any;
-        isDSMobile?: boolean | undefined;
-    }): JSX.Element;
-    propTypes: {
-        /** Whether the tab transition should animate or not */
-        animated: any;
-        /** Enables tab transition with mouse drag events */
-        enableMouseEvents: any;
-        /** Allow text selection when mouse drag events are active */
-        allowTextSelection: any;
-        /** Handler when a user clicks on a different tab */
-        onTabChange: any;
-        /** Tab type */
-        type: any;
-        /** Extra content next to the tabs pills */
-        tabBarExtraContent: any;
-        /** Only renders the active tab in the DOM */
-        onlyRenderActiveTab: any;
-        /** Mobile only flexible tabs mode */
-        flexibleTabsHeaders: any;
-        /** Mobile only fixed tabs mode */
-        fixedTabsHeaders: any;
-        /** Whether or not it's a ds-tab from DSMobile tabs */
-        isDSMobile: any;
-        /** Activate carousel behavior */
-        withCarousel: any;
-        /** The active tabId */
-        activeTab: any;
-        /** tabs children */
-        children: any;
-        /** Aria label for the list */
-        tabsListAriaLabel: any;
-        /** Additional properties for the container */
-        containerProps: any;
-        /** REF */
-        innerRef: any;
-        /** internal ref to handle keyboard a11y behavior */
-        firstSubtabRef: any;
-        /** internal ref to handle keyboard a11y behavior */
-        lastTabRef: any;
-    };
+    (props: DSTabsPropsT): JSX.Element;
+    propTypes: WeakValidationMap<unknown>;
+};
+declare const DSTabsWithSchema: {
+    (props?: DSTabsPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
 };
-declare const DSTabsWithSchema: any;
 export { DSTabs, DSTabsWithSchema };
 export default DSTabs;

package/types/DSTabsCTX.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { DSTabsUseCrossRefContextT, DSTabsUseTabsContextT } from './DSTabsTypes';
+export declare const DSTabsContext: import("react").Context<DSTabsUseTabsContextT>;
+export declare const DSTabsCrossRefContext: import("react").Context<DSTabsUseCrossRefContextT>;

package/types/DSTabsDatatestid.d.ts

@@ -0,0 +1,12 @@
+export declare const DSTabsDatatestid: {
+    TABS_CONTAINER: string;
+    TAB_BUTTON: string;
+    SUBTAB_BUTTON: string;
+    TAB_PANEL: string;
+    SUB_TAB_LIST: string;
+    TAB_LIST: string;
+    CAROUSEL: {
+        BUTTON_RIGHT: string;
+        BUTTON_LEFT: string;
+    };
+};

package/types/DSTabsTypes.d.ts

@@ -0,0 +1,202 @@
+import type React from 'react';
+import { TabTypes } from './utils/constants';
+declare type TabTypesT = typeof TabTypes[keyof typeof TabTypes];
+export interface DSTabsPropsT {
+    containerProps?: Record<string, unknown>;
+    innerRef?: React.MutableRefObject<HTMLDivElement>;
+    animated?: boolean;
+    enableMouseEvents?: boolean;
+    allowTextSelection?: boolean;
+    onTabChange?: (tabId: string, e?: React.MouseEvent) => void;
+    tabsListAriaLabel?: string;
+    type?: TabTypesT;
+    tabBarExtraContent?: React.ReactNode;
+    children: React.ReactElement<DSTabPropsWithDefaultT>[];
+    onlyRenderActiveTab?: boolean;
+    activeTab?: string;
+    withCarousel?: boolean;
+    firstSubtabRef?: React.MutableRefObject<HTMLElement>;
+    lastTabRef?: React.MutableRefObject<HTMLElement>;
+    fixedTabsHeaders?: boolean;
+    isDSMobile?: boolean;
+    showSelectionIndicator?: boolean;
+    showSeparator?: boolean;
+}
+export interface DSTabsPropsWithDefaultsT {
+    containerProps: Record<string, unknown>;
+    innerRef?: React.MutableRefObject<HTMLDivElement>;
+    animated: boolean;
+    enableMouseEvents: boolean;
+    allowTextSelection: boolean;
+    onTabChange: (tabId: string, e?: React.MouseEvent) => void;
+    tabsListAriaLabel: string;
+    type: TabTypesT;
+    tabBarExtraContent?: React.ReactNode;
+    children: React.ReactElement<DSTabPropsWithDefaultT>[];
+    onlyRenderActiveTab: boolean;
+    activeTab?: string;
+    withCarousel: boolean;
+    firstSubtabRef?: React.MutableRefObject<HTMLElement>;
+    lastTabRef?: React.MutableRefObject<HTMLElement>;
+    fixedTabsHeaders: boolean;
+    isDSMobile: boolean;
+    showSelectionIndicator: boolean;
+    showSeparator: boolean;
+}
+export interface DSTabsDefaultPropsT {
+    containerProps: Record<string, unknown>;
+    animated: boolean;
+    enableMouseEvents: boolean;
+    allowTextSelection: boolean;
+    onTabChange: (tabId: string, e?: React.MouseEvent) => void;
+    tabsListAriaLabel: string;
+    type: TabTypesT;
+    onlyRenderActiveTab: boolean;
+    fixedTabsHeaders: boolean;
+    children: React.ReactElement<DSTabPropsWithDefaultT>[];
+    withCarousel: boolean;
+    isDSMobile: boolean;
+    showSelectionIndicator: boolean;
+    showSeparator: boolean;
+}
+export interface CarouselPropsT {
+    children: React.ReactNode[];
+    updateIndicatorStyle?: () => void;
+}
+export interface DSTabPropsT {
+    tabId: string;
+    title?: string;
+    required?: boolean;
+    children?: React.ReactNode;
+    style?: Record<string, unknown>;
+    disabled?: boolean;
+    ref?: React.MutableRefObject<HTMLButtonElement>;
+    onClick?: (tabId: string, e: React.MouseEvent) => null | void;
+    onKeyDown?: (e: React.KeyboardEvent) => null | void;
+}
+export interface DSTabPropsWithDefaultT {
+    tabId: string;
+    title: string;
+    required: boolean;
+    children?: React.ReactNode;
+    style?: Record<string, unknown>;
+    disabled: boolean;
+    ref?: React.MutableRefObject<HTMLButtonElement>;
+    onClick?: (tabId: string, e: React.MouseEvent) => null | void;
+    onKeyDown?: (e: React.KeyboardEvent) => null | void;
+}
+export interface CarouselButtonsPropsT {
+    leftButtonOnClick: () => void;
+    rightButtonOnClick: () => void;
+    showChevrons: ShowChevronsT;
+    type: TabTypesT;
+}
+export interface DSTabsUseCrossRefContextT {
+    lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
+    firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
+}
+export interface DSTabsUseTabsContextT {
+    props: DSTabsPropsWithDefaultsT;
+    tabsRef: React.MutableRefObject<Record<number, HTMLButtonElement> | null>;
+    focusableTabsRef: React.MutableRefObject<HTMLButtonElement[] | null>;
+    tabsListRef: React.MutableRefObject<HTMLDivElement | null>;
+    tabsRefAsArray: React.MutableRefObject<HTMLButtonElement[] | null>;
+    actualActiveTabRef: React.MutableRefObject<HTMLButtonElement | null>;
+    carouselOnlyListRef: React.MutableRefObject<HTMLDivElement | null>;
+    setInternalActiveTab: React.Dispatch<React.SetStateAction<string>>;
+    actualActiveTab: string;
+}
+export interface UseRezisePropsT {
+    ref: React.MutableRefObject<HTMLDivElement | null>;
+    callback: () => void;
+}
+export interface UseCarouselPropsT {
+    updateIndicatorStyle?: () => void;
+}
+export interface ShowChevronsT {
+    right: boolean;
+    left: boolean;
+}
+export interface MobileGradientsT {
+    right: boolean;
+    left: boolean;
+}
+export interface IndicatorStyleT {
+    left: string;
+    width: string;
+    backgroundWithTransparentAndWhite: string;
+    backgroundWithTransparent: string;
+}
+export interface UseCarouselReturnTypeT {
+    showChevrons: ShowChevronsT;
+    leftButtonOnClick: () => void;
+    rightButtonOnClick: () => void;
+    handleOnClick: (e: React.MouseEvent) => void;
+    handleOnScroll: (e: React.UIEvent) => void;
+}
+export interface UseCarouselCallbacksPropsT {
+    getVisibleItemsOffset: () => number;
+    recalcChevrons: () => void;
+    updateIndicatorStyle?: () => void;
+}
+export interface UseCarouselCallbacksReturnTypeT {
+    leftButtonOnClick: () => void;
+    rightButtonOnClick: () => void;
+    handleOnClick: (e: React.MouseEvent) => void;
+    handleOnScroll: (e: React.UIEvent) => void;
+}
+export interface UseKeyboardNavigationReturnTypeT {
+    handleOnKeyDown: (e: React.KeyboardEvent) => void;
+}
+export interface UseTabsCallbacksReturnTypeT {
+    handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;
+    handleOnMouseDown: (e: React.MouseEvent) => void;
+}
+export interface UseTabBarReturnTypeT {
+    updateIndicatorStyle: () => void;
+    updateMobileGradients: () => void;
+    setIndicatorStyle: React.Dispatch<React.SetStateAction<IndicatorStyleT>>;
+    indicatorStyle: IndicatorStyleT;
+    mobileGradients: MobileGradientsT;
+}
+export interface VisibleDimensionsT {
+    width: number;
+    height: number;
+}
+export interface StyledTabWrapperPropsT {
+    isDSMobile: boolean;
+    fixedTabsHeaders: boolean;
+}
+export interface StyledTabListPropsT {
+    withCarousel: boolean;
+    isDSMobile: boolean;
+    fixedTabsHeaders: boolean;
+    mobileGradients: MobileGradientsT;
+    indicatorStyle: IndicatorStyleT;
+    tabType: TabTypesT;
+}
+export interface StyledSubTabsListPropsT {
+    withCarousel: boolean;
+}
+export interface StyledTabButtonPropsT {
+    isActive: boolean;
+    disabled: boolean;
+    showSeparator: boolean;
+    isDSMobile: boolean;
+    fixedTabsHeaders: boolean;
+    withCarousel: boolean;
+    tabType: TabTypesT;
+}
+export interface StyledCarouselButtonWrapperPropsT {
+    right?: boolean;
+    tabType: TabTypesT;
+}
+export interface StyledPanelContainerPropsT {
+    hidden: boolean;
+    isDSMobile: boolean;
+}
+export interface StyledSelectionIndicatoPropsT {
+    isDSMobile: boolean;
+    tabType: TabTypesT;
+}
+export {};

package/types/config/useCrossRef.d.ts

@@ -0,0 +1,2 @@
+import type { DSTabsUseCrossRefContextT } from '../DSTabsTypes';
+export declare const useCrossRef: () => DSTabsUseCrossRefContextT;

package/types/config/useTabs.d.ts

@@ -0,0 +1,2 @@
+import type { DSTabsPropsT, DSTabsUseTabsContextT } from '../DSTabsTypes';
+export declare const useTabs: (props: DSTabsPropsT) => DSTabsUseTabsContextT;

package/types/defaultProps.d.ts

@@ -0,0 +1,2 @@
+import type { DSTabsDefaultPropsT } from './DSTabsTypes';
+export declare const tabsDefaultProps: DSTabsDefaultPropsT;

package/types/exportsRelated/DSTab.d.ts

@@ -0,0 +1,14 @@
+/// <reference path="../../../../../shared/typings/react-desc.d.ts" />
+import React from 'react';
+import type { DSTabPropsT } from '../DSTabsTypes';
+declare const DSTab: {
+    (props: DSTabPropsT): JSX.Element;
+    propTypes: React.WeakValidationMap<unknown>;
+};
+declare const DSTabWithSchema: {
+    (props?: DSTabPropsT | undefined): JSX.Element;
+    propTypes: unknown;
+    toTypescript: () => import("react-desc").TypescriptSchema;
+};
+export { DSTab, DSTabWithSchema };
+export default DSTab;

package/types/index.d.ts

@@ -1,4 +1,5 @@
-export * from './DSTab';
+export * from './exportsRelated/DSTab';
 export * from './DSTabs';
-export * from './TabTypes';
-export { default } from './DSTabs';
+export { TabTypes } from './utils/constants';
+export * from './DSTabsDatatestid';
+export type { DSTabsPropsT, DSTabPropsT } from './DSTabsTypes';

package/types/parts/carousel/Carousel.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { CarouselPropsT } from '../../DSTabsTypes';
+export declare const Carousel: ({ children, updateIndicatorStyle }: CarouselPropsT) => JSX.Element;

package/types/parts/carousel/styles.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { StyledCarouselButtonWrapperPropsT } from '../../DSTabsTypes';
+export declare const StyledCarouselBtn: import("styled-components").StyledComponent<{
+    (props: import("@elliemae/ds-button/types/v2/propTypes").DSButtonPropsT): JSX.Element;
+    propTypes: import("react").WeakValidationMap<unknown>;
+}, import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledChildrenWrap: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledCarouselButtonWrapperPropsT, never>;

package/types/parts/carousel/useCarousel.d.ts

@@ -0,0 +1,2 @@
+import type { UseCarouselPropsT, UseCarouselReturnTypeT } from '../../DSTabsTypes';
+export declare const useCarousel: ({ updateIndicatorStyle }: UseCarouselPropsT) => UseCarouselReturnTypeT;

package/types/parts/carousel/useCarouselCallbacks.d.ts

@@ -0,0 +1,2 @@
+import type { UseCarouselCallbacksPropsT, UseCarouselCallbacksReturnTypeT } from '../../DSTabsTypes';
+export declare const useCarouselCallbacks: ({ getVisibleItemsOffset, updateIndicatorStyle, recalcChevrons, }: UseCarouselCallbacksPropsT) => UseCarouselCallbacksReturnTypeT;

package/types/parts/tabBar/TabBar.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TabBar: () => JSX.Element;

package/types/parts/tabBar/styles.d.ts

@@ -0,0 +1,7 @@
+import type { StyledSelectionIndicatoPropsT, StyledSubTabsListPropsT, StyledTabListPropsT, StyledTabButtonPropsT, StyledTabWrapperPropsT } from '../../DSTabsTypes';
+export declare const StyledSelectionIndicator: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledSelectionIndicatoPropsT, never>;
+export declare const StyledTabWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTabWrapperPropsT, never>;
+export declare const StyledTabButton: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, StyledTabButtonPropsT, never>;
+export declare const StyledSubTabsList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledSubTabsListPropsT, never>;
+export declare const StyledTabList: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledTabListPropsT, never>;
+export declare const StyledRequiredMark: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;

package/types/parts/tabBar/useTabBar.d.ts

@@ -0,0 +1,2 @@
+import type { UseTabBarReturnTypeT } from '../../DSTabsTypes';
+export declare const useTabBar: () => UseTabBarReturnTypeT;

package/types/parts/tabsContent/TabsContent.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TabsContent: () => JSX.Element;

package/types/parts/tabsContent/styles.d.ts

@@ -0,0 +1 @@
+export declare const StyledTabBarContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;

package/types/parts/tabsPanel/TabsPanels.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TabsPanels: () => JSX.Element;

package/types/parts/tabsPanel/styles.d.ts

@@ -0,0 +1,2 @@
+import type { StyledPanelContainerPropsT } from '../../DSTabsTypes';
+export declare const StyledPanelContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, StyledPanelContainerPropsT, never>;

package/types/propTypes.d.ts

@@ -0,0 +1,54 @@
+/// <reference path="../../../../shared/typings/react-desc.d.ts" />
+export declare const tabPropTypes: {
+    tabId: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    title: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    required: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    disabled: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+};
+export declare const tabsPropTypes: {
+    animated: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    enableMouseEvents: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    allowTextSelection: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onTabChange: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    type: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    tabBarExtraContent: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    onlyRenderActiveTab: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    withCarousel: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    activeTab: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    children: import("react-desc").PropTypesDescValidator;
+    tabsListAriaLabel: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    containerProps: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    innerRef: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+};

package/types/tests/DSTabs.func.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/tests/DSTabs.keyboard.test.d.ts

@@ -0,0 +1 @@
+export {};

package/types/utils/constants.d.ts

@@ -0,0 +1,19 @@
+export declare const TabTypes: {
+    NORMAL: "normal";
+    NORMAL_SMALL: "normal_small";
+    SUBTABS: "subtabs";
+};
+export declare const TabTypesValuesAsArray: ("normal" | "normal_small" | "subtabs")[];
+export declare const MOBILE_GRADIENT_WIDTH = 24;
+export declare const defaultIndicatorStyles: {
+    left: string;
+    width: string;
+    backgroundWithTransparentAndWhite: string;
+    backgroundWithTransparent: string;
+};
+export declare const gradientOffsetsAccordingType: {
+    normal_small: number;
+    normal: number;
+    subtabs: number;
+    fixedTabsHeaders: number;
+};

package/types/utils/helpers.d.ts

@@ -0,0 +1,8 @@
+import type { DSTabPropsWithDefaultT, VisibleDimensionsT } from '../DSTabsTypes';
+export declare const isElementVisible: (tab: HTMLElement, tabList: HTMLElement) => boolean;
+export declare const isElementVisibleCarousel: (tab: HTMLElement | null, tabContainer: HTMLDivElement | null, firstOrLastItem?: boolean) => boolean;
+export declare const getVisibleDimensions: (node: HTMLElement, referenceNode: HTMLElement) => VisibleDimensionsT;
+export declare const getIndexById: (children: React.ReactElement<DSTabPropsWithDefaultT>[], activeId?: string | undefined) => number;
+export declare const getIdByIndex: (children: React.ReactElement<DSTabPropsWithDefaultT>[], index: number) => string;
+export declare const shouldHaveLeftGradient: (scrollLeft: number) => boolean;
+export declare const shouldHaveRightGradient: (scrollLeft: number, clientWidth: number, scrollWidth: number) => boolean;

package/types/utils/hooks/useKeyboardNavigation.d.ts

@@ -0,0 +1,2 @@
+import type { UseKeyboardNavigationReturnTypeT } from '../../DSTabsTypes';
+export declare const useKeyboardNavigation: () => UseKeyboardNavigationReturnTypeT;

package/types/utils/hooks/useResize.d.ts

@@ -0,0 +1,2 @@
+import type { UseRezisePropsT } from '../../DSTabsTypes';
+export declare const useResize: ({ ref, callback }: UseRezisePropsT) => void;

package/types/utils/hooks/useTabsCallbacks.d.ts

@@ -0,0 +1,2 @@
+import type { UseTabsCallbacksReturnTypeT } from '../../DSTabsTypes';
+export declare const useTabsCallbacks: () => UseTabsCallbacksReturnTypeT;