@razorpay/blade 10.0.0 → 10.1.0

package/build/components/index.d.ts

@@ -1313,6 +1313,7 @@ type FlexboxProps$1 = MakeObjectResponsive$1<
     | 'justifyContent'
     | 'justifySelf'
     | 'placeSelf'
+    | 'placeItems'
     | 'order'
   >
 >;
@@ -1395,6 +1396,7 @@ type CommonBoxVisualProps$1 = MakeObjectResponsive$1<
     | 'backgroundPosition'
     | 'backgroundOrigin'
     | 'backgroundRepeat'
+    | 'pointerEvents'
   > & {
       /**
        * Sets the elevation for Box
@@ -1501,6 +1503,31 @@ type BoxCallbackProps$1 = Omit<
   '__brand__'
 >;
 
+type BoxDragAndDropProps$1 = Omit<
+  Platform.Select<{
+    web: {
+      draggable: boolean;
+      onDragStart: React.DragEventHandler<HTMLElement>;
+      onDragEnter: React.DragEventHandler<HTMLElement>;
+      onDragLeave: React.DragEventHandler<HTMLElement>;
+      onDragOver: React.DragEventHandler<HTMLElement>;
+      onDragEnd: React.DragEventHandler<HTMLElement>;
+      onDrop: React.DragEventHandler<HTMLElement>;
+    };
+    native: Record<
+      | 'draggable'
+      | 'onDragStart'
+      | 'onDragEnter'
+      | 'onDragLeave'
+      | 'onDragOver'
+      | 'onDragEnd'
+      | 'onDrop',
+      undefined
+    >;
+  }>,
+  '__brand__'
+>;
+
 type BoxProps$1 = Partial<
   PaddingProps$1 &
     MarginProps$1 &
@@ -1509,6 +1536,7 @@ type BoxProps$1 = Partial<
     PositionProps$1 &
     GridProps$1 &
     BoxCallbackProps$1 &
+    BoxDragAndDropProps$1 &
     CommonBoxVisualProps$1 &
     BoxVisualProps$1 & {
       children?: React.ReactNode | React.ReactNode[];
@@ -2619,7 +2647,7 @@ declare type FlexboxProps = MakeObjectResponsive<{
      * @see https://developer.mozilla.org/docs/Web/CSS/flex
      */
     flex: string | number;
-} & PickCSSByPlatform<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'order'>>;
+} & PickCSSByPlatform<'flexWrap' | 'flexDirection' | 'flexGrow' | 'flexShrink' | 'flexBasis' | 'alignItems' | 'alignContent' | 'alignSelf' | 'justifyItems' | 'justifyContent' | 'justifySelf' | 'placeSelf' | 'placeItems' | 'order'>>;
 declare type PositionProps = MakeObjectResponsive<{
     top: SpacingValueType;
     right: SpacingValueType;
@@ -2649,7 +2677,7 @@ declare type CommonBoxVisualProps = MakeObjectResponsive<{
     borderTopRightRadius: keyof Border['radius'];
     borderBottomRightRadius: keyof Border['radius'];
     borderBottomLeftRadius: keyof Border['radius'];
-} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat'> & {
+} & PickCSSByPlatform<'backgroundImage' | 'backgroundSize' | 'backgroundPosition' | 'backgroundOrigin' | 'backgroundRepeat' | 'pointerEvents'> & {
     /**
      * Sets the elevation for Box
      *
@@ -2707,7 +2735,19 @@ declare type BoxCallbackProps = Omit<Platform.Select<{
     };
     native: Record<'onMouseOver' | 'onMouseEnter' | 'onMouseLeave' | 'onScroll', undefined>;
 }>, '__brand__'>;
-declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxCallbackProps & CommonBoxVisualProps & BoxVisualProps & {
+declare type BoxDragAndDropProps = Omit<Platform.Select<{
+    web: {
+        draggable: boolean;
+        onDragStart: React.DragEventHandler<HTMLElement>;
+        onDragEnter: React.DragEventHandler<HTMLElement>;
+        onDragLeave: React.DragEventHandler<HTMLElement>;
+        onDragOver: React.DragEventHandler<HTMLElement>;
+        onDragEnd: React.DragEventHandler<HTMLElement>;
+        onDrop: React.DragEventHandler<HTMLElement>;
+    };
+    native: Record<'draggable' | 'onDragStart' | 'onDragEnter' | 'onDragLeave' | 'onDragOver' | 'onDragEnd' | 'onDrop', undefined>;
+}>, '__brand__'>;
+declare type BoxProps = Partial<PaddingProps & MarginProps & LayoutProps & FlexboxProps & PositionProps & GridProps & BoxCallbackProps & BoxDragAndDropProps & CommonBoxVisualProps & BoxVisualProps & {
     children?: React.ReactNode | React.ReactNode[];
     tabIndex?: number;
 } & TestID$1>;
@@ -3009,6 +3049,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
     onMouseEnter: React__default.MouseEventHandler<HTMLElement>;
     onMouseLeave: React__default.MouseEventHandler<HTMLElement>;
     onScroll: React__default.UIEventHandler<HTMLElement>;
+} & {
+    draggable: boolean;
+    onDragStart: React__default.DragEventHandler<HTMLElement>;
+    onDragEnter: React__default.DragEventHandler<HTMLElement>;
+    onDragLeave: React__default.DragEventHandler<HTMLElement>;
+    onDragOver: React__default.DragEventHandler<HTMLElement>;
+    onDragEnd: React__default.DragEventHandler<HTMLElement>;
+    onDrop: React__default.DragEventHandler<HTMLElement>;
 } & {
     elevation?: ElevationLevels | {
         readonly base?: ElevationLevels | undefined;
@@ -3146,6 +3194,14 @@ declare const Box: React__default.ForwardRefExoticComponent<Partial<PaddingProps
         readonly l?: "none" | "thinner" | "thin" | "thick" | undefined;
         readonly xl?: "none" | "thinner" | "thin" | "thick" | undefined;
     };
+    pointerEvents?: csstype.Property.PointerEvents | {
+        readonly base?: csstype.Property.PointerEvents | undefined;
+        readonly xs?: csstype.Property.PointerEvents | undefined;
+        readonly s?: csstype.Property.PointerEvents | undefined;
+        readonly m?: csstype.Property.PointerEvents | undefined;
+        readonly l?: csstype.Property.PointerEvents | undefined;
+        readonly xl?: csstype.Property.PointerEvents | undefined;
+    } | undefined;
     backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
         readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
         readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;
@@ -6910,7 +6966,7 @@ declare type SkeletonProps = StyledPropsBlade & Pick<BaseBoxProps, 'width' | 'ma
     testID?: string;
 };
 
-declare const Skeleton: ({ contrast, width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, order, testID, ...props }: SkeletonProps) => React.ReactElement;
+declare const Skeleton: ({ contrast, width, maxWidth, minWidth, height, maxHeight, minHeight, borderRadius, flexWrap, flexDirection, flexGrow, flexShrink, flexBasis, alignItems, alignContent, alignSelf, justifyItems, justifyContent, justifySelf, placeSelf, placeItems, order, testID, ...props }: SkeletonProps) => React.ReactElement;
 
 declare type VisuallyHiddenProps = {
     children: React.ReactNode;
@@ -7844,6 +7900,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
     onMouseEnter: React$1.MouseEventHandler<HTMLElement>;
     onMouseLeave: React$1.MouseEventHandler<HTMLElement>;
     onScroll: React$1.UIEventHandler<HTMLElement>;
+} & {
+    draggable: boolean;
+    onDragStart: React$1.DragEventHandler<HTMLElement>;
+    onDragEnter: React$1.DragEventHandler<HTMLElement>;
+    onDragLeave: React$1.DragEventHandler<HTMLElement>;
+    onDragOver: React$1.DragEventHandler<HTMLElement>;
+    onDragEnd: React$1.DragEventHandler<HTMLElement>;
+    onDrop: React$1.DragEventHandler<HTMLElement>;
 } & {
     elevation?: ElevationLevels | {
         readonly base?: ElevationLevels | undefined;
@@ -7981,6 +8045,14 @@ declare const TooltipInteractiveWrapper: styled_components.StyledComponent<"div"
         readonly l?: "none" | "thinner" | "thin" | "thick" | undefined;
         readonly xl?: "none" | "thinner" | "thin" | "thick" | undefined;
     };
+    pointerEvents?: csstype.Property.PointerEvents | {
+        readonly base?: csstype.Property.PointerEvents | undefined;
+        readonly xs?: csstype.Property.PointerEvents | undefined;
+        readonly s?: csstype.Property.PointerEvents | undefined;
+        readonly m?: csstype.Property.PointerEvents | undefined;
+        readonly l?: csstype.Property.PointerEvents | undefined;
+        readonly xl?: csstype.Property.PointerEvents | undefined;
+    } | undefined;
     backgroundPosition?: csstype.Property.BackgroundPosition<string | number> | {
         readonly base?: csstype.Property.BackgroundPosition<string | number> | undefined;
         readonly xs?: csstype.Property.BackgroundPosition<string | number> | undefined;

package/build/components/index.development.web.js

@@ -3431,6 +3431,8 @@ var getAllProps = function getAllProps(props, breakpoint) {
     justifyItems: getResponsiveValue(props.justifyItems, breakpoint),
     justifyContent: getResponsiveValue(props.justifyContent, breakpoint),
     justifySelf: getResponsiveValue(props.justifySelf, breakpoint),
+    placeSelf: getResponsiveValue(props.placeSelf, breakpoint),
+    placeItems: getResponsiveValue(props.placeItems, breakpoint),
     order: getResponsiveValue(props.order, breakpoint),
     position: getResponsiveValue(props.position, breakpoint),
     zIndex: getResponsiveValue(props.zIndex, breakpoint),
@@ -4224,6 +4226,7 @@ var makeBoxProps = function makeBoxProps(props) {
     justifyContent: props.justifyContent,
     justifySelf: props.justifySelf,
     placeSelf: props.placeSelf,
+    placeItems: props.placeItems,
     order: props.order,
     // Grid
     grid: props.grid,
@@ -4295,6 +4298,15 @@ var makeBoxProps = function makeBoxProps(props) {
     onMouseLeave: props.onMouseLeave,
     onMouseOver: props.onMouseOver,
     onScroll: props.onScroll,
+    // Drag and Drop
+    draggable: props.draggable,
+    onDragStart: props.onDragStart,
+    onDragEnd: props.onDragEnd,
+    onDragEnter: props.onDragEnter,
+    onDragLeave: props.onDragLeave,
+    onDragOver: props.onDragOver,
+    onDrop: props.onDrop,
+    pointerEvents: props.pointerEvents,
     children: props.children,
     tabIndex: props.tabIndex,
     as: isReactNative$4() ? undefined : props.as // as is not supported on react-native
@@ -23922,7 +23934,7 @@ var PulseAnimation = /*#__PURE__*/styled(BaseBox).withConfig({
   }), duration, totalDuration, duration, easing, easing);
 });
 
-var _excluded$4 = ["contrast", "width", "maxWidth", "minWidth", "height", "maxHeight", "minHeight", "borderRadius", "flexWrap", "flexDirection", "flexGrow", "flexShrink", "flexBasis", "alignItems", "alignContent", "alignSelf", "justifyItems", "justifyContent", "justifySelf", "placeSelf", "order", "testID"];
+var _excluded$4 = ["contrast", "width", "maxWidth", "minWidth", "height", "maxHeight", "minHeight", "borderRadius", "flexWrap", "flexDirection", "flexGrow", "flexShrink", "flexBasis", "alignItems", "alignContent", "alignSelf", "justifyItems", "justifyContent", "justifySelf", "placeSelf", "placeItems", "order", "testID"];
 function ownKeys$l(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$k(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$l(Object(source), !0).forEach(function (key) { _defineProperty$1(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$l(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 var Skeleton = function Skeleton(_ref) {
@@ -23947,6 +23959,7 @@ var Skeleton = function Skeleton(_ref) {
     justifyContent = _ref.justifyContent,
     justifySelf = _ref.justifySelf,
     placeSelf = _ref.placeSelf,
+    placeItems = _ref.placeItems,
     order = _ref.order,
     testID = _ref.testID,
     props = _objectWithoutProperties$1(_ref, _excluded$4);
@@ -23968,6 +23981,7 @@ var Skeleton = function Skeleton(_ref) {
     justifyContent: justifyContent,
     justifySelf: justifySelf,
     placeSelf: placeSelf,
+    placeItems: placeItems,
     order: order,
     contrast: contrast
   }, getStyledProps(props)), makeAccessible({