@rescui/tab-list 0.16.6 → 0.17.1-RUI-293-Update-menu-component-7a032357e.20

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

@@ -1,6 +1,6 @@
 var styles = {
-  "light": "_light_1s9ao7_4",
-  "dark": "_dark_1s9ao7_7",
-  "separator": "_separator_1s9ao7_11"
+  "light": "_light_18ir3ig_4",
+  "dark": "_dark_18ir3ig_7",
+  "separator": "_separator_18ir3ig_11"
 };
 export { styles as default };

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

@@ -1,8 +1,13 @@
-/// <reference types="react" />
-export declare type TabListValueType = string | number | symbol | {};
-export declare type TabListContextType = {
-    onChange: (value: TabListValueType) => void;
-    selectedId?: number;
-};
-export declare const TabListContext: import("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_rahv02_7",
-  "dark": "_dark_rahv02_10",
-  "sizeM": "_sizeM_rahv02_14",
-  "sizeL": "_sizeL_rahv02_17",
-  "classic": "_classic_rahv02_21",
-  "rock": "_rock_rahv02_24",
-  "sparse": "_sparse_rahv02_28",
-  "short": "_short_rahv02_32",
-  "tabsContainer": "_tabsContainer_rahv02_36",
-  "indicator": "_indicator_rahv02_46",
-  "isIndicatorHidden": "_isIndicatorHidden_rahv02_60",
-  "iconLeft": "_iconLeft_rahv02_66",
-  "iconRight": "_iconRight_rahv02_69",
-  "tab": "_tab_rahv02_36",
-  "selected": "_selected_rahv02_160",
-  "icon": "_icon_rahv02_66"
+  "light": "_light_4vcbrf_10",
+  "dark": "_dark_4vcbrf_13",
+  "sizeM": "_sizeM_4vcbrf_17",
+  "sizeL": "_sizeL_4vcbrf_20",
+  "classic": "_classic_4vcbrf_24",
+  "rock": "_rock_4vcbrf_27",
+  "sparse": "_sparse_4vcbrf_31",
+  "short": "_short_4vcbrf_35",
+  "wrapper": "_wrapper_4vcbrf_39",
+  "scrollable": "_scrollable_4vcbrf_49",
+  "arrow": "_arrow_4vcbrf_78",
+  "shown": "_shown_4vcbrf_98",
+  "arrowLeft": "_arrowLeft_4vcbrf_106",
+  "arrowRight": "_arrowRight_4vcbrf_111",
+  "withLeftArrow": "_withLeftArrow_4vcbrf_117",
+  "withRightArrow": "_withRightArrow_4vcbrf_126",
+  "arrowButton": "_arrowButton_4vcbrf_147",
+  "tabsContainer": "_tabsContainer_4vcbrf_151",
+  "indicator": "_indicator_4vcbrf_157",
+  "isIndicatorHidden": "_isIndicatorHidden_4vcbrf_172",
+  "iconLeft": "_iconLeft_4vcbrf_178",
+  "iconRight": "_iconRight_4vcbrf_181",
+  "tab": "_tab_4vcbrf_151",
+  "selected": "_selected_4vcbrf_272",
+  "icon": "_icon_4vcbrf_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/tab.js

@@ -34,9 +34,11 @@ const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
   } = _ref;
   const {
     onChange,
-    selectedId
+    selectedId,
+    rovingTabIndex
   } = useTabListContext();
   const selected = itemId === selectedId;
+  const resolvedTabIndex = typeof itemId === 'undefined' || itemId === rovingTabIndex?.currentTabStopId ? 0 : -1;
   return /*#__PURE__*/React.createElement(TabTag, { ...restProps,
     className: cn(styles.tab, selected && styles.selected, iconPosition === 'right' ? styles.iconRight : styles.iconLeft, className),
     onClick: e => {
@@ -47,17 +49,20 @@ const Tab = /*#__PURE__*/forwardRef((_ref, ref) => {
       onChange(value);
     },
     onKeyDown: e => {
-      if (e.key === ' ') {
-        e.target.click();
-        e.preventDefault();
+      if (typeof itemId !== 'undefined') {
+        rovingTabIndex?.onTabKeyDown(e, itemId);
       }
 
-      if (onKeyDown) {
-        onKeyDown(e);
+      if (e.key === ' ' || e.key === 'Enter') {
+        e.currentTarget.click();
+        e.preventDefault();
       }
+
+      onKeyDown?.(e);
     },
     role: "tab",
-    tabIndex: 0,
+    "aria-selected": selected,
+    tabIndex: resolvedTabIndex,
     ref: ref,
     "data-e2e": e2eId,
     "data-test": `tab${selected ? ' tab-selected' : ''}`,

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

@@ -0,0 +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;
+};

package/lib/parts/use-roving-tab-index.js

@@ -0,0 +1,68 @@
+import _includesInstanceProperty from "@babel/runtime-corejs3/core-js-stable/instance/includes";
+import React from 'react'; // eslint-disable-next-line complexity
+
+const getNextItemId = _ref => {
+  let {
+    currentItemId,
+    itemsCount,
+    key
+  } = _ref;
+
+  if (itemsCount <= 0) {
+    return currentItemId;
+  }
+
+  if (key === 'Home') {
+    return 0;
+  }
+
+  if (key === 'End') {
+    return itemsCount - 1;
+  }
+
+  if (key === 'ArrowLeft') {
+    return currentItemId <= 0 ? itemsCount - 1 : currentItemId - 1;
+  }
+
+  if (key === 'ArrowRight') {
+    return currentItemId >= itemsCount - 1 ? 0 : currentItemId + 1;
+  }
+
+  return currentItemId;
+};
+
+const useRovingTabIndex = _ref2 => {
+  let {
+    selectedId,
+    tabRefs
+  } = _ref2;
+  const [currentTabStopId, setCurrentTabStopId] = React.useState(selectedId ?? 0);
+  React.useLayoutEffect(() => {
+    if (typeof selectedId === 'number') {
+      setCurrentTabStopId(selectedId);
+    }
+  }, [selectedId]);
+  const onTabKeyDown = React.useCallback((e, itemId) => {
+    var _context;
+
+    if (!_includesInstanceProperty(_context = ['ArrowLeft', 'ArrowRight', 'Home', 'End']).call(_context, e.key)) {
+      return;
+    }
+
+    const itemsCount = tabRefs?.current.size ?? 0;
+    const nextItemId = getNextItemId({
+      currentItemId: itemId,
+      itemsCount,
+      key: e.key
+    });
+    e.preventDefault();
+    setCurrentTabStopId(nextItemId);
+    tabRefs?.current.get(nextItemId)?.focus();
+  }, [tabRefs]);
+  return {
+    currentTabStopId,
+    onTabKeyDown
+  };
+};
+
+export { useRovingTabIndex };

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

@@ -1,17 +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>;
-    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,11 +114,12 @@ const useScrollableList = _ref2 => {
     children,
     compareValues,
     value,
-    CompareItem
+    CompareItem,
+    activeNodeRef,
+    scrollableRef,
+    containerRef
   } = _ref2;
-  const activeNodeRef = useRef(null);
-  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);
@@ -132,6 +133,17 @@ const useScrollableList = _ref2 => {
   const onFocus = useCallback(e => {
     setTargetedEl(e.target);
   }, []);
+  const createTabRef = useCallback((itemId, isSelectedItem) => node => {
+    if (node) {
+      tabRefs.current.set(itemId, node);
+    } else {
+      tabRefs.current.delete(itemId);
+    }
+
+    if (isSelectedItem) {
+      activeNodeRef.current = node;
+    }
+  }, []);
   const [childrenWithValues, selectedId] = useMemo(() => {
     let counter = 0;
     let currentSelectedItemId = null;
@@ -149,6 +161,7 @@ const useScrollableList = _ref2 => {
           currentSelectedItemId = counter;
         }
 
+        const setTabRef = createTabRef(counter, isSelectedItem);
         const patchedItem = patchItemIfNeeded({
           child,
           itemId: counter,
@@ -161,7 +174,16 @@ const useScrollableList = _ref2 => {
 
             onFocus(e);
           },
-          ref: isSelectedItem ? activeNodeRef : null
+          ref: node => {
+            setTabRef(node);
+            const childRef = child.ref;
+
+            if (typeof childRef === 'function') {
+              childRef(node);
+            } else if (childRef) {
+              childRef.current = node;
+            }
+          }
         });
         counter += 1;
         return patchedItem;
@@ -170,7 +192,7 @@ const useScrollableList = _ref2 => {
       }
     });
     return [React.Children.toArray(items), currentSelectedItemId];
-  }, [children, value, compareValues, onFocus, CompareItem]);
+  }, [children, value, compareValues, onFocus, CompareItem, createTabRef]);
 
   const prepareDirectionScroller = direction => () => {
     const {
@@ -234,9 +256,7 @@ const useScrollableList = _ref2 => {
   return {
     selectedId,
     prepareDirectionScroller,
-    activeNodeRef,
-    scrollableRef,
-    containerRef,
+    tabRefs,
     childrenWithValues,
     showLeftArrow,
     showRightArrow

package/lib/tab-list.d.ts

@@ -1,35 +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>;
-    containerRef?: React.MutableRefObject<HTMLDivElement>;
-};
-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;
-    }>): 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;