@razorpay/blade
Version:
The Design System that powers Razorpay
193 lines (190 loc) • 8.56 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import _typeof from '@babel/runtime/helpers/typeof';
import React__default from 'react';
import styled from 'styled-components';
import { useTabNavContext } from './TabNavContext.js';
import '../../Box/BaseBox/index.js';
import getTextStyles from '../../Typography/Text/getTextStyles.js';
import '../../../utils/index.js';
import '../../../tokens/global/index.js';
import '../../../utils/assignWithoutSideEffects/index.js';
import '../../../utils/makeAccessible/index.js';
import '../../../utils/metaAttribute/index.js';
import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
import '../../../utils/getFocusRingStyles/index.js';
import '../../BladeProvider/index.js';
import '../../Icons/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import RayIcon from '../../Icons/RayIcon/RayIcon.js';
import { makeSpace } from '../../../utils/makeSpace/makeSpace.js';
import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
import { opacity } from '../../../tokens/global/opacity.js';
import { makeMotionTime } from '../../../utils/makeMotionTime/makeMotionTime.web.js';
import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
import useTheme from '../../BladeProvider/useTheme.js';
import { metaAttribute } from '../../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../../utils/metaAttribute/metaConstants.js';
import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
import { assignWithoutSideEffects } from '../../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
var _excluded = ["as", "title", "isActive", "icon", "trailing", "titleSuffix", "accessibilityLabel", "href", "target", "__isInsideTabNavItems", "__index"];
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) { _defineProperty(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 isIconObjectProp = function isIconObjectProp(icon) {
return _typeof(icon) === 'object' && icon !== null && 'default' in icon;
};
var isRayIcon = function isRayIcon(icon) {
if (!icon) return false;
var defaultIcon = isIconObjectProp(icon) ? icon["default"] : icon;
return defaultIcon === RayIcon;
};
var StyledTabNavItem = /*#__PURE__*/styled.a.withConfig({
displayName: "TabNavItemweb__StyledTabNavItem",
componentId: "sc-1eiaez7-0"
})(function (_ref) {
var theme = _ref.theme,
$isActive = _ref.$isActive;
return _objectSpread(_objectSpread({}, getTextStyles({
theme: theme,
size: 'medium',
weight: $isActive ? 'semibold' : 'medium',
color: $isActive ? 'surface.text.staticWhite.normal' : 'surface.text.staticWhite.subtle'
})), {}, {
flex: 1,
display: 'flex',
gap: makeSpace(theme.spacing[2]),
alignItems: 'center',
justifyContent: 'center',
height: '100%',
textDecoration: 'none',
whiteSpace: 'nowrap',
paddingTop: makeSpace(theme.spacing[3]),
paddingBottom: makeSpace(theme.spacing[3]),
paddingLeft: makeSpace(theme.spacing[4]),
paddingRight: makeSpace(theme.spacing[4]),
borderRadius: makeBorderSize(theme.border.radius.medium),
// reset button styles
border: 'none',
background: 'none',
opacity: $isActive ? 1 : opacity[1000],
transition: "opacity ".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
'&[aria-expanded="true"]': $isActive ? {} : {},
'&:hover': $isActive ? {} : {
opacity: 1,
color: theme.colors.interactive.text.staticWhite.normal
},
'&:focus-visible': _objectSpread(_objectSpread({}, getFocusRingStyles({
theme: theme
})), {}, {
opacity: 1,
color: theme.colors.interactive.text.staticWhite.normal
}),
'&:active': {
opacity: 1
},
'&::after': {
content: '""',
position: 'absolute',
inset: 0,
zIndex: 1 // ensures it sits above the wrapper
}
});
});
var StyledTabNavItemWrapper = /*#__PURE__*/styled(BaseBox).withConfig({
displayName: "TabNavItemweb__StyledTabNavItemWrapper",
componentId: "sc-1eiaez7-1"
})(function (_ref2) {
var theme = _ref2.theme,
isActive = _ref2.isActive;
return {
position: 'relative',
flexShrink: 0,
padding: "".concat(makeSpace(theme.spacing[2]), " ").concat(makeSpace(theme.spacing[1])),
backgroundColor: 'transparent',
borderColor: isActive ? theme.colors.surface.border.gray.muted : 'transparent',
borderTopLeftRadius: makeBorderSize(theme.border.radius.medium),
borderTopRightRadius: makeBorderSize(theme.border.radius.medium),
transition: "".concat(makeMotionTime(theme.motion.duration.moderate), " ").concat(theme.motion.easing.standard),
transitionProperty: 'background',
zIndex: 1,
cursor: 'pointer'
};
});
var _TabNavItem = function _TabNavItem(_ref3, ref) {
var as = _ref3.as,
title = _ref3.title,
isActive = _ref3.isActive,
icon = _ref3.icon,
trailing = _ref3.trailing,
titleSuffix = _ref3.titleSuffix,
accessibilityLabel = _ref3.accessibilityLabel,
href = _ref3.href,
target = _ref3.target,
__isInsideTabNavItems = _ref3.__isInsideTabNavItems,
__index = _ref3.__index,
props = _objectWithoutProperties(_ref3, _excluded);
var _useTabNavContext = useTabNavContext(),
setControlledItems = _useTabNavContext.setControlledItems;
var _useTheme = useTheme(),
theme = _useTheme.theme;
var bodyRef = React__default.useRef(null);
useIsomorphicLayoutEffect(function () {
if (!bodyRef.current) return;
if (!__isInsideTabNavItems) return;
setControlledItems(function (prev) {
return prev.map(function (item, index) {
var _bodyRef$current;
if (index !== __index) return item;
var bounds = bodyRef === null || bodyRef === void 0 || (_bodyRef$current = bodyRef.current) === null || _bodyRef$current === void 0 ? void 0 : _bodyRef$current.getBoundingClientRect();
var tabWidth = bounds.width;
var offsetX = bounds.right;
return _objectSpread(_objectSpread({}, item), {}, {
tabWidth: tabWidth,
offsetX: offsetX
});
});
});
}, [__isInsideTabNavItems, __index, setControlledItems]);
var ResolvedIcon;
if (icon) {
if (isIconObjectProp(icon)) {
ResolvedIcon = isActive ? icon.selected : icon["default"];
} else {
ResolvedIcon = icon;
}
}
var glowColor = isRayIcon(icon) ? theme.colors.surface.icon.onSea.onSubtle : theme.colors.surface.background.primary.intense;
return /*#__PURE__*/jsx(StyledTabNavItemWrapper, _objectSpread(_objectSpread({
ref: bodyRef,
isActive: isActive,
"data-active": isActive ? 'true' : 'false',
"data-glow-color": glowColor
}, metaAttribute({
name: MetaConstants.TabNavItem
})), {}, {
children: /*#__PURE__*/jsxs(StyledTabNavItem, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
ref: ref,
as: as !== null && as !== void 0 ? as : href ? 'a' : 'button',
to: href,
href: as ? undefined : href,
target: target,
$isActive: isActive
}, props), metaAttribute({
name: MetaConstants.TabNavItemLink
})), makeAccessible({
label: accessibilityLabel,
current: isActive
})), {}, {
children: [ResolvedIcon ? /*#__PURE__*/jsx(ResolvedIcon, {
size: "medium",
color: isActive ? 'surface.icon.staticWhite.normal' : 'surface.icon.staticWhite.subtle'
}) : null, title, titleSuffix ? titleSuffix : null, trailing ? trailing : null]
}))
}));
};
var TabNavItem = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_TabNavItem), {
displayName: 'TabNavItem'
});
export { TabNavItem };
//# sourceMappingURL=TabNavItem.web.js.map