react-aria-components
Version:
A library of styleable components built using React Aria
309 lines (297 loc) • 16.5 kB
JavaScript
import {Provider as $64fa3d84918910a7$export$2881499e37b75b9a, useContextProps as $64fa3d84918910a7$export$29f1550f4b0d4415, useRenderProps as $64fa3d84918910a7$export$4d86445c2cf5e3, useSlottedContext as $64fa3d84918910a7$export$fabf2dc03a41866e} from "./utils.module.js";
import {CollectionRendererContext as $7135fc7d473fd974$export$4feb769f8ddf26c5, DefaultCollectionRenderer as $7135fc7d473fd974$export$a164736487e3f0ae, usePersistedKeys as $7135fc7d473fd974$export$90e00781bc59d8f9} from "./Collection.module.js";
import {SelectionIndicatorContext as $1d5b8b8664671ef2$export$c9549807523555e0} from "./SelectionIndicator.module.js";
import {SharedElementTransition as $c8a5a149f625efcf$export$758399f318e6385a} from "./SharedElementTransition.module.js";
import {useFocusRing as $7aSLZ$useFocusRing, mergeProps as $7aSLZ$mergeProps, useTabList as $7aSLZ$useTabList, useTab as $7aSLZ$useTab, useHover as $7aSLZ$useHover, useTabPanel as $7aSLZ$useTabPanel} from "react-aria";
import {CollectionBuilder as $7aSLZ$CollectionBuilder, Collection as $7aSLZ$Collection, CollectionNode as $7aSLZ$CollectionNode, createLeafComponent as $7aSLZ$createLeafComponent, createHideableComponent as $7aSLZ$createHideableComponent} from "@react-aria/collections";
import {filterDOMProps as $7aSLZ$filterDOMProps, useObjectRef as $7aSLZ$useObjectRef, useLayoutEffect as $7aSLZ$useLayoutEffect, useExitAnimation as $7aSLZ$useExitAnimation, useEnterAnimation as $7aSLZ$useEnterAnimation, inertValue as $7aSLZ$inertValue} from "@react-aria/utils";
import {useTabListState as $7aSLZ$useTabListState} from "react-stately";
import $7aSLZ$react, {createContext as $7aSLZ$createContext, forwardRef as $7aSLZ$forwardRef, useMemo as $7aSLZ$useMemo, useContext as $7aSLZ$useContext, useRef as $7aSLZ$useRef, useState as $7aSLZ$useState} from "react";
/*
* Copyright 2022 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.
*/
const $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f = /*#__PURE__*/ (0, $7aSLZ$createContext)(null);
const $5e8ad37a45e1c704$export$364712098d2aa57c = /*#__PURE__*/ (0, $7aSLZ$createContext)(null);
const $5e8ad37a45e1c704$export$b2539bed5023c21c = /*#__PURE__*/ (0, $7aSLZ$forwardRef)(function Tabs(props, ref) {
[props, ref] = (0, $64fa3d84918910a7$export$29f1550f4b0d4415)(props, ref, $5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
let { children: children, orientation: orientation = 'horizontal' } = props;
children = (0, $7aSLZ$useMemo)(()=>typeof children === 'function' ? children({
orientation: orientation,
defaultChildren: null
}) : children, [
children,
orientation
]);
return /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $7aSLZ$CollectionBuilder), {
content: children
}, (collection)=>/*#__PURE__*/ (0, $7aSLZ$react).createElement($5e8ad37a45e1c704$var$TabsInner, {
props: props,
collection: collection,
tabsRef: ref
}));
});
function $5e8ad37a45e1c704$var$TabsInner({ props: props, tabsRef: ref, collection: collection }) {
let { orientation: orientation = 'horizontal' } = props;
let state = (0, $7aSLZ$useTabListState)({
...props,
collection: collection,
children: undefined
});
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $7aSLZ$useFocusRing)({
within: true
});
let values = (0, $7aSLZ$useMemo)(()=>({
orientation: orientation,
isFocusWithin: isFocused,
isFocusVisible: isFocusVisible
}), [
orientation,
isFocused,
isFocusVisible
]);
let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
...props,
defaultClassName: 'react-aria-Tabs',
values: values
});
let DOMProps = (0, $7aSLZ$filterDOMProps)(props, {
global: true
});
return /*#__PURE__*/ (0, $7aSLZ$react).createElement("div", {
...(0, $7aSLZ$mergeProps)(DOMProps, renderProps, focusProps),
ref: ref,
slot: props.slot || undefined,
"data-focused": isFocused || undefined,
"data-orientation": orientation,
"data-focus-visible": isFocusVisible || undefined,
"data-disabled": state.isDisabled || undefined
}, /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
values: [
[
$5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
props
],
[
$5e8ad37a45e1c704$export$364712098d2aa57c,
state
]
]
}, renderProps.children));
}
const $5e8ad37a45e1c704$export$e51a686c67fdaa2d = /*#__PURE__*/ (0, $7aSLZ$forwardRef)(function TabList(props, ref) {
let state = (0, $7aSLZ$useContext)($5e8ad37a45e1c704$export$364712098d2aa57c);
return state ? /*#__PURE__*/ (0, $7aSLZ$react).createElement($5e8ad37a45e1c704$var$TabListInner, {
props: props,
forwardedRef: ref
}) : /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $7aSLZ$Collection), props);
});
function $5e8ad37a45e1c704$var$TabListInner({ props: props, forwardedRef: ref }) {
let state = (0, $7aSLZ$useContext)($5e8ad37a45e1c704$export$364712098d2aa57c);
let { CollectionRoot: CollectionRoot } = (0, $7aSLZ$useContext)((0, $7135fc7d473fd974$export$4feb769f8ddf26c5));
let { orientation: orientation = 'horizontal', keyboardActivation: keyboardActivation = 'automatic' } = (0, $64fa3d84918910a7$export$fabf2dc03a41866e)($5e8ad37a45e1c704$export$cfa7aa87c26e7d1f);
let objectRef = (0, $7aSLZ$useObjectRef)(ref);
let { tabListProps: tabListProps } = (0, $7aSLZ$useTabList)({
...props,
orientation: orientation,
keyboardActivation: keyboardActivation
}, state, objectRef);
let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
...props,
children: null,
defaultClassName: 'react-aria-TabList',
values: {
orientation: orientation,
state: state
}
});
let DOMProps = (0, $7aSLZ$filterDOMProps)(props, {
global: true
});
delete DOMProps.id;
return /*#__PURE__*/ (0, $7aSLZ$react).createElement("div", {
...(0, $7aSLZ$mergeProps)(DOMProps, renderProps, tabListProps),
ref: objectRef,
"data-orientation": orientation || undefined
}, /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $c8a5a149f625efcf$export$758399f318e6385a), null, /*#__PURE__*/ (0, $7aSLZ$react).createElement(CollectionRoot, {
collection: state.collection,
persistedKeys: (0, $7135fc7d473fd974$export$90e00781bc59d8f9)(state.selectionManager.focusedKey)
})));
}
class $5e8ad37a45e1c704$var$TabItemNode extends (0, $7aSLZ$CollectionNode) {
}
$5e8ad37a45e1c704$var$TabItemNode.type = 'item';
const $5e8ad37a45e1c704$export$3e41faf802a29e71 = /*#__PURE__*/ (0, $7aSLZ$createLeafComponent)($5e8ad37a45e1c704$var$TabItemNode, (props, forwardedRef, item)=>{
let state = (0, $7aSLZ$useContext)($5e8ad37a45e1c704$export$364712098d2aa57c);
let ref = (0, $7aSLZ$useObjectRef)(forwardedRef);
let { tabProps: tabProps, isSelected: isSelected, isDisabled: isDisabled, isPressed: isPressed } = (0, $7aSLZ$useTab)({
key: item.key,
...props
}, state, ref);
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $7aSLZ$useFocusRing)();
let { hoverProps: hoverProps, isHovered: isHovered } = (0, $7aSLZ$useHover)({
isDisabled: isDisabled,
onHoverStart: props.onHoverStart,
onHoverEnd: props.onHoverEnd,
onHoverChange: props.onHoverChange
});
let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
...props,
id: undefined,
children: item.rendered,
defaultClassName: 'react-aria-Tab',
values: {
isSelected: isSelected,
isDisabled: isDisabled,
isFocused: isFocused,
isFocusVisible: isFocusVisible,
isPressed: isPressed,
isHovered: isHovered
}
});
let ElementType = item.props.href ? 'a' : 'div';
let DOMProps = (0, $7aSLZ$filterDOMProps)(props, {
global: true
});
delete DOMProps.id;
delete DOMProps.onClick;
return /*#__PURE__*/ (0, $7aSLZ$react).createElement(ElementType, {
...(0, $7aSLZ$mergeProps)(DOMProps, renderProps, tabProps, focusProps, hoverProps),
ref: ref,
"data-selected": isSelected || undefined,
"data-disabled": isDisabled || undefined,
"data-focused": isFocused || undefined,
"data-focus-visible": isFocusVisible || undefined,
"data-pressed": isPressed || undefined,
"data-hovered": isHovered || undefined
}, /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $1d5b8b8664671ef2$export$c9549807523555e0).Provider, {
value: {
isSelected: isSelected
}
}, renderProps.children));
});
const $5e8ad37a45e1c704$export$5dae8d435677f210 = /*#__PURE__*/ (0, $7aSLZ$createHideableComponent)(function TabPanels(props, forwardedRef) {
let state = (0, $7aSLZ$useContext)($5e8ad37a45e1c704$export$364712098d2aa57c);
let ref = (0, $7aSLZ$useObjectRef)(forwardedRef);
let selectedKeyRef = (0, $7aSLZ$useRef)(state.selectedKey);
let prevSize = (0, $7aSLZ$useRef)(null);
let hasTransition = (0, $7aSLZ$useRef)(null);
(0, $7aSLZ$useLayoutEffect)(()=>{
let el = ref.current;
if (!el) return;
if (hasTransition.current == null) hasTransition.current = /width|height|all/.test(window.getComputedStyle(el).transition);
if (hasTransition.current && selectedKeyRef.current != null && selectedKeyRef.current !== state.selectedKey) {
// Measure auto size.
el.style.setProperty('--tab-panel-width', 'auto');
el.style.setProperty('--tab-panel-height', 'auto');
let { width: width, height: height } = el.getBoundingClientRect();
if (prevSize.current && (prevSize.current.width !== width || prevSize.current.height !== height)) {
// Revert to previous size.
el.style.setProperty('--tab-panel-width', prevSize.current.width + 'px');
el.style.setProperty('--tab-panel-height', prevSize.current.height + 'px');
// Force style re-calculation to trigger animations.
window.getComputedStyle(el).height;
// Animate to current pixel size.
el.style.setProperty('--tab-panel-width', width + 'px');
el.style.setProperty('--tab-panel-height', height + 'px');
// When animations complete, revert back to auto size.
Promise.all(el.getAnimations().map((a)=>a.finished)).then(()=>{
el.style.setProperty('--tab-panel-width', 'auto');
el.style.setProperty('--tab-panel-height', 'auto');
}).catch(()=>{});
}
}
selectedKeyRef.current = state.selectedKey;
}, [
ref,
state.selectedKey
]);
// Store previous size before DOM updates occur.
// This breaks the rules of hooks because there is no effect that runs _before_ DOM updates.
// eslint-disable-next-line rulesdir/pure-render
if (state.selectedKey != null && state.selectedKey !== selectedKeyRef.current && ref.current && hasTransition.current) // eslint-disable-next-line rulesdir/pure-render
prevSize.current = ref.current.getBoundingClientRect();
return /*#__PURE__*/ (0, $7aSLZ$react).createElement("div", {
...props,
ref: ref,
className: props.className || 'react-aria-TabPanels'
}, /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $7aSLZ$Collection), props));
});
const $5e8ad37a45e1c704$export$3d96ec278d3efce4 = /*#__PURE__*/ (0, $7aSLZ$createHideableComponent)(function TabPanel(props, forwardedRef) {
const state = (0, $7aSLZ$useContext)($5e8ad37a45e1c704$export$364712098d2aa57c);
let ref = (0, $7aSLZ$useObjectRef)(forwardedRef);
// Track if the tab panel was initially selected on mount (after extra render to populate the collection).
// In this case, we don't want to trigger animations.
let isSelected = state.selectedKey === props.id;
let [isInitiallySelected, setInitiallySelected] = (0, $7aSLZ$useState)(state.selectedKey != null ? isSelected : null);
if (isInitiallySelected == null && state.selectedKey != null) setInitiallySelected(isSelected);
else if (!isSelected && isInitiallySelected) setInitiallySelected(false);
let isExiting = (0, $7aSLZ$useExitAnimation)(ref, isSelected);
if (!isSelected && !props.shouldForceMount && !isExiting) return null;
return /*#__PURE__*/ (0, $7aSLZ$react).createElement($5e8ad37a45e1c704$var$TabPanelInner, {
...props,
tabPanelRef: ref,
isInitiallySelected: isInitiallySelected || false,
isExiting: isExiting
});
});
function $5e8ad37a45e1c704$var$TabPanelInner(props) {
let state = (0, $7aSLZ$useContext)($5e8ad37a45e1c704$export$364712098d2aa57c);
// eslint-disable-next-line @typescript-eslint/no-unused-vars
let { id: id, tabPanelRef: ref, isInitiallySelected: isInitiallySelected, isExiting: isExiting, ...otherProps } = props;
let { tabPanelProps: tabPanelProps } = (0, $7aSLZ$useTabPanel)(props, state, ref);
let { focusProps: focusProps, isFocused: isFocused, isFocusVisible: isFocusVisible } = (0, $7aSLZ$useFocusRing)();
let isSelected = state.selectedKey === props.id;
let isEntering = (0, $7aSLZ$useEnterAnimation)(ref) && !isInitiallySelected;
let renderProps = (0, $64fa3d84918910a7$export$4d86445c2cf5e3)({
...props,
defaultClassName: 'react-aria-TabPanel',
values: {
isFocused: isFocused,
isFocusVisible: isFocusVisible,
// @ts-ignore - compatibility with React < 19
isInert: (0, $7aSLZ$inertValue)(!isSelected),
isEntering: isEntering,
isExiting: isExiting,
state: state
}
});
let DOMProps = (0, $7aSLZ$filterDOMProps)(otherProps, {
global: true
});
delete DOMProps.id;
let domProps = isSelected ? (0, $7aSLZ$mergeProps)(DOMProps, tabPanelProps, focusProps, renderProps) : (0, $7aSLZ$mergeProps)(DOMProps, renderProps);
return /*#__PURE__*/ (0, $7aSLZ$react).createElement("div", {
...domProps,
ref: ref,
"data-focused": isFocused || undefined,
"data-focus-visible": isFocusVisible || undefined,
// @ts-ignore
inert: (0, $7aSLZ$inertValue)(!isSelected || props.inert),
"data-inert": !isSelected ? 'true' : undefined,
"data-entering": isEntering || undefined,
"data-exiting": isExiting || undefined
}, /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $64fa3d84918910a7$export$2881499e37b75b9a), {
values: [
[
$5e8ad37a45e1c704$export$cfa7aa87c26e7d1f,
null
],
[
$5e8ad37a45e1c704$export$364712098d2aa57c,
null
]
]
}, /*#__PURE__*/ (0, $7aSLZ$react).createElement((0, $7135fc7d473fd974$export$4feb769f8ddf26c5).Provider, {
value: (0, $7135fc7d473fd974$export$a164736487e3f0ae)
}, renderProps.children)));
}
export {$5e8ad37a45e1c704$export$cfa7aa87c26e7d1f as TabsContext, $5e8ad37a45e1c704$export$364712098d2aa57c as TabListStateContext, $5e8ad37a45e1c704$export$b2539bed5023c21c as Tabs, $5e8ad37a45e1c704$export$e51a686c67fdaa2d as TabList, $5e8ad37a45e1c704$export$3e41faf802a29e71 as Tab, $5e8ad37a45e1c704$export$5dae8d435677f210 as TabPanels, $5e8ad37a45e1c704$export$3d96ec278d3efce4 as TabPanel};
//# sourceMappingURL=Tabs.module.js.map