@razorpay/blade 11.6.2 → 11.7.0

package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js

@@ -1,5 +1,5 @@
-import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import React__default from 'react';
 import '../Divider/index.js';
 import '../Box/BaseBox/index.js';
@@ -31,39 +31,78 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 
 function ownKeys(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(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var centerBoxProps = {
+var commonCenterBoxProps = {
   display: 'flex',
   alignItems: 'center',
-  justifyContent: 'center',
-  // We want to align title, icon, titleSuffix, trailing, closeButton to baseline
-  // But we also want to keep them center aligned to each other
-  // So we add a virtual Box around these slots with 28px and center align them to that box
-  // We have done similar thing in figma as well (which is where this 28px comes from)
-  height: '28px'
+  justifyContent: 'center'
+};
+var centerBoxProps = {
+  large: _objectSpread(_objectSpread({}, commonCenterBoxProps), {}, {
+    // We want to align title, icon, titleSuffix, trailing, closeButton to baseline
+    // But we also want to keep them center aligned to each other
+    // So we add a virtual Box around these slots with 28px and center align them to that box
+    // We have done similar thing in figma as well (which is where this 28px comes from)
+    height: '28px'
+  }),
+  medium: _objectSpread(_objectSpread({}, commonCenterBoxProps), {}, {
+    height: '20px'
+  })
+};
+var sizeTokensMapping = {
+  large: {
+    title: 'large'
+  },
+  medium: {
+    title: 'medium'
+  }
 };
 
 // prop restriction map for corresponding sub components
 var propRestrictionMap = {
-  Button: {
-    size: 'xsmall',
-    variant: 'tertiary'
-  },
-  Badge: {
-    size: 'medium'
-  },
-  Link: {
-    size: 'medium'
-  },
-  Text: {
-    size: 'medium',
-    variant: 'body'
+  large: {
+    Button: {
+      size: 'xsmall',
+      variant: 'tertiary'
+    },
+    Badge: {
+      size: 'medium'
+    },
+    Link: {
+      size: 'medium'
+    },
+    Text: {
+      size: 'medium',
+      variant: 'body'
+    },
+    Amount: {
+      type: 'body',
+      size: 'medium'
+    }
   },
-  Amount: {
-    type: 'body',
-    size: 'medium'
+  medium: {
+    Button: {
+      size: 'xsmall',
+      variant: 'tertiary'
+    },
+    Badge: {
+      size: 'small'
+    },
+    Link: {
+      size: 'small'
+    },
+    Text: {
+      size: 'small',
+      variant: 'body'
+    },
+    Amount: {
+      type: 'body',
+      size: 'small'
+    }
   }
 };
-var useTrailingRestriction = function useTrailingRestriction(trailing) {
+var useTrailingRestriction = function useTrailingRestriction(_ref) {
+  var trailing = _ref.trailing,
+    size = _ref.size;
   var _React$useState = React__default.useState(null),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     validatedTrailingComponent = _React$useState2[0],
@@ -73,8 +112,8 @@ var useTrailingRestriction = function useTrailingRestriction(trailing) {
   React__default.useEffect(function () {
     if ( /*#__PURE__*/React__default.isValidElement(trailing)) {
       var trailingComponentType = getComponentId(trailing);
-      var restrictedProps = propRestrictionMap[trailingComponentType];
-      var allowedComponents = Object.keys(propRestrictionMap);
+      var restrictedProps = propRestrictionMap[size][trailingComponentType];
+      var allowedComponents = Object.keys(propRestrictionMap[size]);
       if (false) {
         if (!restrictedProps) {
           throwBladeError({
@@ -83,7 +122,7 @@ var useTrailingRestriction = function useTrailingRestriction(trailing) {
           });
         }
       }
-      var restrictedPropKeys = Object.keys(propRestrictionMap[trailingComponentType]);
+      var restrictedPropKeys = Object.keys(propRestrictionMap[size][trailingComponentType]);
       for (var _i = 0, _restrictedPropKeys = restrictedPropKeys; _i < _restrictedPropKeys.length; _i++) {
         var _trailing$props;
         var prop = _restrictedPropKeys[_i];
@@ -97,37 +136,46 @@ var useTrailingRestriction = function useTrailingRestriction(trailing) {
       }
       setValidatedTrailingComponent( /*#__PURE__*/React__default.cloneElement(trailing, restrictedProps));
     }
-  }, [trailing]);
+  }, [trailing, size]);
   return validatedTrailingComponent;
 };
-var _BaseHeader = function _BaseHeader(_ref) {
-  var title = _ref.title,
-    subtitle = _ref.subtitle,
-    leading = _ref.leading,
-    titleSuffix = _ref.titleSuffix,
-    trailing = _ref.trailing,
-    _ref$showDivider = _ref.showDivider,
-    showDivider = _ref$showDivider === void 0 ? true : _ref$showDivider,
-    _ref$showBackButton = _ref.showBackButton,
-    showBackButton = _ref$showBackButton === void 0 ? false : _ref$showBackButton,
-    _ref$showCloseButton = _ref.showCloseButton,
-    showCloseButton = _ref$showCloseButton === void 0 ? true : _ref$showCloseButton,
-    onBackButtonClick = _ref.onBackButtonClick,
-    onCloseButtonClick = _ref.onCloseButtonClick,
-    closeButtonRef = _ref.closeButtonRef,
-    backButtonRef = _ref.backButtonRef,
-    testID = _ref.testID,
-    onClickCapture = _ref.onClickCapture,
-    onKeyDown = _ref.onKeyDown,
-    onKeyUp = _ref.onKeyUp,
-    onLostPointerCapture = _ref.onLostPointerCapture,
-    onPointerCancel = _ref.onPointerCancel,
-    onPointerDown = _ref.onPointerDown,
-    onPointerMove = _ref.onPointerMove,
-    onPointerUp = _ref.onPointerUp,
-    metaComponentName = _ref.metaComponentName,
-    children = _ref.children;
-  var validatedTrailingComponent = useTrailingRestriction(trailing);
+var _BaseHeader = function _BaseHeader(_ref2) {
+  var title = _ref2.title,
+    subtitle = _ref2.subtitle,
+    leading = _ref2.leading,
+    titleSuffix = _ref2.titleSuffix,
+    trailing = _ref2.trailing,
+    _ref2$showDivider = _ref2.showDivider,
+    showDivider = _ref2$showDivider === void 0 ? true : _ref2$showDivider,
+    _ref2$showBackButton = _ref2.showBackButton,
+    showBackButton = _ref2$showBackButton === void 0 ? false : _ref2$showBackButton,
+    _ref2$showCloseButton = _ref2.showCloseButton,
+    showCloseButton = _ref2$showCloseButton === void 0 ? true : _ref2$showCloseButton,
+    onBackButtonClick = _ref2.onBackButtonClick,
+    onCloseButtonClick = _ref2.onCloseButtonClick,
+    closeButtonRef = _ref2.closeButtonRef,
+    backButtonRef = _ref2.backButtonRef,
+    testID = _ref2.testID,
+    onClickCapture = _ref2.onClickCapture,
+    onKeyDown = _ref2.onKeyDown,
+    onKeyUp = _ref2.onKeyUp,
+    onLostPointerCapture = _ref2.onLostPointerCapture,
+    onPointerCancel = _ref2.onPointerCancel,
+    onPointerDown = _ref2.onPointerDown,
+    onPointerMove = _ref2.onPointerMove,
+    onPointerUp = _ref2.onPointerUp,
+    metaComponentName = _ref2.metaComponentName,
+    paddingX = _ref2.paddingX,
+    marginY = _ref2.marginY,
+    _ref2$size = _ref2.size,
+    size$1 = _ref2$size === void 0 ? 'large' : _ref2$size,
+    isDisabled = _ref2.isDisabled,
+    children = _ref2.children,
+    trailingInteractionElement = _ref2.trailingInteractionElement;
+  var validatedTrailingComponent = useTrailingRestriction({
+    trailing: trailing,
+    size: size$1
+  });
   var shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;
   var webOnlyEventHandlers = isReactNative() ? {} : {
     onClickCapture: onClickCapture,
@@ -144,11 +192,11 @@ var _BaseHeader = function _BaseHeader(_ref) {
     testID: testID
   })), {}, {
     children: [/*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
-      marginY: {
+      marginY: marginY !== null && marginY !== void 0 ? marginY : {
         base: 'spacing.5',
         m: 'spacing.6'
       },
-      paddingX: {
+      paddingX: paddingX !== null && paddingX !== void 0 ? paddingX : {
         base: 'spacing.5',
         m: 'spacing.6'
       },
@@ -161,7 +209,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
         children: [showBackButton ? /*#__PURE__*/jsx(BaseBox, {
           overflow: "visible",
           marginRight: "spacing.5",
-          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
             children: /*#__PURE__*/jsx(IconButton, {
               ref: backButtonRef,
               size: "large",
@@ -181,7 +229,7 @@ var _BaseHeader = function _BaseHeader(_ref) {
           alignItems: "flex-start",
           children: [leading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
             marginRight: "spacing.3"
-          }, centerBoxProps), {}, {
+          }, centerBoxProps[size$1]), {}, {
             children: leading
           })) : null, /*#__PURE__*/jsxs(BaseBox, {
             flex: "auto",
@@ -195,14 +243,14 @@ var _BaseHeader = function _BaseHeader(_ref) {
               display: "flex",
               flexDirection: "row",
               children: [title ? /*#__PURE__*/jsx(Text, {
-                size: "large",
+                size: sizeTokensMapping[size$1].title,
                 marginTop: makeSize(size['1']),
                 weight: "semibold",
-                color: "surface.text.gray.normal",
+                color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal',
                 children: title
               }) : null, titleSuffix && /*#__PURE__*/jsx(BaseBox, {
                 marginLeft: "spacing.3",
-                children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+                children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
                   children: titleSuffix
                 }))
               })]
@@ -210,16 +258,16 @@ var _BaseHeader = function _BaseHeader(_ref) {
               variant: "body",
               size: "small",
               weight: "regular",
-              color: "surface.text.gray.muted",
+              color: isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted',
               children: subtitle
             }) : null]
           })]
         }), validatedTrailingComponent ? /*#__PURE__*/jsx(BaseBox, {
           marginRight: "spacing.5",
-          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
             children: validatedTrailingComponent
           }))
-        }) : null, showCloseButton ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps), {}, {
+        }) : null, showCloseButton ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
           children: /*#__PURE__*/jsx(IconButton, {
             ref: closeButtonRef,
             size: "large",
@@ -229,8 +277,23 @@ var _BaseHeader = function _BaseHeader(_ref) {
               return onCloseButtonClick === null || onCloseButtonClick === void 0 ? void 0 : onCloseButtonClick();
             }
           })
+        })) : null, trailingInteractionElement && !children ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
+          children: trailingInteractionElement
+        })) : null]
+      }), /*#__PURE__*/jsxs(BaseBox, {
+        display: "flex",
+        width: "100%",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        children: [/*#__PURE__*/jsx(Box, {
+          children: children
+        }), trailingInteractionElement && children ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+          alignSelf: "flex-start"
+        }, centerBoxProps[size$1]), {}, {
+          children: trailingInteractionElement
         })) : null]
-      }), children]
+      })]
     })), showDivider ? /*#__PURE__*/jsx(Divider, {}) : null]
   }));
 };

package/build/lib/web/production/components/BaseHeaderFooter/BaseHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseHeader.js","sources":["../../../../../../src/components/BaseHeaderFooter/BaseHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport type { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ChevronLeftIcon, CloseIcon } from '~components/Icons';\nimport type { TestID } from '~utils/types';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { isReactNative, makeSize } from '~utils';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { logger, throwBladeError } from '~utils/logger';\nimport { size } from '~tokens/global';\n\ntype BaseHeaderProps = {\n  title?: string;\n  subtitle?: string;\n  /**\n   * Leading part of the header placed at the left most side of the header\n   */\n  leading?: React.ReactNode;\n  /**\n   * Trailing part of the header placed at the right most side of the header\n   */\n  trailing?: React.ReactNode;\n  /**\n   * Placed adjacent to the title text\n   */\n  titleSuffix?: React.ReactNode;\n  /**\n   * @default true\n   */\n  showDivider?: boolean;\n  /**\n   * @default false\n   */\n  showBackButton?: boolean;\n  /**\n   * @default true\n   */\n  showCloseButton?: boolean;\n  onCloseButtonClick?: () => void;\n  onBackButtonClick?: () => void;\n  closeButtonRef?: React.MutableRefObject<any>;\n  backButtonRef?: React.MutableRefObject<any>;\n  metaComponentName?: string;\n  /**\n   * inner child of BottomSheetHeader. Meant to be used for AutoComplete only\n   */\n  children?: React.ReactElement;\n} & Pick<\n  ReactDOMAttributes,\n  | 'onClickCapture'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onLostPointerCapture'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerMove'\n  | 'onPointerUp'\n> &\n  TestID;\n\ntype TrailingComponents = 'Button' | 'Badge' | 'Link' | 'Text' | 'Amount';\n\nconst centerBoxProps: BoxProps = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  // We want to align title, icon, titleSuffix, trailing, closeButton to baseline\n  // But we also want to keep them center aligned to each other\n  // So we add a virtual Box around these slots with 28px and center align them to that box\n  // We have done similar thing in figma as well (which is where this 28px comes from)\n  height: '28px',\n};\n\n// prop restriction map for corresponding sub components\nconst propRestrictionMap = {\n  Button: {\n    size: 'xsmall',\n    variant: 'tertiary',\n  },\n  Badge: {\n    size: 'medium',\n  },\n  Link: {\n    size: 'medium',\n  },\n  Text: {\n    size: 'medium',\n    variant: 'body',\n  },\n  Amount: {\n    type: 'body',\n    size: 'medium',\n  },\n} as const;\n\nconst useTrailingRestriction = (trailing: React.ReactNode): React.ReactNode => {\n  const [\n    validatedTrailingComponent,\n    setValidatedTrailingComponent,\n  ] = React.useState<React.ReactElement | null>(null);\n\n  // validate and restrict sub component props in trailing prop\n  React.useEffect(() => {\n    if (React.isValidElement(trailing)) {\n      const trailingComponentType = getComponentId(trailing) as TrailingComponents;\n      const restrictedProps = propRestrictionMap[trailingComponentType];\n      const allowedComponents = Object.keys(propRestrictionMap);\n      if (__DEV__) {\n        if (!restrictedProps) {\n          throwBladeError({\n            message: `Only one of \\`${allowedComponents.join(\n              ', ',\n            )}\\` component is accepted as trailing`,\n            moduleName: 'Header',\n          });\n        }\n      }\n\n      const restrictedPropKeys = Object.keys(propRestrictionMap[trailingComponentType]);\n      for (const prop of restrictedPropKeys) {\n        if (trailing?.props?.hasOwnProperty(prop)) {\n          logger({\n            message: `Do not pass \"${prop}\" to \"${trailingComponentType}\" while inside Header trailing, because we override it.`,\n            moduleName: 'Header',\n            type: 'warn',\n          });\n        }\n      }\n      setValidatedTrailingComponent(\n        React.cloneElement(trailing as React.ReactElement, restrictedProps),\n      );\n    }\n  }, [trailing]);\n\n  return validatedTrailingComponent;\n};\n\nconst _BaseHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  showDivider = true,\n  showBackButton = false,\n  showCloseButton = true,\n  onBackButtonClick,\n  onCloseButtonClick,\n  closeButtonRef,\n  backButtonRef,\n  testID,\n  onClickCapture,\n  onKeyDown,\n  onKeyUp,\n  onLostPointerCapture,\n  onPointerCancel,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  metaComponentName,\n  children,\n}: BaseHeaderProps): React.ReactElement => {\n  const validatedTrailingComponent = useTrailingRestriction(trailing);\n  const shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;\n\n  const webOnlyEventHandlers: Record<string, any> = isReactNative()\n    ? {}\n    : {\n        onClickCapture,\n        onKeyDown,\n        onKeyUp,\n        onLostPointerCapture,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n      };\n\n  return (\n    <BaseBox {...metaAttribute({ name: metaComponentName, testID })}>\n      <BaseBox\n        marginY={{ base: 'spacing.5', m: 'spacing.6' }}\n        paddingX={{ base: 'spacing.5', m: 'spacing.6' }}\n        touchAction=\"none\"\n        {...webOnlyEventHandlers}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" userSelect=\"none\">\n          {showBackButton ? (\n            <BaseBox overflow=\"visible\" marginRight=\"spacing.5\">\n              <Box {...centerBoxProps}>\n                <IconButton\n                  ref={backButtonRef}\n                  size=\"large\"\n                  icon={ChevronLeftIcon}\n                  onClick={() => onBackButtonClick?.()}\n                  accessibilityLabel=\"Back\"\n                />\n              </Box>\n            </BaseBox>\n          ) : null}\n          <BaseBox\n            paddingRight=\"spacing.5\"\n            marginRight=\"auto\"\n            flex=\"auto\"\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"flex-start\"\n          >\n            {leading ? (\n              <BaseBox marginRight=\"spacing.3\" {...centerBoxProps}>\n                {leading}\n              </BaseBox>\n            ) : null}\n            <BaseBox flex=\"auto\">\n              <BaseBox\n                // Explicitly setting maxWidth in React Native because text is not being wrapped properly when multiple fix width components are rendered in header\n                // In web, flex containers seem to work a expected\n                // @todo: resolve this if we figure out some better solution later\n                maxWidth={isReactNative() && shouldWrapTitle ? '100px' : undefined}\n                flexShrink={0}\n                display=\"flex\"\n                flexDirection=\"row\"\n              >\n                {title ? (\n                  <Text\n                    size=\"large\"\n                    marginTop={makeSize(size['1'])}\n                    weight=\"semibold\"\n                    color=\"surface.text.gray.normal\"\n                  >\n                    {title}\n                  </Text>\n                ) : null}\n                {titleSuffix && (\n                  <BaseBox marginLeft=\"spacing.3\">\n                    <Box {...centerBoxProps}>{titleSuffix}</Box>\n                  </BaseBox>\n                )}\n              </BaseBox>\n              {subtitle ? (\n                <Text variant=\"body\" size=\"small\" weight=\"regular\" color=\"surface.text.gray.muted\">\n                  {subtitle}\n                </Text>\n              ) : null}\n            </BaseBox>\n          </BaseBox>\n          {validatedTrailingComponent ? (\n            <BaseBox marginRight=\"spacing.5\">\n              <Box {...centerBoxProps}>{validatedTrailingComponent}</Box>\n            </BaseBox>\n          ) : null}\n          {showCloseButton ? (\n            <Box {...centerBoxProps}>\n              <IconButton\n                ref={closeButtonRef}\n                size=\"large\"\n                icon={CloseIcon}\n                accessibilityLabel=\"Close\"\n                onClick={() => onCloseButtonClick?.()}\n              />\n            </Box>\n          ) : null}\n        </BaseBox>\n        {children}\n      </BaseBox>\n      {showDivider ? <Divider /> : null}\n    </BaseBox>\n  );\n};\n\nconst BaseHeader = assignWithoutSideEffects(_BaseHeader, {\n  componentId: 'BaseHeader',\n});\n\nexport type { BaseHeaderProps };\nexport { BaseHeader };\n"],"names":["centerBoxProps","display","alignItems","justifyContent","height","propRestrictionMap","Button","size","variant","Badge","Link","Text","Amount","type","useTrailingRestriction","trailing","_React$useState","React","useState","_React$useState2","_slicedToArray","validatedTrailingComponent","setValidatedTrailingComponent","useEffect","isValidElement","trailingComponentType","getComponentId","restrictedProps","allowedComponents","Object","keys","throwBladeError","message","concat","join","moduleName","restrictedPropKeys","_i","_restrictedPropKeys","length","_trailing$props","prop","props","hasOwnProperty","logger","cloneElement","_BaseHeader","_ref","title","subtitle","leading","titleSuffix","_ref$showDivider","showDivider","_ref$showBackButton","showBackButton","_ref$showCloseButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","backButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","children","shouldWrapTitle","webOnlyEventHandlers","isReactNative","_jsxs","BaseBox","_objectSpread","metaAttribute","name","marginY","base","m","paddingX","touchAction","flexDirection","userSelect","_jsx","overflow","marginRight","Box","IconButton","ref","icon","ChevronLeftIcon","onClick","accessibilityLabel","paddingRight","flex","maxWidth","undefined","flexShrink","marginTop","makeSize","weight","color","marginLeft","CloseIcon","Divider","BaseHeader","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"BaseHeader.js","sources":["../../../../../../src/components/BaseHeaderFooter/BaseHeader.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport type { ReactDOMAttributes } from '@use-gesture/react/dist/declarations/src/types';\nimport { Divider } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ChevronLeftIcon, CloseIcon } from '~components/Icons';\nimport type { TestID } from '~utils/types';\nimport type { BoxProps } from '~components/Box';\nimport { Box } from '~components/Box';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { getComponentId } from '~utils/isValidAllowedChildren';\nimport { isReactNative, makeSize } from '~utils';\nimport { metaAttribute } from '~utils/metaAttribute';\nimport { logger, throwBladeError } from '~utils/logger';\nimport { size as sizeToken } from '~tokens/global';\n\ntype BaseHeaderProps = {\n  title?: string;\n  subtitle?: string;\n  /**\n   * Leading part of the header placed at the left most side of the header\n   */\n  leading?: React.ReactNode;\n  /**\n   * Trailing part of the header placed at the right most side of the header\n   */\n  trailing?: React.ReactNode;\n  /**\n   * Placed adjacent to the title text\n   */\n  titleSuffix?: React.ReactNode;\n  /**\n   * @default true\n   */\n  showDivider?: boolean;\n  /**\n   * @default false\n   */\n  showBackButton?: boolean;\n\n  /**\n   * Slot for rendering any trailing interaction element into BaseHeader.\n   *\n   * E.g. Used in accordion to render CollapsibleChevronIcon\n   */\n  trailingInteractionElement?: React.ReactNode;\n\n  /**\n   * Decides size of the Header\n   */\n  size?: 'large' | 'medium';\n  /**\n   * @default true\n   */\n  showCloseButton?: boolean;\n\n  /**\n   * Disabled state of BaseHeader\n   *\n   * @default false\n   */\n  isDisabled?: boolean;\n\n  paddingX?: BoxProps['paddingX'];\n  marginY?: BoxProps['marginY'];\n  onCloseButtonClick?: () => void;\n  onBackButtonClick?: () => void;\n  closeButtonRef?: React.MutableRefObject<any>;\n  backButtonRef?: React.MutableRefObject<any>;\n  metaComponentName?: string;\n  /**\n   * inner child of BottomSheetHeader. Meant to be used for AutoComplete only\n   */\n  children?: React.ReactElement | React.ReactElement[];\n} & Pick<\n  ReactDOMAttributes,\n  | 'onClickCapture'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onLostPointerCapture'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerMove'\n  | 'onPointerUp'\n> &\n  TestID;\n\ntype TrailingComponents = 'Button' | 'Badge' | 'Link' | 'Text' | 'Amount';\n\nconst commonCenterBoxProps: BoxProps = {\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n};\n\nconst centerBoxProps: { large: BoxProps; medium: BoxProps } = {\n  large: {\n    ...commonCenterBoxProps,\n    // We want to align title, icon, titleSuffix, trailing, closeButton to baseline\n    // But we also want to keep them center aligned to each other\n    // So we add a virtual Box around these slots with 28px and center align them to that box\n    // We have done similar thing in figma as well (which is where this 28px comes from)\n    height: '28px',\n  },\n  medium: {\n    ...commonCenterBoxProps,\n    height: '20px',\n  },\n};\n\nconst sizeTokensMapping = {\n  large: {\n    title: 'large',\n  },\n  medium: {\n    title: 'medium',\n  },\n} as const;\n\n// prop restriction map for corresponding sub components\nconst propRestrictionMap = {\n  large: {\n    Button: {\n      size: 'xsmall',\n      variant: 'tertiary',\n    },\n    Badge: {\n      size: 'medium',\n    },\n    Link: {\n      size: 'medium',\n    },\n    Text: {\n      size: 'medium',\n      variant: 'body',\n    },\n    Amount: {\n      type: 'body',\n      size: 'medium',\n    },\n  },\n  medium: {\n    Button: {\n      size: 'xsmall',\n      variant: 'tertiary',\n    },\n    Badge: {\n      size: 'small',\n    },\n    Link: {\n      size: 'small',\n    },\n    Text: {\n      size: 'small',\n      variant: 'body',\n    },\n    Amount: {\n      type: 'body',\n      size: 'small',\n    },\n  },\n} as const;\n\nconst useTrailingRestriction = ({\n  trailing,\n  size,\n}: {\n  size: NonNullable<BaseHeaderProps['size']>;\n  trailing: BaseHeaderProps['trailing'];\n}): React.ReactNode => {\n  const [\n    validatedTrailingComponent,\n    setValidatedTrailingComponent,\n  ] = React.useState<React.ReactElement | null>(null);\n\n  // validate and restrict sub component props in trailing prop\n  React.useEffect(() => {\n    if (React.isValidElement(trailing)) {\n      const trailingComponentType = getComponentId(trailing) as TrailingComponents;\n      const restrictedProps = propRestrictionMap[size][trailingComponentType];\n      const allowedComponents = Object.keys(propRestrictionMap[size]);\n      if (__DEV__) {\n        if (!restrictedProps) {\n          throwBladeError({\n            message: `Only one of \\`${allowedComponents.join(\n              ', ',\n            )}\\` component is accepted as trailing`,\n            moduleName: 'Header',\n          });\n        }\n      }\n\n      const restrictedPropKeys = Object.keys(propRestrictionMap[size][trailingComponentType]);\n      for (const prop of restrictedPropKeys) {\n        if (trailing?.props?.hasOwnProperty(prop)) {\n          logger({\n            message: `Do not pass \"${prop}\" to \"${trailingComponentType}\" while inside Header trailing, because we override it.`,\n            moduleName: 'Header',\n            type: 'warn',\n          });\n        }\n      }\n      setValidatedTrailingComponent(\n        React.cloneElement(trailing as React.ReactElement, restrictedProps),\n      );\n    }\n  }, [trailing, size]);\n\n  return validatedTrailingComponent;\n};\n\nconst _BaseHeader = ({\n  title,\n  subtitle,\n  leading,\n  titleSuffix,\n  trailing,\n  showDivider = true,\n  showBackButton = false,\n  showCloseButton = true,\n  onBackButtonClick,\n  onCloseButtonClick,\n  closeButtonRef,\n  backButtonRef,\n  testID,\n  onClickCapture,\n  onKeyDown,\n  onKeyUp,\n  onLostPointerCapture,\n  onPointerCancel,\n  onPointerDown,\n  onPointerMove,\n  onPointerUp,\n  metaComponentName,\n  paddingX,\n  marginY,\n  size = 'large',\n  isDisabled,\n  children,\n  trailingInteractionElement,\n}: BaseHeaderProps): React.ReactElement => {\n  const validatedTrailingComponent = useTrailingRestriction({ trailing, size });\n  const shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;\n\n  const webOnlyEventHandlers: Record<string, any> = isReactNative()\n    ? {}\n    : {\n        onClickCapture,\n        onKeyDown,\n        onKeyUp,\n        onLostPointerCapture,\n        onPointerCancel,\n        onPointerDown,\n        onPointerMove,\n        onPointerUp,\n      };\n\n  return (\n    <BaseBox {...metaAttribute({ name: metaComponentName, testID })}>\n      <BaseBox\n        marginY={marginY ?? { base: 'spacing.5', m: 'spacing.6' }}\n        paddingX={paddingX ?? { base: 'spacing.5', m: 'spacing.6' }}\n        touchAction=\"none\"\n        {...webOnlyEventHandlers}\n      >\n        <BaseBox display=\"flex\" flexDirection=\"row\" userSelect=\"none\">\n          {showBackButton ? (\n            <BaseBox overflow=\"visible\" marginRight=\"spacing.5\">\n              <Box {...centerBoxProps[size]}>\n                <IconButton\n                  ref={backButtonRef}\n                  size=\"large\"\n                  icon={ChevronLeftIcon}\n                  onClick={() => onBackButtonClick?.()}\n                  accessibilityLabel=\"Back\"\n                />\n              </Box>\n            </BaseBox>\n          ) : null}\n          <BaseBox\n            paddingRight=\"spacing.5\"\n            marginRight=\"auto\"\n            flex=\"auto\"\n            display=\"flex\"\n            flexDirection=\"row\"\n            alignItems=\"flex-start\"\n          >\n            {leading ? (\n              <BaseBox marginRight=\"spacing.3\" {...centerBoxProps[size]}>\n                {leading}\n              </BaseBox>\n            ) : null}\n            <BaseBox flex=\"auto\">\n              <BaseBox\n                // Explicitly setting maxWidth in React Native because text is not being wrapped properly when multiple fix width components are rendered in header\n                // In web, flex containers seem to work a expected\n                // @todo: resolve this if we figure out some better solution later\n                maxWidth={isReactNative() && shouldWrapTitle ? '100px' : undefined}\n                flexShrink={0}\n                display=\"flex\"\n                flexDirection=\"row\"\n              >\n                {title ? (\n                  <Text\n                    size={sizeTokensMapping[size].title}\n                    marginTop={makeSize(sizeToken['1'])}\n                    weight=\"semibold\"\n                    color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'}\n                  >\n                    {title}\n                  </Text>\n                ) : null}\n                {titleSuffix && (\n                  <BaseBox marginLeft=\"spacing.3\">\n                    <Box {...centerBoxProps[size]}>{titleSuffix}</Box>\n                  </BaseBox>\n                )}\n              </BaseBox>\n              {subtitle ? (\n                <Text\n                  variant=\"body\"\n                  size=\"small\"\n                  weight=\"regular\"\n                  color={isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.muted'}\n                >\n                  {subtitle}\n                </Text>\n              ) : null}\n            </BaseBox>\n          </BaseBox>\n          {validatedTrailingComponent ? (\n            <BaseBox marginRight=\"spacing.5\">\n              <Box {...centerBoxProps[size]}>{validatedTrailingComponent}</Box>\n            </BaseBox>\n          ) : null}\n          {showCloseButton ? (\n            <Box {...centerBoxProps[size]}>\n              <IconButton\n                ref={closeButtonRef}\n                size=\"large\"\n                icon={CloseIcon}\n                accessibilityLabel=\"Close\"\n                onClick={() => onCloseButtonClick?.()}\n              />\n            </Box>\n          ) : null}\n          {trailingInteractionElement && !children ? (\n            <Box {...centerBoxProps[size]}>{trailingInteractionElement}</Box>\n          ) : null}\n        </BaseBox>\n        <BaseBox\n          display=\"flex\"\n          width=\"100%\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n        >\n          <Box>{children}</Box>\n          {trailingInteractionElement && children ? (\n            <Box alignSelf=\"flex-start\" {...centerBoxProps[size]}>\n              {trailingInteractionElement}\n            </Box>\n          ) : null}\n        </BaseBox>\n      </BaseBox>\n      {showDivider ? <Divider /> : null}\n    </BaseBox>\n  );\n};\n\nconst BaseHeader = assignWithoutSideEffects(_BaseHeader, {\n  componentId: 'BaseHeader',\n});\n\nexport type { BaseHeaderProps };\nexport { BaseHeader };\n"],"names":["commonCenterBoxProps","display","alignItems","justifyContent","centerBoxProps","large","_objectSpread","height","medium","sizeTokensMapping","title","propRestrictionMap","Button","size","variant","Badge","Link","Text","Amount","type","useTrailingRestriction","_ref","trailing","_React$useState","React","useState","_React$useState2","_slicedToArray","validatedTrailingComponent","setValidatedTrailingComponent","useEffect","isValidElement","trailingComponentType","getComponentId","restrictedProps","allowedComponents","Object","keys","throwBladeError","message","concat","join","moduleName","restrictedPropKeys","_i","_restrictedPropKeys","length","_trailing$props","prop","props","hasOwnProperty","logger","cloneElement","_BaseHeader","_ref2","subtitle","leading","titleSuffix","_ref2$showDivider","showDivider","_ref2$showBackButton","showBackButton","_ref2$showCloseButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","backButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","paddingX","marginY","_ref2$size","isDisabled","children","trailingInteractionElement","shouldWrapTitle","webOnlyEventHandlers","isReactNative","_jsxs","BaseBox","metaAttribute","name","base","m","touchAction","flexDirection","userSelect","_jsx","overflow","marginRight","Box","IconButton","ref","icon","ChevronLeftIcon","onClick","accessibilityLabel","paddingRight","flex","maxWidth","undefined","flexShrink","marginTop","makeSize","sizeToken","weight","color","marginLeft","CloseIcon","width","alignSelf","Divider","BaseHeader","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/production/components/Collapsible/CollapsibleBodyContent.web.js

@@ -6,7 +6,9 @@ import { getTransitionDuration, getTransitionEasing, getOpacity, getCollapsibleB
 import '../../utils/index.js';
 import '../Box/index.js';
 import { useDidUpdate } from '../../utils/useDidUpdate.js';
+import '../Box/BaseBox/index.js';
 import { jsx } from 'react/jsx-runtime';
+import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { castWebType } from '../../utils/platform/castUtils.js';
 import { makeSize } from '../../utils/makeSize/makeSize.js';
 import { Box } from '../Box/Box.js';
@@ -19,7 +21,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 var HEIGHT_EXPANDED = 'auto';
 var HEIGHT_COLLAPSED = '0px';
-var StyledCollapsibleBodyContent = /*#__PURE__*/styled.div.withConfig({
+var StyledCollapsibleBodyContent = /*#__PURE__*/styled(BaseBox).withConfig({
   displayName: "CollapsibleBodyContentweb__StyledCollapsibleBodyContent",
   componentId: "sc-1oi3ngc-0"
 })(function (props) {

package/build/lib/web/production/components/Collapsible/CollapsibleBodyContent.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"CollapsibleBodyContent.web.js","sources":["../../../../../../src/components/Collapsible/CollapsibleBodyContent.web.tsx"],"sourcesContent":["import type { ReactElement, TransitionEventHandler } from 'react';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport { useCollapsible } from './CollapsibleContext';\nimport type { CollapsibleBodyContentProps } from './types';\nimport {\n  getCollapsibleBodyContentBoxProps,\n  getOpacity,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { castWebType, makeSize } from '~utils';\nimport { Box } from '~components/Box';\nimport { useDidUpdate } from '~utils/useDidUpdate';\n\ntype StyledCollapsibleBodyContentProps = {\n  defaultIsExpanded: boolean;\n  isExpanded: boolean;\n};\n\n/**\n * We can't animate to and from `auto` height, these are used for imperative css transitions.\n * Overall on expanding height will change as: 0px -> Actual height -> auto\n */\nconst HEIGHT_EXPANDED = 'auto';\nconst HEIGHT_COLLAPSED = '0px';\n\nconst StyledCollapsibleBodyContent = styled.div<StyledCollapsibleBodyContentProps>((props) => {\n  const { theme, defaultIsExpanded, isExpanded } = props;\n  const transitionDuration = castWebType(getTransitionDuration(theme));\n  const transitionTimingFunction = castWebType(getTransitionEasing(theme));\n\n  return {\n    transitionDuration,\n    transitionTimingFunction,\n    transitionProperty: 'height, opacity',\n    opacity: getOpacity({ isExpanded }),\n    /**\n     * We need height explicitly here for initial styles because the component might be rendered on server,\n     * in which case for expanded items this should be `auto` because we don't know the actual pixel value.\n     *\n     * This is based on `defaultIsExpanded` rather than `isExpanded` because post initial render inline styles take over.\n     * Otherwise, changing `height` both here and in inline styles sometimes causes animation flickers due to styles mismatch.\n     */\n    height: defaultIsExpanded ? HEIGHT_EXPANDED : HEIGHT_COLLAPSED,\n    display: defaultIsExpanded ? 'block' : 'none',\n    overflowY: 'hidden',\n  };\n});\n\nconst CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {\n  const { isExpanded, defaultIsExpanded, direction } = useCollapsible();\n  const collapsibleBodyContentRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * This effect imperatively updates height to make css transitions work:\n   * - for expanded items: auto height -> actual height -> 0px\n   * - for collapsed items: 0px -> actual height -> auto height\n   * - uses `requestAnimationFrame` to set the styles just before the next repaint\n   */\n  useDidUpdate(() => {\n    const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n\n    if (!collapsibleBodyContentElement) {\n      return;\n    }\n\n    // In collapsed state display is set to none, change it back to block\n    collapsibleBodyContentElement.style.display = 'block';\n    const actualHeight = collapsibleBodyContentElement.scrollHeight;\n\n    if (!isExpanded) {\n      // collapse\n      requestAnimationFrame(() => {\n        collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.height = makeSize(0);\n        });\n      });\n    } else {\n      // expand\n      requestAnimationFrame(() => {\n        collapsibleBodyContentElement.style.height = makeSize(0);\n\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n          /**\n           * After this we want to wait for the animation to finish\n           * before setting the height back to auto\n           *\n           * `onTransitionEnd` takes over\n           */\n        });\n      });\n    }\n  }, [isExpanded]);\n\n  /**\n   * When expanding, waits for the animation to finish first.\n   * Then sets the height of expanded item to auto from actual height.\n   */\n  const onTransitionEnd: TransitionEventHandler = ({ propertyName }) => {\n    const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n    if (propertyName === 'height' && collapsibleBodyContentElement) {\n      if (isExpanded) {\n        // Body content has expanded and finished animating at this point\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.height = HEIGHT_EXPANDED;\n        });\n      } else {\n        // Body content has collapsed\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.display = 'none';\n        });\n      }\n    }\n  };\n\n  return (\n    <StyledCollapsibleBodyContent\n      ref={collapsibleBodyContentRef}\n      isExpanded={isExpanded}\n      defaultIsExpanded={defaultIsExpanded}\n      onTransitionEnd={onTransitionEnd}\n    >\n      <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>\n    </StyledCollapsibleBodyContent>\n  );\n};\n\nexport { CollapsibleBodyContent };\n"],"names":["HEIGHT_EXPANDED","HEIGHT_COLLAPSED","StyledCollapsibleBodyContent","styled","div","withConfig","displayName","componentId","props","theme","defaultIsExpanded","isExpanded","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","transitionProperty","opacity","getOpacity","height","display","overflowY","CollapsibleBodyContent","_ref","children","_useCollapsible","useCollapsible","direction","collapsibleBodyContentRef","useRef","useDidUpdate","collapsibleBodyContentElement","current","style","actualHeight","scrollHeight","requestAnimationFrame","makeSize","onTransitionEnd","_ref2","propertyName","_jsx","ref","Box","_objectSpread","getCollapsibleBodyContentBoxProps"],"mappings":"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"}
+{"version":3,"file":"CollapsibleBodyContent.web.js","sources":["../../../../../../src/components/Collapsible/CollapsibleBodyContent.web.tsx"],"sourcesContent":["import type { ReactElement, TransitionEventHandler } from 'react';\nimport { useRef } from 'react';\nimport styled from 'styled-components';\nimport { useCollapsible } from './CollapsibleContext';\nimport type { CollapsibleBodyContentProps } from './types';\nimport {\n  getCollapsibleBodyContentBoxProps,\n  getOpacity,\n  getTransitionDuration,\n  getTransitionEasing,\n} from './commonStyles';\nimport { castWebType, makeSize } from '~utils';\nimport { Box } from '~components/Box';\nimport { useDidUpdate } from '~utils/useDidUpdate';\nimport BaseBox from '~components/Box/BaseBox';\n\ntype StyledCollapsibleBodyContentProps = {\n  defaultIsExpanded: boolean;\n  isExpanded: boolean;\n};\n\n/**\n * We can't animate to and from `auto` height, these are used for imperative css transitions.\n * Overall on expanding height will change as: 0px -> Actual height -> auto\n */\nconst HEIGHT_EXPANDED = 'auto';\nconst HEIGHT_COLLAPSED = '0px';\n\nconst StyledCollapsibleBodyContent = styled(BaseBox)<StyledCollapsibleBodyContentProps>((props) => {\n  const { theme, defaultIsExpanded, isExpanded } = props;\n  const transitionDuration = castWebType(getTransitionDuration(theme));\n  const transitionTimingFunction = castWebType(getTransitionEasing(theme));\n\n  return {\n    transitionDuration,\n    transitionTimingFunction,\n    transitionProperty: 'height, opacity',\n    opacity: getOpacity({ isExpanded }),\n    /**\n     * We need height explicitly here for initial styles because the component might be rendered on server,\n     * in which case for expanded items this should be `auto` because we don't know the actual pixel value.\n     *\n     * This is based on `defaultIsExpanded` rather than `isExpanded` because post initial render inline styles take over.\n     * Otherwise, changing `height` both here and in inline styles sometimes causes animation flickers due to styles mismatch.\n     */\n    height: defaultIsExpanded ? HEIGHT_EXPANDED : HEIGHT_COLLAPSED,\n    display: defaultIsExpanded ? 'block' : 'none',\n    overflowY: 'hidden',\n  };\n});\n\nconst CollapsibleBodyContent = ({ children }: CollapsibleBodyContentProps): ReactElement => {\n  const { isExpanded, defaultIsExpanded, direction } = useCollapsible();\n  const collapsibleBodyContentRef = useRef<HTMLDivElement>(null);\n\n  /**\n   * This effect imperatively updates height to make css transitions work:\n   * - for expanded items: auto height -> actual height -> 0px\n   * - for collapsed items: 0px -> actual height -> auto height\n   * - uses `requestAnimationFrame` to set the styles just before the next repaint\n   */\n  useDidUpdate(() => {\n    const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n\n    if (!collapsibleBodyContentElement) {\n      return;\n    }\n\n    // In collapsed state display is set to none, change it back to block\n    collapsibleBodyContentElement.style.display = 'block';\n    const actualHeight = collapsibleBodyContentElement.scrollHeight;\n\n    if (!isExpanded) {\n      // collapse\n      requestAnimationFrame(() => {\n        collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.height = makeSize(0);\n        });\n      });\n    } else {\n      // expand\n      requestAnimationFrame(() => {\n        collapsibleBodyContentElement.style.height = makeSize(0);\n\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.height = makeSize(actualHeight);\n\n          /**\n           * After this we want to wait for the animation to finish\n           * before setting the height back to auto\n           *\n           * `onTransitionEnd` takes over\n           */\n        });\n      });\n    }\n  }, [isExpanded]);\n\n  /**\n   * When expanding, waits for the animation to finish first.\n   * Then sets the height of expanded item to auto from actual height.\n   */\n  const onTransitionEnd: TransitionEventHandler = ({ propertyName }) => {\n    const collapsibleBodyContentElement = collapsibleBodyContentRef.current;\n    if (propertyName === 'height' && collapsibleBodyContentElement) {\n      if (isExpanded) {\n        // Body content has expanded and finished animating at this point\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.height = HEIGHT_EXPANDED;\n        });\n      } else {\n        // Body content has collapsed\n        requestAnimationFrame(() => {\n          collapsibleBodyContentElement.style.display = 'none';\n        });\n      }\n    }\n  };\n\n  return (\n    <StyledCollapsibleBodyContent\n      ref={collapsibleBodyContentRef}\n      isExpanded={isExpanded}\n      defaultIsExpanded={defaultIsExpanded}\n      onTransitionEnd={onTransitionEnd}\n    >\n      <Box {...getCollapsibleBodyContentBoxProps({ direction })}>{children}</Box>\n    </StyledCollapsibleBodyContent>\n  );\n};\n\nexport { CollapsibleBodyContent };\n"],"names":["HEIGHT_EXPANDED","HEIGHT_COLLAPSED","StyledCollapsibleBodyContent","styled","BaseBox","withConfig","displayName","componentId","props","theme","defaultIsExpanded","isExpanded","transitionDuration","castWebType","getTransitionDuration","transitionTimingFunction","getTransitionEasing","transitionProperty","opacity","getOpacity","height","display","overflowY","CollapsibleBodyContent","_ref","children","_useCollapsible","useCollapsible","direction","collapsibleBodyContentRef","useRef","useDidUpdate","collapsibleBodyContentElement","current","style","actualHeight","scrollHeight","requestAnimationFrame","makeSize","onTransitionEnd","_ref2","propertyName","_jsx","ref","Box","_objectSpread","getCollapsibleBodyContentBoxProps"],"mappings":"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"}

package/build/lib/web/production/components/Dropdown/DropdownOverlay.web.js

@@ -37,7 +37,9 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
     testID = _ref.testID,
     _ref$zIndex = _ref.zIndex,
     zIndex = _ref$zIndex === void 0 ? componentZIndices.dropdownOverlay : _ref$zIndex,
-    width = _ref.width;
+    width = _ref.width,
+    _ref$defaultPlacement = _ref.defaultPlacement,
+    defaultPlacement = _ref$defaultPlacement === void 0 ? 'bottom-start' : _ref$defaultPlacement;
   var _useDropdown = useDropdown(),
     isOpen = _useDropdown.isOpen,
     triggererRef = _useDropdown.triggererRef,
@@ -52,7 +54,7 @@ var _DropdownOverlay = function _DropdownOverlay(_ref) {
       open: isOpen,
       onOpenChange: setIsOpen,
       strategy: 'fixed',
-      placement: 'bottom-start',
+      placement: defaultPlacement,
       elements: {
         // Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed
         // We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed

package/build/lib/web/production/components/Dropdown/DropdownOverlay.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"DropdownOverlay.web.js","sources":["../../../../../../src/components/Dropdown/DropdownOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  autoUpdate,\n  offset,\n  size as sizeMiddleware,\n  useFloating,\n  useTransitionStyles,\n  flip,\n} from '@floating-ui/react';\nimport { useDropdown } from './useDropdown';\nimport { StyledDropdownOverlay } from './StyledDropdownOverlay';\nimport type { DropdownOverlayProps } from './types';\nimport { dropdownComponentIds } from './dropdownComponentIds';\nimport { useTheme } from '~components/BladeProvider';\n// Reading directly because its not possible to get theme object on top level to be used in keyframes\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useBottomSheetAndDropdownGlue } from '~components/BottomSheet/BottomSheetContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst OVERLAY_OFFSET: number = size['8'];\nconst OVERLAY_PADDING: number = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom\n\n/**\n * Overlay of dropdown\n *\n * Wrap your ActionList within this component\n */\nconst _DropdownOverlay = ({\n  children,\n  testID,\n  zIndex = componentZIndices.dropdownOverlay,\n  width,\n}: DropdownOverlayProps): React.ReactElement | null => {\n  const { isOpen, triggererRef, triggererWrapperRef, dropdownTriggerer, setIsOpen } = useDropdown();\n  const { theme } = useTheme();\n  const bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();\n\n  const isMenu =\n    dropdownTriggerer !== dropdownComponentIds.triggers.SelectInput &&\n    dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    strategy: 'fixed',\n    placement: 'bottom-start',\n    elements: {\n      // Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed\n      // We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed\n      // Checkout: https://github.com/razorpay/blade/pull/1559#discussion_r1305438920\n      reference: triggererWrapperRef.current ?? triggererRef.current,\n    },\n    middleware: [\n      offset({\n        mainAxis: OVERLAY_OFFSET,\n      }),\n      flip({\n        padding: OVERLAY_OFFSET + OVERLAY_PADDING,\n      }),\n      sizeMiddleware({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            // in menu, we have flexible width between min and max\n            // in input triggers, we just take width of trigger\n            width: isMenu ? undefined : makeSize(rects.reference.width),\n            minWidth: isMenu ? makeSize(size['240']) : undefined,\n            maxWidth: isMenu ? makeSize(size['400']) : undefined,\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: () => ({\n      transform: `translateY(-${makeSize(size['8'])})`,\n      opacity: 0,\n    }),\n  });\n\n  React.useEffect(() => {\n    if (isOpen) {\n      // On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261\n      triggererRef.current?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  return (\n    <BaseBox\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={refs.setFloating as any}\n      style={floatingStyles}\n      zIndex={zIndex}\n      display={isMounted ? 'flex' : 'none'}\n    >\n      <StyledDropdownOverlay\n        isInBottomSheet={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet}\n        elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}\n        style={{ ...styles }}\n        width={width ? width : '100%'}\n        {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}\n      >\n        {children}\n      </StyledDropdownOverlay>\n    </BaseBox>\n  );\n};\n\nconst DropdownOverlay = assignWithoutSideEffects(_DropdownOverlay, {\n  componentId: dropdownComponentIds.DropdownOverlay,\n});\n\nexport { DropdownOverlay };\n"],"names":["OVERLAY_OFFSET","size","OVERLAY_PADDING","_DropdownOverlay","_ref","_triggererWrapperRef$","children","testID","_ref$zIndex","zIndex","componentZIndices","dropdownOverlay","width","_useDropdown","useDropdown","isOpen","triggererRef","triggererWrapperRef","dropdownTriggerer","setIsOpen","_useTheme","useTheme","theme","bottomSheetAndDropdownGlue","useBottomSheetAndDropdownGlue","isMenu","dropdownComponentIds","triggers","SelectInput","AutoComplete","_useFloating","useFloating","open","onOpenChange","strategy","placement","elements","reference","current","middleware","offset","mainAxis","flip","padding","sizeMiddleware","apply","_ref2","rects","Object","assign","floating","style","undefined","makeSize","minWidth","maxWidth","whileElementsMounted","autoUpdate","refs","floatingStyles","context","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","transform","concat","opacity","isMounted","styles","React","useEffect","_triggererRef$current","focus","_jsx","BaseBox","ref","setFloating","display","StyledDropdownOverlay","_objectSpread","isInBottomSheet","dropdownHasBottomSheet","elevation","metaAttribute","name","MetaConstants","DropdownOverlay","assignWithoutSideEffects","componentId"],"mappings":"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"}
+{"version":3,"file":"DropdownOverlay.web.js","sources":["../../../../../../src/components/Dropdown/DropdownOverlay.web.tsx"],"sourcesContent":["import React from 'react';\nimport {\n  autoUpdate,\n  offset,\n  size as sizeMiddleware,\n  useFloating,\n  useTransitionStyles,\n  flip,\n} from '@floating-ui/react';\nimport { useDropdown } from './useDropdown';\nimport { StyledDropdownOverlay } from './StyledDropdownOverlay';\nimport type { DropdownOverlayProps } from './types';\nimport { dropdownComponentIds } from './dropdownComponentIds';\nimport { useTheme } from '~components/BladeProvider';\n// Reading directly because its not possible to get theme object on top level to be used in keyframes\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { useBottomSheetAndDropdownGlue } from '~components/BottomSheet/BottomSheetContext';\nimport BaseBox from '~components/Box/BaseBox';\nimport { componentZIndices } from '~utils/componentZIndices';\n\nconst OVERLAY_OFFSET: number = size['8'];\nconst OVERLAY_PADDING: number = size['12']; // doesn't have to be exact. Just rough padding for floating ui to decide to show overlay on top or bottom\n\n/**\n * Overlay of dropdown\n *\n * Wrap your ActionList within this component\n */\nconst _DropdownOverlay = ({\n  children,\n  testID,\n  zIndex = componentZIndices.dropdownOverlay,\n  width,\n  defaultPlacement = 'bottom-start',\n}: DropdownOverlayProps): React.ReactElement | null => {\n  const { isOpen, triggererRef, triggererWrapperRef, dropdownTriggerer, setIsOpen } = useDropdown();\n  const { theme } = useTheme();\n  const bottomSheetAndDropdownGlue = useBottomSheetAndDropdownGlue();\n\n  const isMenu =\n    dropdownTriggerer !== dropdownComponentIds.triggers.SelectInput &&\n    dropdownTriggerer !== dropdownComponentIds.triggers.AutoComplete;\n\n  const { refs, floatingStyles, context } = useFloating({\n    open: isOpen,\n    onOpenChange: setIsOpen,\n    strategy: 'fixed',\n    placement: defaultPlacement,\n    elements: {\n      // Input triggers have their ref on internal input element but we want width height of overall visible input hence wrapperRef is needed\n      // We fallback to use `triggererRef` for triggers like button and link where wrapper is not needed\n      // Checkout: https://github.com/razorpay/blade/pull/1559#discussion_r1305438920\n      reference: triggererWrapperRef.current ?? triggererRef.current,\n    },\n    middleware: [\n      offset({\n        mainAxis: OVERLAY_OFFSET,\n      }),\n      flip({\n        padding: OVERLAY_OFFSET + OVERLAY_PADDING,\n      }),\n      sizeMiddleware({\n        apply({ rects, elements }) {\n          Object.assign(elements.floating.style, {\n            // in menu, we have flexible width between min and max\n            // in input triggers, we just take width of trigger\n            width: isMenu ? undefined : makeSize(rects.reference.width),\n            minWidth: isMenu ? makeSize(size['240']) : undefined,\n            maxWidth: isMenu ? makeSize(size['400']) : undefined,\n          });\n        },\n      }),\n    ],\n    whileElementsMounted: autoUpdate,\n  });\n\n  const { isMounted, styles } = useTransitionStyles(context, {\n    duration: theme.motion.duration.quick,\n    initial: () => ({\n      transform: `translateY(-${makeSize(size['8'])})`,\n      opacity: 0,\n    }),\n  });\n\n  React.useEffect(() => {\n    if (isOpen) {\n      // On Safari clicking on a non input element doesn't focuses it https://bugs.webkit.org/show_bug.cgi?id=22261\n      triggererRef.current?.focus();\n    }\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [isOpen]);\n\n  return (\n    <BaseBox\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      ref={refs.setFloating as any}\n      style={floatingStyles}\n      zIndex={zIndex}\n      display={isMounted ? 'flex' : 'none'}\n    >\n      <StyledDropdownOverlay\n        isInBottomSheet={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet}\n        elevation={bottomSheetAndDropdownGlue?.dropdownHasBottomSheet ? undefined : 'midRaised'}\n        style={{ ...styles }}\n        width={width ? width : '100%'}\n        {...metaAttribute({ name: MetaConstants.DropdownOverlay, testID })}\n      >\n        {children}\n      </StyledDropdownOverlay>\n    </BaseBox>\n  );\n};\n\nconst DropdownOverlay = assignWithoutSideEffects(_DropdownOverlay, {\n  componentId: dropdownComponentIds.DropdownOverlay,\n});\n\nexport { DropdownOverlay };\n"],"names":["OVERLAY_OFFSET","size","OVERLAY_PADDING","_DropdownOverlay","_ref","_triggererWrapperRef$","children","testID","_ref$zIndex","zIndex","componentZIndices","dropdownOverlay","width","_ref$defaultPlacement","defaultPlacement","_useDropdown","useDropdown","isOpen","triggererRef","triggererWrapperRef","dropdownTriggerer","setIsOpen","_useTheme","useTheme","theme","bottomSheetAndDropdownGlue","useBottomSheetAndDropdownGlue","isMenu","dropdownComponentIds","triggers","SelectInput","AutoComplete","_useFloating","useFloating","open","onOpenChange","strategy","placement","elements","reference","current","middleware","offset","mainAxis","flip","padding","sizeMiddleware","apply","_ref2","rects","Object","assign","floating","style","undefined","makeSize","minWidth","maxWidth","whileElementsMounted","autoUpdate","refs","floatingStyles","context","_useTransitionStyles","useTransitionStyles","duration","motion","quick","initial","transform","concat","opacity","isMounted","styles","React","useEffect","_triggererRef$current","focus","_jsx","BaseBox","ref","setFloating","display","StyledDropdownOverlay","_objectSpread","isInBottomSheet","dropdownHasBottomSheet","elevation","metaAttribute","name","MetaConstants","DropdownOverlay","assignWithoutSideEffects","componentId"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAuBA,IAAMA,cAAsB,GAAGC,IAAI,CAAC,GAAG,CAAC,CAAA;AACxC,IAAMC,eAAuB,GAAGD,IAAI,CAAC,IAAI,CAAC,CAAC;;AAE3C;AACA;AACA;AACA;AACA;AACA,IAAME,gBAAgB,GAAG,SAAnBA,gBAAgBA,CAAAC,IAAA,EAMiC;AAAA,EAAA,IAAAC,qBAAA,CAAA;AAAA,EAAA,IALrDC,QAAQ,GAAAF,IAAA,CAARE,QAAQ;IACRC,MAAM,GAAAH,IAAA,CAANG,MAAM;IAAAC,WAAA,GAAAJ,IAAA,CACNK,MAAM;AAANA,IAAAA,MAAM,GAAAD,WAAA,KAAA,KAAA,CAAA,GAAGE,iBAAiB,CAACC,eAAe,GAAAH,WAAA;IAC1CI,KAAK,GAAAR,IAAA,CAALQ,KAAK;IAAAC,qBAAA,GAAAT,IAAA,CACLU,gBAAgB;AAAhBA,IAAAA,gBAAgB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,cAAc,GAAAA,qBAAA,CAAA;AAEjC,EAAA,IAAAE,YAAA,GAAoFC,WAAW,EAAE;IAAzFC,MAAM,GAAAF,YAAA,CAANE,MAAM;IAAEC,YAAY,GAAAH,YAAA,CAAZG,YAAY;IAAEC,mBAAmB,GAAAJ,YAAA,CAAnBI,mBAAmB;IAAEC,iBAAiB,GAAAL,YAAA,CAAjBK,iBAAiB;IAAEC,SAAS,GAAAN,YAAA,CAATM,SAAS,CAAA;AAC/E,EAAA,IAAAC,SAAA,GAAkBC,QAAQ,EAAE;IAApBC,KAAK,GAAAF,SAAA,CAALE,KAAK,CAAA;AACb,EAAA,IAAMC,0BAA0B,GAAGC,6BAA6B,EAAE,CAAA;AAElE,EAAA,IAAMC,MAAM,GACVP,iBAAiB,KAAKQ,oBAAoB,CAACC,QAAQ,CAACC,WAAW,IAC/DV,iBAAiB,KAAKQ,oBAAoB,CAACC,QAAQ,CAACE,YAAY,CAAA;EAElE,IAAAC,YAAA,GAA0CC,WAAW,CAAC;AACpDC,MAAAA,IAAI,EAAEjB,MAAM;AACZkB,MAAAA,YAAY,EAAEd,SAAS;AACvBe,MAAAA,QAAQ,EAAE,OAAO;AACjBC,MAAAA,SAAS,EAAEvB,gBAAgB;AAC3BwB,MAAAA,QAAQ,EAAE;AACR;AACA;AACA;AACAC,QAAAA,SAAS,EAAAlC,CAAAA,qBAAA,GAAEc,mBAAmB,CAACqB,OAAO,MAAAnC,IAAAA,IAAAA,qBAAA,KAAAA,KAAAA,CAAAA,GAAAA,qBAAA,GAAIa,YAAY,CAACsB,OAAAA;OACxD;MACDC,UAAU,EAAE,CACVC,MAAM,CAAC;AACLC,QAAAA,QAAQ,EAAE3C,cAAAA;OACX,CAAC,EACF4C,IAAI,CAAC;QACHC,OAAO,EAAE7C,cAAc,GAAGE,eAAAA;OAC3B,CAAC,EACF4C,MAAc,CAAC;QACbC,KAAK,EAAA,SAAAA,KAAAC,CAAAA,KAAA,EAAsB;AAAA,UAAA,IAAnBC,KAAK,GAAAD,KAAA,CAALC,KAAK;YAAEX,QAAQ,GAAAU,KAAA,CAARV,QAAQ,CAAA;UACrBY,MAAM,CAACC,MAAM,CAACb,QAAQ,CAACc,QAAQ,CAACC,KAAK,EAAE;AACrC;AACA;AACAzC,YAAAA,KAAK,EAAEe,MAAM,GAAG2B,SAAS,GAAGC,QAAQ,CAACN,KAAK,CAACV,SAAS,CAAC3B,KAAK,CAAC;YAC3D4C,QAAQ,EAAE7B,MAAM,GAAG4B,QAAQ,CAACtD,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGqD,SAAS;YACpDG,QAAQ,EAAE9B,MAAM,GAAG4B,QAAQ,CAACtD,IAAI,CAAC,KAAK,CAAC,CAAC,GAAGqD,SAAAA;AAC7C,WAAC,CAAC,CAAA;AACJ,SAAA;AACF,OAAC,CAAC,CACH;AACDI,MAAAA,oBAAoB,EAAEC,UAAAA;AACxB,KAAC,CAAC;IA/BMC,IAAI,GAAA5B,YAAA,CAAJ4B,IAAI;IAAEC,cAAc,GAAA7B,YAAA,CAAd6B,cAAc;IAAEC,OAAO,GAAA9B,YAAA,CAAP8B,OAAO,CAAA;AAiCrC,EAAA,IAAAC,oBAAA,GAA8BC,mBAAmB,CAACF,OAAO,EAAE;AACzDG,MAAAA,QAAQ,EAAEzC,KAAK,CAAC0C,MAAM,CAACD,QAAQ,CAACE,KAAK;MACrCC,OAAO,EAAE,SAAAA,OAAA,GAAA;QAAA,OAAO;UACdC,SAAS,EAAA,cAAA,CAAAC,MAAA,CAAiBf,QAAQ,CAACtD,IAAI,CAAC,GAAG,CAAC,CAAC,EAAG,GAAA,CAAA;AAChDsE,UAAAA,OAAO,EAAE,CAAA;SACV,CAAA;AAAA,OAAA;AACH,KAAC,CAAC;IANMC,SAAS,GAAAT,oBAAA,CAATS,SAAS;IAAEC,MAAM,GAAAV,oBAAA,CAANU,MAAM,CAAA;EAQzBC,cAAK,CAACC,SAAS,CAAC,YAAM;AACpB,IAAA,IAAI1D,MAAM,EAAE;AAAA,MAAA,IAAA2D,qBAAA,CAAA;AACV;AACA,MAAA,CAAAA,qBAAA,GAAA1D,YAAY,CAACsB,OAAO,MAAA,IAAA,IAAAoC,qBAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAApBA,qBAAA,CAAsBC,KAAK,EAAE,CAAA;AAC/B,KAAA;AACA;AACF,GAAC,EAAE,CAAC5D,MAAM,CAAC,CAAC,CAAA;AAEZ,EAAA,oBACE6D,GAAA,CAACC,OAAAA;AACC;AAAA,IAAA;IACAC,GAAG,EAAEpB,IAAI,CAACqB,WAAmB;AAC7B5B,IAAAA,KAAK,EAAEQ,cAAe;AACtBpD,IAAAA,MAAM,EAAEA,MAAO;AACfyE,IAAAA,OAAO,EAAEV,SAAS,GAAG,MAAM,GAAG,MAAO;AAAAlE,IAAAA,QAAA,eAErCwE,GAAA,CAACK,qBAAqB,EAAAC,aAAA,CAAAA,aAAA,CAAA;AACpBC,MAAAA,eAAe,EAAE5D,0BAA0B,KAAA,IAAA,IAA1BA,0BAA0B,KAA1BA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,0BAA0B,CAAE6D,sBAAuB;MACpEC,SAAS,EAAE9D,0BAA0B,KAAA,IAAA,IAA1BA,0BAA0B,KAAA,KAAA,CAAA,IAA1BA,0BAA0B,CAAE6D,sBAAsB,GAAGhC,SAAS,GAAG,WAAY;AACxFD,MAAAA,KAAK,EAAA+B,aAAA,CAAOX,EAAAA,EAAAA,MAAM,CAAG;AACrB7D,MAAAA,KAAK,EAAEA,KAAK,GAAGA,KAAK,GAAG,MAAA;AAAO,KAAA,EAC1B4E,aAAa,CAAC;MAAEC,IAAI,EAAEC,aAAa,CAACC,eAAe;AAAEpF,MAAAA,MAAM,EAANA,MAAAA;AAAO,KAAC,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAD,MAAAA,QAAA,EAEjEA,QAAAA;KACoB,CAAA,CAAA;AAAC,GACjB,CAAC,CAAA;AAEd,CAAC,CAAA;AAED,IAAMqF,eAAe,gBAAGC,wBAAwB,CAACzF,gBAAgB,EAAE;EACjE0F,WAAW,EAAEjE,oBAAoB,CAAC+D,eAAAA;AACpC,CAAC;;;;"}

package/build/lib/web/production/components/Dropdown/dropdownUtils.js

@@ -156,6 +156,16 @@ function isElementVisibleOnScreen(element) {
   return bounding.top >= 0 && bounding.left >= 0 && bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) && bounding.right <= (window.innerWidth || document.documentElement.clientWidth);
 }
 
+/**
+ * Checks if element is visible inside the given container
+ */
+function isElementVisible(container, element) {
+  var containerRect = container.getBoundingClientRect();
+  var elementRect = element.getBoundingClientRect();
+  var isVerticalVisible = elementRect.top >= containerRect.top && elementRect.bottom <= containerRect.bottom;
+  return isVerticalVisible;
+}
+
 /**
  * Checks if the dropdown is scrollable
  */
@@ -212,17 +222,15 @@ var ensureScrollVisiblity = function ensureScrollVisiblity(newActiveIndex, conta
   // ensure the new option is in view
   if (containerElement) {
     if (isScrollable(containerElement)) {
-      var optionEl = containerElement.querySelectorAll('[role="option"]');
+      var optionEl = containerElement.querySelectorAll('[role="option"], [role="menuitem"]');
       // Making sure its the same element as the one from options state
       if (newActiveIndex >= 0 && optionEl[newActiveIndex].dataset.value === options[newActiveIndex]) {
         var activeElement = optionEl[newActiveIndex];
-        var bodyRect = containerElement.getBoundingClientRect().top;
-        var elementRect = activeElement.getBoundingClientRect().top;
-        var elementPosition = elementRect - bodyRect;
-        var offsetPosition = elementPosition;
-        containerElement.scrollTo({
-          top: offsetPosition
-        });
+        if (!isElementVisible(containerElement, activeElement)) {
+          activeElement.scrollIntoView({
+            inline: 'nearest'
+          });
+        }
         if (!isElementVisibleOnScreen(optionEl[newActiveIndex])) {
           activeElement.scrollIntoView({
             behavior: 'smooth'