@razorpay/blade 10.8.1 → 10.9.1
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.d.ts +246 -50
- package/build/components/index.development.web.js +8228 -7222
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +203 -50
- package/build/components/index.native.js +76 -54
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +8422 -7416
- 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
|
@@ -714,6 +714,10 @@ declare type BladeElementRef = Platform.Select<{
|
|
|
714
714
|
web: HTMLElement;
|
|
715
715
|
native: View;
|
|
716
716
|
}>;
|
|
717
|
+
declare type ContainerElementType = Platform.Select<{
|
|
718
|
+
web: HTMLDivElement;
|
|
719
|
+
native: View;
|
|
720
|
+
}>;
|
|
717
721
|
|
|
718
722
|
declare type ActionListContextProp = Pick<ActionListProps, 'surfaceLevel'>;
|
|
719
723
|
declare const useActionListContext: () => ActionListContextProp;
|
|
@@ -1244,7 +1248,7 @@ declare type LayoutProps = MakeObjectResponsive<{
|
|
|
1244
1248
|
width: SpacingValueType;
|
|
1245
1249
|
minWidth: SpacingValueType;
|
|
1246
1250
|
maxWidth: SpacingValueType;
|
|
1247
|
-
} & PickCSSByPlatform<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign'>>;
|
|
1251
|
+
} & PickCSSByPlatform<'display' | 'overflow' | 'overflowX' | 'overflowY' | 'textAlign' | 'whiteSpace'>>;
|
|
1248
1252
|
declare type FlexboxProps = MakeObjectResponsive<{
|
|
1249
1253
|
/**
|
|
1250
1254
|
* This uses the native gap property which might not work on older browsers.
|
|
@@ -2220,6 +2224,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
2220
2224
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
2221
2225
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
2222
2226
|
} | undefined;
|
|
2227
|
+
whiteSpace?: csstype.Property.WhiteSpace | {
|
|
2228
|
+
readonly base?: csstype.Property.WhiteSpace | undefined;
|
|
2229
|
+
readonly xs?: csstype.Property.WhiteSpace | undefined;
|
|
2230
|
+
readonly s?: csstype.Property.WhiteSpace | undefined;
|
|
2231
|
+
readonly m?: csstype.Property.WhiteSpace | undefined;
|
|
2232
|
+
readonly l?: csstype.Property.WhiteSpace | undefined;
|
|
2233
|
+
readonly xl?: csstype.Property.WhiteSpace | undefined;
|
|
2234
|
+
} | undefined;
|
|
2223
2235
|
overflow?: csstype.Property.Overflow | {
|
|
2224
2236
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
2225
2237
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -2623,6 +2635,41 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
2623
2635
|
} & MakeObjectResponsive<{
|
|
2624
2636
|
backgroundColor: "brand.primary.300" | "brand.primary.400" | "brand.primary.500" | "brand.primary.600" | "brand.primary.700" | "brand.primary.800" | "brand.secondary.500" | "brand.gray.200.lowContrast" | "brand.gray.200.highContrast" | "brand.gray.300.lowContrast" | "brand.gray.300.highContrast" | "brand.gray.400.lowContrast" | "brand.gray.400.highContrast" | "brand.gray.500.lowContrast" | "brand.gray.500.highContrast" | "brand.gray.600.lowContrast" | "brand.gray.600.highContrast" | "brand.gray.700.lowContrast" | "brand.gray.700.highContrast" | "brand.gray.a50.lowContrast" | "brand.gray.a50.highContrast" | "brand.gray.a100.lowContrast" | "brand.gray.a100.highContrast" | "surface.background.level1.lowContrast" | "surface.background.level1.highContrast" | "surface.background.level2.lowContrast" | "surface.background.level2.highContrast" | "surface.background.level3.lowContrast" | "surface.background.level3.highContrast" | "transparent";
|
|
2625
2637
|
}, "backgroundColor"> & {
|
|
2638
|
+
/**
|
|
2639
|
+
* ## Box
|
|
2640
|
+
*
|
|
2641
|
+
* Box is the basic Layout component.
|
|
2642
|
+
*
|
|
2643
|
+
*
|
|
2644
|
+
* Box components supports most spacing CSS properties like `display`, `padding*`, `flex*`, `height`, `width`, etc.
|
|
2645
|
+
*
|
|
2646
|
+
* Check out {@linkcode BoxProps BoxPropsType} for complete list of props and [Layout RFC](https://github.com/razorpay/blade/blob/master/rfcs/2023-01-06-layout.md) for more details on API decision.
|
|
2647
|
+
*
|
|
2648
|
+
* ----
|
|
2649
|
+
*
|
|
2650
|
+
* ### Usage
|
|
2651
|
+
*
|
|
2652
|
+
* ```jsx
|
|
2653
|
+
* <Box display="flex">
|
|
2654
|
+
* ```
|
|
2655
|
+
|
|
2656
|
+
* #### Responsive Props
|
|
2657
|
+
*
|
|
2658
|
+
* ```jsx
|
|
2659
|
+
* <Box padding={{ base: 'spacing.3', m: 'spacing.10' }} />
|
|
2660
|
+
* ```
|
|
2661
|
+
*
|
|
2662
|
+
* #### Margin and Padding Shorthands
|
|
2663
|
+
*
|
|
2664
|
+
* ```jsx
|
|
2665
|
+
* <Box padding={["spacing.3", "spacing.10"]} />
|
|
2666
|
+
* ```
|
|
2667
|
+
*
|
|
2668
|
+
* ---
|
|
2669
|
+
*
|
|
2670
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-box Box Documentation}
|
|
2671
|
+
*
|
|
2672
|
+
*/
|
|
2626
2673
|
as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
|
|
2627
2674
|
} & {
|
|
2628
2675
|
children?: React__default.ReactNode | React__default.ReactNode[];
|
|
@@ -3531,7 +3578,6 @@ declare type IconButtonProps = {
|
|
|
3531
3578
|
* Icon component to be rendered, eg. `CloseIcon`
|
|
3532
3579
|
*/
|
|
3533
3580
|
icon: IconComponent;
|
|
3534
|
-
onClick: () => void;
|
|
3535
3581
|
/**
|
|
3536
3582
|
* Icon size
|
|
3537
3583
|
*
|
|
@@ -3552,13 +3598,23 @@ declare type IconButtonProps = {
|
|
|
3552
3598
|
* Disabled state for IconButton
|
|
3553
3599
|
*/
|
|
3554
3600
|
isDisabled?: boolean;
|
|
3555
|
-
|
|
3601
|
+
/**
|
|
3602
|
+
* Sets tabindex property on button element
|
|
3603
|
+
*/
|
|
3604
|
+
_tabIndex?: number;
|
|
3605
|
+
} & BladeCommonEvents & Platform.Select<{
|
|
3606
|
+
web: {
|
|
3607
|
+
onClick: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
3608
|
+
};
|
|
3609
|
+
native: {
|
|
3610
|
+
onClick: (event: GestureResponderEvent) => void;
|
|
3611
|
+
};
|
|
3612
|
+
}>;
|
|
3556
3613
|
declare const IconButton: React__default.ForwardRefExoticComponent<{
|
|
3557
3614
|
/**
|
|
3558
3615
|
* Icon component to be rendered, eg. `CloseIcon`
|
|
3559
3616
|
*/
|
|
3560
3617
|
icon: IconComponent;
|
|
3561
|
-
onClick: () => void;
|
|
3562
3618
|
/**
|
|
3563
3619
|
* Icon size
|
|
3564
3620
|
*
|
|
@@ -3579,7 +3635,15 @@ declare const IconButton: React__default.ForwardRefExoticComponent<{
|
|
|
3579
3635
|
* Disabled state for IconButton
|
|
3580
3636
|
*/
|
|
3581
3637
|
isDisabled?: boolean | undefined;
|
|
3582
|
-
|
|
3638
|
+
/**
|
|
3639
|
+
* Sets tabindex property on button element
|
|
3640
|
+
*/
|
|
3641
|
+
_tabIndex?: number | undefined;
|
|
3642
|
+
} & BladeCommonEvents & {
|
|
3643
|
+
onClick: (event: React__default.MouseEvent<HTMLButtonElement>) => void;
|
|
3644
|
+
} & {
|
|
3645
|
+
__brand__?: "platform-web" | undefined;
|
|
3646
|
+
} & React__default.RefAttributes<BladeElementRef>>;
|
|
3583
3647
|
|
|
3584
3648
|
declare type OnChange$1 = ({ isChecked, event, value, }: {
|
|
3585
3649
|
isChecked: boolean;
|
|
@@ -4010,6 +4074,14 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
|
|
|
4010
4074
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
4011
4075
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
4012
4076
|
} | undefined;
|
|
4077
|
+
whiteSpace?: csstype.Property.WhiteSpace | {
|
|
4078
|
+
readonly base?: csstype.Property.WhiteSpace | undefined;
|
|
4079
|
+
readonly xs?: csstype.Property.WhiteSpace | undefined;
|
|
4080
|
+
readonly s?: csstype.Property.WhiteSpace | undefined;
|
|
4081
|
+
readonly m?: csstype.Property.WhiteSpace | undefined;
|
|
4082
|
+
readonly l?: csstype.Property.WhiteSpace | undefined;
|
|
4083
|
+
readonly xl?: csstype.Property.WhiteSpace | undefined;
|
|
4084
|
+
} | undefined;
|
|
4013
4085
|
overflow?: csstype.Property.Overflow | {
|
|
4014
4086
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
4015
4087
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -4576,6 +4648,14 @@ declare const Chip: React__default.ForwardRefExoticComponent<{
|
|
|
4576
4648
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
4577
4649
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
4578
4650
|
} | undefined;
|
|
4651
|
+
whiteSpace?: csstype.Property.WhiteSpace | {
|
|
4652
|
+
readonly base?: csstype.Property.WhiteSpace | undefined;
|
|
4653
|
+
readonly xs?: csstype.Property.WhiteSpace | undefined;
|
|
4654
|
+
readonly s?: csstype.Property.WhiteSpace | undefined;
|
|
4655
|
+
readonly m?: csstype.Property.WhiteSpace | undefined;
|
|
4656
|
+
readonly l?: csstype.Property.WhiteSpace | undefined;
|
|
4657
|
+
readonly xl?: csstype.Property.WhiteSpace | undefined;
|
|
4658
|
+
} | undefined;
|
|
4579
4659
|
overflow?: csstype.Property.Overflow | {
|
|
4580
4660
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
4581
4661
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -4702,6 +4782,10 @@ declare type BaseHeaderProps = {
|
|
|
4702
4782
|
onBackButtonClick?: () => void;
|
|
4703
4783
|
closeButtonRef?: React__default.MutableRefObject<any>;
|
|
4704
4784
|
metaComponentName?: string;
|
|
4785
|
+
/**
|
|
4786
|
+
* inner child of BottomSheetHeader. Meant to be used for AutoComplete only
|
|
4787
|
+
*/
|
|
4788
|
+
children?: React__default.ReactElement;
|
|
4705
4789
|
} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'> & TestID;
|
|
4706
4790
|
|
|
4707
4791
|
declare type BaseFooterProps = {
|
|
@@ -4829,6 +4913,10 @@ declare type BaseInputCommonProps = FormInputLabelProps & FormInputValidationPro
|
|
|
4829
4913
|
* Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
|
|
4830
4914
|
*/
|
|
4831
4915
|
shouldIgnoreBlurAnimation?: boolean;
|
|
4916
|
+
/**
|
|
4917
|
+
* sets boolean that ignores the blur animations on baseinput
|
|
4918
|
+
*/
|
|
4919
|
+
setShouldIgnoreBlurAnimation?: (shouldIgnoreBlurAnimation: boolean) => void;
|
|
4832
4920
|
/**
|
|
4833
4921
|
* Used to turn the input field to controlled so user can control the value
|
|
4834
4922
|
*/
|
|
@@ -4946,11 +5034,45 @@ declare type BaseInputCommonProps = FormInputLabelProps & FormInputValidationPro
|
|
|
4946
5034
|
* true if popup is in expanded state
|
|
4947
5035
|
*/
|
|
4948
5036
|
isPopupExpanded?: boolean;
|
|
4949
|
-
setInputWrapperRef?: (node:
|
|
5037
|
+
setInputWrapperRef?: (node: ContainerElementType) => void;
|
|
4950
5038
|
/**
|
|
4951
5039
|
* sets the autocapitalize behavior for the input
|
|
4952
5040
|
*/
|
|
4953
5041
|
autoCapitalize?: 'none' | 'sentences' | 'words' | 'characters';
|
|
5042
|
+
/**
|
|
5043
|
+
* constraints the height of input to given number rows
|
|
5044
|
+
*
|
|
5045
|
+
* When set to expandable, input takes 1 row in the begining and expands to take 3 when active
|
|
5046
|
+
*
|
|
5047
|
+
* @default 'single'
|
|
5048
|
+
*/
|
|
5049
|
+
maxTagRows?: 'single' | 'multiple' | 'expandable';
|
|
5050
|
+
/**
|
|
5051
|
+
* A slot for adding tags to input
|
|
5052
|
+
*/
|
|
5053
|
+
tags?: React__default.ReactElement[] | null;
|
|
5054
|
+
/**
|
|
5055
|
+
* Disables stripping of tags and shows all tags
|
|
5056
|
+
*/
|
|
5057
|
+
showAllTags?: boolean;
|
|
5058
|
+
/**
|
|
5059
|
+
* State variable of active tag index
|
|
5060
|
+
*/
|
|
5061
|
+
activeTagIndex?: number;
|
|
5062
|
+
/**
|
|
5063
|
+
* Is this input SelectInput or AutoComplete
|
|
5064
|
+
*/
|
|
5065
|
+
isDropdownTrigger?: boolean;
|
|
5066
|
+
/**
|
|
5067
|
+
* Is the label expected to be rendered inside input?
|
|
5068
|
+
* Used in AutoComplete and Select when label can't exist outside
|
|
5069
|
+
*
|
|
5070
|
+
*/
|
|
5071
|
+
isLabelInsideInput?: boolean;
|
|
5072
|
+
/**
|
|
5073
|
+
* State setter for active tag index
|
|
5074
|
+
*/
|
|
5075
|
+
setActiveTagIndex?: (activeTagIndex: number) => void;
|
|
4954
5076
|
} & TestID & Platform.Select<{
|
|
4955
5077
|
native: {
|
|
4956
5078
|
/**
|
|
@@ -5231,44 +5353,6 @@ declare type OTPInputProps = (OTPInputPropsWithA11yLabel | OTPInputPropsWithLabe
|
|
|
5231
5353
|
*/
|
|
5232
5354
|
declare const OTPInput: ({ autoFocus, errorText, helpText, isDisabled, keyboardReturnKeyType, keyboardType, label, accessibilityLabel, labelPosition, name, onChange, onFocus, onBlur, onOTPFilled, otpLength, placeholder, successText, validationState, value, isMasked, autoCompleteSuggestionType, testID, ...styledProps }: OTPInputProps) => React__default.ReactElement;
|
|
5233
5355
|
|
|
5234
|
-
declare type SelectInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
|
|
5235
|
-
icon?: IconComponent;
|
|
5236
|
-
/**
|
|
5237
|
-
* Controlled value of the Select. Use it in combination of `onChange`.
|
|
5238
|
-
*
|
|
5239
|
-
* Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
|
|
5240
|
-
*/
|
|
5241
|
-
value?: string | string[];
|
|
5242
|
-
/**
|
|
5243
|
-
* Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
|
|
5244
|
-
*/
|
|
5245
|
-
defaultValue?: string | string[];
|
|
5246
|
-
onChange?: ({ name, values }: {
|
|
5247
|
-
name?: string;
|
|
5248
|
-
values: string[];
|
|
5249
|
-
}) => void;
|
|
5250
|
-
};
|
|
5251
|
-
declare type SelectInputPropsWithA11yLabel = {
|
|
5252
|
-
/**
|
|
5253
|
-
* Label to be shown for the input field
|
|
5254
|
-
*/
|
|
5255
|
-
label?: undefined;
|
|
5256
|
-
/**
|
|
5257
|
-
* Accessibility label for the input
|
|
5258
|
-
*/
|
|
5259
|
-
accessibilityLabel: string;
|
|
5260
|
-
};
|
|
5261
|
-
declare type SelectInputPropsWithLabel = {
|
|
5262
|
-
/**
|
|
5263
|
-
* Label to be shown for the input field
|
|
5264
|
-
*/
|
|
5265
|
-
label: string;
|
|
5266
|
-
/**
|
|
5267
|
-
* Accessibility label for the input
|
|
5268
|
-
*/
|
|
5269
|
-
accessibilityLabel?: string;
|
|
5270
|
-
};
|
|
5271
|
-
declare type SelectInputProps = (SelectInputPropsWithA11yLabel | SelectInputPropsWithLabel) & SelectInputCommonProps;
|
|
5272
5356
|
/**
|
|
5273
5357
|
* ### SelectInput
|
|
5274
5358
|
*
|
|
@@ -5296,7 +5380,85 @@ declare type SelectInputProps = (SelectInputPropsWithA11yLabel | SelectInputProp
|
|
|
5296
5380
|
*
|
|
5297
5381
|
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
|
|
5298
5382
|
*/
|
|
5299
|
-
declare const SelectInput: React__default.ForwardRefExoticComponent<
|
|
5383
|
+
declare const SelectInput: React__default.ForwardRefExoticComponent<(({
|
|
5384
|
+
label?: undefined;
|
|
5385
|
+
accessibilityLabel: string;
|
|
5386
|
+
} | {
|
|
5387
|
+
label: string;
|
|
5388
|
+
accessibilityLabel?: string | undefined;
|
|
5389
|
+
}) & Pick<BaseInputProps, "placeholder" | "name" | "label" | "testID" | "prefix" | "onBlur" | "onFocus" | "onClick" | "autoFocus" | "accessibilityLabel" | "isDisabled" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
|
|
5390
|
+
icon?: IconComponent | undefined;
|
|
5391
|
+
value?: string | string[] | undefined;
|
|
5392
|
+
defaultValue?: string | string[] | undefined;
|
|
5393
|
+
onChange?: (({ name, values }: {
|
|
5394
|
+
name?: string | undefined;
|
|
5395
|
+
values: string[];
|
|
5396
|
+
}) => void) | undefined;
|
|
5397
|
+
maxRows?: "multiple" | "single" | "expandable" | undefined;
|
|
5398
|
+
labelPosition?: "left" | "top" | "inside-input" | undefined;
|
|
5399
|
+
}) & React__default.RefAttributes<BladeElementRef>>;
|
|
5400
|
+
|
|
5401
|
+
/**
|
|
5402
|
+
* ### AutoComplete
|
|
5403
|
+
*
|
|
5404
|
+
* Extension on top of SelectInput which allows you type and filter between ActionList items
|
|
5405
|
+
*
|
|
5406
|
+
* To be used in combination of `Dropdown` and `ActionList` component
|
|
5407
|
+
*
|
|
5408
|
+
* ---
|
|
5409
|
+
*
|
|
5410
|
+
* #### Usage in Desktop
|
|
5411
|
+
*
|
|
5412
|
+
* ```diff
|
|
5413
|
+
* <Dropdown>
|
|
5414
|
+
* + <AutoComplete label="Select Fruits" />
|
|
5415
|
+
* <DropdownOverlay>
|
|
5416
|
+
* <ActionList>
|
|
5417
|
+
* <ActionListItem title="Mango" value="mango" />
|
|
5418
|
+
* <ActionListItem title="Apple" value="apple" />
|
|
5419
|
+
* </ActionList>
|
|
5420
|
+
* </DropdownOverlay>
|
|
5421
|
+
* </Dropdown>
|
|
5422
|
+
* ```
|
|
5423
|
+
*
|
|
5424
|
+
* #### Usage in Mobile
|
|
5425
|
+
*
|
|
5426
|
+
* ```diff
|
|
5427
|
+
* <Dropdown>
|
|
5428
|
+
* + <SelectInput label="Select Fruits" />
|
|
5429
|
+
* <BottomSheet>
|
|
5430
|
+
* <BottomSheetHeader>
|
|
5431
|
+
* + <AutoComplete label="Select Fruits" />
|
|
5432
|
+
* </BottomSheetHeader>
|
|
5433
|
+
* <BottomSheetBody>
|
|
5434
|
+
* <ActionList>
|
|
5435
|
+
* <ActionListItem title="Mango" value="mango" />
|
|
5436
|
+
* <ActionListItem title="Apple" value="apple" />
|
|
5437
|
+
* </ActionList>
|
|
5438
|
+
* </BottomSheetBody>
|
|
5439
|
+
* </BottomSheet>
|
|
5440
|
+
* </Dropdown>
|
|
5441
|
+
* ```
|
|
5442
|
+
*
|
|
5443
|
+
* ---
|
|
5444
|
+
*
|
|
5445
|
+
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-autocomplete--with-single-select AutoComplete Documentation}.
|
|
5446
|
+
*/
|
|
5447
|
+
declare const AutoComplete: React__default.ForwardRefExoticComponent<Pick<BaseInputProps, "placeholder" | "name" | "label" | "testID" | "prefix" | "onBlur" | "onFocus" | "onClick" | "autoFocus" | "accessibilityLabel" | "isDisabled" | "isRequired" | "validationState" | "necessityIndicator" | "helpText" | "errorText" | "successText" | "suffix"> & {
|
|
5448
|
+
icon?: IconComponent | undefined;
|
|
5449
|
+
value?: string | string[] | undefined;
|
|
5450
|
+
defaultValue?: string | string[] | undefined;
|
|
5451
|
+
onChange?: (({ name, values }: {
|
|
5452
|
+
name?: string | undefined;
|
|
5453
|
+
values: string[];
|
|
5454
|
+
}) => void) | undefined;
|
|
5455
|
+
maxRows?: "multiple" | "single" | "expandable" | undefined;
|
|
5456
|
+
labelPosition?: "left" | "top" | "inside-input" | undefined;
|
|
5457
|
+
} & {
|
|
5458
|
+
onInputValueChange?: FormInputOnEvent | undefined;
|
|
5459
|
+
inputValue?: string | undefined;
|
|
5460
|
+
filteredValues?: string[] | undefined;
|
|
5461
|
+
} & React__default.RefAttributes<BladeElementRef>>;
|
|
5300
5462
|
|
|
5301
5463
|
declare type IndicatorCommonProps = {
|
|
5302
5464
|
/**
|
|
@@ -5863,6 +6025,14 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
|
|
|
5863
6025
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
5864
6026
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
5865
6027
|
} | undefined;
|
|
6028
|
+
whiteSpace?: csstype.Property.WhiteSpace | {
|
|
6029
|
+
readonly base?: csstype.Property.WhiteSpace | undefined;
|
|
6030
|
+
readonly xs?: csstype.Property.WhiteSpace | undefined;
|
|
6031
|
+
readonly s?: csstype.Property.WhiteSpace | undefined;
|
|
6032
|
+
readonly m?: csstype.Property.WhiteSpace | undefined;
|
|
6033
|
+
readonly l?: csstype.Property.WhiteSpace | undefined;
|
|
6034
|
+
readonly xl?: csstype.Property.WhiteSpace | undefined;
|
|
6035
|
+
} | undefined;
|
|
5866
6036
|
overflow?: csstype.Property.Overflow | {
|
|
5867
6037
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
5868
6038
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -6339,6 +6509,14 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
|
|
|
6339
6509
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
6340
6510
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
6341
6511
|
} | undefined;
|
|
6512
|
+
whiteSpace?: csstype.Property.WhiteSpace | {
|
|
6513
|
+
readonly base?: csstype.Property.WhiteSpace | undefined;
|
|
6514
|
+
readonly xs?: csstype.Property.WhiteSpace | undefined;
|
|
6515
|
+
readonly s?: csstype.Property.WhiteSpace | undefined;
|
|
6516
|
+
readonly m?: csstype.Property.WhiteSpace | undefined;
|
|
6517
|
+
readonly l?: csstype.Property.WhiteSpace | undefined;
|
|
6518
|
+
readonly xl?: csstype.Property.WhiteSpace | undefined;
|
|
6519
|
+
} | undefined;
|
|
6342
6520
|
overflow?: csstype.Property.Overflow | {
|
|
6343
6521
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
6344
6522
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -6388,10 +6566,20 @@ declare type TagProps = {
|
|
|
6388
6566
|
* Used for adding virtual focus on tag.
|
|
6389
6567
|
*
|
|
6390
6568
|
* @private
|
|
6569
|
+
*/
|
|
6570
|
+
_isVirtuallyFocused?: boolean;
|
|
6571
|
+
/**
|
|
6572
|
+
* Private property for Blade.
|
|
6573
|
+
*
|
|
6574
|
+
* Should not be used by consumers.
|
|
6391
6575
|
*
|
|
6576
|
+
* Is tag placed inside an input
|
|
6577
|
+
*
|
|
6578
|
+
* @private
|
|
6392
6579
|
*/
|
|
6393
|
-
|
|
6580
|
+
_isTagInsideInput?: boolean;
|
|
6394
6581
|
} & StyledPropsBlade & TestID;
|
|
6582
|
+
|
|
6395
6583
|
/**
|
|
6396
6584
|
* ## Tags
|
|
6397
6585
|
*
|
|
@@ -6419,7 +6607,7 @@ declare type TagProps = {
|
|
|
6419
6607
|
* Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.
|
|
6420
6608
|
*
|
|
6421
6609
|
*/
|
|
6422
|
-
declare const Tag: ({ size, icon, onDismiss, children, isDisabled, testID,
|
|
6610
|
+
declare const Tag: ({ size, icon, onDismiss, children, isDisabled, testID, _isVirtuallyFocused, _isTagInsideInput, ...styledProps }: TagProps) => React__default.ReactElement | null;
|
|
6423
6611
|
|
|
6424
6612
|
declare type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'> & Partial<FlexboxProps> & {
|
|
6425
6613
|
contrast?: 'low' | 'high';
|
|
@@ -6906,7 +7094,7 @@ declare type BottomSheetProps = {
|
|
|
6906
7094
|
*/
|
|
6907
7095
|
zIndex?: number;
|
|
6908
7096
|
};
|
|
6909
|
-
declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick'> & {
|
|
7097
|
+
declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick' | 'children'> & {
|
|
6910
7098
|
/**
|
|
6911
7099
|
* Trailing element to be rendered in the Header
|
|
6912
7100
|
*
|
|
@@ -6933,7 +7121,7 @@ declare type BottomSheetBodyProps = {
|
|
|
6933
7121
|
padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
|
|
6934
7122
|
};
|
|
6935
7123
|
|
|
6936
|
-
declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, }: BottomSheetHeaderProps) => React__default.ReactElement;
|
|
7124
|
+
declare const BottomSheetHeader: ({ title, subtitle, leading, titleSuffix, trailing, showBackButton, onBackButtonClick, children, }: BottomSheetHeaderProps) => React__default.ReactElement;
|
|
6937
7125
|
|
|
6938
7126
|
declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
|
|
6939
7127
|
|
|
@@ -7153,6 +7341,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7153
7341
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
7154
7342
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
7155
7343
|
} | undefined;
|
|
7344
|
+
whiteSpace?: csstype.Property.WhiteSpace | {
|
|
7345
|
+
readonly base?: csstype.Property.WhiteSpace | undefined;
|
|
7346
|
+
readonly xs?: csstype.Property.WhiteSpace | undefined;
|
|
7347
|
+
readonly s?: csstype.Property.WhiteSpace | undefined;
|
|
7348
|
+
readonly m?: csstype.Property.WhiteSpace | undefined;
|
|
7349
|
+
readonly l?: csstype.Property.WhiteSpace | undefined;
|
|
7350
|
+
readonly xl?: csstype.Property.WhiteSpace | undefined;
|
|
7351
|
+
} | undefined;
|
|
7156
7352
|
overflow?: csstype.Property.Overflow | {
|
|
7157
7353
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
7158
7354
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -7668,4 +7864,4 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7668
7864
|
tabIndex: -1;
|
|
7669
7865
|
}, "tabIndex" | "data-testid" | "data-blade-component">;
|
|
7670
7866
|
|
|
7671
|
-
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, 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, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, 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, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, 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,
|
|
7867
|
+
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection, ActionListSectionProps, ActivityIcon, AirplayIcon, Alert, AlertCircleIcon, AlertTriangleIcon as AlertOctagonIcon, AlertOnlyIcon, AlertProps, AlertTriangleIcon$1 as AlertTriangleIcon, AlignCenterIcon, AlignJustifyIcon, AlignLeftIcon, AlignRightIcon, Amount, AmountProps, AnchorIcon, AnnouncementIcon, ApertureIcon, AppStoreIcon, ArrowDownIcon, ArrowDownLeftIcon, ArrowDownRightIcon, ArrowLeftIcon, ArrowRightIcon, ArrowUpIcon, ArrowUpLeftIcon, ArrowUpRightIcon, AtSignIcon, Attachment as AttachmentIcon, AutoComplete, AwardIcon, Badge, BadgeProps, BankIcon, BarChartAltIcon, BarChartIcon, BatteryChargingIcon, BatteryIcon, BellIcon, BellOffIcon, BillIcon, BladeCommonEvents, BladeProvider, BladeProviderProps, BluetoothIcon, BoldIcon, BookIcon, BookmarkIcon, BottomSheet, BottomSheetBody, BottomSheetBodyProps, BottomSheetFooter, BottomSheetFooterProps, BottomSheetHeader, BottomSheetHeaderProps, BottomSheetProps, Box, BoxIcon, BoxProps, BoxRefType, BriefcaseIcon, BulkPayoutsIcon, Button, ButtonProps, CalendarIcon, CameraIcon, CameraOffIcon, Card, CardBody, CardFooter, CardFooterAction, CardFooterLeading, CardFooterTrailing, CardHeader, CardHeaderBadge, CardHeaderCounter, CardHeaderIcon, CardHeaderIconButton, CardHeaderLeading, CardHeaderLink, CardHeaderText, CardHeaderTrailing, CardProps, Carousel, CarouselItem, CarouselProps, CastIcon, CheckCircleIcon, CheckIcon, CheckSquareIcon, Checkbox, CheckboxGroup, CheckboxGroupProps, CheckboxProps, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, ChevronsDownIcon, ChevronsLeftIcon, ChevronsRightIcon, ChevronsUpIcon, Chip, ChipGroup, ChipGroupProps, ChipProps, ChromeIcon, CircleIcon, ClipboardIcon, ClockIcon, CloseIcon, CloudDrizzleIcon, CloudIcon, CloudLightningIcon, CloudOffIcon, CloudRainIcon, CloudSnowIcon, Code, CodeProps, CodepenIcon, CoinsIcon, Collapsible, CollapsibleBody, CollapsibleBodyProps, CollapsibleButton, CollapsibleButtonProps, CollapsibleLink, CollapsibleLinkProps, CollapsibleProps, CommandIcon, CompassIcon, ComponentIds, CopyIcon, CornerDownLeftIcon, CornerDownRightIcon, CornerLeftDownIcon, CornerLeftUpIcon, CornerRightDownIcon, CornerRightUpIcon, CornerUpLeftIcon, CornerUpRightIcon, Counter, CounterProps, CpuIcon, CreditCardIcon, CropIcon, CrosshairIcon, CustomersIcon, CutIcon, DashboardIcon, DeleteIcon, DiscIcon, Display, DisplayProps, Divider, DividerProps, DollarIcon, DollarsIcon, DownloadCloudIcon, DownloadIcon, Dropdown, DropdownButton, DropdownFooter, DropdownHeader, DropdownLink, 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, LinkButtonVariantProps, LinkIcon, LinkProps, List, ListIcon, ListItem, ListItemCode, ListItemCodeProps, ListItemLink, ListItemLinkProps, ListItemProps, ListItemText, ListItemTextProps, ListProps, LoaderIcon, LockIcon, LogInIcon, LogOutIcon, MailIcon, MailOpenIcon, MapIcon, MapPinIcon, MaximizeIcon, MenuDotsIcon, MenuIcon, MessageCircleIcon, MessageSquareIcon, MicIcon, MicOffIcon, MinimizeIcon, MinusCircleIcon, MinusIcon, MinusSquareIcon, Modal, ModalBody, ModalBodyProps, ModalFooter, ModalFooterProps, ModalHeader, ModalHeaderProps, ModalProps, MonitorIcon, MoonIcon, MoreHorizontalIcon, MoreVerticalIcon, MoveIcon, MusicIcon, MyAccountIcon, NavigationIcon, OTPInput, OTPInputCommonProps, 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, SendIcon, ServerIcon, SettingsIcon, SettlementsIcon, ShareIcon, ShieldIcon, ShoppingCartIcon, ShuffleIcon, SidebarIcon, Skeleton, SkeletonProps, SkipBackIcon, SkipForwardIcon, SkipNavContent, SkipNavLink, SlackIcon, SlashIcon, SlidersIcon, SmartCollectIcon, SmartphoneIcon, SpeakerIcon, Spinner, SpinnerProps, SquareIcon, StampIcon, StarIcon, StopCircleIcon, SubscriptionsIcon, SunIcon, SunriseIcon, SunsetIcon, Switch, SwitchProps, TabletIcon, Tag, TagIcon, TagProps, TargetIcon, Text, TextArea, TextAreaProps, TextInput, TextInputProps, TextProps, TextVariant, Theme, ThermometerIcon, ThumbsDownIcon, ThumbsUpIcon, Title, TitleProps, ToggleLeftIcon, ToggleRightIcon, Tooltip, TooltipInteractiveWrapper, TooltipProps, 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, useActionListContext, useTheme };
|