@razorpay/blade 6.6.0 → 6.6.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @razorpay/blade
 
+## 6.6.2
+
+### Patch Changes
+
+- c7c66051: fix: ListItemLink alignment
+
+## 6.6.1
+
+### Patch Changes
+
+- fe89e6f6: fix: tree-shaking in blade components
+- 7817c9e3: feat(Box): add different types for `display` on react native
+- c6512ba0: fix(Alert, Card): set `box-sizing` as `border-box` for Alert and Card
+
 ## 6.6.0
 
 ### Minor Changes

package/build/components/index.d.ts

@@ -447,16 +447,6 @@ type ThemeTokens = {
   typography: TypographyWithPlatforms;
 };
 
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-
-/**
- * A type defining React component with additional static prop `componentId`
- */
-type WithComponentId<Props> = ((props: Props) => React__default.ReactElement) & {
-  componentId: string;
-};
-
 // All the WAI-ARIA 1.1 role attribute values from https://www.w3.org/TR/wai-aria-1.1/#role_definitions
 type AriaRoles =
   | Exclude<AccessibilityRole, 'header' | 'adjustable' | 'image' | 'none' | 'summary'>
@@ -1478,32 +1468,14 @@ declare type ActionListSectionProps = {
      */
     _hideDivider?: boolean;
 } & TestID$1;
-declare const ActionListSection: WithComponentId<ActionListSectionProps>;
-declare const ActionListItemIcon: WithComponentId<{
+declare const ActionListSection: ({ title, children, testID, _hideDivider, }: ActionListSectionProps) => JSX.Element;
+declare const ActionListItemIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
-declare const ActionListItemText: WithComponentId<{
+}) => JSX.Element;
+declare const ActionListItemText: ({ children, }: {
     children: StringChildrenType;
-}>;
-/**
- * ### ActionListItem
- *
- * Creates option inside `ActionList`.
- *
- * #### Usage
- *
- * ```jsx
- * <ActionList>
- *  <ActionListItem
- *    title="Home"
- *    value="home"
- *    leading={<ActionListItemIcon icon={HomeIcon} />}
- *    trailing={<ActionListItemText>⌘ + S</ActionListItemText>}
- *  />
- * </ActionList>
- * ```
- */
-declare const ActionListItem: WithComponentId<ActionListItemProps>;
+}) => React__default.ReactElement;
+declare const ActionListItem: (props: ActionListItemProps) => JSX.Element;
 
 declare type ActionListHeaderProps = {
     title: string;
@@ -1514,29 +1486,10 @@ declare type ActionListHeaderProps = {
      */
     leading?: React__default.ReactNode;
 } & TestID$1;
-/**
- * ### ActionListHeader
- *
- * To be used inside `ActionList`
- *
- * #### Usage
- *
- * ```jsx
- * <ActionListHeader
- *  title="Search Tips"
- *  leading={
- *    <ActionListHeaderIcon
- *      title="Recent Searches"
- *      icon={HistoryIcon}
- *    />
- *  }
- * />
- * ```
- */
-declare const ActionListHeader: WithComponentId<ActionListHeaderProps>;
-declare const ActionListHeaderIcon: WithComponentId<{
+declare const ActionListHeader: (props: ActionListHeaderProps) => JSX.Element;
+declare const ActionListHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
+}) => React__default.ReactElement;
 
 declare type ActionListFooterProps = {
     title?: string;
@@ -1553,31 +1506,10 @@ declare type ActionListFooterProps = {
      */
     trailing?: React__default.ReactNode;
 } & TestID$1;
-/**
- * ### ActionListFooter
- *
- * To be used inside `ActionList`
- *
- * #### Usage
- *
- * ```jsx
- * <ActionListFooter
- *  title="Search Tips"
- *  leading={<ActionListFooterIcon icon={SearchIcon} />}
- *  trailing={
- *    <Button
- *      onClick={() => { console.log('click') }}
- *    >
- *      Apply
- *    </Button>
- *  }
- * />
- * ```
- */
-declare const ActionListFooter: WithComponentId<ActionListFooterProps>;
-declare const ActionListFooterIcon: WithComponentId<{
+declare const ActionListFooter: (props: ActionListFooterProps) => JSX.Element;
+declare const ActionListFooterIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
+}) => React__default.ReactElement;
 
 declare type ActionListItemAssetProps = {
     /**
@@ -1589,7 +1521,7 @@ declare type ActionListItemAssetProps = {
      */
     alt: string;
 };
-declare const ActionListItemAsset: WithComponentId<ActionListItemAssetProps>;
+declare const ActionListItemAsset: (props: ActionListItemAssetProps) => React.ReactElement;
 
 declare type PrimaryAction = {
     text: string;
@@ -2231,7 +2163,29 @@ declare type LayoutProps = MakeObjectResponsive<{
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<CSSObject, 'display' | 'overflow' | 'overflowX' | 'overflowY'>>;
+} & Pick<CSSObject, 'overflow' | 'overflowX' | 'overflowY'> & Platform$1.Select<{
+    web: {
+        /**
+         *
+         * On Web, The **`display`** CSS property sets whether an element is treated as a block or inline element and the layout used for its children, such as flow layout, grid or flex.
+         *
+         * @see https://developer.mozilla.org/docs/Web/CSS/display
+         */
+        display: CSSObject['display'];
+    };
+    native: {
+        /**
+         *
+         *
+         * On React Native, **`display`** property sets whether an element can be `flex` or `none`
+         *
+         * @see https://reactnative.dev/docs/layout-props.html#display
+         *
+         * @default 'flex'
+         */
+        display: 'none' | 'flex';
+    };
+}>>;
 declare type FlexboxProps = MakeObjectResponsive<{
     /**
      * This uses the native gap property which might not work on older browsers.
@@ -2352,7 +2306,7 @@ declare const Card: ({ children, surfaceLevel, testID, ...styledProps }: CardPro
 declare type CardBodyProps = {
     children: React__default.ReactNode;
 } & TestID$1;
-declare const CardBody: WithComponentId<CardBodyProps>;
+declare const CardBody: ({ children, testID }: CardBodyProps) => React__default.ReactElement;
 
 declare type LinkCommonProps = {
     variant?: 'anchor' | 'button';
@@ -2556,23 +2510,23 @@ type CounterProps$1 = {
 } & TestID$1 &
   StyledPropsBlade;
 
-declare const CardHeaderIcon: WithComponentId<{
+declare const CardHeaderIcon: ({ icon }: {
     icon: IconComponent$1;
-}>;
-declare const CardHeaderCounter: WithComponentId<CounterProps$1>;
-declare const CardHeaderBadge: WithComponentId<BadgeProps>;
-declare const CardHeaderText: WithComponentId<TextProps$1<{
+}) => React__default.ReactElement;
+declare const CardHeaderCounter: (props: CounterProps$1) => React__default.ReactElement;
+declare const CardHeaderBadge: (props: BadgeProps) => React__default.ReactElement;
+declare const CardHeaderText: (props: TextProps$1<{
     variant: TextVariant$1;
-}>>;
-declare const CardHeaderLink: WithComponentId<LinkProps>;
+}>) => React__default.ReactElement;
+declare const CardHeaderLink: (props: LinkProps) => React__default.ReactElement;
 declare type CardHeaderIconButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'iconPosition' | 'isFullWidth' | 'children'> & {
     icon: IconComponent$1;
 };
-declare const CardHeaderIconButton: WithComponentId<CardHeaderIconButtonProps>;
+declare const CardHeaderIconButton: (props: CardHeaderIconButtonProps) => React__default.ReactElement;
 declare type CardHeaderProps = {
     children?: React__default.ReactNode;
 } & TestID$1;
-declare const CardHeader: WithComponentId<CardHeaderProps>;
+declare const CardHeader: ({ children, testID }: CardHeaderProps) => React__default.ReactElement;
 declare type CardHeaderLeadingProps = {
     title: string;
     subtitle?: string;
@@ -2589,7 +2543,7 @@ declare type CardHeaderLeadingProps = {
      */
     suffix?: React__default.ReactNode;
 };
-declare const CardHeaderLeading: WithComponentId<CardHeaderLeadingProps>;
+declare const CardHeaderLeading: ({ title, subtitle, prefix, suffix, }: CardHeaderLeadingProps) => React__default.ReactElement;
 declare type CardHeaderTrailingProps = {
     /**
      * Renders a visual ornament in card header trailing section
@@ -2598,7 +2552,7 @@ declare type CardHeaderTrailingProps = {
      */
     visual?: React__default.ReactNode;
 };
-declare const CardHeaderTrailing: WithComponentId<CardHeaderTrailingProps>;
+declare const CardHeaderTrailing: ({ visual }: CardHeaderTrailingProps) => React__default.ReactElement;
 
 declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel' | 'isLoading' | 'isDisabled' | 'icon' | 'iconPosition' | 'onClick'> & {
     text: ButtonProps['children'];
@@ -2606,19 +2560,19 @@ declare type CardFooterAction = Pick<ButtonProps, 'type' | 'accessibilityLabel'
 declare type CardFooterProps = {
     children?: React__default.ReactNode;
 } & TestID$1;
-declare const CardFooter: WithComponentId<CardFooterProps>;
+declare const CardFooter: ({ children, testID }: CardFooterProps) => React__default.ReactElement;
 declare type CardFooterLeadingProps = {
     title?: string;
     subtitle?: string;
 };
-declare const CardFooterLeading: WithComponentId<CardFooterLeadingProps>;
+declare const CardFooterLeading: ({ title, subtitle }: CardFooterLeadingProps) => React__default.ReactElement;
 declare type CardFooterTrailingProps = {
     actions?: {
         primary?: CardFooterAction;
         secondary?: CardFooterAction;
     };
 };
-declare const CardFooterTrailing: WithComponentId<CardFooterTrailingProps>;
+declare const CardFooterTrailing: ({ actions }: CardFooterTrailingProps) => React__default.ReactElement;
 
 declare type IconButtonProps = {
     /**
@@ -3030,43 +2984,12 @@ declare type DropdownProps = {
     selectionType?: 'single' | 'multiple';
     children: React__default.ReactNode[];
 } & StyledPropsBlade;
-/**
- * ### Dropdown component
- *
- * Dropdown component is generic component that controls the dropdown functionality.
- * It can be used with multiple triggers and mostly contains ActionList component inside it
- *
- * ---
- *
- * #### Usage
- *
- * ```jsx
- * <Dropdown selectionType="single">
- *  <SelectInput />
- *  <DropdownOverlay>
- *    <ActionList>
- *      <ActionListItem />
- *      <ActionListItem />
- *    </ActionList>
- *  </DropdownOverlay>
- * </Dropdown>
- * ```
- *
- * ---
- *
- * Checkout {@link https://blade.razorpay.com/?path=/docs/components-dropdown-with-select--with-single-select Dropdown Documentation}
- */
-declare const Dropdown: WithComponentId<DropdownProps>;
+declare const Dropdown: ({ children, selectionType, ...styledProps }: DropdownProps) => JSX.Element;
 
 declare type DropdownOverlayProps = {
     children: React__default.ReactNode;
 } & TestID$1;
-/**
- * Overlay of dropdown
- *
- * Wrap your ActionList within this component
- */
-declare const DropdownOverlay: WithComponentId<DropdownOverlayProps>;
+declare const DropdownOverlay: ({ children, testID }: DropdownOverlayProps) => JSX.Element;
 
 declare const ArrowDownIcon: IconComponent;
 
@@ -4384,10 +4307,7 @@ declare type ListItemProps = {
      */
     _itemNumber?: undefined;
 } & TestID$1;
-declare const ListItem: {
-    ({ children, icon, _itemNumber, testID, }: ListItemProps): React__default.ReactElement;
-    componentId: string;
-};
+declare const ListItem: ({ children, icon, _itemNumber, testID, }: ListItemProps) => React__default.ReactElement;
 
 declare type ListCommonProps = {
     /**
@@ -4417,36 +4337,10 @@ declare type ListWithoutIconProps = ListCommonProps & {
     icon?: undefined;
 };
 declare type ListProps = ListWithIconProps | ListWithoutIconProps;
-/**
- * List Component is used to display a set of related items that are composed of text/links. Each list item begins with a bullet or a number.
- *
- * ## Usage
- *
- * ```tsx
- *   <List
- *     variant='unordered'
- *     size='medium'
- *   >
- *    <ListItem>
- *      Item 1
- *      <List>
- *        <ListItem>Item 1.1</ListItem>
- *      </List>
- *    </ListItem>
- *    <ListItem>Item 2</ListItem>
- *  <List />
- * ```
- */
-declare const List: {
-    ({ variant, size, children, icon, testID, ...styledProps }: ListProps): React__default.ReactElement;
-    componentId: string;
-};
+declare const List: ({ variant, size, children, icon, testID, ...styledProps }: ListProps) => React__default.ReactElement;
 
 declare type ListItemLinkProps = Exclude<LinkProps, 'size' | 'variant' | 'isDisabled'>;
-declare const ListItemLink: {
-    ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps): React.ReactElement;
-    componentId: string;
-};
+declare const ListItemLink: ({ accessibilityLabel, children, href, icon, iconPosition, onClick, rel, target, testID, }: ListItemLinkProps) => React.ReactElement;
 
 declare type TitleProps = {
     size?: 'small' | 'medium' | 'large';
@@ -4598,10 +4492,7 @@ declare type CodeProps = {
 declare const Code: ({ children, size, testID, ...styledProps }: CodeProps) => JSX.Element;
 
 declare type ListItemCodeProps = Exclude<CodeProps, 'size'>;
-declare const ListItemCode: {
-    ({ children, testID }: ListItemCodeProps): React.ReactElement;
-    componentId: string;
-};
+declare const ListItemCode: ({ children, testID }: ListItemCodeProps) => React.ReactElement;
 
 declare type Assertiveness = AriaAttributes['liveRegion'];
 
@@ -4988,7 +4879,11 @@ declare const BaseBox: styled_components.StyledComponent<"div", styled_component
     width: SpacingValueType;
     minWidth: SpacingValueType;
     maxWidth: SpacingValueType;
-} & Pick<styled_components.CSSObject, "display" | "overflow" | "overflowX" | "overflowY">> & MakeObjectResponsive<{
+} & Pick<styled_components.CSSObject, "overflow" | "overflowX" | "overflowY"> & {
+    display: csstype.Property.Display | undefined;
+} & {
+    __brand__?: "platform-web" | undefined;
+}> & MakeObjectResponsive<{
     gap: SpacingValueType;
     rowGap: SpacingValueType;
     columnGap: SpacingValueType;