@elliemae/ds-tabs 2.3.0-alpha.8 → 2.3.0-alpha.9

package/dist/types/DSTabs.d.ts

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

package/dist/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/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/DSTabsTypes.d.ts

@@ -0,0 +1,205 @@
+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;
+    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 CenterTabPropsT {
+    e?: React.MouseEvent | React.FocusEvent;
+    listRef: React.MutableRefObject<HTMLDivElement | null>;
+}
+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/dist/types/config/useCrossRef.d.ts

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

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

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

package/dist/types/defaultProps.d.ts

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

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

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

package/dist/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/dist/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/dist/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/dist/types/parts/carousel/useCarousel.d.ts

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

package/dist/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/dist/types/parts/tabBar/TabBar.d.ts

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

package/dist/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/dist/types/parts/tabBar/useTabBar.d.ts

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+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<"div", import("styled-components").DefaultTheme, {}, never>;

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

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

package/dist/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/dist/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").PropTypesDescValue;
+    tabsListAriaLabel: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    containerProps: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+    innerRef: {
+        deprecated: import("react-desc").PropTypesDescValidator;
+    };
+};

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,18 @@
+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;
+    backgroundWithTransparent: string;
+};
+export declare const gradientOffsetsAccordingType: {
+    normal_small: number;
+    normal: number;
+    subtabs: number;
+    fixedTabsHeaders: number;
+};

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

@@ -0,0 +1,9 @@
+import type { CenterTabPropsT, 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 centerTab: ({ e, listRef }: CenterTabPropsT) => void;
+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/dist/types/utils/hooks/useKeyboardNavigation.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-tabs",
-  "version": "2.3.0-alpha.8",
+  "version": "2.3.0-alpha.9",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Tabs",
   "files": [
@@ -125,11 +125,11 @@
   },
   "author": "ICE MT",
   "dependencies": {
-    "@elliemae/ds-button": "2.3.0-alpha.8",
-    "@elliemae/ds-icon": "2.3.0-alpha.8",
-    "@elliemae/ds-icons": "2.3.0-alpha.8",
-    "@elliemae/ds-props-helpers": "2.3.0-alpha.8",
-    "@elliemae/ds-system": "2.3.0-alpha.8",
+    "@elliemae/ds-button": "2.3.0-alpha.9",
+    "@elliemae/ds-icon": "2.3.0-alpha.9",
+    "@elliemae/ds-icons": "2.3.0-alpha.9",
+    "@elliemae/ds-props-helpers": "2.3.0-alpha.9",
+    "@elliemae/ds-system": "2.3.0-alpha.9",
     "@react-hook/resize-observer": "~1.2.5",
     "prop-types": "~15.7.2",
     "react-desc": "~4.1.3",