@rescui/chip-list 0.13.6 → 0.14.1

package/lib/parts/chip-list-base.d.ts

@@ -1,24 +1,31 @@
-import React from 'react';
-import { Theme } from '@rescui/ui-contexts';
-import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType } from './types';
-export declare type ChipListBaseProps<V> = {
-    className?: string;
-    size?: ChipListSizeType;
-    /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
-    sparse?: boolean;
-    /** Decrease horizontal paddings, gap and border-radius values */
-    compact?: boolean;
-    disabled?: boolean;
-    theme?: Theme;
-    mode?: ChipListModeType;
-    alignItems?: ChipListAlignItemsType;
-    value: V[];
-    onChange: (value: V) => void;
-    children: React.ReactNode;
-    compareValues?: (activeValue: V[], value: V) => boolean;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    /** CSS style object */
-    style?: React.CSSProperties;
-};
-export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, theme: themeFromProps, value, onChange, compareValues, children, ['data-e2e']: e2eId, style }: ChipListBaseProps<V>): JSX.Element;
+import React from 'react';
+import { Theme } from '@rescui/ui-contexts';
+import { ChipListSizeType, ChipListModeType, ChipListAlignItemsType, ChipListBasePatternType } from './types';
+export type ChipListBaseProps<V> = {
+    className?: string;
+    size?: ChipListSizeType;
+    /** Increase inner horizontal offset between the chips. Does nothing when `compact={true}` */
+    sparse?: boolean;
+    /** Decrease horizontal paddings, gap and border-radius values */
+    compact?: boolean;
+    disabled?: boolean;
+    theme?: Theme;
+    mode?: ChipListModeType;
+    alignItems?: ChipListAlignItemsType;
+    pattern?: ChipListBasePatternType;
+    value: V[];
+    onChange: (value: V) => void;
+    children: React.ReactNode;
+    compareValues?: (activeValue: V[], value: V) => boolean;
+    /** Optional name of all `input[type="radio"]` children. */
+    name?: string;
+    /** Optional a11y label for the chip list. Recommended to use either that or `aria-labelledby`. */
+    'aria-label'?: string;
+    /** Optional a11y label reference for the chip list. Recommended to use either that or `aria-label`. */
+    'aria-labelledby'?: string;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** CSS style object */
+    style?: React.CSSProperties;
+};
+export declare function ChipListBase<V>({ size, sparse, compact, disabled, className, mode, alignItems, pattern, theme: themeFromProps, value, onChange, compareValues, children, name, ['aria-label']: ariaLabel, ['aria-labelledby']: ariaLabelledBy, ['data-e2e']: e2eId, style }: ChipListBaseProps<V>): React.JSX.Element;

package/lib/parts/chip-list-base.js

@@ -5,6 +5,8 @@ import { useThemeWithUndefined } from '@rescui/ui-contexts';
 import { ChipListContext } from './chip-list-context.js';
 import styles from './chip-list.p.module.css.js';
 import { useItemsIds } from './use-items-ids.js';
+import { useRovingTabIndex } from './use-roving-tab-index.js';
+const IS_PRODUCTION = process.env.NODE_ENV === 'production';
 const STYLES_SIZES = {
   xs: styles.sizeXs,
   s: styles.sizeS,
@@ -17,7 +19,21 @@ const ALIGN_ITEMS_STYLES = {
   right: styles.alignRight
 };
 
-function ChipListBase(_ref) {
+const calculateAutoPattern = _ref => {
+  let {
+    hasHref,
+    hasControls
+  } = _ref;
+
+  if (hasControls) {
+    return 'tablist';
+  }
+
+  return hasHref ? 'navigation' : 'radiogroup';
+}; // eslint-disable-next-line complexity
+
+
+function ChipListBase(_ref2) {
   let {
     size = 'm',
     sparse = false,
@@ -26,34 +42,74 @@ function ChipListBase(_ref) {
     className,
     mode = 'classic',
     alignItems = 'left',
+    pattern = 'auto',
     theme: themeFromProps,
     value,
     onChange,
     compareValues,
     children,
+    name,
+    ['aria-label']: ariaLabel,
+    ['aria-labelledby']: ariaLabelledBy,
     ['data-e2e']: e2eId,
     style
-  } = _ref;
+  } = _ref2;
   const theme = useThemeWithUndefined(themeFromProps);
   const {
     childrenWithValues,
-    selectedIds
+    selectedIds,
+    hasHref,
+    hasControls,
+    allItemsHaveControls,
+    tabRefs
   } = useItemsIds({
     children,
     compareValues,
     value
   });
+  const resolvedPattern = pattern === 'auto' ? calculateAutoPattern({
+    hasHref,
+    hasControls
+  }) : pattern;
+  const rovingTabIndex = useRovingTabIndex({
+    enabled: resolvedPattern === 'tablist' && !disabled,
+    selectedId: selectedIds[0],
+    tabRefs
+  }); // eslint-disable-next-line complexity
+
+  React.useEffect(() => {
+    if (!IS_PRODUCTION && resolvedPattern === 'radiogroup' && hasHref) {
+      // eslint-disable-next-line no-console
+      console.warn('[RescUI] ChipList with pattern="radiogroup" contains Chip with href. href is ignored. Use pattern="navigation" or pattern="auto" for link chips.');
+    }
+
+    if (!IS_PRODUCTION && resolvedPattern !== 'tablist' && hasControls) {
+      // eslint-disable-next-line no-console
+      console.warn('[RescUI] ChipList with pattern other than "tablist" contains Chip with aria-controls. Use pattern="tablist" or pattern="auto" for controlled tab panels.');
+    }
+
+    if (!IS_PRODUCTION && resolvedPattern === 'tablist' && !allItemsHaveControls) {
+      // eslint-disable-next-line no-console
+      console.warn('[RescUI] ChipList with pattern="tablist" requires every Chip to have aria-controls. Every tab should control a panel.');
+    }
+  }, [allItemsHaveControls, hasControls, hasHref, resolvedPattern]);
   return /*#__PURE__*/React.createElement(ChipListContext.Provider, {
     value: {
       onChange,
       selectedIds,
-      disabled
+      disabled,
+      pattern: resolvedPattern,
+      name,
+      rovingTabIndex: resolvedPattern === 'tablist' ? rovingTabIndex : undefined
     }
   }, /*#__PURE__*/React.createElement("div", {
     className: cn(styles.main, styles[theme], styles[mode], STYLES_SIZES[size], sparse ? styles.innerOffsetL : styles.innerOffsetM, compact && styles.compact, disabled && styles.disabled, ALIGN_ITEMS_STYLES[alignItems], className),
     "data-e2e": e2eId ? `${e2eId}__chips-container` : null,
     "data-rs-internal": 'chip-list',
     "data-test": 'chip-list',
+    role: resolvedPattern,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
     style: style
   }, /*#__PURE__*/React.createElement("div", {
     className: styles.chipsContainer

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
-import { ChipListContextType } from './types';
-export declare const ChipListContext: import("react").Context<ChipListContextType<unknown>>;
-export declare const useChipListContext: () => ChipListContextType<unknown>;
+import { ChipListContextType } from './types';
+export declare const ChipListContext: import("react").Context<ChipListContextType<unknown>>;
+export declare const useChipListContext: () => ChipListContextType<unknown>;

package/lib/parts/chip-list-context.js

@@ -4,7 +4,8 @@ const ChipListContext = /*#__PURE__*/createContext({
   // eslint-disable-next-line @typescript-eslint/no-empty-function
   onChange: () => {},
   selectedIds: [],
-  disabled: false
+  disabled: false,
+  pattern: 'navigation'
 });
 
 const useChipListContext = () => useContext(ChipListContext);

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

@@ -1,26 +1,27 @@
 var styles = {
-  "light": "_light_1257dbr_8",
-  "dark": "_dark_1257dbr_11",
-  "alignLeft": "_alignLeft_1257dbr_15",
-  "alignCenter": "_alignCenter_1257dbr_18",
-  "alignRight": "_alignRight_1257dbr_21",
-  "sizeXs": "_sizeXs_1257dbr_25",
-  "sizeS": "_sizeS_1257dbr_28",
-  "sizeM": "_sizeM_1257dbr_31",
-  "sizeL": "_sizeL_1257dbr_34",
-  "innerOffsetL": "_innerOffsetL_1257dbr_38",
-  "innerOffsetM": "_innerOffsetM_1257dbr_41",
-  "classic": "_classic_1257dbr_45",
-  "rock": "_rock_1257dbr_48",
-  "compact": "_compact_1257dbr_52",
-  "main": "_main_1257dbr_56",
-  "chipsContainer": "_chipsContainer_1257dbr_62",
-  "alignIconLeft": "_alignIconLeft_1257dbr_72",
-  "alignIconRight": "_alignIconRight_1257dbr_75",
-  "chip": "_chip_1257dbr_62",
-  "selected": "_selected_1257dbr_172",
-  "disabled": "_disabled_1257dbr_179",
-  "icon": "_icon_1257dbr_212",
-  "withoutText": "_withoutText_1257dbr_223"
+  "light": "_light_clap9i_8",
+  "dark": "_dark_clap9i_11",
+  "alignLeft": "_alignLeft_clap9i_15",
+  "alignCenter": "_alignCenter_clap9i_18",
+  "alignRight": "_alignRight_clap9i_21",
+  "sizeXs": "_sizeXs_clap9i_25",
+  "sizeS": "_sizeS_clap9i_28",
+  "sizeM": "_sizeM_clap9i_31",
+  "sizeL": "_sizeL_clap9i_34",
+  "innerOffsetL": "_innerOffsetL_clap9i_38",
+  "innerOffsetM": "_innerOffsetM_clap9i_41",
+  "classic": "_classic_clap9i_45",
+  "rock": "_rock_clap9i_48",
+  "compact": "_compact_clap9i_52",
+  "main": "_main_clap9i_56",
+  "chipsContainer": "_chipsContainer_clap9i_62",
+  "alignIconLeft": "_alignIconLeft_clap9i_72",
+  "alignIconRight": "_alignIconRight_clap9i_75",
+  "chip": "_chip_clap9i_62",
+  "selected": "_selected_clap9i_176",
+  "disabled": "_disabled_clap9i_183",
+  "icon": "_icon_clap9i_216",
+  "hiddenInput": "_hiddenInput_clap9i_227",
+  "withoutText": "_withoutText_clap9i_244"
 };
 export { styles as default };

package/lib/parts/chip.d.ts

@@ -1,34 +1,36 @@
-import React from 'react';
-import { ChipIconPosition } from './types';
-export declare type ChipExplicitProps = {
-    className?: string;
-    /**
-     * Chip value
-     * @type ValueType
-     */
-    value?: unknown;
-    /** @ignore */
-    itemId?: number;
-    /** @ignore */
-    onClick?: React.MouseEventHandler<HTMLElement>;
-    /** @ignore */
-    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
-    /** Identifier for e2e tests */
-    'data-e2e'?: string;
-    /** Href for link-type Chip */
-    href?: string;
-    children?: React.ReactNode;
-} & ({
-    /** Additional icon */
-    icon: React.ReactNode;
-    /** Additional icon position */
-    iconPosition?: ChipIconPosition;
-} | {
-    icon?: never;
-    iconPosition?: never;
-});
-declare type ChipButtonProps = ChipExplicitProps & React.ButtonHTMLAttributes<HTMLButtonElement>;
-declare type ChipAnchorProps = ChipExplicitProps & React.AnchorHTMLAttributes<HTMLAnchorElement>;
-export declare type ChipProps = ChipButtonProps | ChipAnchorProps;
-declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLButtonElement | HTMLAnchorElement>>;
-export default Chip;
+import React from 'react';
+import { ChipIconPosition } from './types';
+type InheritType<Main, Parent> = Main & Omit<Parent, keyof Main>;
+export type ChipOwnProps = {
+    className?: string;
+    /**
+     * Chip value
+     * @type ValueType
+     */
+    value?: unknown;
+    /** @ignore */
+    itemId?: number;
+    /** @ignore */
+    onClick?: React.MouseEventHandler<HTMLElement>;
+    /** @ignore */
+    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
+    /** Identifier for e2e tests */
+    'data-e2e'?: string;
+    /** Href for link-type Chip */
+    href?: string;
+    children?: React.ReactNode;
+} & ({
+    /** Additional icon */
+    icon: React.ReactNode;
+    /** Additional icon position */
+    iconPosition?: ChipIconPosition;
+} | {
+    icon?: never;
+    iconPosition?: never;
+});
+type ChipLabelProps = InheritType<ChipOwnProps, React.LabelHTMLAttributes<HTMLLabelElement>>;
+type ChipButtonProps = InheritType<ChipOwnProps, React.ButtonHTMLAttributes<HTMLButtonElement>>;
+type ChipAnchorProps = InheritType<ChipOwnProps, React.AnchorHTMLAttributes<HTMLAnchorElement>>;
+export type ChipProps = ChipLabelProps | ChipButtonProps | ChipAnchorProps;
+declare const Chip: React.ForwardRefExoticComponent<ChipProps & React.RefAttributes<HTMLLabelElement | HTMLButtonElement | HTMLAnchorElement>>;
+export default Chip;

package/lib/parts/chip.js

@@ -5,31 +5,108 @@ import PropTypes from 'prop-types';
 import cn from 'classnames';
 import styles from './chip-list.p.module.css.js';
 import { useChipListContext } from './chip-list-context.js';
-const ChipTag = /*#__PURE__*/forwardRef((props, ref) => {
+const ChipTag = /*#__PURE__*/forwardRef( // eslint-disable-next-line complexity
+(_ref, ref) => {
+  let {
+    selected,
+    onValueChange,
+    itemId,
+    tabIndex,
+    children,
+    value: chipValue,
+    onClick,
+    onKeyDown,
+    href,
+    ...restProps
+  } = _ref;
   const {
-    disabled
+    disabled,
+    pattern,
+    name: hiddenInputName,
+    rovingTabIndex
   } = useChipListContext();
+  let resolvedTabIndex = disabled ? -1 : tabIndex;
+
+  if (pattern === 'radiogroup' || pattern === 'group') {
+    const labelProps = { ...restProps
+    };
+    return /*#__PURE__*/React.createElement("label", {
+      ref: ref,
+      ...labelProps
+    }, /*#__PURE__*/React.createElement("input", {
+      type: pattern === 'group' ? 'checkbox' : 'radio',
+      value: String(chipValue),
+      onChange: onValueChange,
+      onClick: onClick,
+      onKeyDown: onKeyDown,
+      className: styles.hiddenInput,
+      checked: selected,
+      disabled: disabled,
+      name: hiddenInputName,
+      tabIndex: resolvedTabIndex
+    }), children);
+  }
+
+  const handleNavigationClick = e => {
+    onClick?.(e);
+    onValueChange();
+  };
 
-  if (typeof props.href !== 'undefined') {
+  const handleNavigationKeyDown = e => {
+    onKeyDown?.(e);
+
+    if (pattern === 'tablist' && typeof itemId !== 'undefined') {
+      rovingTabIndex?.onTabKeyDown(e, itemId);
+    }
+
+    if (e.key === ' ') {
+      e.target.click();
+      e.preventDefault();
+    }
+  };
+
+  const isTablist = pattern === 'tablist';
+  const autoRole = isTablist ? 'tab' : undefined;
+  const autoAriaCurrent = selected && !isTablist ? 'page' : undefined;
+  const autoAriaSelected = isTablist ? selected : undefined;
+
+  if (isTablist && !disabled) {
+    resolvedTabIndex = itemId === rovingTabIndex?.currentTabStopId ? 0 : -1;
+  }
+
+  if (typeof href !== 'undefined') {
     return /*#__PURE__*/React.createElement("a", {
       ref: ref,
-      ...props,
-      tabIndex: disabled ? -1 : props.tabIndex
-    }, props.children);
+      ...restProps,
+      href: href,
+      role: restProps.role ?? autoRole,
+      "aria-current": restProps['aria-current'] ?? autoAriaCurrent,
+      "aria-selected": restProps['aria-selected'] ?? autoAriaSelected,
+      "aria-disabled": disabled || undefined,
+      onClick: handleNavigationClick,
+      onKeyDown: handleNavigationKeyDown,
+      tabIndex: resolvedTabIndex
+    }, children);
   }
 
   return /*#__PURE__*/React.createElement("button", {
     ref: ref,
-    ...props,
+    ...restProps,
+    role: restProps.role ?? autoRole,
+    "aria-current": restProps['aria-current'] ?? autoAriaCurrent,
+    "aria-selected": restProps['aria-selected'] ?? autoAriaSelected,
     disabled: disabled,
+    onClick: handleNavigationClick,
+    onKeyDown: handleNavigationKeyDown,
+    tabIndex: resolvedTabIndex,
     type: "button"
-  }, props.children);
+  }, children);
 });
 ChipTag.displayName = 'ChipTag'; // check for ignored jsx values and empty string, more info https://reactjs.org/docs/jsx-in-depth.html#booleans-null-and-undefined-are-ignored
 
 const isWithoutChildren = children => children === null || typeof children === 'undefined' || children === false || children === true || children === '';
 
-const Chip = /*#__PURE__*/forwardRef((_ref, ref) => {
+const Chip = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     value,
     className,
@@ -37,11 +114,9 @@ const Chip = /*#__PURE__*/forwardRef((_ref, ref) => {
     icon,
     iconPosition = 'left',
     itemId,
-    onClick,
-    onKeyDown,
     ['data-e2e']: e2eId,
     ...restProps
-  } = _ref;
+  } = _ref2;
   const {
     onChange,
     selectedIds
@@ -55,24 +130,10 @@ const Chip = /*#__PURE__*/forwardRef((_ref, ref) => {
       [styles.selected]: selected,
       [styles.withoutText]: isWithoutText
     }, iconPosition === 'right' ? styles.alignIconRight : styles.alignIconLeft, className),
-    onClick: e => {
-      if (onClick) {
-        onClick(e);
-      }
-
-      onChange(value);
-    },
-    onKeyDown: e => {
-      if (e.key === ' ') {
-        e.target.click();
-        e.preventDefault();
-      }
-
-      if (onKeyDown) {
-        onKeyDown(e);
-      }
-    },
-    role: "tab",
+    onValueChange: () => onChange(value),
+    itemId: itemId,
+    selected: selected,
+    value: value,
     tabIndex: restProps.tabIndex ?? 0,
     ref: ref,
     "data-e2e": e2eId,

package/lib/parts/deep-map.d.ts

@@ -1,2 +1,2 @@
-import React from 'react';
-export declare function deepMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): React.ReactNode;
+import React from 'react';
+export declare function deepMap(children: React.ReactNode, fn: (child: React.ReactNode) => React.ReactNode): React.ReactNode;

package/lib/parts/types.d.ts

@@ -1,9 +1,19 @@
-export declare type ChipListSizeType = 'l' | 'm' | 's' | 'xs';
-export declare type ChipListModeType = 'classic' | 'rock';
-export declare type ChipListAlignItemsType = 'left' | 'center' | 'right';
-export declare type ChipIconPosition = 'left' | 'right';
-export declare type ChipListContextType<V> = {
-    onChange: (value: V) => void;
-    selectedIds?: number[];
-    disabled?: boolean;
-};
+import type React from 'react';
+export type ChipListSizeType = 'l' | 'm' | 's' | 'xs';
+export type ChipListModeType = 'classic' | 'rock';
+export type ChipListAlignItemsType = 'left' | 'center' | 'right';
+export type ChipListResolvedPatternType = 'radiogroup' | 'group' | 'navigation' | 'tablist';
+export type ChipListPatternType = 'radiogroup' | 'navigation' | 'tablist' | 'auto';
+export type ChipListBasePatternType = ChipListPatternType | 'group';
+export type ChipIconPosition = 'left' | 'right';
+export type ChipListContextType<V> = {
+    onChange: (value: V) => void;
+    selectedIds?: number[];
+    disabled?: boolean;
+    pattern?: ChipListResolvedPatternType;
+    name?: string;
+    rovingTabIndex?: {
+        currentTabStopId: number;
+        onTabKeyDown: (e: React.KeyboardEvent<HTMLElement>, itemId: number) => void;
+    };
+};

package/lib/parts/use-items-ids.d.ts

@@ -1,10 +1,14 @@
-import React from 'react';
-export declare type UseItemsIdsOpts<V> = {
-    children: React.ReactNode;
-    compareValues: (activeValue: V[], value: V) => boolean;
-    value: V[];
-};
-export declare const useItemsIds: <V>({ children, compareValues, value }: UseItemsIdsOpts<V>) => {
-    childrenWithValues: (string | number | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal)[];
-    selectedIds: number[];
-};
+import React from 'react';
+export type UseItemsIdsOpts<V> = {
+    children: React.ReactNode;
+    compareValues: (activeValue: V[], value: V) => boolean;
+    value: V[];
+};
+export declare const useItemsIds: <V>({ children, compareValues, value }: UseItemsIdsOpts<V>) => {
+    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>>)[];
+    selectedIds: number[];
+    hasHref: boolean;
+    hasControls: boolean;
+    allItemsHaveControls: boolean;
+    tabRefs: React.RefObject<Map<number, HTMLElement>>;
+};

package/lib/parts/use-items-ids.js

@@ -1,4 +1,4 @@
-import React, { useMemo, cloneElement } from 'react';
+import React, { useRef, useCallback, useMemo, cloneElement } from 'react';
 import { deepMap } from './deep-map.js';
 import Chip from './chip.js';
 
@@ -6,27 +6,72 @@ function patchItemIfNeeded(_ref) {
   let {
     child,
     itemId,
-    childValue
+    childValue,
+    ref
   } = _ref;
   return /*#__PURE__*/cloneElement(child, {
     itemId,
-    value: childValue
+    value: childValue,
+    ref
   });
 }
 
+const setRef = (ref, value) => {
+  if (typeof ref === 'function') {
+    ref(value);
+  } else if (ref) {
+    ref.current = value;
+  }
+};
+
+const getElementRef = child => child.ref;
+
 const hasElValue = el => el.props?.value !== null && typeof el.props?.value !== 'undefined';
 
+const hasElHref = el => typeof el.props?.href !== 'undefined';
+
+const hasElAriaControls = el => typeof el.props?.['aria-controls'] !== 'undefined';
+
 const useItemsIds = _ref2 => {
   let {
     children,
     compareValues,
     value
   } = _ref2;
-  const [childrenWithValues, selectedIds] = useMemo(() => {
+  const tabRefs = useRef(new Map());
+  const createChipRef = useCallback((itemId, childRef) => node => {
+    if (node) {
+      tabRefs.current.set(itemId, node);
+    } else {
+      tabRefs.current.delete(itemId);
+    }
+
+    setRef(childRef, node);
+  }, []);
+  const {
+    childrenWithValues,
+    selectedIds,
+    hasHref,
+    hasControls,
+    allItemsHaveControls
+  } = useMemo(() => {
     let counter = 0;
     const currentSelectedItemIds = [];
+    let currentHasHref = false;
+    let currentHasControls = false;
+    let currentAllItemsHaveControls = true;
     const items = deepMap(children, child => {
       if (child.type === Chip) {
+        if (hasElHref(child)) {
+          currentHasHref = true;
+        }
+
+        if (hasElAriaControls(child)) {
+          currentHasControls = true;
+        } else {
+          currentAllItemsHaveControls = false;
+        }
+
         const childValue = hasElValue(child) ? child.props.value : counter;
         const isSelectedItem = compareValues(value, childValue);
 
@@ -37,7 +82,8 @@ const useItemsIds = _ref2 => {
         const patchedItem = patchItemIfNeeded({
           child,
           itemId: counter,
-          childValue
+          childValue,
+          ref: createChipRef(counter, getElementRef(child))
         });
         counter += 1;
         return patchedItem;
@@ -45,11 +91,21 @@ const useItemsIds = _ref2 => {
         return child;
       }
     });
-    return [React.Children.toArray(items), currentSelectedItemIds];
-  }, [children, value, compareValues]);
+    return {
+      childrenWithValues: React.Children.toArray(items),
+      selectedIds: currentSelectedItemIds,
+      hasHref: currentHasHref,
+      hasControls: currentHasControls,
+      allItemsHaveControls: counter > 0 && currentAllItemsHaveControls
+    };
+  }, [children, value, compareValues, createChipRef]);
   return {
     childrenWithValues,
-    selectedIds
+    selectedIds,
+    hasHref,
+    hasControls,
+    allItemsHaveControls,
+    tabRefs
   };
 };
 

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

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