@razorpay/blade 10.17.1 → 10.17.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/build/components/index.development.web.js +71 -45
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.js +8 -6
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +53 -30
- package/build/components/index.production.web.js.map +1 -1
- package/build/css/bankingThemeDarkDesktop.css +1 -1
- package/build/css/bankingThemeDarkMobile.css +1 -1
- package/build/css/bankingThemeLightDesktop.css +1 -1
- package/build/css/bankingThemeLightMobile.css +1 -1
- package/build/css/paymentThemeDarkDesktop.css +1 -1
- package/build/css/paymentThemeDarkMobile.css +1 -1
- package/build/css/paymentThemeLightDesktop.css +1 -1
- package/build/css/paymentThemeLightMobile.css +1 -1
- package/package.json +1 -1
|
@@ -456,7 +456,7 @@ var getActionListItemRole = function getActionListItemRole(dropdownTriggerer, hr
|
|
|
456
456
|
return 'option';
|
|
457
457
|
};
|
|
458
458
|
|
|
459
|
-
var componentIds = {
|
|
459
|
+
var componentIds$1 = {
|
|
460
460
|
ActionList: 'ActionList',
|
|
461
461
|
ActionListItem: 'ActionListItem',
|
|
462
462
|
ActionListItemBadge: 'ActionListItemBadge',
|
|
@@ -507,16 +507,16 @@ var getActionListSectionPosition = function getActionListSectionPosition(childre
|
|
|
507
507
|
});
|
|
508
508
|
|
|
509
509
|
// Reading the last `ActionListSection` component's index
|
|
510
|
-
var lastActionListSectionIndex = childComponentIdArray.lastIndexOf(componentIds.ActionListSection);
|
|
510
|
+
var lastActionListSectionIndex = childComponentIdArray.lastIndexOf(componentIds$1.ActionListSection);
|
|
511
511
|
|
|
512
512
|
// Checking if there is any `ActionListItem` present after `ActionListSection`
|
|
513
|
-
var isActionListItemPresentAfterSection = childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds.ActionListItem);
|
|
513
|
+
var isActionListItemPresentAfterSection = childComponentIdArray.slice(lastActionListSectionIndex).includes(componentIds$1.ActionListItem);
|
|
514
514
|
return {
|
|
515
515
|
isActionListItemPresentAfterSection: isActionListItemPresentAfterSection,
|
|
516
516
|
lastActionListSectionIndex: lastActionListSectionIndex
|
|
517
517
|
};
|
|
518
518
|
};
|
|
519
|
-
var actionListAllowedChildren = [componentIds.ActionListItem, componentIds.ActionListSection];
|
|
519
|
+
var actionListAllowedChildren = [componentIds$1.ActionListItem, componentIds$1.ActionListSection];
|
|
520
520
|
/**
|
|
521
521
|
* Loops over action list items and returns different properties from children like option values, header and footer child, etc
|
|
522
522
|
*/
|
|
@@ -588,7 +588,7 @@ var getActionListProperties = function getActionListProperties(children) {
|
|
|
588
588
|
// Looping through ActionListItems to add index to them and get an options array for moving focus between items
|
|
589
589
|
var childrenWithId = React__default.Children.map(children, function (child, index) {
|
|
590
590
|
if ( /*#__PURE__*/React__default.isValidElement(child)) {
|
|
591
|
-
if (isValidAllowedChildren(child, componentIds.ActionListSection)) {
|
|
591
|
+
if (isValidAllowedChildren(child, componentIds$1.ActionListSection)) {
|
|
592
592
|
var shouldHideDivider = index === lastActionListSectionIndex && !isActionListItemPresentAfterSection;
|
|
593
593
|
var sectionChildValues = [];
|
|
594
594
|
return /*#__PURE__*/React__default.cloneElement(child, {
|
|
@@ -596,7 +596,7 @@ var getActionListProperties = function getActionListProperties(children) {
|
|
|
596
596
|
children: React__default.Children.map(child.props.children, function (childInSection) {
|
|
597
597
|
currentSection = child.props.title;
|
|
598
598
|
sectionChildValues.push(childInSection.props.value);
|
|
599
|
-
if (isValidAllowedChildren(childInSection, componentIds.ActionListItem)) {
|
|
599
|
+
if (isValidAllowedChildren(childInSection, componentIds$1.ActionListItem)) {
|
|
600
600
|
return getActionListItemWithId(childInSection, shouldHideDivider);
|
|
601
601
|
}
|
|
602
602
|
return childInSection;
|
|
@@ -606,7 +606,7 @@ var getActionListProperties = function getActionListProperties(children) {
|
|
|
606
606
|
_sectionChildValues: sectionChildValues
|
|
607
607
|
});
|
|
608
608
|
}
|
|
609
|
-
if (isValidAllowedChildren(child, componentIds.ActionListItem)) {
|
|
609
|
+
if (isValidAllowedChildren(child, componentIds$1.ActionListItem)) {
|
|
610
610
|
return getActionListItemWithId(child, true);
|
|
611
611
|
}
|
|
612
612
|
{
|
|
@@ -630,25 +630,25 @@ var validateActionListItemProps = function validateActionListItemProps(_ref) {
|
|
|
630
630
|
titleSuffix = _ref.titleSuffix;
|
|
631
631
|
{
|
|
632
632
|
React__default.Children.map(trailing, function (child) {
|
|
633
|
-
if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText)) {
|
|
633
|
+
if (!isValidAllowedChildren(child, componentIds$1.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds$1.ActionListItemText)) {
|
|
634
634
|
throwBladeError({
|
|
635
|
-
message: "Only ".concat(componentIds.ActionListItemIcon, " and ").concat(componentIds.ActionListItemText, " are allowed in trailing prop"),
|
|
635
|
+
message: "Only ".concat(componentIds$1.ActionListItemIcon, " and ").concat(componentIds$1.ActionListItemText, " are allowed in trailing prop"),
|
|
636
636
|
moduleName: 'ActionListItem'
|
|
637
637
|
});
|
|
638
638
|
}
|
|
639
639
|
});
|
|
640
640
|
React__default.Children.map(titleSuffix, function (child) {
|
|
641
|
-
if (!isValidAllowedChildren(child, componentIds.ActionListItemBadge) && !isValidAllowedChildren(child, componentIds.ActionListItemBadgeGroup)) {
|
|
641
|
+
if (!isValidAllowedChildren(child, componentIds$1.ActionListItemBadge) && !isValidAllowedChildren(child, componentIds$1.ActionListItemBadgeGroup)) {
|
|
642
642
|
throwBladeError({
|
|
643
|
-
message: "Only ".concat(componentIds.ActionListItemBadge, " and ").concat(componentIds.ActionListItemBadgeGroup, " are allowed in titleSuffix prop"),
|
|
643
|
+
message: "Only ".concat(componentIds$1.ActionListItemBadge, " and ").concat(componentIds$1.ActionListItemBadgeGroup, " are allowed in titleSuffix prop"),
|
|
644
644
|
moduleName: 'ActionListItem'
|
|
645
645
|
});
|
|
646
646
|
}
|
|
647
647
|
});
|
|
648
648
|
React__default.Children.map(leading, function (child) {
|
|
649
|
-
if (!isValidAllowedChildren(child, componentIds.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds.ActionListItemText) && !isValidAllowedChildren(child, componentIds.ActionListItemAsset)) {
|
|
649
|
+
if (!isValidAllowedChildren(child, componentIds$1.ActionListItemIcon) && !isValidAllowedChildren(child, componentIds$1.ActionListItemText) && !isValidAllowedChildren(child, componentIds$1.ActionListItemAsset)) {
|
|
650
650
|
throwBladeError({
|
|
651
|
-
message: "Only ".concat(componentIds.ActionListItemIcon, ", ").concat(componentIds.ActionListItemAsset, ", and ").concat(componentIds.ActionListItemText, " are allowed in leading prop"),
|
|
651
|
+
message: "Only ".concat(componentIds$1.ActionListItemIcon, ", ").concat(componentIds$1.ActionListItemAsset, ", and ").concat(componentIds$1.ActionListItemText, " are allowed in leading prop"),
|
|
652
652
|
moduleName: 'ActionListItem'
|
|
653
653
|
});
|
|
654
654
|
}
|
|
@@ -14341,8 +14341,8 @@ var _ActionList = function _ActionList(_ref) {
|
|
|
14341
14341
|
*
|
|
14342
14342
|
*/
|
|
14343
14343
|
var ActionList = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionList), {
|
|
14344
|
-
displayName: componentIds.ActionList,
|
|
14345
|
-
componentId: componentIds.ActionList
|
|
14344
|
+
displayName: componentIds$1.ActionList,
|
|
14345
|
+
componentId: componentIds$1.ActionList
|
|
14346
14346
|
});
|
|
14347
14347
|
|
|
14348
14348
|
var getBaseActionListItemStyles = function getBaseActionListItemStyles(props) {
|
|
@@ -15954,7 +15954,7 @@ var _ActionListSection = function _ActionListSection(_ref) {
|
|
|
15954
15954
|
}));
|
|
15955
15955
|
};
|
|
15956
15956
|
var ActionListSection = /*#__PURE__*/assignWithoutSideEffects(_ActionListSection, {
|
|
15957
|
-
componentId: componentIds.ActionListSection
|
|
15957
|
+
componentId: componentIds$1.ActionListSection
|
|
15958
15958
|
});
|
|
15959
15959
|
var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
|
|
15960
15960
|
var icon = _ref2.icon;
|
|
@@ -15970,7 +15970,7 @@ var _ActionListItemIcon = function _ActionListItemIcon(_ref2) {
|
|
|
15970
15970
|
});
|
|
15971
15971
|
};
|
|
15972
15972
|
var ActionListItemIcon = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemIcon, {
|
|
15973
|
-
componentId: componentIds.ActionListItemIcon
|
|
15973
|
+
componentId: componentIds$1.ActionListItemIcon
|
|
15974
15974
|
});
|
|
15975
15975
|
var _ActionListItemBadgeGroup = function _ActionListItemBadgeGroup(_ref3) {
|
|
15976
15976
|
var children = _ref3.children;
|
|
@@ -15982,7 +15982,7 @@ var _ActionListItemBadgeGroup = function _ActionListItemBadgeGroup(_ref3) {
|
|
|
15982
15982
|
});
|
|
15983
15983
|
};
|
|
15984
15984
|
var ActionListItemBadgeGroup = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemBadgeGroup, {
|
|
15985
|
-
componentId: componentIds.ActionListItemBadgeGroup
|
|
15985
|
+
componentId: componentIds$1.ActionListItemBadgeGroup
|
|
15986
15986
|
});
|
|
15987
15987
|
var _ActionListItemBadge = function _ActionListItemBadge(props) {
|
|
15988
15988
|
return /*#__PURE__*/jsx(Badge, _objectSpread$1v({
|
|
@@ -15991,7 +15991,7 @@ var _ActionListItemBadge = function _ActionListItemBadge(props) {
|
|
|
15991
15991
|
}, props));
|
|
15992
15992
|
};
|
|
15993
15993
|
var ActionListItemBadge = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemBadge, {
|
|
15994
|
-
componentId: componentIds.ActionListItemBadge
|
|
15994
|
+
componentId: componentIds$1.ActionListItemBadge
|
|
15995
15995
|
});
|
|
15996
15996
|
var _ActionListItemText = function _ActionListItemText(_ref4) {
|
|
15997
15997
|
var children = _ref4.children;
|
|
@@ -16006,7 +16006,7 @@ var _ActionListItemText = function _ActionListItemText(_ref4) {
|
|
|
16006
16006
|
});
|
|
16007
16007
|
};
|
|
16008
16008
|
var ActionListItemText = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemText, {
|
|
16009
|
-
componentId: componentIds.ActionListItemText
|
|
16009
|
+
componentId: componentIds$1.ActionListItemText
|
|
16010
16010
|
});
|
|
16011
16011
|
var makeActionListItemClickable = function makeActionListItemClickable(clickHandler) {
|
|
16012
16012
|
if (isReactNative$4()) {
|
|
@@ -16221,8 +16221,8 @@ var _ActionListItem = function _ActionListItem(props) {
|
|
|
16221
16221
|
});
|
|
16222
16222
|
};
|
|
16223
16223
|
var ActionListItem = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListItem), {
|
|
16224
|
-
componentId: componentIds.ActionListItem,
|
|
16225
|
-
displayName: componentIds.ActionListItem
|
|
16224
|
+
componentId: componentIds$1.ActionListItem,
|
|
16225
|
+
displayName: componentIds$1.ActionListItem
|
|
16226
16226
|
});
|
|
16227
16227
|
|
|
16228
16228
|
var _ActionListItemAsset = function _ActionListItemAsset(props) {
|
|
@@ -16234,7 +16234,7 @@ var _ActionListItemAsset = function _ActionListItemAsset(props) {
|
|
|
16234
16234
|
});
|
|
16235
16235
|
};
|
|
16236
16236
|
var ActionListItemAsset = /*#__PURE__*/assignWithoutSideEffects(_ActionListItemAsset, {
|
|
16237
|
-
componentId: componentIds.ActionListItemAsset
|
|
16237
|
+
componentId: componentIds$1.ActionListItemAsset
|
|
16238
16238
|
});
|
|
16239
16239
|
|
|
16240
16240
|
var MAX_WIDTH$2 = size[584];
|
|
@@ -17713,23 +17713,6 @@ var useVerifyInsideCard = function useVerifyInsideCard(componentName) {
|
|
|
17713
17713
|
}
|
|
17714
17714
|
return true;
|
|
17715
17715
|
};
|
|
17716
|
-
|
|
17717
|
-
/**
|
|
17718
|
-
* Verify if the passed childrens are only of allowedComponents list
|
|
17719
|
-
*/
|
|
17720
|
-
var useVerifyAllowedComponents = function useVerifyAllowedComponents(children, componentName, allowedComponents) {
|
|
17721
|
-
React__default.Children.forEach(children, function (child) {
|
|
17722
|
-
var isValidChild = child && allowedComponents.includes(getComponentId(child));
|
|
17723
|
-
{
|
|
17724
|
-
if (!isValidChild) {
|
|
17725
|
-
throwBladeError({
|
|
17726
|
-
message: "Only one of `".concat(allowedComponents.join(', '), "` component is accepted as ").concat(componentName, " children"),
|
|
17727
|
-
moduleName: 'Card'
|
|
17728
|
-
});
|
|
17729
|
-
}
|
|
17730
|
-
}
|
|
17731
|
-
});
|
|
17732
|
-
};
|
|
17733
17716
|
var CardProvider = function CardProvider(_ref) {
|
|
17734
17717
|
var children = _ref.children;
|
|
17735
17718
|
return /*#__PURE__*/jsx(CardContext.Provider, {
|
|
@@ -17852,6 +17835,26 @@ var CardRoot = function CardRoot(_ref2) {
|
|
|
17852
17835
|
}));
|
|
17853
17836
|
};
|
|
17854
17837
|
|
|
17838
|
+
/**
|
|
17839
|
+
* Verify if the passed childrens are only of allowedComponents list
|
|
17840
|
+
*/
|
|
17841
|
+
var useVerifyAllowedChildren = function useVerifyAllowedChildren(props) {
|
|
17842
|
+
var children = props.children,
|
|
17843
|
+
componentName = props.componentName,
|
|
17844
|
+
allowedComponents = props.allowedComponents;
|
|
17845
|
+
{
|
|
17846
|
+
React__default.Children.forEach(children, function (child) {
|
|
17847
|
+
var isValidChild = child && allowedComponents.includes(getComponentId(child));
|
|
17848
|
+
if (!isValidChild) {
|
|
17849
|
+
throwBladeError({
|
|
17850
|
+
message: "Only `".concat(allowedComponents.join(', '), "` components are accepted in `").concat(componentName, "` children"),
|
|
17851
|
+
moduleName: componentName
|
|
17852
|
+
});
|
|
17853
|
+
}
|
|
17854
|
+
});
|
|
17855
|
+
}
|
|
17856
|
+
};
|
|
17857
|
+
|
|
17855
17858
|
var _excluded$y = ["children", "surfaceLevel", "elevation", "testID", "padding", "width", "height", "onClick", "isSelected", "accessibilityLabel", "shouldScaleOnHover", "onHover", "href", "target", "rel", "as"];
|
|
17856
17859
|
function ownKeys$1n(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
17857
17860
|
function _objectSpread$1m(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$1n(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$1n(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
@@ -17897,7 +17900,11 @@ var Card = function Card(_ref) {
|
|
|
17897
17900
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
17898
17901
|
isFocused = _React$useState2[0],
|
|
17899
17902
|
setIsFocused = _React$useState2[1];
|
|
17900
|
-
|
|
17903
|
+
useVerifyAllowedChildren({
|
|
17904
|
+
children: children,
|
|
17905
|
+
componentName: 'Card',
|
|
17906
|
+
allowedComponents: [ComponentIds$1.CardHeader, ComponentIds$1.CardBody, ComponentIds$1.CardFooter]
|
|
17907
|
+
});
|
|
17901
17908
|
var linkOverlayProps = _objectSpread$1m(_objectSpread$1m(_objectSpread$1m({}, metaAttribute({
|
|
17902
17909
|
name: CARD_LINK_OVERLAY_ID
|
|
17903
17910
|
})), makeAccessible({
|
|
@@ -18333,7 +18340,11 @@ var _CardHeader = function _CardHeader(_ref2) {
|
|
|
18333
18340
|
var children = _ref2.children,
|
|
18334
18341
|
testID = _ref2.testID;
|
|
18335
18342
|
useVerifyInsideCard('CardHeader');
|
|
18336
|
-
|
|
18343
|
+
useVerifyAllowedChildren({
|
|
18344
|
+
children: children,
|
|
18345
|
+
componentName: 'CardHeader',
|
|
18346
|
+
allowedComponents: [ComponentIds$1.CardHeaderLeading, ComponentIds$1.CardHeaderTrailing]
|
|
18347
|
+
});
|
|
18337
18348
|
return /*#__PURE__*/jsxs(BaseBox, _objectSpread$1h(_objectSpread$1h({
|
|
18338
18349
|
marginBottom: "spacing.7"
|
|
18339
18350
|
}, metaAttribute({
|
|
@@ -18439,7 +18450,11 @@ var _CardFooter = function _CardFooter(_ref) {
|
|
|
18439
18450
|
testID = _ref.testID;
|
|
18440
18451
|
var isMobile = useIsMobile();
|
|
18441
18452
|
useVerifyInsideCard('CardFooter');
|
|
18442
|
-
|
|
18453
|
+
useVerifyAllowedChildren({
|
|
18454
|
+
children: children,
|
|
18455
|
+
componentName: 'CardFooter',
|
|
18456
|
+
allowedComponents: [ComponentIds$1.CardFooterLeading, ComponentIds$1.CardFooterTrailing]
|
|
18457
|
+
});
|
|
18443
18458
|
var footerChildrensArray = React__default.Children.toArray(children);
|
|
18444
18459
|
{
|
|
18445
18460
|
if (! /*#__PURE__*/React__default.isValidElement(footerChildrensArray[0])) {
|
|
@@ -19190,6 +19205,9 @@ var getCarouselItemId = function getCarouselItemId(containerId, index) {
|
|
|
19190
19205
|
};
|
|
19191
19206
|
|
|
19192
19207
|
var CAROUSEL_AUTOPLAY_INTERVAL = 6000;
|
|
19208
|
+
var componentIds = {
|
|
19209
|
+
CarouselItem: 'CarouselItem'
|
|
19210
|
+
};
|
|
19193
19211
|
|
|
19194
19212
|
/**
|
|
19195
19213
|
* Hook to run an effect on dependencies change after the component has *mounted*.
|
|
@@ -19408,6 +19426,11 @@ var Carousel = function Carousel(_ref4) {
|
|
|
19408
19426
|
var containerRef = React__default.useRef(null);
|
|
19409
19427
|
var isMobile = platform === 'onMobile';
|
|
19410
19428
|
var id = useId('carousel');
|
|
19429
|
+
useVerifyAllowedChildren({
|
|
19430
|
+
componentName: 'Carousel',
|
|
19431
|
+
allowedComponents: [componentIds.CarouselItem],
|
|
19432
|
+
children: children
|
|
19433
|
+
});
|
|
19411
19434
|
var _React$useState9 = React__default.useState(
|
|
19412
19435
|
// on mobile we do not want to render the overlay
|
|
19413
19436
|
isMobile ? true : !shouldAddStartEndSpacing),
|
|
@@ -19702,7 +19725,7 @@ var StyledCarouselItem = /*#__PURE__*/styled(BaseBox).withConfig({
|
|
|
19702
19725
|
marginLeft: shouldHaveStartSpacing ? '100%' : 0
|
|
19703
19726
|
});
|
|
19704
19727
|
});
|
|
19705
|
-
var
|
|
19728
|
+
var _CarouselItem = function _CarouselItem(_ref2) {
|
|
19706
19729
|
var children = _ref2.children,
|
|
19707
19730
|
shouldHaveStartSpacing = _ref2.shouldHaveStartSpacing,
|
|
19708
19731
|
shouldHaveEndSpacing = _ref2.shouldHaveEndSpacing,
|
|
@@ -19736,6 +19759,9 @@ var CarouselItem = function CarouselItem(_ref2) {
|
|
|
19736
19759
|
children: children
|
|
19737
19760
|
}));
|
|
19738
19761
|
};
|
|
19762
|
+
var CarouselItem = /*#__PURE__*/assignWithoutSideEffects(_CarouselItem, {
|
|
19763
|
+
componentId: componentIds.CarouselItem
|
|
19764
|
+
});
|
|
19739
19765
|
|
|
19740
19766
|
var ChipGroupContext = /*#__PURE__*/React__default.createContext({});
|
|
19741
19767
|
var ChipGroupProvider = ChipGroupContext.Provider;
|
|
@@ -29940,7 +29966,7 @@ var _BottomSheetBody = function _BottomSheetBody(_ref) {
|
|
|
29940
29966
|
React__default.useEffect(function () {
|
|
29941
29967
|
setBottomSheetHasActionList(false);
|
|
29942
29968
|
React__default.Children.forEach(children, function (child) {
|
|
29943
|
-
if (isValidAllowedChildren(child, componentIds.ActionList)) {
|
|
29969
|
+
if (isValidAllowedChildren(child, componentIds$1.ActionList)) {
|
|
29944
29970
|
setBottomSheetHasActionList(true);
|
|
29945
29971
|
}
|
|
29946
29972
|
});
|