@razorpay/blade 10.8.0 → 10.9.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/build/components/index.d.ts +246 -51
- package/build/components/index.development.web.js +8474 -7479
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +203 -51
- package/build/components/index.native.js +81 -59
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +8238 -7243
- 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.
|
|
@@ -1994,7 +1998,6 @@ declare type ActionListItemProps = {
|
|
|
1994
1998
|
*/
|
|
1995
1999
|
_index?: number;
|
|
1996
2000
|
} & TestID;
|
|
1997
|
-
declare const ActionListSectionDivider: () => React__default.ReactElement;
|
|
1998
2001
|
declare type ActionListSectionProps = {
|
|
1999
2002
|
title: string;
|
|
2000
2003
|
children: React__default.ReactNode[] | React__default.ReactNode;
|
|
@@ -2221,6 +2224,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
2221
2224
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
2222
2225
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
2223
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;
|
|
2224
2235
|
overflow?: csstype.Property.Overflow | {
|
|
2225
2236
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
2226
2237
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -2624,6 +2635,41 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
|
|
|
2624
2635
|
} & MakeObjectResponsive<{
|
|
2625
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";
|
|
2626
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
|
+
*/
|
|
2627
2673
|
as: "aside" | "div" | "footer" | "header" | "label" | "main" | "nav" | "section" | "span";
|
|
2628
2674
|
} & {
|
|
2629
2675
|
children?: React__default.ReactNode | React__default.ReactNode[];
|
|
@@ -3532,7 +3578,6 @@ declare type IconButtonProps = {
|
|
|
3532
3578
|
* Icon component to be rendered, eg. `CloseIcon`
|
|
3533
3579
|
*/
|
|
3534
3580
|
icon: IconComponent;
|
|
3535
|
-
onClick: () => void;
|
|
3536
3581
|
/**
|
|
3537
3582
|
* Icon size
|
|
3538
3583
|
*
|
|
@@ -3553,13 +3598,23 @@ declare type IconButtonProps = {
|
|
|
3553
3598
|
* Disabled state for IconButton
|
|
3554
3599
|
*/
|
|
3555
3600
|
isDisabled?: boolean;
|
|
3556
|
-
|
|
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
|
+
}>;
|
|
3557
3613
|
declare const IconButton: React__default.ForwardRefExoticComponent<{
|
|
3558
3614
|
/**
|
|
3559
3615
|
* Icon component to be rendered, eg. `CloseIcon`
|
|
3560
3616
|
*/
|
|
3561
3617
|
icon: IconComponent;
|
|
3562
|
-
onClick: () => void;
|
|
3563
3618
|
/**
|
|
3564
3619
|
* Icon size
|
|
3565
3620
|
*
|
|
@@ -3580,7 +3635,15 @@ declare const IconButton: React__default.ForwardRefExoticComponent<{
|
|
|
3580
3635
|
* Disabled state for IconButton
|
|
3581
3636
|
*/
|
|
3582
3637
|
isDisabled?: boolean | undefined;
|
|
3583
|
-
|
|
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>>;
|
|
3584
3647
|
|
|
3585
3648
|
declare type OnChange$1 = ({ isChecked, event, value, }: {
|
|
3586
3649
|
isChecked: boolean;
|
|
@@ -4011,6 +4074,14 @@ declare const Checkbox: React__default.ForwardRefExoticComponent<{
|
|
|
4011
4074
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
4012
4075
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
4013
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;
|
|
4014
4085
|
overflow?: csstype.Property.Overflow | {
|
|
4015
4086
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
4016
4087
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -4577,6 +4648,14 @@ declare const Chip: React__default.ForwardRefExoticComponent<{
|
|
|
4577
4648
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
4578
4649
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
4579
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;
|
|
4580
4659
|
overflow?: csstype.Property.Overflow | {
|
|
4581
4660
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
4582
4661
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -4703,6 +4782,10 @@ declare type BaseHeaderProps = {
|
|
|
4703
4782
|
onBackButtonClick?: () => void;
|
|
4704
4783
|
closeButtonRef?: React__default.MutableRefObject<any>;
|
|
4705
4784
|
metaComponentName?: string;
|
|
4785
|
+
/**
|
|
4786
|
+
* inner child of BottomSheetHeader. Meant to be used for AutoComplete only
|
|
4787
|
+
*/
|
|
4788
|
+
children?: React__default.ReactElement;
|
|
4706
4789
|
} & Pick<ReactDOMAttributes, 'onClickCapture' | 'onKeyDown' | 'onKeyUp' | 'onLostPointerCapture' | 'onPointerCancel' | 'onPointerDown' | 'onPointerMove' | 'onPointerUp'> & TestID;
|
|
4707
4790
|
|
|
4708
4791
|
declare type BaseFooterProps = {
|
|
@@ -4830,6 +4913,10 @@ declare type BaseInputCommonProps = FormInputLabelProps & FormInputValidationPro
|
|
|
4830
4913
|
* Ignores the blur event animation (Used in Select to ignore blur animation when item in option is clicked)
|
|
4831
4914
|
*/
|
|
4832
4915
|
shouldIgnoreBlurAnimation?: boolean;
|
|
4916
|
+
/**
|
|
4917
|
+
* sets boolean that ignores the blur animations on baseinput
|
|
4918
|
+
*/
|
|
4919
|
+
setShouldIgnoreBlurAnimation?: (shouldIgnoreBlurAnimation: boolean) => void;
|
|
4833
4920
|
/**
|
|
4834
4921
|
* Used to turn the input field to controlled so user can control the value
|
|
4835
4922
|
*/
|
|
@@ -4947,11 +5034,45 @@ declare type BaseInputCommonProps = FormInputLabelProps & FormInputValidationPro
|
|
|
4947
5034
|
* true if popup is in expanded state
|
|
4948
5035
|
*/
|
|
4949
5036
|
isPopupExpanded?: boolean;
|
|
4950
|
-
setInputWrapperRef?: (node:
|
|
5037
|
+
setInputWrapperRef?: (node: ContainerElementType) => void;
|
|
4951
5038
|
/**
|
|
4952
5039
|
* sets the autocapitalize behavior for the input
|
|
4953
5040
|
*/
|
|
4954
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;
|
|
4955
5076
|
} & TestID & Platform.Select<{
|
|
4956
5077
|
native: {
|
|
4957
5078
|
/**
|
|
@@ -5232,44 +5353,6 @@ declare type OTPInputProps = (OTPInputPropsWithA11yLabel | OTPInputPropsWithLabe
|
|
|
5232
5353
|
*/
|
|
5233
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;
|
|
5234
5355
|
|
|
5235
|
-
declare type SelectInputCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'labelPosition' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
|
|
5236
|
-
icon?: IconComponent;
|
|
5237
|
-
/**
|
|
5238
|
-
* Controlled value of the Select. Use it in combination of `onChange`.
|
|
5239
|
-
*
|
|
5240
|
-
* Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
|
|
5241
|
-
*/
|
|
5242
|
-
value?: string | string[];
|
|
5243
|
-
/**
|
|
5244
|
-
* Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
|
|
5245
|
-
*/
|
|
5246
|
-
defaultValue?: string | string[];
|
|
5247
|
-
onChange?: ({ name, values }: {
|
|
5248
|
-
name?: string;
|
|
5249
|
-
values: string[];
|
|
5250
|
-
}) => void;
|
|
5251
|
-
};
|
|
5252
|
-
declare type SelectInputPropsWithA11yLabel = {
|
|
5253
|
-
/**
|
|
5254
|
-
* Label to be shown for the input field
|
|
5255
|
-
*/
|
|
5256
|
-
label?: undefined;
|
|
5257
|
-
/**
|
|
5258
|
-
* Accessibility label for the input
|
|
5259
|
-
*/
|
|
5260
|
-
accessibilityLabel: string;
|
|
5261
|
-
};
|
|
5262
|
-
declare type SelectInputPropsWithLabel = {
|
|
5263
|
-
/**
|
|
5264
|
-
* Label to be shown for the input field
|
|
5265
|
-
*/
|
|
5266
|
-
label: string;
|
|
5267
|
-
/**
|
|
5268
|
-
* Accessibility label for the input
|
|
5269
|
-
*/
|
|
5270
|
-
accessibilityLabel?: string;
|
|
5271
|
-
};
|
|
5272
|
-
declare type SelectInputProps = (SelectInputPropsWithA11yLabel | SelectInputPropsWithLabel) & SelectInputCommonProps;
|
|
5273
5356
|
/**
|
|
5274
5357
|
* ### SelectInput
|
|
5275
5358
|
*
|
|
@@ -5297,7 +5380,85 @@ declare type SelectInputProps = (SelectInputPropsWithA11yLabel | SelectInputProp
|
|
|
5297
5380
|
*
|
|
5298
5381
|
* Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select SelectInput Documentation}.
|
|
5299
5382
|
*/
|
|
5300
|
-
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>>;
|
|
5301
5462
|
|
|
5302
5463
|
declare type IndicatorCommonProps = {
|
|
5303
5464
|
/**
|
|
@@ -5864,6 +6025,14 @@ declare const Radio: React__default.ForwardRefExoticComponent<{
|
|
|
5864
6025
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
5865
6026
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
5866
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;
|
|
5867
6036
|
overflow?: csstype.Property.Overflow | {
|
|
5868
6037
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
5869
6038
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -6340,6 +6509,14 @@ declare const Switch: React__default.ForwardRefExoticComponent<{
|
|
|
6340
6509
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
6341
6510
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
6342
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;
|
|
6343
6520
|
overflow?: csstype.Property.Overflow | {
|
|
6344
6521
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
6345
6522
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -6389,10 +6566,20 @@ declare type TagProps = {
|
|
|
6389
6566
|
* Used for adding virtual focus on tag.
|
|
6390
6567
|
*
|
|
6391
6568
|
* @private
|
|
6569
|
+
*/
|
|
6570
|
+
_isVirtuallyFocused?: boolean;
|
|
6571
|
+
/**
|
|
6572
|
+
* Private property for Blade.
|
|
6573
|
+
*
|
|
6574
|
+
* Should not be used by consumers.
|
|
6392
6575
|
*
|
|
6576
|
+
* Is tag placed inside an input
|
|
6577
|
+
*
|
|
6578
|
+
* @private
|
|
6393
6579
|
*/
|
|
6394
|
-
|
|
6580
|
+
_isTagInsideInput?: boolean;
|
|
6395
6581
|
} & StyledPropsBlade & TestID;
|
|
6582
|
+
|
|
6396
6583
|
/**
|
|
6397
6584
|
* ## Tags
|
|
6398
6585
|
*
|
|
@@ -6420,7 +6607,7 @@ declare type TagProps = {
|
|
|
6420
6607
|
* Checkout [Tags Documentation](https://blade.razorpay.com/?path=/story/components-tag--default) for more info.
|
|
6421
6608
|
*
|
|
6422
6609
|
*/
|
|
6423
|
-
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;
|
|
6424
6611
|
|
|
6425
6612
|
declare type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'maxWidth' | 'minWidth' | 'height' | 'maxHeight' | 'minHeight' | 'borderRadius'> & Partial<FlexboxProps> & {
|
|
6426
6613
|
contrast?: 'low' | 'high';
|
|
@@ -6907,7 +7094,7 @@ declare type BottomSheetProps = {
|
|
|
6907
7094
|
*/
|
|
6908
7095
|
zIndex?: number;
|
|
6909
7096
|
};
|
|
6910
|
-
declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick'> & {
|
|
7097
|
+
declare type BottomSheetHeaderProps = Pick<BaseHeaderProps, 'title' | 'subtitle' | 'leading' | 'showBackButton' | 'onBackButtonClick' | 'children'> & {
|
|
6911
7098
|
/**
|
|
6912
7099
|
* Trailing element to be rendered in the Header
|
|
6913
7100
|
*
|
|
@@ -6934,7 +7121,7 @@ declare type BottomSheetBodyProps = {
|
|
|
6934
7121
|
padding?: Extract<SpacingValueType, 'spacing.0' | 'spacing.5'>;
|
|
6935
7122
|
};
|
|
6936
7123
|
|
|
6937
|
-
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;
|
|
6938
7125
|
|
|
6939
7126
|
declare const BottomSheetFooter: ({ children }: BaseFooterProps) => React__default.ReactElement;
|
|
6940
7127
|
|
|
@@ -7154,6 +7341,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7154
7341
|
readonly l?: csstype.Property.TextAlign | undefined;
|
|
7155
7342
|
readonly xl?: csstype.Property.TextAlign | undefined;
|
|
7156
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;
|
|
7157
7352
|
overflow?: csstype.Property.Overflow | {
|
|
7158
7353
|
readonly base?: csstype.Property.Overflow | undefined;
|
|
7159
7354
|
readonly xs?: csstype.Property.Overflow | undefined;
|
|
@@ -7669,4 +7864,4 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7669
7864
|
tabIndex: -1;
|
|
7670
7865
|
}, "tabIndex" | "data-testid" | "data-blade-component">;
|
|
7671
7866
|
|
|
7672
|
-
export { Accordion, AccordionItem, AccordionItemProps, AccordionProps, ActionList, ActionListItem, ActionListItemAsset, ActionListItemAssetProps, ActionListItemIcon, ActionListItemProps, ActionListItemText, ActionListProps, ActionListSection,
|
|
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 };
|