@razorpay/blade
Version:
The Design System that powers Razorpay
449 lines (436 loc) • 16.5 kB
JavaScript
import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
import _defineProperty from '@babel/runtime/helpers/defineProperty';
import React__default from 'react';
import { itemTitleHeight, iconSize, elementGap, titleTextSize, helpTextSize, avatarAdjustmentPaddingY } from './infoGroupTokens.js';
import { useInfoGroup, useInfoItem, InfoItemContext, InfoGroupContext } from './InfoGroupContext.js';
import '../Box/BaseBox/index.js';
import '../Typography/index.js';
import '../../utils/metaAttribute/index.js';
import '../Box/styledProps/index.js';
import '../../utils/assignWithoutSideEffects/index.js';
import '../../utils/index.js';
import '../Divider/index.js';
import '../../utils/isValidAllowedChildren/index.js';
import { useIsomorphicLayoutEffect } from '../../utils/useIsomorphicLayoutEffect.js';
import '../../utils/useTruncationTitle/index.js';
import { jsx, jsxs } from 'react/jsx-runtime';
import { makeSize } from '../../utils/makeSize/makeSize.js';
import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
import { useTruncationTitle } from '../../utils/useTruncationTitle/useTruncationTitle.web.js';
import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
import { Text } from '../Typography/Text/Text.js';
import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
import { Divider } from '../Divider/Divider.js';
import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
var _excluded = ["children", "itemOrientation", "size", "valueAlign", "isHighlighted", "gridTemplateColumns", "width", "maxWidth", "minWidth", "testID", "paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "padding", "paddingX", "paddingY"];
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 getCenterBoxProps = function getCenterBoxProps(size) {
var strictHeight = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
return _objectSpread({
display: 'flex',
alignItems: 'center',
justifyContent: 'flex-start'
}, strictHeight ? {
height: makeSize(itemTitleHeight[size])
} : {
minHeight: makeSize(itemTitleHeight[size])
});
};
// Helper function to render leading/trailing elements (icons or JSX)
var renderElement = function renderElement(element, size) {
if (!element) return null;
// Check if it's already a JSX element (React element)
if (/*#__PURE__*/React__default.isValidElement(element)) {
return element;
}
// Otherwise, it's a component function - render it with size prop
var IconComponent = element;
return /*#__PURE__*/jsx(IconComponent, {
size: iconSize[size],
color: "surface.icon.gray.muted"
});
};
var TitleCollection = function TitleCollection(_ref) {
var children = _ref.children,
leading = _ref.leading,
trailing = _ref.trailing,
helpText = _ref.helpText,
titleWeight = _ref.titleWeight,
titleColor = _ref.titleColor,
paddingLeft = _ref.paddingLeft,
paddingRight = _ref.paddingRight,
truncateAfterLines = _ref.truncateAfterLines;
var _useInfoGroup = useInfoGroup(),
size = _useInfoGroup.size;
var _useInfoItem = useInfoItem(),
setHasAvatar = _useInfoItem.setHasAvatar;
var isAvatar = getComponentId(/*#__PURE__*/React__default.isValidElement(leading) ? leading : undefined) === 'Avatar';
// Set hasAvatar context when an avatar is detected
useIsomorphicLayoutEffect(function () {
if (isAvatar) {
setHasAvatar(true);
}
}, [isAvatar, setHasAvatar]);
var _useTruncationTitle = useTruncationTitle({
content: typeof children === 'string' ? children : undefined
}),
containerRef = _useTruncationTitle.containerRef,
textRef = _useTruncationTitle.textRef;
return /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
alignItems: "flex-start",
gap: elementGap[size],
paddingLeft: paddingLeft,
paddingRight: paddingRight,
children: [leading && /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getCenterBoxProps(size, true)), {}, {
children: renderElement(leading, size)
})), /*#__PURE__*/jsxs(BaseBox, {
display: "flex",
flexDirection: "column",
flex: "1",
children: [/*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
ref: containerRef
}, getCenterBoxProps(size)), {}, {
children: typeof children === 'string' ? /*#__PURE__*/jsx(Text, {
ref: textRef,
variant: "body",
size: titleTextSize[size],
weight: titleWeight,
color: titleColor,
truncateAfterLines: truncateAfterLines,
children: children
}) : children
})), helpText && /*#__PURE__*/jsx(Text, {
variant: "body",
size: helpTextSize[size],
weight: "regular",
color: "surface.text.gray.muted",
children: helpText
})]
}), trailing && /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, getCenterBoxProps(size, true)), {}, {
children: renderElement(trailing, size)
}))]
});
};
var _InfoItemKey = function _InfoItemKey(_ref2, ref) {
var children = _ref2.children,
leading = _ref2.leading,
trailing = _ref2.trailing,
helpText = _ref2.helpText,
truncateAfterLines = _ref2.truncateAfterLines,
testID = _ref2.testID;
var _useInfoGroup2 = useInfoGroup(),
itemOrientation = _useInfoGroup2.itemOrientation,
size = _useInfoGroup2.size;
var _useInfoItem2 = useInfoItem(),
hasAvatar = _useInfoItem2.hasAvatar,
isHighlighted = _useInfoItem2.isHighlighted;
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
ref: ref,
as: "dt",
display: "flex",
alignItems: "center",
alignSelf: "flex-start",
justifyContent: "flex-start",
paddingY: hasAvatar ? avatarAdjustmentPaddingY[size] : undefined
}, metaAttribute({
name: MetaConstants.InfoItemKey,
testID: testID
})), {}, {
children: [itemOrientation === 'horizontal' && isHighlighted ? /*#__PURE__*/jsx(Divider, {
orientation: "vertical"
}) : null, /*#__PURE__*/jsx(TitleCollection, {
leading: leading,
trailing: trailing,
helpText: helpText,
titleWeight: "medium",
titleColor: "surface.text.gray.muted",
truncateAfterLines: truncateAfterLines,
paddingLeft: isHighlighted ? 'spacing.4' : 'spacing.0',
paddingRight: "spacing.0",
children: children
})]
}));
};
/**
* InfoItemKey
*
* Displays the key portion of a key-value pair within an InfoItem.
* Supports leading/trailing elements and customizable text alignment.
*
* ----
*
* #### Usage
*
* ```tsx
* <InfoItemKey leading={UserIcon}>Account Holder</InfoItemKey>
* ```
*
* ----
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-infogroup InfoGroup Documentation}
*/
var InfoItemKey = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_InfoItemKey), {
displayName: 'InfoItemKey',
componentId: 'InfoItemKey'
});
var _InfoItemValue = function _InfoItemValue(_ref3, ref) {
var children = _ref3.children,
leading = _ref3.leading,
trailing = _ref3.trailing,
helpText = _ref3.helpText,
truncateAfterLines = _ref3.truncateAfterLines,
testID = _ref3.testID;
var _useInfoGroup3 = useInfoGroup(),
itemOrientation = _useInfoGroup3.itemOrientation,
valueAlign = _useInfoGroup3.valueAlign,
size = _useInfoGroup3.size;
var _useInfoItem3 = useInfoItem(),
hasAvatar = _useInfoItem3.hasAvatar,
isHighlighted = _useInfoItem3.isHighlighted;
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
ref: ref,
as: "dd",
margin: "spacing.0",
display: "flex",
alignItems: "center",
alignSelf: "flex-start",
justifyContent: valueAlign === 'right' ? 'flex-end' : 'flex-start',
paddingY: hasAvatar ? avatarAdjustmentPaddingY[size] : undefined
}, metaAttribute({
name: MetaConstants.InfoItemValue,
testID: testID
})), {}, {
children: /*#__PURE__*/jsx(TitleCollection, {
leading: leading,
trailing: trailing,
helpText: helpText,
titleWeight: "medium",
titleColor: "surface.text.gray.subtle",
truncateAfterLines: truncateAfterLines,
paddingLeft: isHighlighted && itemOrientation === 'vertical' ? 'spacing.4' : 'spacing.0',
paddingRight: isHighlighted ? 'spacing.4' : 'spacing.0',
children: children
})
}));
};
/**
* InfoItemValue
*
* Displays the value portion of a key-value pair within an InfoItem.
* Supports leading/trailing elements and customizable text alignment.
*
* ----
*
* #### Usage
*
* ```tsx
* <InfoItemValue helpText="Customer name" trailing={CheckIcon}>
* Saurabh Daware
* </InfoItemValue>
* ```
*
* ----
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-infogroup InfoGroup Documentation}
*/
var InfoItemValue = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_InfoItemValue), {
displayName: 'InfoItemValue',
componentId: 'InfoItemValue'
});
var ContentsItemBox = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
var children = _ref4.children,
testID = _ref4.testID;
return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
display: "contents",
ref: ref
}, metaAttribute({
name: MetaConstants.InfoItem,
testID: testID
})), {}, {
children: children
}));
});
var FlexItemBox = /*#__PURE__*/React__default.forwardRef(function (_ref5, ref) {
var children = _ref5.children,
testID = _ref5.testID,
_ref5$isHighlighted = _ref5.isHighlighted,
isHighlighted = _ref5$isHighlighted === void 0 ? false : _ref5$isHighlighted;
return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
display: "flex",
ref: ref
}, metaAttribute({
name: MetaConstants.InfoItem,
testID: testID
})), {}, {
children: [isHighlighted && /*#__PURE__*/jsx(Divider, {
orientation: "vertical"
}), /*#__PURE__*/jsx(BaseBox, {
display: "flex",
flexDirection: "column",
gap: "spacing.2",
children: children
})]
}));
});
var _InfoItem = function _InfoItem(_ref6, ref) {
var children = _ref6.children,
testID = _ref6.testID,
isHighlighted = _ref6.isHighlighted;
var _useInfoGroup4 = useInfoGroup(),
itemOrientation = _useInfoGroup4.itemOrientation,
contextIsHighlighted = _useInfoGroup4.isHighlighted;
var _React$useState = React__default.useState(false),
_React$useState2 = _slicedToArray(_React$useState, 2),
hasAvatar = _React$useState2[0],
setHasAvatar = _React$useState2[1];
var isVertical = itemOrientation === 'vertical';
var shouldHighlight = isHighlighted !== null && isHighlighted !== void 0 ? isHighlighted : contextIsHighlighted;
var infoItemContextValue = React__default.useMemo(function () {
return {
hasAvatar: hasAvatar,
setHasAvatar: setHasAvatar,
isHighlighted: shouldHighlight
};
}, [hasAvatar, shouldHighlight]);
if (isVertical) {
return /*#__PURE__*/jsx(InfoItemContext.Provider, {
value: infoItemContextValue,
children: /*#__PURE__*/jsx(FlexItemBox, {
ref: ref,
testID: testID,
isHighlighted: shouldHighlight,
children: children
})
});
}
return /*#__PURE__*/jsx(InfoItemContext.Provider, {
value: infoItemContextValue,
children: /*#__PURE__*/jsx(ContentsItemBox, {
ref: ref,
testID: testID,
children: children
})
});
};
/**
* InfoItem
*
* Container component that wraps InfoItemKey and InfoItemValue pairs.
* Manages the layout and visual connection between key-value elements.
*
* ----
*
* #### Usage
*
* ```tsx
* <InfoItem>
* <InfoItemKey>Account Holder</InfoItemKey>
* <InfoItemValue>Saurabh Daware</InfoItemValue>
* </InfoItem>
* ```
*
* ----
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-infogroup InfoGroup Documentation}
*/
var InfoItem = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_InfoItem), {
displayName: 'InfoItem',
componentId: 'InfoItem'
});
// InfoGroup Component
var _InfoGroup = function _InfoGroup(_ref7, ref) {
var children = _ref7.children,
_ref7$itemOrientation = _ref7.itemOrientation,
itemOrientation = _ref7$itemOrientation === void 0 ? 'horizontal' : _ref7$itemOrientation,
_ref7$size = _ref7.size,
size = _ref7$size === void 0 ? 'medium' : _ref7$size,
_ref7$valueAlign = _ref7.valueAlign,
valueAlign = _ref7$valueAlign === void 0 ? 'left' : _ref7$valueAlign,
_ref7$isHighlighted = _ref7.isHighlighted,
isHighlighted = _ref7$isHighlighted === void 0 ? false : _ref7$isHighlighted,
gridTemplateColumns = _ref7.gridTemplateColumns,
width = _ref7.width,
maxWidth = _ref7.maxWidth,
minWidth = _ref7.minWidth,
testID = _ref7.testID,
paddingLeft = _ref7.paddingLeft,
paddingRight = _ref7.paddingRight,
paddingTop = _ref7.paddingTop,
paddingBottom = _ref7.paddingBottom,
padding = _ref7.padding,
paddingX = _ref7.paddingX,
paddingY = _ref7.paddingY,
rest = _objectWithoutProperties(_ref7, _excluded);
var contextValue = React__default.useMemo(function () {
return {
size: size,
itemOrientation: itemOrientation,
valueAlign: valueAlign,
isHighlighted: isHighlighted
};
}, [size, itemOrientation, valueAlign, isHighlighted]);
var defaultGridTemplateColumns = itemOrientation === 'horizontal' ? 'max-content 1fr' : "repeat(min(4, ".concat(React__default.Children.count(children), "), 1fr)");
// Use provided gridTemplateColumns or default based on itemOrientation
var templateColumns = gridTemplateColumns !== null && gridTemplateColumns !== void 0 ? gridTemplateColumns : defaultGridTemplateColumns;
return /*#__PURE__*/jsx(InfoGroupContext.Provider, {
value: contextValue,
children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread(_objectSpread({
ref: ref,
as: "dl",
display: "grid",
gridTemplateColumns: templateColumns,
rowGap: "spacing.4",
columnGap: {
base: 'spacing.6',
m: 'spacing.10'
},
flexDirection: "column",
margin: "spacing.0",
width: width,
maxWidth: maxWidth,
minWidth: minWidth,
paddingLeft: paddingLeft,
paddingRight: paddingRight,
paddingTop: paddingTop,
paddingBottom: paddingBottom,
padding: padding,
paddingX: paddingX,
paddingY: paddingY
}, metaAttribute({
name: MetaConstants.InfoGroup,
testID: testID
})), getStyledProps(rest)), {}, {
children: children
}))
});
};
/**
* InfoGroup
*
* A structured component for displaying key-value pairs in a consistent, organized format.
* Provides standardized presentation for transaction details, user data, or any related data pairs.
*
* ----
*
* #### Usage
*
* ```tsx
* <InfoGroup itemOrientation="horizontal" size="medium">
* <InfoItem>
* <InfoItemKey leading={UserIcon}>Account Holder</InfoItemKey>
* <InfoItemValue>Saurabh Daware</InfoItemValue>
* </InfoItem>
* </InfoGroup>
* ```
*
* ----
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-infogroup InfoGroup Documentation}
*/
var InfoGroup = /*#__PURE__*/assignWithoutSideEffects(/*#__PURE__*/React__default.forwardRef(_InfoGroup), {
displayName: 'InfoGroup',
componentId: 'InfoGroup'
});
export { InfoGroup, InfoItem, InfoItemKey, InfoItemValue };
//# sourceMappingURL=InfoGroup.web.js.map