@atlaskit/tabs
Version:
Tabs are used to organize content by grouping similar information on the same page.
286 lines (280 loc) • 14.4 kB
JavaScript
/* tab-list.tsx generated by @compiled/babel-plugin v3.0.2 */
;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("./tab-list.compiled.css");
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _runtime = require("@compiled/react/runtime");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _useIsReducedMotion = require("@atlaskit/motion/use-is-reduced-motion");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _tabContext = require("../internal/tab-context");
var _tabMotionContext = require("../internal/tab-motion-context");
var _useTabList2 = _interopRequireDefault(require("../use-tab-list"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var baseStyles = null;
var tabListStyles = null;
var tabListMotionStyles = null;
var getSelectionDirection = function getSelectionDirection(previous, next) {
return next > previous ? 'right' : 'left';
};
var getInitialMotionSelection = function getInitialMotionSelection(selected, isReducedMotion) {
return {
direction: 'right',
exits: new Map(),
isReducedMotion: isReducedMotion,
selected: selected,
selectedState: isReducedMotion ? 'visible' : 'entering'
};
};
var reconcileMotionSelection = function reconcileMotionSelection(motionSelection, selected, isReducedMotion) {
if (isReducedMotion) {
if (motionSelection.isReducedMotion && motionSelection.selected === selected && motionSelection.selectedState === 'visible' && motionSelection.exits.size === 0) {
return motionSelection;
}
return {
direction: motionSelection.selected === selected ? motionSelection.direction : getSelectionDirection(motionSelection.selected, selected),
exits: new Map(),
isReducedMotion: true,
selected: selected,
selectedState: 'visible'
};
}
var currentSelection = motionSelection;
if (currentSelection.isReducedMotion) {
currentSelection = _objectSpread(_objectSpread({}, currentSelection), {}, {
isReducedMotion: false
});
}
if (currentSelection.selected === selected) {
return currentSelection;
}
var direction = getSelectionDirection(currentSelection.selected, selected);
var exits = new Map(currentSelection.exits);
exits.set(currentSelection.selected, direction);
exits.delete(selected);
return {
direction: direction,
exits: exits,
isReducedMotion: false,
selected: selected,
selectedState: 'entering'
};
};
var isTabMotionDirection = function isTabMotionDirection(value) {
return value === 'left' || value === 'right';
};
var isTabMotionState = function isTabMotionState(value) {
return value === 'entering' || value === 'exiting' || value === 'visible';
};
var isMatchingMotion = function isMatchingMotion(motionSelection, index, state, direction) {
if (index === motionSelection.selected) {
return state === motionSelection.selectedState && direction === motionSelection.direction;
}
return state === 'exiting' && motionSelection.exits.get(index) === direction;
};
var TabMotionProvider = function TabMotionProvider(_ref) {
var children = _ref.children,
length = _ref.length,
selected = _ref.selected;
var prefersReducedMotion = (0, _useIsReducedMotion.useIsReducedMotion)();
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
canUseReducedMotion = _useState2[0],
setCanUseReducedMotion = _useState2[1];
(0, _react.useEffect)(function () {
if (prefersReducedMotion) {
setCanUseReducedMotion(true);
}
}, [prefersReducedMotion]);
var isReducedMotion = canUseReducedMotion && prefersReducedMotion;
var _useState3 = (0, _react.useState)(function () {
return getInitialMotionSelection(selected, isReducedMotion);
}),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
motionSelection = _useState4[0],
setMotionSelection = _useState4[1];
var renderedMotionSelection = reconcileMotionSelection(motionSelection, selected, isReducedMotion);
if (renderedMotionSelection !== motionSelection) {
setMotionSelection(renderedMotionSelection);
}
var getTabMotionAttributes = (0, _react.useCallback)(function (index) {
if (index === renderedMotionSelection.selected) {
return {
'data-motion-capable': 'true',
'data-motion-direction': renderedMotionSelection.direction,
'data-motion-state': renderedMotionSelection.selectedState
};
}
var exitDirection = renderedMotionSelection.exits.get(index);
if (exitDirection !== undefined) {
return {
'data-motion-capable': 'true',
'data-motion-direction': exitDirection,
'data-motion-state': 'exiting'
};
}
return {
'data-motion-capable': 'true'
};
}, [renderedMotionSelection]);
var motionContextValue = (0, _react.useMemo)(function () {
return {
getTabMotionAttributes: getTabMotionAttributes
};
}, [getTabMotionAttributes]);
var onAnimationEndCapture = (0, _react.useCallback)(function (event) {
var target = event.target;
if (!(target instanceof HTMLElement) || !target.matches('[role="tab"]') || event.pseudoElement !== '::after') {
return;
}
var position = Number(target.getAttribute('aria-posinset'));
var state = target.getAttribute('data-motion-state');
var direction = target.getAttribute('data-motion-direction');
if (!Number.isInteger(position) || position < 1 || position > length || !isTabMotionState(state) || !isTabMotionDirection(direction)) {
return;
}
var index = position - 1;
if (!isMatchingMotion(renderedMotionSelection, index, state, direction)) {
return;
}
setMotionSelection(function (currentSelection) {
var reconciledSelection = reconcileMotionSelection(currentSelection, selected, isReducedMotion);
if (!isMatchingMotion(reconciledSelection, index, state, direction)) {
return reconciledSelection;
}
if (state === 'entering') {
return _objectSpread(_objectSpread({}, reconciledSelection), {}, {
selectedState: 'visible'
});
}
if (state === 'exiting') {
var exits = new Map(reconciledSelection.exits);
exits.delete(index);
return _objectSpread(_objectSpread({}, reconciledSelection), {}, {
exits: exits
});
}
return reconciledSelection;
});
}, [isReducedMotion, length, renderedMotionSelection, selected]);
return /*#__PURE__*/React.createElement(_tabMotionContext.TabMotionContext.Provider, {
value: motionContextValue
}, children(onAnimationEndCapture));
};
/**
* __TabList__
*
* A TabList groups `Tab` components together.
*
* - [Examples](https://atlassian.design/components/tabs/examples)
* - [Code](https://atlassian.design/components/tabs/code)
* - [Usage](https://atlassian.design/components/tabs/usage)
*/
var TabList = function TabList(_ref2) {
var children = _ref2.children;
var _useTabList = (0, _useTabList2.default)(),
tabsId = _useTabList.tabsId,
selected = _useTabList.selected,
onChange = _useTabList.onChange;
var isMotionUpliftEnabled = (0, _fg.fg)('platform-dst-motion-uplift-tab');
var ref = /*#__PURE__*/(0, _react.createRef)();
// Don't include any conditional children
var childrenArray = _react.Children.toArray(children).filter(Boolean);
var length = childrenArray.length;
var selectTabByIndex = (0, _react.useCallback)(function (index) {
var _ref$current;
var newSelectedNode = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector("[id='".concat(tabsId, "-").concat(index, "']"));
if (newSelectedNode) {
newSelectedNode.focus();
}
onChange(index);
}, [tabsId, ref, onChange]);
var onKeyDown = (0, _react.useCallback)(function (e) {
if (!['ArrowRight', 'ArrowLeft', 'Home', 'End'].includes(e.key)) {
return;
}
// preventing horizontal or vertical scroll
e.preventDefault();
var lastTabIndex = length - 1;
if (['Home', 'End'].includes(e.key)) {
var _newSelected = e.key === 'Home' ? 0 : lastTabIndex;
selectTabByIndex(_newSelected);
return;
}
// We use aria-posinset so we don't rely on the selected variable
// If we used the selected variable this would regenerate each time
// and create an unstable reference
var selectedIndex = parseInt(e.currentTarget.getAttribute('aria-posinset') || '0') - 1;
var modifier = e.key === 'ArrowRight' ? 1 : -1;
var newSelected = selectedIndex + modifier;
if (newSelected < 0 || newSelected >= length) {
// Cycling focus to move from last to first and from first to last
newSelected = newSelected < 0 ? lastTabIndex : 0;
}
selectTabByIndex(newSelected);
}, [length, selectTabByIndex]);
// Memoized so the function isn't recreated each time
var getTabWithContext = (0, _react.useCallback)(function (_ref3) {
var tab = _ref3.tab,
isSelected = _ref3.isSelected,
index = _ref3.index;
return /*#__PURE__*/React.createElement(_tabContext.TabContext.Provider, {
value: {
onClick: function onClick() {
return onChange(index);
},
onKeyDown: onKeyDown,
'aria-setsize': length,
role: 'tab',
id: "".concat(tabsId, "-").concat(index),
'aria-posinset': index + 1,
'aria-selected': isSelected,
'aria-controls': "".concat(tabsId, "-").concat(index, "-tab"),
tabIndex: isSelected ? 0 : -1
},
key: index
}, tab);
}, [length, onKeyDown, onChange, tabsId]);
var tabs = childrenArray.map(function (child, index) {
return getTabWithContext({
tab: child,
index: index,
isSelected: index === selected
});
});
if (!isMotionUpliftEnabled) {
return /*#__PURE__*/React.createElement("div", {
role: "tablist",
ref: ref,
className: (0, _runtime.ax)(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzazsu _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzu1uh4 _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazazsu _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8d1uh4 _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i20i7uo _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmzz0c1 _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem6x5g _ipw1z0c1 _gmk66x5g _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rus1l7x _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc"])
}, tabs);
}
return (
/*#__PURE__*/
// Only styles that affect the TabList itself have been applied via primitives.
// The other styles applied through the CSS prop are there for styling children
// through inheritance. This is important for custom cases that use the useTab(),
// which applies accessibility atributes that we use as a styling hook.
React.createElement(TabMotionProvider, {
length: length,
selected: selected
}, function (onAnimationEndCapture) {
return /*#__PURE__*/React.createElement("div", {
role: "tablist",
ref: ref,
onAnimationEndCapture: onAnimationEndCapture,
className: (0, _runtime.ax)(["_1e0c1txw _kqswh2mm _85i5ze3t _1q51ze3t _y4tize3t _bozgze3t", "_k48p1wq8 _ahbqx0bf _gpbcidpf _10vzidpf _1mmwidpf _15plidpf _qwyt1qi0 _7hip15vq _1fud15vq _bb0mh2mm _1quzazsu _rzxytlke _1ofh12x7 _pryi12x7 _1a85u2gc _rmpau2gc _1dze1l2s _1tms1q9c _fiizidpf _1xrmidpf _xyihidpf _166qidpf _1lzu1uh4 _24g71kw7 _140sidpf _lycustnw _15d8b3bt _1fztidpf _wd7eu2gc _1olcu2gc _1oazazsu _w9ewidpf _170tidpf _y1g1idpf _1nvfidpf _1b8d1uh4 _1n121kw7 _7p9oidpf _o2e1stnw _16u6b3bt _1yk1idpf _1lbou2gc _1c9uu2gc _1i20i7uo _bppridpf _1mbxidpf _kn0bidpf _wsgdidpf _rsmzz0c1 _1m0e1kw7 _93pdidpf _1sglstnw _1ksob3bt _1p9sidpf _1qa1u2gc _1jjcu2gc _fiem6x5g _ipw1z0c1 _gmk66x5g _pascidpf _eid3idpf _zr3eidpf _fntnidpf _1mp41kw7 _kfgte4h9 _1cs8stnw _1rus1l7x _1kt9b3bt _1fkridpf _1enwidpf _z5wtu2gc", "_ty7m1erp _7gbuidpf _182cidpf _hsamidpf _15xxidpf _1bmz1erp _xcwz1uh4 _a2t91kw7 _12ydidpf _ozqtstnw _1oi3b3bt _dt1cidpf _1g64u2gc _1gh0u2gc _10f5idpf _d825glyw _k8qridpf _1q5jidpf _b1stidpf _15toidpf _k8nvz0c1 _1qjz1kw7 _stm6idpf _l0fpstnw _1rrikb7n _wqilb3bt _1fzxidpf _1lk3u2gc _1huvu2gc _bzrxglyw _a0efz7ft _1a1nzznr _siz91kin _1rw111ou _13lhzznr _10puz7ft _1sbx11ou _144y1kin _1tjxkb7n _1y4gkb7n _sr6xglyw _vedkglyw _1mn4z0c1 _1oj46x5g _19bsglyw _1uu4glyw _ne04glyw _1s41glyw"])
}, tabs);
})
);
};
var _default = exports.default = TabList;