@razorpay/blade 10.9.1 → 10.10.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 +197 -2
- package/build/components/index.development.web.js +2358 -1980
- package/build/components/index.development.web.js.map +1 -1
- package/build/components/index.native.d.ts +174 -2
- package/build/components/index.native.js +356 -338
- package/build/components/index.native.js.map +1 -1
- package/build/components/index.production.web.js +2343 -1973
- 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
|
@@ -5460,6 +5460,82 @@ declare const AutoComplete: React__default.ForwardRefExoticComponent<Pick<BaseIn
|
|
|
5460
5460
|
filteredValues?: string[] | undefined;
|
|
5461
5461
|
} & React__default.RefAttributes<BladeElementRef>>;
|
|
5462
5462
|
|
|
5463
|
+
declare type DropdownInputTriggersCommonProps = Pick<BaseInputProps, 'label' | 'accessibilityLabel' | 'necessityIndicator' | 'validationState' | 'helpText' | 'errorText' | 'successText' | 'name' | 'isDisabled' | 'isRequired' | 'prefix' | 'suffix' | 'autoFocus' | 'onClick' | 'onFocus' | 'onBlur' | 'placeholder' | 'testID'> & {
|
|
5464
|
+
icon?: IconComponent;
|
|
5465
|
+
/**
|
|
5466
|
+
* Controlled value of the Select. Use it in combination of `onChange`.
|
|
5467
|
+
*
|
|
5468
|
+
* Check out [Controlled Dropdown Documentation](https://blade.razorpay.com/?path=/story/components-dropdown-with-select--controlled-dropdown&globals=measureEnabled:false) for example.
|
|
5469
|
+
*/
|
|
5470
|
+
value?: string | string[];
|
|
5471
|
+
/**
|
|
5472
|
+
* Used to set the default value of SelectInput when it's uncontrolled. Use `value` instead for controlled SelectInput
|
|
5473
|
+
*/
|
|
5474
|
+
defaultValue?: string | string[];
|
|
5475
|
+
onChange?: ({ name, values }: {
|
|
5476
|
+
name?: string;
|
|
5477
|
+
values: string[];
|
|
5478
|
+
}) => void;
|
|
5479
|
+
/**
|
|
5480
|
+
* constraints the height of input to given number rows
|
|
5481
|
+
*
|
|
5482
|
+
* When set to expandable, input takes 1 row in the begining and expands to take 3 when active
|
|
5483
|
+
*
|
|
5484
|
+
* @default 'single'
|
|
5485
|
+
*/
|
|
5486
|
+
maxRows?: 'single' | 'multiple' | 'expandable';
|
|
5487
|
+
/**
|
|
5488
|
+
* Position of the label.
|
|
5489
|
+
*
|
|
5490
|
+
* Can be
|
|
5491
|
+
* - top: top positioned
|
|
5492
|
+
* - left: left positioned
|
|
5493
|
+
* - inside-input: added inside the input (not applicable for single select AutoComplete)
|
|
5494
|
+
*/
|
|
5495
|
+
labelPosition?: BaseInputProps['labelPosition'] | 'inside-input';
|
|
5496
|
+
};
|
|
5497
|
+
declare type DropdownInputTriggersPropsWithA11yLabel = {
|
|
5498
|
+
/**
|
|
5499
|
+
* Label to be shown for the input field
|
|
5500
|
+
*/
|
|
5501
|
+
label?: undefined;
|
|
5502
|
+
/**
|
|
5503
|
+
* Accessibility label for the input
|
|
5504
|
+
*/
|
|
5505
|
+
accessibilityLabel: string;
|
|
5506
|
+
};
|
|
5507
|
+
declare type DropdownInputTriggersPropsWithLabel = {
|
|
5508
|
+
/**
|
|
5509
|
+
* Label to be shown for the input field
|
|
5510
|
+
*/
|
|
5511
|
+
label: string;
|
|
5512
|
+
/**
|
|
5513
|
+
* Accessibility label for the input
|
|
5514
|
+
*/
|
|
5515
|
+
accessibilityLabel?: string;
|
|
5516
|
+
};
|
|
5517
|
+
declare type DropdownInputTriggersProps = (DropdownInputTriggersPropsWithA11yLabel | DropdownInputTriggersPropsWithLabel) & DropdownInputTriggersCommonProps;
|
|
5518
|
+
declare type SelectInputProps = DropdownInputTriggersProps;
|
|
5519
|
+
declare type AutoCompleteProps = DropdownInputTriggersCommonProps & {
|
|
5520
|
+
/**
|
|
5521
|
+
* Callback to handle the change in input element.
|
|
5522
|
+
*
|
|
5523
|
+
* This is different from onChange which handles the change in selection of item
|
|
5524
|
+
*/
|
|
5525
|
+
onInputValueChange?: BaseInputProps['onChange'];
|
|
5526
|
+
/**
|
|
5527
|
+
* Controlled state of value inside AutoComplete input
|
|
5528
|
+
*/
|
|
5529
|
+
inputValue?: BaseInputProps['value'];
|
|
5530
|
+
/**
|
|
5531
|
+
* Controlled state of filtering of items in AutoComplete.
|
|
5532
|
+
*
|
|
5533
|
+
* Checkout [Custom Filtering Example](https://blade.razorpay.com/?path=/story/components-dropdown-with-autocomplete--controlled-filtering)
|
|
5534
|
+
*
|
|
5535
|
+
*/
|
|
5536
|
+
filteredValues?: string[];
|
|
5537
|
+
};
|
|
5538
|
+
|
|
5463
5539
|
declare type IndicatorCommonProps = {
|
|
5464
5540
|
/**
|
|
5465
5541
|
* Sets the color tone
|
|
@@ -7237,6 +7313,10 @@ declare type CollapsibleBodyProps = {
|
|
|
7237
7313
|
declare const CollapsibleBody: ({ children, testID, _width }: CollapsibleBodyProps) => ReactElement;
|
|
7238
7314
|
|
|
7239
7315
|
declare type TooltipProps = {
|
|
7316
|
+
/**
|
|
7317
|
+
* Tooltip title
|
|
7318
|
+
*/
|
|
7319
|
+
title?: string;
|
|
7240
7320
|
/**
|
|
7241
7321
|
* Tooltip content
|
|
7242
7322
|
*/
|
|
@@ -7258,7 +7338,7 @@ declare type TooltipProps = {
|
|
|
7258
7338
|
zIndex?: number;
|
|
7259
7339
|
};
|
|
7260
7340
|
|
|
7261
|
-
declare const Tooltip: ({ content, children, placement, onOpenChange, zIndex, }: TooltipProps) => React__default.ReactElement;
|
|
7341
|
+
declare const Tooltip: ({ title, content, children, placement, onOpenChange, zIndex, }: TooltipProps) => React__default.ReactElement;
|
|
7262
7342
|
|
|
7263
7343
|
declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div", styled_components.DefaultTheme, Omit<Partial<PaddingProps & MarginProps & {
|
|
7264
7344
|
width: SpacingValueType | {
|
|
@@ -7864,4 +7944,119 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
|
|
|
7864
7944
|
tabIndex: -1;
|
|
7865
7945
|
}, "tabIndex" | "data-testid" | "data-blade-component">;
|
|
7866
7946
|
|
|
7867
|
-
|
|
7947
|
+
declare type PopoverProps = {
|
|
7948
|
+
/**
|
|
7949
|
+
* Popover title
|
|
7950
|
+
*/
|
|
7951
|
+
title?: string;
|
|
7952
|
+
/**
|
|
7953
|
+
* Leading content placed before the title
|
|
7954
|
+
*
|
|
7955
|
+
* Can be any blade icon or asset.
|
|
7956
|
+
*/
|
|
7957
|
+
titleLeading?: React__default.ReactNode;
|
|
7958
|
+
/**
|
|
7959
|
+
* Footer content
|
|
7960
|
+
*/
|
|
7961
|
+
footer?: React__default.ReactNode;
|
|
7962
|
+
/**
|
|
7963
|
+
* Popover content
|
|
7964
|
+
*/
|
|
7965
|
+
content: React__default.ReactElement;
|
|
7966
|
+
/**
|
|
7967
|
+
* Placement of Popover
|
|
7968
|
+
*
|
|
7969
|
+
* @default "top"
|
|
7970
|
+
*/
|
|
7971
|
+
placement?: UseFloatingOptions['placement'];
|
|
7972
|
+
/**
|
|
7973
|
+
* Popover trigger
|
|
7974
|
+
*/
|
|
7975
|
+
children: React__default.ReactElement;
|
|
7976
|
+
/**
|
|
7977
|
+
* Open state of Popover
|
|
7978
|
+
* If set to true makes the popover controlled
|
|
7979
|
+
*/
|
|
7980
|
+
isOpen?: boolean;
|
|
7981
|
+
/**
|
|
7982
|
+
* Uncontrolled state of the popover
|
|
7983
|
+
*/
|
|
7984
|
+
defaultIsOpen?: boolean;
|
|
7985
|
+
/**
|
|
7986
|
+
* Called when popover open state is changed, this can be used to detect when popover opens or closed
|
|
7987
|
+
*/
|
|
7988
|
+
onOpenChange?: ({ isOpen }: {
|
|
7989
|
+
isOpen: boolean;
|
|
7990
|
+
}) => void;
|
|
7991
|
+
/**
|
|
7992
|
+
* Sets the z-index of the Popover
|
|
7993
|
+
* @default 1000
|
|
7994
|
+
*/
|
|
7995
|
+
zIndex?: number;
|
|
7996
|
+
/**
|
|
7997
|
+
* The ref of the element that should receive focus when the popover opens.
|
|
7998
|
+
*
|
|
7999
|
+
* @default PopoverCloseButton
|
|
8000
|
+
*/
|
|
8001
|
+
initialFocusRef?: React__default.RefObject<any>;
|
|
8002
|
+
};
|
|
8003
|
+
/**
|
|
8004
|
+
* PopoverTriggerProps
|
|
8005
|
+
*
|
|
8006
|
+
* This can be useful when working with Custom Trigger Components
|
|
8007
|
+
*/
|
|
8008
|
+
declare type PopoverTriggerProps = {
|
|
8009
|
+
onMouseDown?: Platform.Select<{
|
|
8010
|
+
web: React__default.MouseEventHandler;
|
|
8011
|
+
native: undefined;
|
|
8012
|
+
}>;
|
|
8013
|
+
onPointerDown?: Platform.Select<{
|
|
8014
|
+
web: React__default.PointerEventHandler;
|
|
8015
|
+
native: undefined;
|
|
8016
|
+
}>;
|
|
8017
|
+
onKeyDown?: Platform.Select<{
|
|
8018
|
+
web: React__default.KeyboardEventHandler;
|
|
8019
|
+
native: undefined;
|
|
8020
|
+
}>;
|
|
8021
|
+
onKeyUp?: Platform.Select<{
|
|
8022
|
+
web: React__default.KeyboardEventHandler;
|
|
8023
|
+
native: undefined;
|
|
8024
|
+
}>;
|
|
8025
|
+
onClick?: Platform.Select<{
|
|
8026
|
+
web: React__default.MouseEventHandler;
|
|
8027
|
+
native: undefined;
|
|
8028
|
+
}>;
|
|
8029
|
+
onTouchEnd?: Platform.Select<{
|
|
8030
|
+
web: React__default.TouchEventHandler;
|
|
8031
|
+
native: (event: GestureResponderEvent) => void;
|
|
8032
|
+
}>;
|
|
8033
|
+
};
|
|
8034
|
+
|
|
8035
|
+
declare const Popover: ({ content, title, titleLeading, footer, children, placement, onOpenChange, zIndex, isOpen, defaultIsOpen, initialFocusRef, }: PopoverProps) => React__default.ReactElement;
|
|
8036
|
+
|
|
8037
|
+
declare type PopoverInteractiveWrapper = {
|
|
8038
|
+
/**
|
|
8039
|
+
* A label for screen readers to announce when the popover is opened.
|
|
8040
|
+
*/
|
|
8041
|
+
accessibilityLabel?: string;
|
|
8042
|
+
/**
|
|
8043
|
+
* The content of the PopoverInteractiveWrapper.
|
|
8044
|
+
*/
|
|
8045
|
+
children?: React__default.ReactNode;
|
|
8046
|
+
onClick?: (event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
|
|
8047
|
+
onKeyDown?: (event: React__default.KeyboardEvent<HTMLButtonElement>) => void;
|
|
8048
|
+
} & Omit<BaseBoxProps, 'as'>;
|
|
8049
|
+
declare const PopoverInteractiveWrapper: React__default.ForwardRefExoticComponent<{
|
|
8050
|
+
/**
|
|
8051
|
+
* A label for screen readers to announce when the popover is opened.
|
|
8052
|
+
*/
|
|
8053
|
+
accessibilityLabel?: string | undefined;
|
|
8054
|
+
/**
|
|
8055
|
+
* The content of the PopoverInteractiveWrapper.
|
|
8056
|
+
*/
|
|
8057
|
+
children?: React__default.ReactNode;
|
|
8058
|
+
onClick?: ((event: React__default.MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined;
|
|
8059
|
+
onKeyDown?: ((event: React__default.KeyboardEvent<HTMLButtonElement>) => void) | undefined;
|
|
8060
|
+
} & Omit<BaseBoxProps, "as"> & React__default.RefAttributes<HTMLButtonElement>>;
|
|
8061
|
+
|
|
8062
|
+
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, AutoCompleteProps, 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, Popover, PopoverInteractiveWrapper, PopoverProps, PopoverTriggerProps, 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, 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 };
|