@rescui/tab-list 0.17.0 → 0.17.1-RUI-293-Update-menu-component-6ca9d26d3.22

package/lib/parts/separator.p.module.css.js

@@ -1,6 +1,6 @@
 var styles = {
-  "light": "_light_46gg08_4",
-  "dark": "_dark_46gg08_7",
-  "separator": "_separator_46gg08_11"
+  "light": "_light_d14wh0_4",
+  "dark": "_dark_d14wh0_7",
+  "separator": "_separator_d14wh0_11"
 };
 export { styles as default };

package/lib/parts/tab-list-context.d.ts

@@ -1,13 +1,13 @@
-import React from 'react';
-export declare type TabListValueType = string | number | symbol | object;
-export declare type TabListRovingTabIndexToolkit = {
-    currentTabStopId: number;
-    onTabKeyDown: (e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>, itemId: number) => void;
-};
-export declare type TabListContextType = {
-    onChange: (value: TabListValueType) => void;
-    selectedId?: number;
-    rovingTabIndex?: TabListRovingTabIndexToolkit;
-};
-export declare const TabListContext: React.Context<TabListContextType>;
-export declare const useTabListContext: () => TabListContextType;
+import React from 'react';
+export type TabListValueType = string | number | symbol | object;
+export type TabListRovingTabIndexToolkit = {
+    currentTabStopId: number;
+    onTabKeyDown: (e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>, itemId: number) => void;
+};
+export type TabListContextType = {
+    onChange: (value: TabListValueType) => void;
+    selectedId?: number;
+    rovingTabIndex?: TabListRovingTabIndexToolkit;
+};
+export declare const TabListContext: React.Context<TabListContextType>;
+export declare const useTabListContext: () => TabListContextType;

package/lib/parts/tab-list.p.module.css.js

@@ -1,19 +1,28 @@
 var styles = {
-  "light": "_light_j4p92r_7",
-  "dark": "_dark_j4p92r_10",
-  "sizeM": "_sizeM_j4p92r_14",
-  "sizeL": "_sizeL_j4p92r_17",
-  "classic": "_classic_j4p92r_21",
-  "rock": "_rock_j4p92r_24",
-  "sparse": "_sparse_j4p92r_28",
-  "short": "_short_j4p92r_32",
-  "tabsContainer": "_tabsContainer_j4p92r_36",
-  "indicator": "_indicator_j4p92r_46",
-  "isIndicatorHidden": "_isIndicatorHidden_j4p92r_61",
-  "iconLeft": "_iconLeft_j4p92r_67",
-  "iconRight": "_iconRight_j4p92r_70",
-  "tab": "_tab_j4p92r_36",
-  "selected": "_selected_j4p92r_161",
-  "icon": "_icon_j4p92r_67"
+  "light": "_light_1f0fs7_10",
+  "dark": "_dark_1f0fs7_13",
+  "sizeM": "_sizeM_1f0fs7_17",
+  "sizeL": "_sizeL_1f0fs7_20",
+  "classic": "_classic_1f0fs7_24",
+  "rock": "_rock_1f0fs7_27",
+  "sparse": "_sparse_1f0fs7_31",
+  "short": "_short_1f0fs7_35",
+  "wrapper": "_wrapper_1f0fs7_39",
+  "scrollable": "_scrollable_1f0fs7_49",
+  "arrow": "_arrow_1f0fs7_78",
+  "shown": "_shown_1f0fs7_98",
+  "arrowLeft": "_arrowLeft_1f0fs7_106",
+  "arrowRight": "_arrowRight_1f0fs7_111",
+  "withLeftArrow": "_withLeftArrow_1f0fs7_117",
+  "withRightArrow": "_withRightArrow_1f0fs7_126",
+  "arrowButton": "_arrowButton_1f0fs7_147",
+  "tabsContainer": "_tabsContainer_1f0fs7_151",
+  "indicator": "_indicator_1f0fs7_157",
+  "isIndicatorHidden": "_isIndicatorHidden_1f0fs7_172",
+  "iconLeft": "_iconLeft_1f0fs7_178",
+  "iconRight": "_iconRight_1f0fs7_181",
+  "tab": "_tab_1f0fs7_151",
+  "selected": "_selected_1f0fs7_272",
+  "icon": "_icon_1f0fs7_178"
 };
 export { styles as default };

package/lib/parts/tab-separator.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-export declare type TabSeparatorProps = {
-    className?: string;
-    theme?: Theme;
-};
-declare const TabSeparator: React.FC<TabSeparatorProps>;
-export default TabSeparator;
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+export type TabSeparatorProps = {
+    className?: string;
+    theme?: Theme;
+};
+declare const TabSeparator: React.FC<TabSeparatorProps>;
+export default TabSeparator;

package/lib/parts/tab.d.ts

@@ -1,35 +1,35 @@
-import React from 'react';
-import { TabListValueType } from './tab-list-context';
-export declare type TabIconPosition = 'left' | 'right';
-export declare type TabExplicitProps = {
-    className?: string;
-    value?: TabListValueType;
-    /** @ignore */
-    itemId?: number;
-    /** @ignore */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /** @ignore */
-    onFocus?: React.FocusEventHandler<HTMLElement>;
-    /** @ignore */
-    onMouseDown?: React.MouseEventHandler<HTMLElement>;
-    /** @ignore */
-    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    /** Href for link-type Tab */
-    href?: string;
-    children?: React.ReactNode;
-} & ({
-    /** Additional icon */
-    icon: React.ReactNode;
-    /** Additional icon position */
-    iconPosition?: TabIconPosition;
-} | {
-    icon?: never;
-    iconPosition?: never;
-});
-declare type TabButtonProps = TabExplicitProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-declare type TabAnchorProps = TabExplicitProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare type TabProps = TabButtonProps | TabAnchorProps;
-declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-export default Tab;
+import React from 'react';
+import { TabListValueType } from './tab-list-context';
+export type TabIconPosition = 'left' | 'right';
+export type TabExplicitProps = {
+    className?: string;
+    value?: TabListValueType;
+    /** @ignore */
+    itemId?: number;
+    /** @ignore */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** @ignore */
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    /** @ignore */
+    onMouseDown?: React.MouseEventHandler<HTMLElement>;
+    /** @ignore */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** Href for link-type Tab */
+    href?: string;
+    children?: React.ReactNode;
+} & ({
+    /** Additional icon */
+    icon: React.ReactNode;
+    /** Additional icon position */
+    iconPosition?: TabIconPosition;
+} | {
+    icon?: never;
+    iconPosition?: never;
+});
+type TabButtonProps = TabExplicitProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
+type TabAnchorProps = TabExplicitProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
+export type TabProps = TabButtonProps | TabAnchorProps;
+declare const Tab: React.ForwardRefExoticComponent<TabProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
+export default Tab;

package/lib/parts/use-indicator.d.ts

@@ -1,13 +1,13 @@
-import { MutableRefObject } from 'react';
-export declare const useIndicator: ({ activeNodeRef, containerRef, triggers }: {
-    activeNodeRef: MutableRefObject<HTMLElement>;
-    containerRef: MutableRefObject<HTMLDivElement>;
-    triggers: unknown[];
-}) => {
-    indicator: {
-        left: number | string;
-        width: number | string;
-        transitionDuration?: string;
-    };
-    isIndicatorHidden: boolean;
-};
+import { MutableRefObject } from 'react';
+export declare const useIndicator: ({ activeNodeRef, containerRef, triggers }: {
+    activeNodeRef: MutableRefObject<HTMLElement>;
+    containerRef: MutableRefObject<HTMLDivElement>;
+    triggers: unknown[];
+}) => {
+    indicator: {
+        left: number | string;
+        width: number | string;
+        transitionDuration?: string;
+    };
+    isIndicatorHidden: boolean;
+};

package/lib/parts/use-roving-tab-index.d.ts

@@ -1,8 +1,8 @@
-import React from 'react';
-export declare const useRovingTabIndex: ({ selectedId, tabRefs }: {
-    selectedId?: number;
-    tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
-}) => {
-    currentTabStopId: number;
-    onTabKeyDown: (e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>, itemId: number) => void;
-};
+import React from 'react';
+export declare const useRovingTabIndex: ({ selectedId, tabRefs }: {
+    selectedId?: number;
+    tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
+}) => {
+    currentTabStopId: number;
+    onTabKeyDown: (e: React.KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>, itemId: number) => void;
+};

package/lib/parts/use-scrollable-list.d.ts

@@ -1,18 +1,18 @@
-import React from 'react';
-export declare type ScrollableListCompareValueType<T> = (activeValue: T, itemValue: T) => boolean;
-export declare const useScrollableList: <T>({ children, compareValues, value, CompareItem }: {
-    children: React.ReactNode;
-    compareValues: ScrollableListCompareValueType<T>;
-    value: T;
-    CompareItem: React.ElementType;
-}) => {
-    selectedId: number;
-    prepareDirectionScroller: (direction: 'left' | 'right') => () => void;
-    activeNodeRef: React.MutableRefObject<HTMLElement>;
-    tabRefs: React.MutableRefObject<Map<number, HTMLElement>>;
-    scrollableRef: React.MutableRefObject<HTMLDivElement>;
-    containerRef: React.MutableRefObject<HTMLElement>;
-    childrenWithValues: (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
-    showLeftArrow: boolean;
-    showRightArrow: boolean;
-};
+import React, { MutableRefObject } from 'react';
+export type ScrollableListCompareValueType<T> = (activeValue: T, itemValue: T) => boolean;
+export declare const useScrollableList: <T>({ children, compareValues, value, CompareItem, activeNodeRef, scrollableRef, containerRef }: {
+    children: React.ReactNode;
+    compareValues: ScrollableListCompareValueType<T>;
+    value: T;
+    CompareItem: React.ElementType;
+    activeNodeRef: MutableRefObject<HTMLElement>;
+    scrollableRef: MutableRefObject<HTMLDivElement>;
+    containerRef: MutableRefObject<HTMLDivElement>;
+}) => {
+    selectedId: number;
+    prepareDirectionScroller: (direction: "left" | "right") => () => void;
+    tabRefs: React.RefObject<Map<number, HTMLElement>>;
+    childrenWithValues: (string | number | bigint | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | React.ReactPortal | Promise<string | number | bigint | boolean | React.ReactPortal | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode>>)[];
+    showLeftArrow: boolean;
+    showRightArrow: boolean;
+};

package/lib/parts/use-scrollable-list.js

@@ -114,12 +114,12 @@ const useScrollableList = _ref2 => {
     children,
     compareValues,
     value,
-    CompareItem
+    CompareItem,
+    activeNodeRef,
+    scrollableRef,
+    containerRef
   } = _ref2;
-  const activeNodeRef = useRef(null);
-  const tabRefs = useRef(new Map());
-  const scrollableRef = useRef(null);
-  const containerRef = useRef(null); // reset targeted element on scrolling by arrows
+  const tabRefs = useRef(new Map()); // reset targeted element on scrolling by arrows
   // so on window resize there wouldn't scroll to it
 
   const [targetedEl, setTargetedEl] = useState(null);
@@ -256,10 +256,7 @@ const useScrollableList = _ref2 => {
   return {
     selectedId,
     prepareDirectionScroller,
-    activeNodeRef,
     tabRefs,
-    scrollableRef,
-    containerRef,
     childrenWithValues,
     showLeftArrow,
     showRightArrow

package/lib/tab-list.d.ts

@@ -1,42 +1,43 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { TabListValueType } from './parts/tab-list-context';
-export declare type TabListSizeType = 'l' | 'm';
-export declare type TabListModeType = 'classic' | 'rock';
-export declare type InnerTabListProps = {
-    className?: string;
-    size?: TabListSizeType;
-    /** Increase inner horizontal offset between the tabs. */
-    sparse?: boolean;
-    theme?: Theme;
-    mode?: TabListModeType;
-    short?: boolean;
-    value: TabListValueType;
-    onChange: (value: TabListValueType) => void;
-    children: React.ReactNode;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    selectedId?: number;
-    activeNodeRef?: React.MutableRefObject<HTMLElement>;
-    tabRefs?: React.MutableRefObject<Map<number, HTMLElement>>;
-    containerRef?: React.MutableRefObject<HTMLDivElement>;
-    /** Optional a11y label for the tab list. Recommended to use either that or `aria-labelledby`. */
-    'aria-label'?: string;
-    /** Optional a11y label reference for the tab list. Recommended to use either that or `aria-label`. */
-    'aria-labelledby'?: string;
-};
-export declare const TabList: {
-    <OT extends TabListValueType>({ compareValues, value, onChange, children, theme: themeFromProps, ["data-e2e"]: e2eId, ...restProps }: React.PropsWithChildren<import("./parts/with-scroll-arrows").WithScrollArrowsProps<OT> & {
-        size?: TabListSizeType;
-        sparse?: boolean;
-        className?: string;
-        mode?: TabListModeType;
-        short?: boolean;
-        'data-e2e'?: string;
-        'aria-label'?: string;
-        'aria-labelledby'?: string;
-    }>): React.ReactElement<any, string | React.JSXElementConstructor<any>>;
-    displayName: string;
-};
-export declare type TabListProps = React.ComponentProps<typeof TabList>;
-export default TabList;
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Theme } from '@rescui/ui-contexts';
+import { TabListValueType } from './parts/tab-list-context';
+import { ScrollableListCompareValueType } from './parts/use-scrollable-list';
+export type TabListSizeType = 'l' | 'm';
+export type TabListModeType = 'classic' | 'rock';
+export type TabListProps<T extends TabListValueType> = {
+    className?: string;
+    size?: TabListSizeType;
+    /** Increase inner horizontal offset between the tabs. */
+    sparse?: boolean;
+    theme?: Theme;
+    mode?: TabListModeType;
+    short?: boolean;
+    value: T;
+    onChange: (value: T) => void;
+    children: React.ReactNode;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** Optional a11y label for the tab list. Recommended to use either that or `aria-labelledby`. */
+    'aria-label'?: string;
+    /** Optional a11y label reference for the tab list. Recommended to use either that or `aria-label`. */
+    'aria-labelledby'?: string;
+    compareValues?: ScrollableListCompareValueType<T>;
+};
+declare const TabList: {
+    <T extends TabListValueType>({ size, sparse, className, mode, short, ["data-e2e"]: e2eId, compareValues, value, onChange, children, theme: themeFromProps, ...restProps }: TabListProps<T>): React.JSX.Element;
+    displayName: string;
+    propTypes: {
+        size: PropTypes.Requireable<string>;
+        sparse: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<string>;
+        className: PropTypes.Requireable<string>;
+        mode: PropTypes.Requireable<string>;
+        short: PropTypes.Requireable<boolean>;
+        value: PropTypes.Requireable<NonNullable<string | number | symbol | object>>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        compareValues: PropTypes.Requireable<(...args: any[]) => any>;
+        'data-e2e': PropTypes.Requireable<string>;
+    };
+};
+export default TabList;

package/lib/tab-list.js

@@ -1,37 +1,60 @@
 "use client";
-import React from 'react';
+import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
 import cn from 'classnames';
+import { useThemeWithUndefined } from '@rescui/ui-contexts';
+import { Button } from '@rescui/button';
+import LeftOutlineIcon from './_virtual/left-outline.js';
+import RightOutlineIcon from './_virtual/right-outline.js';
 import Tab from './parts/tab.js';
 import { TabListContext } from './parts/tab-list-context.js';
-import { withScrollArrows } from './parts/with-scroll-arrows.js';
 import { useIndicator } from './parts/use-indicator.js';
 import { useRovingTabIndex } from './parts/use-roving-tab-index.js';
+import { useScrollableList } from './parts/use-scrollable-list.js';
 import styles from './parts/tab-list.p.module.css.js';
 const STYLES_SIZES = {
   m: styles.sizeM,
   l: styles.sizeL
 };
 
-const InnerTabList = _ref => {
+const compareTabsDefault = (activeValue, tabValue) => activeValue === tabValue; // eslint-disable-next-line complexity
+
+
+const TabList = _ref => {
   let {
     size = 'm',
     sparse = false,
     className,
     mode = 'classic',
     short = false,
-    theme,
+    ['data-e2e']: e2eId,
+    compareValues = compareTabsDefault,
     value,
     onChange,
     children,
+    theme: themeFromProps,
+    ...restProps
+  } = _ref;
+  const activeNodeRef = useRef(null);
+  const scrollableRef = useRef(null);
+  const containerRef = useRef(null);
+  const theme = useThemeWithUndefined(themeFromProps);
+  const {
     selectedId,
-    activeNodeRef,
+    prepareDirectionScroller,
     tabRefs,
-    containerRef,
-    ['data-e2e']: e2eId,
-    ['aria-label']: ariaLabel,
-    ['aria-labelledby']: ariaLabelledBy
-  } = _ref;
+    childrenWithValues,
+    showLeftArrow,
+    showRightArrow
+  } = useScrollableList({
+    children,
+    compareValues,
+    value,
+    CompareItem: Tab,
+    activeNodeRef,
+    scrollableRef,
+    containerRef
+  });
   const {
     indicator,
     isIndicatorHidden
@@ -50,22 +73,56 @@ const InnerTabList = _ref => {
       selectedId,
       rovingTabIndex
     }
+  }, /*#__PURE__*/React.createElement("div", { ...restProps,
+    className: cn(className, styles.wrapper, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, isIndicatorHidden && styles.isIndicatorHidden),
+    "data-e2e": e2eId,
+    "data-test": 'tab-list',
+    role: "tablist"
   }, /*#__PURE__*/React.createElement("div", {
-    className: cn(styles.tabsContainer, styles[theme], styles[mode], STYLES_SIZES[size], sparse && styles.sparse, short && styles.short, isIndicatorHidden && styles.isIndicatorHidden, className),
+    className: cn(styles.arrow, styles.arrowLeft, showLeftArrow && styles.shown),
+    "data-test": 'scrollable-list-arrow-left-wrapper'
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: theme,
+    mode: "clear",
+    notFocusable: true,
+    onClick: prepareDirectionScroller('left'),
+    icon: /*#__PURE__*/React.createElement(LeftOutlineIcon, {
+      "data-render-all-sizes": true
+    }),
+    size: "s",
+    "data-e2e": e2eId ? `${e2eId}__left-arrow` : null,
+    "data-test": 'scrollable-list-arrow-left'
+  })), /*#__PURE__*/React.createElement("div", {
+    className: cn(styles.scrollable, showLeftArrow && styles.withLeftArrow, showRightArrow && styles.withRightArrow),
+    ref: scrollableRef,
+    tabIndex: -1
+  }, /*#__PURE__*/React.createElement("div", {
+    className: styles.tabsContainer,
     "data-e2e": e2eId ? `${e2eId}__tabs-container` : null,
-    "data-test": 'tab-list',
     ref: containerRef,
-    role: "tablist",
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy
-  }, children, /*#__PURE__*/React.createElement("span", {
+    "data-test": 'tab-list__tabs-container'
+  }, childrenWithValues, /*#__PURE__*/React.createElement("span", {
     style: indicator,
     className: styles.indicator
-  })));
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: cn(styles.arrow, styles.arrowRight, showRightArrow && styles.shown),
+    "data-test": 'scrollable-list-arrow-right-wrapper'
+  }, /*#__PURE__*/React.createElement(Button, {
+    theme: theme,
+    mode: "clear",
+    notFocusable: true,
+    onClick: prepareDirectionScroller('right'),
+    icon: /*#__PURE__*/React.createElement(RightOutlineIcon, {
+      "data-render-all-sizes": true
+    }),
+    className: styles.arrowButton,
+    size: "s",
+    "data-e2e": e2eId ? `${e2eId}__right-arrow` : null,
+    "data-test": 'scrollable-list-arrow-right'
+  }))));
 };
 
-InnerTabList.displayName = 'TabList';
-const TabList = withScrollArrows(InnerTabList, Tab);
+TabList.displayName = 'TabList';
 TabList.propTypes = {
   size: PropTypes.oneOf(['m', 'l']),
   sparse: PropTypes.bool,
@@ -76,8 +133,6 @@ TabList.propTypes = {
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.symbol, PropTypes.object]),
   onChange: PropTypes.func,
   compareValues: PropTypes.func,
-  'data-e2e': PropTypes.string,
-  'aria-label': PropTypes.string,
-  'aria-labelledby': PropTypes.string
+  'data-e2e': PropTypes.string
 };
-export { TabList, TabList as default };
+export { TabList as default };