@react-aria/tabs 3.11.1 → 3.12.0

package/src/useTab.ts

@@ -1,82 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaTabProps} from '@react-types/tabs';
-import {DOMAttributes, FocusableElement, RefObject} from '@react-types/shared';
-import {filterDOMProps, mergeProps, useLinkProps} from '@react-aria/utils';
-import {generateId} from './utils';
-import {TabListState} from '@react-stately/tabs';
-import {useFocusable} from '@react-aria/focus';
-import {useSelectableItem} from '@react-aria/selection';
-
-export interface TabAria {
-  /** Props for the tab element. */
-  tabProps: DOMAttributes,
-  /** Whether the tab is currently selected. */
-  isSelected: boolean,
-  /** Whether the tab is disabled. */
-  isDisabled: boolean,
-  /** Whether the tab is currently in a pressed state. */
-  isPressed: boolean
-}
-
-/**
- * Provides the behavior and accessibility implementation for a tab.
- * When selected, the associated tab panel is shown.
- */
-export function useTab<T>(
-  props: AriaTabProps,
-  state: TabListState<T>,
-  ref: RefObject<FocusableElement | null>
-): TabAria {
-  let {key, isDisabled: propsDisabled, shouldSelectOnPressUp} = props;
-  let {selectionManager: manager, selectedKey} = state;
-
-  let isSelected = key === selectedKey;
-
-  let isDisabled = propsDisabled || state.isDisabled || state.selectionManager.isDisabled(key);
-  let {itemProps, isPressed} = useSelectableItem({
-    selectionManager: manager,
-    key,
-    ref,
-    isDisabled,
-    shouldSelectOnPressUp,
-    linkBehavior: 'selection'
-  });
-
-  let tabId = generateId(state, key, 'tab');
-  let tabPanelId = generateId(state, key, 'tabpanel');
-  let {tabIndex} = itemProps;
-
-  let item = state.collection.getItem(key);
-  let domProps = filterDOMProps(item?.props, {labelable: true});
-  delete domProps.id;
-  let linkProps = useLinkProps(item?.props);
-  let {focusableProps} = useFocusable({
-    ...item?.props,
-    isDisabled
-  }, ref);
-
-  return {
-    tabProps: mergeProps(domProps, focusableProps, linkProps, itemProps, {
-      id: tabId,
-      'aria-selected': isSelected,
-      'aria-disabled': isDisabled || undefined,
-      'aria-controls': isSelected ? tabPanelId : undefined,
-      tabIndex: isDisabled ? undefined : tabIndex,
-      role: 'tab'
-    }),
-    isSelected,
-    isDisabled,
-    isPressed
-  };
-}

package/src/useTabList.ts

@@ -1,75 +0,0 @@
-/*
-* Copyright 2020 Adobe. All rights reserved.
-* This file is licensed to you under the Apache License, Version 2.0 (the "License");
-* you may not use this file except in compliance with the License. You may obtain a copy
-* of the License at http://www.apache.org/licenses/LICENSE-2.0
-*
-* Unless required by applicable law or agreed to in writing, software distributed under
-* the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
-* OF ANY KIND, either express or implied. See the License for the specific language
-* governing permissions and limitations under the License.
-*/
-
-import {AriaTabListProps} from '@react-types/tabs';
-import {DOMAttributes, RefObject} from '@react-types/shared';
-import {mergeProps, useId, useLabels} from '@react-aria/utils';
-import {TabListState} from '@react-stately/tabs';
-import {tabsIds} from './utils';
-import {TabsKeyboardDelegate} from './TabsKeyboardDelegate';
-import {useLocale} from '@react-aria/i18n';
-import {useMemo} from 'react';
-import {useSelectableCollection} from '@react-aria/selection';
-
-export interface AriaTabListOptions<T> extends Omit<AriaTabListProps<T>, 'children'> {}
-
-export interface TabListAria {
-  /** Props for the tablist container. */
-  tabListProps: DOMAttributes
-}
-
-/**
- * Provides the behavior and accessibility implementation for a tab list.
- * Tabs organize content into multiple sections and allow users to navigate between them.
- */
-export function useTabList<T>(props: AriaTabListOptions<T>, state: TabListState<T>, ref: RefObject<HTMLElement | null>): TabListAria {
-  let {
-    orientation = 'horizontal',
-    keyboardActivation = 'automatic'
-  } = props;
-  let {
-    collection,
-    selectionManager: manager,
-    disabledKeys
-  } = state;
-  let {direction} = useLocale();
-  let delegate = useMemo(() => new TabsKeyboardDelegate(
-    collection,
-    direction,
-    orientation,
-    disabledKeys), [collection, disabledKeys, orientation, direction]);
-
-  let {collectionProps} = useSelectableCollection({
-    ref,
-    selectionManager: manager,
-    keyboardDelegate: delegate,
-    selectOnFocus: keyboardActivation === 'automatic',
-    disallowEmptySelection: true,
-    scrollRef: ref,
-    linkBehavior: 'selection'
-  });
-
-  // Compute base id for all tabs
-  let tabsId = useId();
-  tabsIds.set(state, tabsId);
-
-  let tabListLabelProps = useLabels({...props, id: tabsId});
-
-  return {
-    tabListProps: {
-      ...mergeProps(collectionProps, tabListLabelProps),
-      role: 'tablist',
-      'aria-orientation': orientation,
-      tabIndex: undefined
-    }
-  };
-}

package/src/useTabPanel.ts

@@ -1,47 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {AriaTabPanelProps} from '@react-types/tabs';
-import {DOMAttributes, RefObject} from '@react-types/shared';
-import {generateId} from './utils';
-import {mergeProps, useLabels} from '@react-aria/utils';
-import {TabListState} from '@react-stately/tabs';
-import {useHasTabbableChild} from '@react-aria/focus';
-
-export interface TabPanelAria {
-  /** Props for the tab panel element. */
-  tabPanelProps: DOMAttributes
-}
-
-
-/**
- * Provides the behavior and accessibility implementation for a tab panel. A tab panel is a container for
- * the contents of a tab, and is shown when the tab is selected.
- */
-export function useTabPanel<T>(props: AriaTabPanelProps, state: TabListState<T> | null, ref: RefObject<Element | null>): TabPanelAria {
-  // The tabpanel should have tabIndex=0 when there are no tabbable elements within it.
-  // Otherwise, tabbing from the focused tab should go directly to the first tabbable element
-  // within the tabpanel.
-  let tabIndex = useHasTabbableChild(ref) ? undefined : 0;
-
-  const id = generateId(state, props.id ?? state?.selectedKey, 'tabpanel');
-  const tabPanelProps = useLabels({...props, id, 'aria-labelledby': generateId(state, state?.selectedKey, 'tab')});
-
-  return {
-    tabPanelProps: mergeProps(tabPanelProps, {
-      tabIndex,
-      role: 'tabpanel',
-      'aria-describedby': props['aria-describedby'],
-      'aria-details': props['aria-details']
-    })
-  };
-}

package/src/utils.ts

@@ -1,33 +0,0 @@
-/*
- * Copyright 2020 Adobe. All rights reserved.
- * This file is licensed to you under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License. You may obtain a copy
- * of the License at http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software distributed under
- * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
- * OF ANY KIND, either express or implied. See the License for the specific language
- * governing permissions and limitations under the License.
- */
-
-import {Key} from '@react-types/shared';
-import {TabListState} from '@react-stately/tabs';
-
-export const tabsIds: WeakMap<TabListState<unknown>, string> = new WeakMap<TabListState<unknown>, string>();
-
-export function generateId<T>(state: TabListState<T> | null, key: Key | null | undefined, role: string): string {
-  if (!state) {
-    // this case should only happen in the first render before the tabs are registered
-    return '';
-  }
-  if (typeof key === 'string') {
-    key = key.replace(/\s+/g, '');
-  }
-
-  let baseId = tabsIds.get(state);
-  if (process.env.NODE_ENV !== 'production' && !baseId) {
-    console.error('There is no tab id, please check if you have rendered the tab panel before the tab list.');
-  }
-  return `${baseId}-${role}-${key}`;
-}
-