@razorpay/blade 6.1.0 → 6.2.0
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/CHANGELOG.md +14 -0
- package/build/components/index.d.ts +403 -59
- package/build/components/index.native.d.ts +410 -60
- package/build/components/index.native.js +147 -100
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.web.js +9338 -7084
- package/build/components/index.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/build/utils/index.d.ts +12 -2
- package/build/utils/index.native.d.ts +12 -2
- package/build/utils/index.native.js +4 -2
- package/build/utils/index.native.js.map +1 -1
- package/build/utils/index.web.js +15 -1
- package/build/utils/index.web.js.map +1 -1
- package/package.json +4 -1
|
@@ -1,9 +1,62 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import * as React$1 from 'react';
|
|
3
3
|
import React__default, { ReactChild, ReactElement, ReactNode, SyntheticEvent, KeyboardEvent } from 'react';
|
|
4
|
-
import { AccessibilityRole, View, GestureResponderEvent } from 'react-native';
|
|
4
|
+
import { AccessibilityRole, ImageSourcePropType, View, GestureResponderEvent } from 'react-native';
|
|
5
5
|
import { CSSObject } from 'styled-components';
|
|
6
6
|
|
|
7
|
+
declare type ActionListProps = {
|
|
8
|
+
children: React__default.ReactNode[];
|
|
9
|
+
/**
|
|
10
|
+
* Decides the backgroundColor of ActionList
|
|
11
|
+
*/
|
|
12
|
+
surfaceLevel?: 2 | 3;
|
|
13
|
+
};
|
|
14
|
+
/**
|
|
15
|
+
* ### ActionList
|
|
16
|
+
*
|
|
17
|
+
* List of multiple actionable items. Can be used as menu items inside `Dropdown`,
|
|
18
|
+
* `BottomSheet` and as selectable items when combined with `SelectInput`
|
|
19
|
+
*
|
|
20
|
+
* #### Usage
|
|
21
|
+
*
|
|
22
|
+
* ```jsx
|
|
23
|
+
* <Dropdown>
|
|
24
|
+
* <SelectInput label="Select Action" />
|
|
25
|
+
* <DropdownOverlay>
|
|
26
|
+
* <ActionList>
|
|
27
|
+
* <ActionListHeader
|
|
28
|
+
* title="Recent Searches"
|
|
29
|
+
* leading={<ActionListHeaderIcon icon={HistoryIcon} />}
|
|
30
|
+
* />
|
|
31
|
+
* <ActionListItem
|
|
32
|
+
* title="Home"
|
|
33
|
+
* value="home"
|
|
34
|
+
* leading={<ActionListItemIcon icon={HomeIcon} />}
|
|
35
|
+
* />
|
|
36
|
+
* <ActionListItem
|
|
37
|
+
* title="Pricing"
|
|
38
|
+
* value="pricing"
|
|
39
|
+
* leading={<ActionListItemAsset src="https://flagcdn.com/w20/in.png" alt="India Flag" />}
|
|
40
|
+
* />
|
|
41
|
+
* <ActionListHeader
|
|
42
|
+
* title="Search Tips"
|
|
43
|
+
* leading={<ActionListFooterIcon icon={SearchIcon} />}
|
|
44
|
+
* trailing={
|
|
45
|
+
* <Button
|
|
46
|
+
* onClick={() => console.log('clicked')}
|
|
47
|
+
* >
|
|
48
|
+
* Apply
|
|
49
|
+
* </Button>
|
|
50
|
+
* }
|
|
51
|
+
* />
|
|
52
|
+
* </ActionList>
|
|
53
|
+
* </DropdownOverlay>
|
|
54
|
+
* </Dropdown>
|
|
55
|
+
* ```
|
|
56
|
+
*
|
|
57
|
+
*/
|
|
58
|
+
declare const ActionList: ({ children, surfaceLevel }: ActionListProps) => JSX.Element;
|
|
59
|
+
|
|
7
60
|
type BorderRadius = Readonly<{
|
|
8
61
|
/** none: 0(px/rem/pt) */
|
|
9
62
|
none: 0;
|
|
@@ -848,6 +901,234 @@ type ThemeTokens = {
|
|
|
848
901
|
typography: TypographyWithPlatforms;
|
|
849
902
|
};
|
|
850
903
|
|
|
904
|
+
type Theme$1 = {
|
|
905
|
+
border: Border;
|
|
906
|
+
breakpoints: Breakpoints;
|
|
907
|
+
colors: Colors;
|
|
908
|
+
spacing: Spacing;
|
|
909
|
+
motion: Motion;
|
|
910
|
+
shadows: Omit<Shadows, 'color'> & {
|
|
911
|
+
color: {
|
|
912
|
+
level: Record<ShadowLevels, string>;
|
|
913
|
+
};
|
|
914
|
+
};
|
|
915
|
+
typography: Typography;
|
|
916
|
+
};
|
|
917
|
+
|
|
918
|
+
type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
|
|
919
|
+
Theme$1['colors']['feedback']['icon']
|
|
920
|
+
>}`;
|
|
921
|
+
|
|
922
|
+
type FeedbackActionIconColors$1 = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
|
|
923
|
+
Theme$1['colors']['feedback'][Feedback]['action']['icon']
|
|
924
|
+
>}`;
|
|
925
|
+
|
|
926
|
+
type ActionIconColors$1 = `action.icon.${DotNotationColorStringToken<
|
|
927
|
+
Theme$1['colors']['action']['icon']
|
|
928
|
+
>}`;
|
|
929
|
+
|
|
930
|
+
type TextIconColors$1 = `surface.text.${DotNotationColorStringToken<
|
|
931
|
+
Theme$1['colors']['surface']['text']
|
|
932
|
+
>}`;
|
|
933
|
+
|
|
934
|
+
type SurfaceActionIconColors$1 = `surface.action.icon.${DotNotationColorStringToken<
|
|
935
|
+
Theme$1['colors']['surface']['action']['icon']
|
|
936
|
+
>}`;
|
|
937
|
+
|
|
938
|
+
type BadgeIconColors$1 = `badge.icon.${DotNotationColorStringToken<
|
|
939
|
+
Theme$1['colors']['badge']['icon']
|
|
940
|
+
>}`;
|
|
941
|
+
|
|
942
|
+
type IconSize$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
943
|
+
type IconProps$1 = {
|
|
944
|
+
/**
|
|
945
|
+
* Color token (not to be confused with actual hsla value)
|
|
946
|
+
*/
|
|
947
|
+
color:
|
|
948
|
+
| ActionIconColors$1
|
|
949
|
+
| SurfaceActionIconColors$1
|
|
950
|
+
| FeedbackIconColors$1
|
|
951
|
+
| FeedbackActionIconColors$1
|
|
952
|
+
| TextIconColors$1
|
|
953
|
+
| BadgeIconColors$1
|
|
954
|
+
| 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
|
|
955
|
+
size: IconSize$1;
|
|
956
|
+
};
|
|
957
|
+
type IconComponent$1 = React.ComponentType<IconProps$1>;
|
|
958
|
+
|
|
959
|
+
declare type ActionListItemProps = {
|
|
960
|
+
title: string;
|
|
961
|
+
description?: string;
|
|
962
|
+
onClick?: (clickProps: {
|
|
963
|
+
name: string;
|
|
964
|
+
value?: boolean;
|
|
965
|
+
}) => void;
|
|
966
|
+
/**
|
|
967
|
+
* value that you get from `onChange` event on SelectInput or in form submissions.
|
|
968
|
+
*/
|
|
969
|
+
value: string;
|
|
970
|
+
/**
|
|
971
|
+
* Link to open when item is clicked.
|
|
972
|
+
*/
|
|
973
|
+
href?: string;
|
|
974
|
+
/**
|
|
975
|
+
* Item that goes on left-side of item.
|
|
976
|
+
*
|
|
977
|
+
* Valid elements - `<ActionListItemIcon />`, `<ActionListItemAsset />`
|
|
978
|
+
*
|
|
979
|
+
* Will be overriden in multiselect
|
|
980
|
+
*/
|
|
981
|
+
leading?: React__default.ReactNode;
|
|
982
|
+
/**
|
|
983
|
+
* Item that goes on right-side of item.
|
|
984
|
+
*
|
|
985
|
+
* Valid elements - `<ActionListItemText />`, `<ActionListItemIcon />`
|
|
986
|
+
*/
|
|
987
|
+
trailing?: React__default.ReactNode;
|
|
988
|
+
/**
|
|
989
|
+
* If item is selected on page load
|
|
990
|
+
*/
|
|
991
|
+
isDefaultSelected?: boolean;
|
|
992
|
+
isDisabled?: boolean;
|
|
993
|
+
intent?: Extract<Feedback, 'negative'>;
|
|
994
|
+
/**
|
|
995
|
+
* Internally passed from ActionList. No need to pass it explicitly
|
|
996
|
+
*
|
|
997
|
+
* @private
|
|
998
|
+
*/
|
|
999
|
+
_index?: number;
|
|
1000
|
+
};
|
|
1001
|
+
declare const ActionListSectionDivider: () => JSX.Element;
|
|
1002
|
+
declare type ActionListSectionProps = {
|
|
1003
|
+
title: string;
|
|
1004
|
+
children: React__default.ReactNode[] | React__default.ReactNode;
|
|
1005
|
+
/**
|
|
1006
|
+
* Internally used to hide the divider on final item in React Native.
|
|
1007
|
+
*
|
|
1008
|
+
* Should not be used by consumers (also won't work on web)
|
|
1009
|
+
*
|
|
1010
|
+
* @private
|
|
1011
|
+
*/
|
|
1012
|
+
_hideDivider?: boolean;
|
|
1013
|
+
};
|
|
1014
|
+
declare const ActionListSection: WithComponentId<ActionListSectionProps>;
|
|
1015
|
+
declare const ActionListItemIcon: WithComponentId<{
|
|
1016
|
+
icon: IconComponent$1;
|
|
1017
|
+
}>;
|
|
1018
|
+
declare const ActionListItemText: WithComponentId<{
|
|
1019
|
+
children: string;
|
|
1020
|
+
}>;
|
|
1021
|
+
/**
|
|
1022
|
+
* ### ActionListItem
|
|
1023
|
+
*
|
|
1024
|
+
* Creates option inside `ActionList`.
|
|
1025
|
+
*
|
|
1026
|
+
* #### Usage
|
|
1027
|
+
*
|
|
1028
|
+
* ```jsx
|
|
1029
|
+
* <ActionList>
|
|
1030
|
+
* <ActionListItem
|
|
1031
|
+
* title="Home"
|
|
1032
|
+
* value="home"
|
|
1033
|
+
* leading={<ActionListItemIcon icon={HomeIcon} />}
|
|
1034
|
+
* trailing={<ActionListItemText>⌘ + S</ActionListItemText>}
|
|
1035
|
+
* />
|
|
1036
|
+
* </ActionList>
|
|
1037
|
+
* ```
|
|
1038
|
+
*/
|
|
1039
|
+
declare const ActionListItem: WithComponentId<ActionListItemProps>;
|
|
1040
|
+
|
|
1041
|
+
declare type ActionListHeaderProps = {
|
|
1042
|
+
title: string;
|
|
1043
|
+
/**
|
|
1044
|
+
* Asset to be added on left side of Header.
|
|
1045
|
+
*
|
|
1046
|
+
* Valid children - `ActionListHeaderIcon`
|
|
1047
|
+
*/
|
|
1048
|
+
leading?: React__default.ReactNode;
|
|
1049
|
+
};
|
|
1050
|
+
/**
|
|
1051
|
+
* ### ActionListHeader
|
|
1052
|
+
*
|
|
1053
|
+
* To be used inside `ActionList`
|
|
1054
|
+
*
|
|
1055
|
+
* #### Usage
|
|
1056
|
+
*
|
|
1057
|
+
* ```jsx
|
|
1058
|
+
* <ActionListHeader
|
|
1059
|
+
* title="Search Tips"
|
|
1060
|
+
* leading={
|
|
1061
|
+
* <ActionListHeaderIcon
|
|
1062
|
+
* title="Recent Searches"
|
|
1063
|
+
* icon={HistoryIcon}
|
|
1064
|
+
* />
|
|
1065
|
+
* }
|
|
1066
|
+
* />
|
|
1067
|
+
* ```
|
|
1068
|
+
*/
|
|
1069
|
+
declare const ActionListHeader: WithComponentId<ActionListHeaderProps>;
|
|
1070
|
+
declare const ActionListHeaderIcon: WithComponentId<{
|
|
1071
|
+
icon: IconComponent$1;
|
|
1072
|
+
}>;
|
|
1073
|
+
|
|
1074
|
+
declare type ActionListFooterProps = {
|
|
1075
|
+
title?: string;
|
|
1076
|
+
/**
|
|
1077
|
+
* Asset to be added on left side of Footer.
|
|
1078
|
+
*
|
|
1079
|
+
* Valid children - `ActionListFooterIcon`
|
|
1080
|
+
*/
|
|
1081
|
+
leading?: React__default.ReactNode;
|
|
1082
|
+
/**
|
|
1083
|
+
* Elements to be added on right side of Footer.
|
|
1084
|
+
*
|
|
1085
|
+
* Anything can be passed here but maybe don't? Should ideally have Button or Tick Icon Buttons.
|
|
1086
|
+
*/
|
|
1087
|
+
trailing?: React__default.ReactNode;
|
|
1088
|
+
};
|
|
1089
|
+
/**
|
|
1090
|
+
* ### ActionListFooter
|
|
1091
|
+
*
|
|
1092
|
+
* To be used inside `ActionList`
|
|
1093
|
+
*
|
|
1094
|
+
* #### Usage
|
|
1095
|
+
*
|
|
1096
|
+
* ```jsx
|
|
1097
|
+
* <ActionListFooter
|
|
1098
|
+
* title="Search Tips"
|
|
1099
|
+
* leading={<ActionListFooterIcon icon={SearchIcon} />}
|
|
1100
|
+
* trailing={
|
|
1101
|
+
* <Button
|
|
1102
|
+
* onClick={() => { console.log('click') }}
|
|
1103
|
+
* >
|
|
1104
|
+
* Apply
|
|
1105
|
+
* </Button>
|
|
1106
|
+
* }
|
|
1107
|
+
* />
|
|
1108
|
+
* ```
|
|
1109
|
+
*/
|
|
1110
|
+
declare const ActionListFooter: WithComponentId<ActionListFooterProps>;
|
|
1111
|
+
declare const ActionListFooterIcon: WithComponentId<{
|
|
1112
|
+
icon: IconComponent$1;
|
|
1113
|
+
}>;
|
|
1114
|
+
|
|
1115
|
+
declare type ActionListItemAssetProps = {
|
|
1116
|
+
/**
|
|
1117
|
+
* Source of the image.
|
|
1118
|
+
*
|
|
1119
|
+
* Can either be a string URI or `require('/local/image')` in React Native
|
|
1120
|
+
*/
|
|
1121
|
+
src: string | ImageSourcePropType;
|
|
1122
|
+
/**
|
|
1123
|
+
* Alt tag for the image
|
|
1124
|
+
*/
|
|
1125
|
+
alt: string;
|
|
1126
|
+
};
|
|
1127
|
+
/**
|
|
1128
|
+
*
|
|
1129
|
+
*/
|
|
1130
|
+
declare const ActionListItemAsset: WithComponentId<ActionListItemAssetProps>;
|
|
1131
|
+
|
|
851
1132
|
declare type PrimaryAction = {
|
|
852
1133
|
text: string;
|
|
853
1134
|
onClick: () => void;
|
|
@@ -921,61 +1202,6 @@ declare type AlertProps = {
|
|
|
921
1202
|
};
|
|
922
1203
|
declare const Alert: ({ description, title, isDismissible, onDismiss, contrast, isFullWidth, intent, actions, }: AlertProps) => ReactElement | null;
|
|
923
1204
|
|
|
924
|
-
type Theme$1 = {
|
|
925
|
-
border: Border;
|
|
926
|
-
breakpoints: Breakpoints;
|
|
927
|
-
colors: Colors;
|
|
928
|
-
spacing: Spacing;
|
|
929
|
-
motion: Motion;
|
|
930
|
-
shadows: Omit<Shadows, 'color'> & {
|
|
931
|
-
color: {
|
|
932
|
-
level: Record<ShadowLevels, string>;
|
|
933
|
-
};
|
|
934
|
-
};
|
|
935
|
-
typography: Typography;
|
|
936
|
-
};
|
|
937
|
-
|
|
938
|
-
type FeedbackIconColors$1 = `feedback.icon.${DotNotationColorStringToken<
|
|
939
|
-
Theme$1['colors']['feedback']['icon']
|
|
940
|
-
>}`;
|
|
941
|
-
|
|
942
|
-
type FeedbackActionIconColors$1 = `feedback.${Feedback}.action.icon.${DotNotationColorStringToken<
|
|
943
|
-
Theme$1['colors']['feedback'][Feedback]['action']['icon']
|
|
944
|
-
>}`;
|
|
945
|
-
|
|
946
|
-
type ActionIconColors$1 = `action.icon.${DotNotationColorStringToken<
|
|
947
|
-
Theme$1['colors']['action']['icon']
|
|
948
|
-
>}`;
|
|
949
|
-
|
|
950
|
-
type TextIconColors$1 = `surface.text.${DotNotationColorStringToken<
|
|
951
|
-
Theme$1['colors']['surface']['text']
|
|
952
|
-
>}`;
|
|
953
|
-
|
|
954
|
-
type SurfaceActionIconColors$1 = `surface.action.icon.${DotNotationColorStringToken<
|
|
955
|
-
Theme$1['colors']['surface']['action']['icon']
|
|
956
|
-
>}`;
|
|
957
|
-
|
|
958
|
-
type BadgeIconColors$1 = `badge.icon.${DotNotationColorStringToken<
|
|
959
|
-
Theme$1['colors']['badge']['icon']
|
|
960
|
-
>}`;
|
|
961
|
-
|
|
962
|
-
type IconSize$1 = 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | '2xlarge';
|
|
963
|
-
type IconProps$1 = {
|
|
964
|
-
/**
|
|
965
|
-
* Color token (not to be confused with actual hsla value)
|
|
966
|
-
*/
|
|
967
|
-
color:
|
|
968
|
-
| ActionIconColors$1
|
|
969
|
-
| SurfaceActionIconColors$1
|
|
970
|
-
| FeedbackIconColors$1
|
|
971
|
-
| FeedbackActionIconColors$1
|
|
972
|
-
| TextIconColors$1
|
|
973
|
-
| BadgeIconColors$1
|
|
974
|
-
| 'currentColor'; // currentColor is useful for letting the SVG inherit color property from its container
|
|
975
|
-
size: IconSize$1;
|
|
976
|
-
};
|
|
977
|
-
type IconComponent$1 = React.ComponentType<IconProps$1>;
|
|
978
|
-
|
|
979
1205
|
declare type BadgeProps = {
|
|
980
1206
|
/**
|
|
981
1207
|
* Sets the label for the badge.
|
|
@@ -1474,6 +1700,11 @@ declare type CheckboxProps = {
|
|
|
1474
1700
|
* @default "medium"
|
|
1475
1701
|
*/
|
|
1476
1702
|
size?: 'small' | 'medium';
|
|
1703
|
+
/**
|
|
1704
|
+
* Sets the tab-index property on checkbox element
|
|
1705
|
+
*
|
|
1706
|
+
*/
|
|
1707
|
+
tabIndex?: number;
|
|
1477
1708
|
};
|
|
1478
1709
|
declare const Checkbox: React__default.ForwardRefExoticComponent<CheckboxProps & React__default.RefAttributes<BladeElementRef>>;
|
|
1479
1710
|
|
|
@@ -1553,6 +1784,49 @@ declare type CheckboxGroupProps = {
|
|
|
1553
1784
|
};
|
|
1554
1785
|
declare const CheckboxGroup: ({ children, label, helpText, isDisabled, necessityIndicator, labelPosition, validationState, errorText, name, defaultValue, onChange, value, size, }: CheckboxGroupProps) => React__default.ReactElement;
|
|
1555
1786
|
|
|
1787
|
+
declare type DropdownProps = {
|
|
1788
|
+
selectionType?: 'single' | 'multiple';
|
|
1789
|
+
children: React__default.ReactNode[];
|
|
1790
|
+
};
|
|
1791
|
+
/**
|
|
1792
|
+
* ### Dropdown component
|
|
1793
|
+
*
|
|
1794
|
+
* Dropdown component is generic component that controls the dropdown functionality.
|
|
1795
|
+
* It can be used with multiple triggers and mostly contains ActionList component inside it
|
|
1796
|
+
*
|
|
1797
|
+
* ---
|
|
1798
|
+
*
|
|
1799
|
+
* #### Usage
|
|
1800
|
+
*
|
|
1801
|
+
* ```jsx
|
|
1802
|
+
* <Dropdown selectionType="single">
|
|
1803
|
+
* <SelectInput />
|
|
1804
|
+
* <DropdownOverlay>
|
|
1805
|
+
* <ActionList>
|
|
1806
|
+
* <ActionListItem />
|
|
1807
|
+
* <ActionListItem />
|
|
1808
|
+
* </ActionList>
|
|
1809
|
+
* </DropdownOverlay>
|
|
1810
|
+
* </Dropdown>
|
|
1811
|
+
* ```
|
|
1812
|
+
*
|
|
1813
|
+
* ---
|
|
1814
|
+
*
|
|
1815
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}
|
|
1816
|
+
*/
|
|
1817
|
+
declare const Dropdown: WithComponentId<DropdownProps>;
|
|
1818
|
+
|
|
1819
|
+
declare type DropdownOverlayProps = {
|
|
1820
|
+
children: React__default.ReactNode;
|
|
1821
|
+
};
|
|
1822
|
+
|
|
1823
|
+
/**
|
|
1824
|
+
* Overlay of dropdown
|
|
1825
|
+
*
|
|
1826
|
+
* Wrap your ActionList within this component
|
|
1827
|
+
*/
|
|
1828
|
+
declare const DropdownOverlay: WithComponentId<DropdownOverlayProps>;
|
|
1829
|
+
|
|
1556
1830
|
declare const ArrowDownIcon: IconComponent;
|
|
1557
1831
|
|
|
1558
1832
|
declare const ArrowLeftIcon: IconComponent;
|
|
@@ -2171,9 +2445,9 @@ type FormInputOnKeyDownEvent = {
|
|
|
2171
2445
|
|
|
2172
2446
|
declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
2173
2447
|
/**
|
|
2174
|
-
* Determines if it needs to be rendered as input or
|
|
2448
|
+
* Determines if it needs to be rendered as input, textarea or button
|
|
2175
2449
|
*/
|
|
2176
|
-
as?: 'input' | 'textarea';
|
|
2450
|
+
as?: 'input' | 'textarea' | 'button';
|
|
2177
2451
|
/**
|
|
2178
2452
|
* ID that will be used for accessibility
|
|
2179
2453
|
*/
|
|
@@ -2206,6 +2480,10 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
|
2206
2480
|
* The callback function to be invoked when the value of the input field changes
|
|
2207
2481
|
*/
|
|
2208
2482
|
onChange?: FormInputOnEvent;
|
|
2483
|
+
/**
|
|
2484
|
+
* The callback function to be invoked when input is clicked
|
|
2485
|
+
*/
|
|
2486
|
+
onClick?: FormInputOnEvent;
|
|
2209
2487
|
/**
|
|
2210
2488
|
* The callback function to be invoked when the value of the input field has any input
|
|
2211
2489
|
*/
|
|
@@ -2220,6 +2498,10 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
|
2220
2498
|
* For React Native this will call `onEndEditing` event since we want to get the last value of the input field
|
|
2221
2499
|
*/
|
|
2222
2500
|
onBlur?: FormInputOnEvent;
|
|
2501
|
+
/**
|
|
2502
|
+
* Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
|
|
2503
|
+
*/
|
|
2504
|
+
shouldIgnoreBlurAnimation?: boolean;
|
|
2223
2505
|
/**
|
|
2224
2506
|
* Used to turn the input field to controlled so user can control the value
|
|
2225
2507
|
*/
|
|
@@ -2313,6 +2595,16 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
|
2313
2595
|
* Sets the accessibility label for the input
|
|
2314
2596
|
*/
|
|
2315
2597
|
accessibilityLabel?: string;
|
|
2598
|
+
/**
|
|
2599
|
+
* Sets the id of the label
|
|
2600
|
+
*
|
|
2601
|
+
* (Useful when assigning one label to multiple elements using aria-labelledby)
|
|
2602
|
+
*/
|
|
2603
|
+
labelId?: string;
|
|
2604
|
+
/**
|
|
2605
|
+
* Can be used in select to set the id of the active descendant from the listbox
|
|
2606
|
+
*/
|
|
2607
|
+
activeDescendant?: string;
|
|
2316
2608
|
/**
|
|
2317
2609
|
* Hides the label text
|
|
2318
2610
|
*/
|
|
@@ -2326,6 +2618,18 @@ declare type BaseInputProps = FormInputLabelProps & FormInputValidationProps & {
|
|
|
2326
2618
|
* for internal metric collection purposes
|
|
2327
2619
|
*/
|
|
2328
2620
|
componentName?: string;
|
|
2621
|
+
/**
|
|
2622
|
+
* whether the input has a popup
|
|
2623
|
+
*/
|
|
2624
|
+
hasPopup?: AriaAttributes['hasPopup'];
|
|
2625
|
+
/**
|
|
2626
|
+
* id of the popup
|
|
2627
|
+
*/
|
|
2628
|
+
popupId?: string;
|
|
2629
|
+
/**
|
|
2630
|
+
* true if popup is in expanded state
|
|
2631
|
+
*/
|
|
2632
|
+
isPopupExpanded?: boolean;
|
|
2329
2633
|
};
|
|
2330
2634
|
|
|
2331
2635
|
declare type Type = Exclude<BaseInputProps['type'], 'password'>;
|
|
@@ -2353,7 +2657,7 @@ declare type TextInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | '
|
|
|
2353
2657
|
*/
|
|
2354
2658
|
type?: Type;
|
|
2355
2659
|
};
|
|
2356
|
-
declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "onChange" | "isDisabled" | "autoFocus" | "labelPosition" | "
|
|
2660
|
+
declare const TextInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "value" | "name" | "onBlur" | "onFocus" | "defaultValue" | "prefix" | "onChange" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix" | "maxCharacters" | "keyboardReturnKeyType" | "autoCompleteSuggestionType"> & {
|
|
2357
2661
|
/**
|
|
2358
2662
|
* Decides whether to render a clear icon button
|
|
2359
2663
|
*/
|
|
@@ -2477,6 +2781,48 @@ declare type OTPInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'v
|
|
|
2477
2781
|
*/
|
|
2478
2782
|
declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, labelPosition, name, onChange, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, }: OTPInputProps) => React__default.ReactElement;
|
|
2479
2783
|
|
|
2784
|
+
declare type SelectInputProps = Pick<BaseInputProps, 'label' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder'> & {
|
|
2785
|
+
icon?: IconComponent$1;
|
|
2786
|
+
onChange?: ({ name, values }: {
|
|
2787
|
+
name?: string;
|
|
2788
|
+
values: string[];
|
|
2789
|
+
}) => void;
|
|
2790
|
+
};
|
|
2791
|
+
/**
|
|
2792
|
+
* ### SelectInput
|
|
2793
|
+
*
|
|
2794
|
+
* Our equivalent of `<select>` tag. Lets you select items from given options.
|
|
2795
|
+
*
|
|
2796
|
+
* To be used in combination of `Dropdown` and `ActionList` component
|
|
2797
|
+
*
|
|
2798
|
+
* ---
|
|
2799
|
+
*
|
|
2800
|
+
* #### Usage
|
|
2801
|
+
*
|
|
2802
|
+
* ```diff
|
|
2803
|
+
* <Dropdown>
|
|
2804
|
+
* + <SelectInput label="Select Fruits" />
|
|
2805
|
+
* <DropdownOverlay>
|
|
2806
|
+
* <ActionList>
|
|
2807
|
+
* <ActionListItem title="Mango" value="mango" />
|
|
2808
|
+
* <ActionListItem title="Apple" value="apple" />
|
|
2809
|
+
* </ActionList>
|
|
2810
|
+
* </DropdownOverlay>
|
|
2811
|
+
* </Dropdown>
|
|
2812
|
+
* ```
|
|
2813
|
+
*
|
|
2814
|
+
* ---
|
|
2815
|
+
*
|
|
2816
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
|
|
2817
|
+
*/
|
|
2818
|
+
declare const SelectInput: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "label" | "name" | "onBlur" | "onFocus" | "onClick" | "prefix" | "isDisabled" | "autoFocus" | "labelPosition" | "validationState" | "helpText" | "errorText" | "necessityIndicator" | "successText" | "isRequired" | "suffix"> & {
|
|
2819
|
+
icon?: IconComponent$1 | undefined;
|
|
2820
|
+
onChange?: (({ name, values }: {
|
|
2821
|
+
name?: string | undefined;
|
|
2822
|
+
values: string[];
|
|
2823
|
+
}) => void) | undefined;
|
|
2824
|
+
} & React__default.RefAttributes<BladeElementRef>>;
|
|
2825
|
+
|
|
2480
2826
|
declare type IndicatorCommonProps = {
|
|
2481
2827
|
/**
|
|
2482
2828
|
* Sets the color tone
|
|
@@ -2985,6 +3331,10 @@ declare type VisuallyHiddenProps = {
|
|
|
2985
3331
|
|
|
2986
3332
|
declare const VisuallyHidden: ({ children }: VisuallyHiddenProps) => JSX.Element;
|
|
2987
3333
|
|
|
3334
|
+
/**
|
|
3335
|
+
* Screen reader class adapted from webaim
|
|
3336
|
+
* https://webaim.org/techniques/css/invisiblecontent/#techniques
|
|
3337
|
+
*/
|
|
2988
3338
|
declare const screenReaderStyles: CSSObject;
|
|
2989
3339
|
|
|
2990
|
-
export { ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
|
|
3340
|
+
export { ActionList, ActionListFooter, ActionListFooterIcon, ActionListFooterProps, ActionListHeader, ActionListHeaderIcon, ActionListHeaderProps, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionDivider, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BoxIcon, BriefcaseIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownOverlay, DropdownOverlayProps, DropdownProps, DropletIcon, EditComposeIcon, EditIcon, EditInlineIcon, ExportIcon, ExternalLinkIcon, EyeIcon, EyeOffIcon, FacebookIcon, FastForwardIcon, FeatherIcon, FileIcon, FileMinusIcon, FilePlusIcon, FileTextIcon, FilmIcon, FilterIcon, FlagIcon, FolderIcon, FullScreenEnterIcon, FullScreenExitIcon, GithubIcon, GitlabIcon, GlobeIcon, GridIcon, HashIcon, Heading, HeadingProps, HeadphonesIcon, HeartIcon, HelpCircleIcon, HistoryIcon, HomeIcon, IconButton, IconButtonProps, IconComponent, IconProps, IconSize, ImageIcon, InboxIcon, Indicator, IndicatorProps, InfoIcon, InstagramIcon, InvoicesIcon, ItalicIcon, LayersIcon, LayoutIcon, LifeBuoyIcon, Link, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputProps, OctagonIcon, OffersIcon, PackageIcon, PaperclipIcon, PasswordInput, PasswordInputProps, PauseCircleIcon, PauseIcon, PaymentButtonsIcon, PaymentLinksIcon, PaymentPagesIcon, PercentIcon, PhoneCallIcon, PhoneForwardedIcon, PhoneIcon, PhoneIncomingIcon, PhoneMissedIcon, PhoneOffIcon, PhoneOutgoingIcon, PieChartIcon, PlayCircleIcon, PlayIcon, PlusCircleIcon, PlusIcon, PlusSquareIcon, PocketIcon, PowerIcon, PrinterIcon, ProgressBar, ProgressBarProps, ProgressBarVariant, QRCodeIcon, Radio, RadioGroup, RadioGroupProps, RadioIcon, RadioProps, RazorpayIcon, RazorpayXIcon, RefreshIcon, RepeatIcon, ReportsIcon, RewindIcon, RotateClockWiseIcon, RotateCounterClockWiseIcon, RoutesIcon, RupeeIcon, RupeesIcon, SaveIcon, ScissorsIcon, SearchIcon, SelectInput, SelectInputProps, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, TabletIcon, TagIcon, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, TransactionsIcon, TrashIcon, TrendingDownIcon, TrendingUpIcon, TriangleIcon, TvIcon, TwitterIcon, TypeIcon, UmbrellaIcon, UnderlineIcon, UnlockIcon, UploadCloudIcon, UploadIcon, UserCheckIcon, UserIcon, UserMinusIcon, UserPlusIcon, UserXIcon, UsersIcon, VideoIcon, VideoOffIcon, VisuallyHidden, VisuallyHiddenProps, VoicemailIcon, VolumeHighIcon, VolumeIcon, VolumeLowIcon, VolumeMuteIcon, WatchIcon, WifiIcon, WifiOffIcon, WindIcon, XCircleIcon, XSquareIcon, ZapIcon, ZoomInIcon, ZoomOutIcon, announce, clearAnnouncer, destroyAnnouncer, getTextProps, screenReaderStyles, useTheme };
|