@elliemae/ds-tabs 3.13.1-rc.1 → 3.13.1

package/dist/types/DSTabs.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DSTabsT } from './propTypes';
+declare const DSTabs: {
+    (props: DSTabsT.Props): JSX.Element;
+    propTypes: React.WeakValidationMap<unknown>;
+};
+declare const DSTabsWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSTabsT.Props>;
+export { DSTabs, DSTabsWithSchema };
+export default DSTabs;

package/dist/types/DSTabsCTX.d.ts

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

package/dist/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/dist/types/config/useCrossRef.d.ts

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

package/dist/types/config/useTabs.d.ts

@@ -0,0 +1,3 @@
+import type { DSTabsT } from '../propTypes';
+import type { DSTabsInternalsT } from '../sharedTypes';
+export declare const useTabs: (props: DSTabsT.Props) => DSTabsInternalsT.DSTabsUseTabsContextT;

package/dist/types/exported-related/DSTab.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { DSTabT } from '../propTypes';
+declare const DSTab: {
+    (props: DSTabT.Props): JSX.Element;
+    propTypes: React.WeakValidationMap<unknown>;
+};
+declare const DSTabWithSchema: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").DocumentedReactComponent<DSTabT.Props>;
+export { DSTab, DSTabWithSchema };
+export default DSTab;

package/dist/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './exported-related/DSTab';
+export * from './DSTabs';
+export { TabTypes } from './utils/constants';
+export * from './DSTabsDatatestid';
+export type { DSTabT, DSTabsT } from './propTypes';

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+interface CarouselPropsT {
+    children: React.ReactNode[];
+    updateIndicatorStyle?: () => void;
+}
+export declare const Carousel: ({ children, updateIndicatorStyle }: CarouselPropsT) => JSX.Element;
+export {};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { DSTabsInternalsT } from '../../sharedTypes';
+interface StyledCarouselButtonWrapperPropsT {
+    right?: boolean;
+    tabType: DSTabsInternalsT.TabTypesT;
+}
+export declare const StyledCarouselBtn: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button").DSButtonT.Props>, import("@elliemae/ds-system").Theme, object, never>;
+export declare const StyledCarouselWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
+export declare const StyledChildrenWrap: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
+export declare const StyledCarouselButtonWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledCarouselButtonWrapperPropsT, never>;
+export {};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import type { DSTabsInternalsT } from '../../sharedTypes';
+interface UseCarouselPropsT {
+    updateIndicatorStyle?: () => void;
+}
+interface UseCarouselReturnTypeT {
+    showChevrons: DSTabsInternalsT.ShowChevronsT;
+    leftButtonOnClick: () => void;
+    rightButtonOnClick: () => void;
+    handleOnClick: (e: React.MouseEvent) => void;
+    handleOnScroll: (e: React.UIEvent) => void;
+}
+export declare const useCarousel: ({ updateIndicatorStyle }: UseCarouselPropsT) => UseCarouselReturnTypeT;
+export {};

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

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+interface UseCarouselCallbacksPropsT {
+    getVisibleItemsOffset: () => number;
+    recalcChevrons: () => void;
+    updateIndicatorStyle?: () => void;
+}
+interface UseCarouselCallbacksReturnTypeT {
+    leftButtonOnClick: () => void;
+    rightButtonOnClick: () => void;
+    handleOnClick: (e: React.MouseEvent) => void;
+    handleOnScroll: (e: React.UIEvent) => void;
+}
+export declare const useCarouselCallbacks: ({ getVisibleItemsOffset, updateIndicatorStyle, recalcChevrons, }: UseCarouselCallbacksPropsT) => UseCarouselCallbacksReturnTypeT;
+export {};

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

@@ -0,0 +1 @@
+export declare const TabBar: () => JSX.Element;

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

@@ -0,0 +1,48 @@
+import type { DSTabsInternalsT } from '../../sharedTypes';
+interface StyledSelectionIndicatoPropsT {
+    isDSMobile: boolean;
+    tabType: DSTabsInternalsT.TabTypesT;
+}
+interface StyledSubTabsListPropsT {
+    withCarousel: boolean;
+}
+interface StyledTabButtonPropsT {
+    isActive: boolean;
+    disabled: boolean;
+    showSeparator: boolean;
+    isDSMobile: boolean;
+    fixedTabsHeaders: boolean;
+    withCarousel: boolean;
+    tabType: DSTabsInternalsT.TabTypesT;
+}
+interface StyledTabListPropsT {
+    withCarousel: boolean;
+    isDSMobile: boolean;
+    fixedTabsHeaders: boolean;
+    mobileGradients: DSTabsInternalsT.MobileGradientsT;
+    indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
+    tabType: DSTabsInternalsT.TabTypesT;
+}
+interface StyledMobileGradientPropsT {
+    mobileGradients: DSTabsInternalsT.MobileGradientsT;
+    left: number | undefined;
+    width: number | undefined;
+}
+interface StyledTabWrapperPropsT {
+    isDSMobile: boolean;
+    fixedTabsHeaders: boolean;
+}
+export declare const StyledSelectionIndicator: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledSelectionIndicatoPropsT, never>;
+export declare const StyledMobileGradient: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & {
+    style: {
+        left: number;
+        maxWidth: number;
+    };
+} & StyledMobileGradientPropsT, "style">;
+/**  CSS Setters */
+export declare const StyledTabWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledTabWrapperPropsT, never>;
+export declare const StyledTabButton: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledTabButtonPropsT, never>;
+export declare const StyledSubTabsList: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledSubTabsListPropsT, never>;
+export declare const StyledTabList: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledTabListPropsT, never>;
+export declare const StyledRequiredMark: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
+export {};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import type { DSTabsInternalsT } from '../../sharedTypes';
+interface UseTabBarReturnTypeT {
+    updateIndicatorStyle: () => void;
+    updateMobileGradients: () => void;
+    setIndicatorStyle: React.Dispatch<React.SetStateAction<DSTabsInternalsT.IndicatorStyleT>>;
+    indicatorStyle: DSTabsInternalsT.IndicatorStyleT;
+    mobileGradients: DSTabsInternalsT.MobileGradientsT;
+}
+export declare const useTabBar: () => UseTabBarReturnTypeT;
+export {};

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

@@ -0,0 +1 @@
+export declare const TabsContent: () => JSX.Element;

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

@@ -0,0 +1 @@
+export declare const StyledTabBarContainer: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;

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

@@ -0,0 +1 @@
+export declare const TabsPanels: () => JSX.Element;

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

@@ -0,0 +1,6 @@
+interface StyledPanelContainerPropsT {
+    hidden: boolean;
+    isDSMobile: boolean;
+}
+export declare const StyledPanelContainer: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & StyledPanelContainerPropsT, never>;
+export {};

package/dist/types/propTypes.d.ts

@@ -0,0 +1,72 @@
+/// <reference types="react" />
+import type { DSTabsInternalsT } from './sharedTypes';
+export declare namespace DSTabT {
+    interface PropsOptional {
+        style?: Record<string, unknown>;
+        title?: string;
+        required?: boolean;
+        disabled?: boolean;
+        ref?: React.MutableRefObject<HTMLButtonElement>;
+        onClick?: (tabId: string | number, e: React.MouseEvent) => null | void;
+        onKeyDown?: (e: React.KeyboardEvent) => null | void;
+    }
+    interface PropsRequired {
+        children: React.ReactNode;
+        tabId: string | number;
+    }
+    interface Props extends PropsOptional, PropsRequired {
+    }
+}
+export declare namespace DSTabsT {
+    interface DefaultProps {
+        containerProps: Record<string, unknown>;
+        animated: boolean;
+        enableMouseEvents: boolean;
+        allowTextSelection: boolean;
+        onTabChange: (tabId: string | number, e?: React.MouseEvent) => void;
+        tabsListAriaLabel: string;
+        type: DSTabsInternalsT.TabTypesT;
+        children: React.ReactElement<DSTabT.Props>[];
+        onlyRenderActiveTab: boolean;
+        fixedTabsHeaders: boolean;
+        withCarousel: boolean;
+        isDSMobile: boolean;
+        showSelectionIndicator: boolean;
+        showSeparator: boolean;
+    }
+    interface PropsOptional {
+        firstSubtabRef?: React.MutableRefObject<HTMLElement>;
+        lastTabRef?: React.MutableRefObject<HTMLElement>;
+        TabBarExtraContent?: React.ComponentType;
+        tabBarExtraContent?: React.ReactNode;
+        activeTab?: string;
+        innerRef?: React.MutableRefObject<HTMLDivElement>;
+    }
+    interface Props extends Partial<DefaultProps>, PropsOptional {
+    }
+    interface InternalProps extends DefaultProps, PropsOptional {
+    }
+}
+export declare const tabPropTypes: {
+    tabId: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    title: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    required: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    disabled: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+};
+export declare const tabsPropTypes: {
+    animated: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    enableMouseEvents: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    allowTextSelection: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onTabChange: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    type: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    tabBarExtraContent: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    TabBarExtraContent: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    onlyRenderActiveTab: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    withCarousel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    activeTab: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    children: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    tabsListAriaLabel: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    containerProps: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+    innerRef: import("@elliemae/ds-utilities/dist/types/props-helpers/propTypes/types").ReactDescT;
+};
+export declare const tabsDefaultProps: DSTabsT.DefaultProps;

package/dist/types/sharedTypes.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+import type { TabTypes } from './utils/constants';
+import type { DSTabsT } from './propTypes';
+export declare namespace DSTabsInternalsT {
+    type TabTypesT = typeof TabTypes[keyof typeof TabTypes];
+    interface MobileGradientsT {
+        right: boolean;
+        left: boolean;
+    }
+    interface IndicatorStyleT {
+        left: number;
+        width: number;
+    }
+    interface ShowChevronsT {
+        right: boolean;
+        left: boolean;
+    }
+    interface DSTabsUseTabsContextT {
+        props: DSTabsT.InternalProps;
+        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;
+    }
+    interface DSTabsUseCrossRefContextT {
+        lastTabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
+        firstSubtabInternalRef: React.MutableRefObject<HTMLButtonElement | null | undefined>;
+    }
+}

package/dist/types/tests/DSTabs.callbacks.test.d.ts

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

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

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

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

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

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

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

package/dist/types/utils/constants.d.ts

@@ -0,0 +1,17 @@
+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: number;
+    width: number;
+};
+export declare const gradientOffsetsAccordingType: {
+    normal_small: number;
+    normal: number;
+    subtabs: number;
+    fixedTabsHeaders: number;
+};

package/dist/types/utils/helpers.d.ts

@@ -0,0 +1,16 @@
+import type React from 'react';
+interface VisibleDimensionsT {
+    width: number;
+    height: number;
+}
+interface CenterTabPropsT {
+    e?: React.MouseEvent | React.FocusEvent;
+    listRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+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 centerTab: ({ e, listRef }: CenterTabPropsT) => void;
+export declare const getVisibleDimensions: (node: HTMLElement, referenceNode: HTMLElement) => VisibleDimensionsT;
+export declare const shouldHaveLeftGradient: (scrollLeft: number) => boolean;
+export declare const shouldHaveRightGradient: (scrollLeft: number, clientWidth: number, scrollWidth: number) => boolean;
+export {};

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

@@ -0,0 +1,6 @@
+import type React from 'react';
+interface UseKeyboardNavigationReturnTypeT {
+    handleOnKeyDown: (e: React.KeyboardEvent) => void;
+}
+export declare const useKeyboardNavigation: () => UseKeyboardNavigationReturnTypeT;
+export {};

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

@@ -0,0 +1,7 @@
+import type React from 'react';
+interface UseTabsCallbacksReturnTypeT {
+    handleOnTabChange: (tabId: string, e?: React.MouseEvent) => void;
+    handleOnMouseDown: (e: React.MouseEvent) => void;
+}
+export declare const useTabsCallbacks: () => UseTabsCallbacksReturnTypeT;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "3.13.1-rc.1",
+  "version": "3.13.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -133,11 +133,11 @@
   "dependencies": {
     "@react-hook/resize-observer": "~1.2.5",
     "react-swipeable-views": "~0.14.0",
-    "@elliemae/ds-icon": "3.13.1-rc.1",
-    "@elliemae/ds-icons": "3.13.1-rc.1",
-    "@elliemae/ds-button": "3.13.1-rc.1",
-    "@elliemae/ds-system": "3.13.1-rc.1",
-    "@elliemae/ds-utilities": "3.13.1-rc.1"
+    "@elliemae/ds-button": "3.13.1",
+    "@elliemae/ds-icon": "3.13.1",
+    "@elliemae/ds-icons": "3.13.1",
+    "@elliemae/ds-system": "3.13.1",
+    "@elliemae/ds-utilities": "3.13.1"
   },
   "devDependencies": {
     "@testing-library/jest-dom": "~5.16.4",