@razorpay/blade 12.42.0 → 12.42.1

package/build/lib/native/components/Accordion/AccordionItemHeader.js

@@ -13,9 +13,13 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.native.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import '../../tokens/global/typography.js';
+import '../../tokens/global/motion.js';
+import { size } from '../../tokens/global/size.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
 
-var _excluded=["title","subtitle","leading","children","trailing","titleSuffix"];var _AccordionItemHeader=function _AccordionItemHeader(_ref){var title=_ref.title,subtitle=_ref.subtitle,leading=_ref.leading,children=_ref.children,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,rest=_objectWithoutProperties(_ref,_excluded);var _useAccordion=useAccordion(),size=_useAccordion.size,showNumberPrefix=_useAccordion.showNumberPrefix,expandedIndex=_useAccordion.expandedIndex;var _useAccordionItemInde=useAccordionItemIndex(),index=_useAccordionItemInde.index,isDisabled=_useAccordionItemInde.isDisabled;var isLeadingNumberOrIcon=React__default.useMemo(function(){var _leading$type$name;if(showNumberPrefix&&typeof index==='number')return true;if(leading&&React__default.isValidElement(leading)&&typeof leading.type==='function'&&(_leading$type$name=leading.type.name)!=null&&_leading$type$name.endsWith('Icon'))return true;return false;},[leading,showNumberPrefix,index]);return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItemHeader}),{flex:"1",children:jsx(BaseHeader,Object.assign({leading:showNumberPrefix&&typeof index==='number'?jsxs(Text,{size:size,weight:"semibold",marginTop:"-2px",as:"span",children:[index+1,"."]}):leading,title:title,subtitle:subtitle,trailing:trailing,titleSuffix:titleSuffix,isDisabled:isDisabled,showBackButton:false,showCloseButton:false,showDivider:expandedIndex===index,paddingX:"spacing.5",marginY:"spacing.5",size:size,alignItems:!subtitle&&!isLeadingNumberOrIcon?'center':'flex-start',dividerProps:{thickness:'thinner',marginX:'spacing.5'},trailingInteractionElement:jsx(CollapsibleChevronIcon,{color:isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted',size:"large"})},makeAnalyticsAttribute(rest),{children:children}))}));};var AccordionItemHeader=assignWithoutSideEffects(_AccordionItemHeader,{componentId:componentIds.AccordionItemHeader});
+var _excluded=["title","subtitle","leading","children","trailing","titleSuffix"];var getLeadingElementMaxHeightAndWidth=function getLeadingElementMaxHeightAndWidth(size$1){if(size$1==='large')return makeSize(size['32']);return makeSize(size['24']);};var _AccordionItemHeader=function _AccordionItemHeader(_ref){var _leading$type$name;var title=_ref.title,subtitle=_ref.subtitle,leading=_ref.leading,children=_ref.children,trailing=_ref.trailing,titleSuffix=_ref.titleSuffix,rest=_objectWithoutProperties(_ref,_excluded);var _useAccordion=useAccordion(),size=_useAccordion.size,showNumberPrefix=_useAccordion.showNumberPrefix,expandedIndex=_useAccordion.expandedIndex;var _useAccordionItemInde=useAccordionItemIndex(),index=_useAccordionItemInde.index,isDisabled=_useAccordionItemInde.isDisabled;var isLeadingIcon=React__default.isValidElement(leading)&&typeof leading.type==='function'&&((_leading$type$name=leading.type.name)==null?void 0:_leading$type$name.endsWith('Icon'));var isLeadingNumberOrIcon=React__default.useMemo(function(){if(showNumberPrefix&&typeof index==='number')return true;if(isLeadingIcon)return true;return false;},[showNumberPrefix,index,isLeadingIcon]);var shouldAlignHeaderItemsInCenter=Boolean(children||Boolean(leading)&&!isLeadingNumberOrIcon);var leadingElement=React__default.useMemo(function(){if(showNumberPrefix&&typeof index==='number'){return jsxs(Text,{size:size,weight:"semibold",marginTop:"-2px",as:"span",children:[index+1,"."]});}if(leading){return jsx(BaseBox,{marginRight:isLeadingIcon?'spacing.0':'spacing.3',marginTop:"spacing.1",maxHeight:getLeadingElementMaxHeightAndWidth(size),maxWidth:getLeadingElementMaxHeightAndWidth(size),overflow:"hidden",children:leading});}return null;},[showNumberPrefix,index,leading,size,isLeadingIcon]);return jsx(BaseBox,Object.assign({},metaAttribute({name:MetaConstants.AccordionItemHeader}),{flex:"1",children:jsx(BaseHeader,Object.assign({leading:leadingElement,title:title,subtitle:subtitle,trailing:trailing,titleSuffix:titleSuffix,isDisabled:isDisabled,showBackButton:false,showCloseButton:false,showDivider:expandedIndex===index,paddingX:"spacing.5",marginY:"spacing.5",size:size,alignItems:!subtitle&&!isLeadingNumberOrIcon?'center':'flex-start',dividerProps:{thickness:'thinner',marginX:'spacing.5'},trailingInteractionElement:jsx(CollapsibleChevronIcon,{color:isDisabled?'interactive.icon.gray.disabled':'interactive.icon.gray.muted',size:"large"}),shouldAlignLeadingAndTrailingElementsToCenter:shouldAlignHeaderItemsInCenter},makeAnalyticsAttribute(rest),{children:children}))}));};var AccordionItemHeader=assignWithoutSideEffects(_AccordionItemHeader,{componentId:componentIds.AccordionItemHeader});
 
 export { AccordionItemHeader };
 //# sourceMappingURL=AccordionItemHeader.js.map

package/build/lib/native/components/Accordion/AccordionItemHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItemHeader.js","sources":["../../../../../src/components/Accordion/AccordionItemHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useAccordion, useAccordionItemIndex } from './AccordionContext';\nimport { componentIds } from './componentIds';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _AccordionItemHeader = ({\n  title,\n  subtitle,\n  leading,\n  children,\n  trailing,\n  titleSuffix,\n  ...rest\n}: Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'\n> &\n  DataAnalyticsAttribute): React.ReactElement => {\n  const { size, showNumberPrefix, expandedIndex } = useAccordion();\n  const { index, isDisabled } = useAccordionItemIndex();\n\n  const isLeadingNumberOrIcon = React.useMemo(() => {\n    // Check if leading is a number\n    if (showNumberPrefix && typeof index === 'number') return true;\n\n    // Check if leading is an Icon component (name ends with \"Icon\")\n    if (\n      leading &&\n      React.isValidElement(leading) &&\n      typeof leading.type === 'function' &&\n      leading.type.name?.endsWith('Icon')\n    )\n      return true;\n\n    return false;\n  }, [leading, showNumberPrefix, index]);\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemHeader })} flex=\"1\">\n      <BaseHeader\n        leading={\n          showNumberPrefix && typeof index === 'number' ? (\n            // we have to add -2px margin to align the number with title of BaseHeader\n            <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n              {index + 1}.\n            </Text>\n          ) : (\n            leading\n          )\n        }\n        title={title}\n        subtitle={subtitle}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        isDisabled={isDisabled}\n        showBackButton={false}\n        showCloseButton={false}\n        showDivider={expandedIndex === index}\n        paddingX=\"spacing.5\"\n        marginY=\"spacing.5\"\n        size={size}\n        alignItems={!subtitle && !isLeadingNumberOrIcon ? 'center' : 'flex-start'}\n        dividerProps={{\n          thickness: 'thinner',\n          marginX: 'spacing.5',\n        }}\n        trailingInteractionElement={\n          <CollapsibleChevronIcon\n            color={isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'}\n            size=\"large\"\n          />\n        }\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseHeader>\n    </BaseBox>\n  );\n};\n\nconst AccordionItemHeader = assignWithoutSideEffects(_AccordionItemHeader, {\n  componentId: componentIds.AccordionItemHeader,\n});\n\nexport { AccordionItemHeader };\n"],"names":["_AccordionItemHeader","_ref","title","subtitle","leading","children","trailing","titleSuffix","rest","_objectWithoutProperties","_excluded","_useAccordion","useAccordion","size","showNumberPrefix","expandedIndex","_useAccordionItemInde","useAccordionItemIndex","index","isDisabled","isLeadingNumberOrIcon","React","useMemo","_leading$type$name","isValidElement","type","name","endsWith","_jsx","BaseBox","Object","assign","metaAttribute","MetaConstants","AccordionItemHeader","flex","BaseHeader","_jsxs","Text","weight","marginTop","as","showBackButton","showCloseButton","showDivider","paddingX","marginY","alignItems","dividerProps","thickness","marginX","trailingInteractionElement","CollapsibleChevronIcon","color","makeAnalyticsAttribute","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}
+{"version":3,"file":"AccordionItemHeader.js","sources":["../../../../../src/components/Accordion/AccordionItemHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useAccordion, useAccordionItemIndex } from './AccordionContext';\nimport { componentIds } from './componentIds';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { BoxProps } from '~components/Box';\nimport { makeSize } from '~utils/makeSize';\nimport { size as sizeToken } from '~tokens/global';\n\nconst getLeadingElementMaxHeightAndWidth = (\n  size: BaseHeaderProps['size'],\n): BoxProps['maxHeight'] => {\n  if (size === 'large') return makeSize(sizeToken['32']);\n  return makeSize(sizeToken['24']);\n};\n\nconst _AccordionItemHeader = ({\n  title,\n  subtitle,\n  leading,\n  children,\n  trailing,\n  titleSuffix,\n  ...rest\n}: Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'\n> &\n  DataAnalyticsAttribute): React.ReactElement => {\n  const { size, showNumberPrefix, expandedIndex } = useAccordion();\n  const { index, isDisabled } = useAccordionItemIndex();\n\n  const isLeadingIcon =\n    React.isValidElement(leading) &&\n    typeof leading.type === 'function' &&\n    leading.type.name?.endsWith('Icon');\n\n  const isLeadingNumberOrIcon = React.useMemo(() => {\n    // Check if leading is a number\n    if (showNumberPrefix && typeof index === 'number') return true;\n\n    // Check if leading is an Icon component (name ends with \"Icon\")\n    if (isLeadingIcon) return true;\n\n    return false;\n  }, [showNumberPrefix, index, isLeadingIcon]);\n\n  const shouldAlignHeaderItemsInCenter = Boolean(\n    children || (Boolean(leading) && !isLeadingNumberOrIcon),\n  );\n\n  const leadingElement = React.useMemo(() => {\n    if (showNumberPrefix && typeof index === 'number') {\n      return (\n        <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n          {index + 1}.\n        </Text>\n      );\n    }\n    if (leading) {\n      return (\n        <BaseBox\n          marginRight={isLeadingIcon ? 'spacing.0' : 'spacing.3'}\n          marginTop=\"spacing.1\"\n          // So in design, we have set max height and width for the leading element, doing same here\n          maxHeight={getLeadingElementMaxHeightAndWidth(size)}\n          maxWidth={getLeadingElementMaxHeightAndWidth(size)}\n          overflow=\"hidden\"\n        >\n          {leading}\n        </BaseBox>\n      );\n    }\n    return null;\n  }, [showNumberPrefix, index, leading, size, isLeadingIcon]);\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemHeader })} flex=\"1\">\n      <BaseHeader\n        leading={leadingElement}\n        title={title}\n        subtitle={subtitle}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        isDisabled={isDisabled}\n        showBackButton={false}\n        showCloseButton={false}\n        showDivider={expandedIndex === index}\n        paddingX=\"spacing.5\"\n        marginY=\"spacing.5\"\n        size={size}\n        alignItems={!subtitle && !isLeadingNumberOrIcon ? 'center' : 'flex-start'}\n        dividerProps={{\n          thickness: 'thinner',\n          marginX: 'spacing.5',\n        }}\n        trailingInteractionElement={\n          <CollapsibleChevronIcon\n            color={isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'}\n            size=\"large\"\n          />\n        }\n        shouldAlignLeadingAndTrailingElementsToCenter={shouldAlignHeaderItemsInCenter}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseHeader>\n    </BaseBox>\n  );\n};\n\nconst AccordionItemHeader = assignWithoutSideEffects(_AccordionItemHeader, {\n  componentId: componentIds.AccordionItemHeader,\n});\n\nexport { AccordionItemHeader };\n"],"names":["getLeadingElementMaxHeightAndWidth","size","makeSize","sizeToken","_AccordionItemHeader","_ref","_leading$type$name","title","subtitle","leading","children","trailing","titleSuffix","rest","_objectWithoutProperties","_excluded","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","_useAccordionItemInde","useAccordionItemIndex","index","isDisabled","isLeadingIcon","React","isValidElement","type","name","endsWith","isLeadingNumberOrIcon","useMemo","shouldAlignHeaderItemsInCenter","Boolean","leadingElement","_jsxs","Text","weight","marginTop","as","_jsx","BaseBox","marginRight","maxHeight","maxWidth","overflow","Object","assign","metaAttribute","MetaConstants","AccordionItemHeader","flex","BaseHeader","showBackButton","showCloseButton","showDivider","paddingX","marginY","alignItems","dividerProps","thickness","marginX","trailingInteractionElement","CollapsibleChevronIcon","color","shouldAlignLeadingAndTrailingElementsToCenter","makeAnalyticsAttribute","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}

package/build/lib/native/components/BaseHeaderFooter/BaseHeader.js

@@ -31,7 +31,7 @@ import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/a
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded=["title","subtitle","leading","titleSuffix","trailing","showDivider","showBackButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","backButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","paddingX","marginY","marginBottom","marginTop","size","isDisabled","children","trailingInteractionElement","backgroundImage","alignItems","dividerProps"];var commonCenterBoxProps={display:'flex',alignItems:'center',justifyContent:'center'};var centerBoxProps={xlarge:Object.assign({},commonCenterBoxProps,{height:'28px'}),large:Object.assign({},commonCenterBoxProps,{height:'28px'}),medium:Object.assign({},commonCenterBoxProps,{height:'20px'})};var absolutePositionedButton={position:'absolute',top:'spacing.0',right:'spacing.0'};var sizeTokensMapping={xlarge:{title:'small',type:'heading'},large:{title:'large',type:'text'},medium:{title:'medium',type:'text'}};var propRestrictionMap={large:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'medium'},Link:{size:'medium'},Text:{size:'medium',variant:'body'},Amount:{type:'body',size:'medium'}},xlarge:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'medium'},Link:{size:'medium'},Text:{size:'medium',variant:'body'},Amount:{type:'body',size:'medium'}},medium:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'small'},Link:{size:'small'},Text:{size:'small',variant:'body'},Amount:{type:'body',size:'small'}}};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],setValidatedTrailingComponent=_React$useState2[1];React__default.useEffect(function(){if(React__default.isValidElement(trailing)){var trailingComponentType=getComponentId(trailing);var restrictedProps=propRestrictionMap[size][trailingComponentType];var allowedComponents=Object.keys(propRestrictionMap[size]);if(__DEV__){if(!restrictedProps){throwBladeError({message:`Only one of \`${allowedComponents.join(', ')}\` component is accepted as trailing`,moduleName:'Header'});}}var restrictedPropKeys=Object.keys(propRestrictionMap[size][trailingComponentType]);for(var prop of restrictedPropKeys){var _trailing$props;if(trailing!=null&&(_trailing$props=trailing.props)!=null&&_trailing$props.hasOwnProperty(prop)){logger({message:`Do not pass "${prop}" to "${trailingComponentType}" while inside Header trailing, because we override it.`,moduleName:'Header',type:'warn'});}}setValidatedTrailingComponent(React__default.cloneElement(trailing,restrictedProps));}},[trailing,size]);return validatedTrailingComponent;};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,marginBottom=_ref2.marginBottom,marginTop=_ref2.marginTop,_ref2$size=_ref2.size,size$1=_ref2$size===void 0?'large':_ref2$size,isDisabled=_ref2.isDisabled,children=_ref2.children,trailingInteractionElement=_ref2.trailingInteractionElement,backgroundImage=_ref2.backgroundImage,_ref2$alignItems=_ref2.alignItems,alignItems=_ref2$alignItems===void 0?'flex-start':_ref2$alignItems,dividerProps=_ref2.dividerProps,rest=_objectWithoutProperties(_ref2,_excluded);var validatedTrailingComponent=useTrailingRestriction({trailing:trailing,size:size$1});var shouldWrapTitle=titleSuffix&&trailing&&showBackButton&&showCloseButton;var hasOnlyChildren=children&&!(title||subtitle||titleSuffix||leading);var webOnlyEventHandlers=isReactNative()?{}:{onClickCapture:onClickCapture,onKeyDown:onKeyDown,onKeyUp:onKeyUp,onLostPointerCapture:onLostPointerCapture,onPointerCancel:onPointerCancel,onPointerDown:onPointerDown,onPointerMove:onPointerMove,onPointerUp:onPointerUp};return jsxs(BaseBox,Object.assign({},metaAttribute({name:metaComponentName,testID:testID}),makeAnalyticsAttribute(rest),{backgroundImage:backgroundImage,children:[jsxs(BaseBox,Object.assign({marginY:marginY!=null?marginY:{base:'spacing.5',m:'spacing.6'},paddingX:paddingX!=null?paddingX:{base:'spacing.5',m:'spacing.6'},marginTop:marginTop,marginBottom:marginBottom,touchAction:"none"},webOnlyEventHandlers,{children:[jsxs(BaseBox,{position:"relative",display:"flex",flexDirection:"row",userSelect:"none",children:[showBackButton?jsx(BaseBox,{overflow:"visible",marginRight:"spacing.5",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:jsx(IconButton,{ref:backButtonRef,size:"large",icon:ChevronLeftIcon,onClick:function onClick(){return onBackButtonClick==null?void 0:onBackButtonClick();},accessibilityLabel:"Back"})}))}):null,hasOnlyChildren?null:jsxs(BaseBox,{paddingRight:"spacing.5",marginRight:"auto",flex:"auto",display:"flex",flexDirection:"row",alignItems:alignItems,children:[leading?jsx(BaseBox,Object.assign({marginRight:"spacing.3"},centerBoxProps[size$1],{children:leading})):null,jsxs(BaseBox,{flex:"auto",children:[jsxs(BaseBox,{maxWidth:isReactNative()&&shouldWrapTitle?'100px':undefined,flexShrink:0,display:"flex",flexDirection:"row",children:[title?sizeTokensMapping[size$1].type==='heading'?jsx(Heading,{as:"h2",marginTop:makeSize(size['1']),size:sizeTokensMapping[size$1].title,weight:"semibold",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.normal',wordBreak:"break-word",children:title}):jsx(Text,{size:sizeTokensMapping[size$1].title,marginTop:makeSize(size['1']),weight:"semibold",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.normal',wordBreak:"break-word",children:title}):null,titleSuffix&&jsx(BaseBox,{marginLeft:"spacing.3",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:titleSuffix}))})]}),subtitle?jsx(Text,{variant:"body",size:"small",weight:"regular",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.muted',children:subtitle}):null]})]}),validatedTrailingComponent?jsx(BaseBox,{marginRight:"spacing.5",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:validatedTrailingComponent}))}):null,showCloseButton?jsx(Box,Object.assign({},hasOnlyChildren?absolutePositionedButton:centerBoxProps[size$1],{children:jsx(IconButton,{ref:closeButtonRef,size:"large",icon:CloseIcon,accessibilityLabel:"Close",onClick:function onClick(){return onCloseButtonClick==null?void 0:onCloseButtonClick();}})})):null,trailingInteractionElement&&!children?jsx(Box,Object.assign({},centerBoxProps[size$1],{children:trailingInteractionElement})):null]}),jsxs(BaseBox,{display:"flex",width:"100%",flexDirection:"row",alignItems:"center",justifyContent:"space-between",children:[jsx(Box,{width:"100%",children:children}),trailingInteractionElement&&children?jsx(Box,Object.assign({alignSelf:"flex-start"},centerBoxProps[size$1],{children:trailingInteractionElement})):null]})]})),showDivider?jsx(Divider,Object.assign({},dividerProps)):null]}));};var BaseHeader=assignWithoutSideEffects(_BaseHeader,{componentId:'BaseHeader'});
+var _excluded=["title","subtitle","leading","titleSuffix","trailing","showDivider","showBackButton","showCloseButton","onBackButtonClick","onCloseButtonClick","closeButtonRef","backButtonRef","testID","onClickCapture","onKeyDown","onKeyUp","onLostPointerCapture","onPointerCancel","onPointerDown","onPointerMove","onPointerUp","metaComponentName","paddingX","marginY","marginBottom","marginTop","size","isDisabled","children","trailingInteractionElement","backgroundImage","alignItems","dividerProps","shouldAlignLeadingAndTrailingElementsToCenter"];var commonCenterBoxProps={display:'flex',alignItems:'center',justifyContent:'center'};var centerBoxProps={xlarge:Object.assign({},commonCenterBoxProps,{height:'28px'}),large:Object.assign({},commonCenterBoxProps,{height:'28px'}),medium:Object.assign({},commonCenterBoxProps,{height:'20px'})};var absolutePositionedButton={position:'absolute',top:'spacing.0',right:'spacing.0'};var sizeTokensMapping={xlarge:{title:'small',type:'heading'},large:{title:'large',type:'text'},medium:{title:'medium',type:'text'}};var propRestrictionMap={large:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'medium'},Link:{size:'medium'},Text:{size:'medium',variant:'body'},Amount:{type:'body',size:'medium'}},xlarge:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'medium'},Link:{size:'medium'},Text:{size:'medium',variant:'body'},Amount:{type:'body',size:'medium'}},medium:{Button:{size:'xsmall',variant:'tertiary'},IconButton:{size:'large'},Badge:{size:'small'},Link:{size:'small'},Text:{size:'small',variant:'body'},Amount:{type:'body',size:'small'}}};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],setValidatedTrailingComponent=_React$useState2[1];React__default.useEffect(function(){if(React__default.isValidElement(trailing)){var trailingComponentType=getComponentId(trailing);var restrictedProps=propRestrictionMap[size][trailingComponentType];var allowedComponents=Object.keys(propRestrictionMap[size]);if(__DEV__){if(!restrictedProps){throwBladeError({message:`Only one of \`${allowedComponents.join(', ')}\` component is accepted as trailing`,moduleName:'Header'});}}var restrictedPropKeys=Object.keys(propRestrictionMap[size][trailingComponentType]);for(var prop of restrictedPropKeys){var _trailing$props;if(trailing!=null&&(_trailing$props=trailing.props)!=null&&_trailing$props.hasOwnProperty(prop)){logger({message:`Do not pass "${prop}" to "${trailingComponentType}" while inside Header trailing, because we override it.`,moduleName:'Header',type:'warn'});}}setValidatedTrailingComponent(React__default.cloneElement(trailing,restrictedProps));}},[trailing,size]);return validatedTrailingComponent;};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,marginBottom=_ref2.marginBottom,marginTop=_ref2.marginTop,_ref2$size=_ref2.size,size$1=_ref2$size===void 0?'large':_ref2$size,isDisabled=_ref2.isDisabled,children=_ref2.children,trailingInteractionElement=_ref2.trailingInteractionElement,backgroundImage=_ref2.backgroundImage,_ref2$alignItems=_ref2.alignItems,alignItems=_ref2$alignItems===void 0?'flex-start':_ref2$alignItems,dividerProps=_ref2.dividerProps,_ref2$shouldAlignLead=_ref2.shouldAlignLeadingAndTrailingElementsToCenter,shouldAlignLeadingAndTrailingElementsToCenter=_ref2$shouldAlignLead===void 0?false:_ref2$shouldAlignLead,rest=_objectWithoutProperties(_ref2,_excluded);var validatedTrailingComponent=useTrailingRestriction({trailing:trailing,size:size$1});var shouldWrapTitle=titleSuffix&&trailing&&showBackButton&&showCloseButton;var hasOnlyChildren=children&&!(title||subtitle||titleSuffix||leading);var webOnlyEventHandlers=isReactNative()?{}:{onClickCapture:onClickCapture,onKeyDown:onKeyDown,onKeyUp:onKeyUp,onLostPointerCapture:onLostPointerCapture,onPointerCancel:onPointerCancel,onPointerDown:onPointerDown,onPointerMove:onPointerMove,onPointerUp:onPointerUp};var renderTrailingInteractionElementWithChildren=function renderTrailingInteractionElementWithChildren(){if(trailingInteractionElement&&children){return jsx(Box,Object.assign({alignSelf:shouldAlignLeadingAndTrailingElementsToCenter?'center':'flex-start'},centerBoxProps[size$1],{children:trailingInteractionElement}));}return null;};var renderTrailingInteractionElementWithoutChildren=function renderTrailingInteractionElementWithoutChildren(){if(trailingInteractionElement&&!children){return jsx(Box,Object.assign({},centerBoxProps[size$1],{alignSelf:shouldAlignLeadingAndTrailingElementsToCenter?'center':undefined,children:trailingInteractionElement}));}return null;};var renderLeadingElement=function renderLeadingElement(){if(Boolean(leading)){return jsx(BaseBox,Object.assign({marginRight:"spacing.3"},centerBoxProps[size$1],{alignSelf:shouldAlignLeadingAndTrailingElementsToCenter?'center':undefined,children:leading}));}return null;};var renderTrailingElement=function renderTrailingElement(){if(shouldAlignLeadingAndTrailingElementsToCenter&&validatedTrailingComponent){return jsx(BaseBox,{marginRight:"spacing.5",display:"flex",alignItems:"center",justifyContent:"center",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:validatedTrailingComponent}))});}if(validatedTrailingComponent){return jsx(BaseBox,{marginRight:"spacing.5",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:validatedTrailingComponent}))});}return null;};return jsxs(BaseBox,Object.assign({},metaAttribute({name:metaComponentName,testID:testID}),makeAnalyticsAttribute(rest),{backgroundImage:backgroundImage,children:[jsxs(BaseBox,Object.assign({marginY:marginY!=null?marginY:{base:'spacing.5',m:'spacing.6'},paddingX:paddingX!=null?paddingX:{base:'spacing.5',m:'spacing.6'},marginTop:marginTop,marginBottom:marginBottom,touchAction:"none"},webOnlyEventHandlers,{children:[jsxs(BaseBox,{position:"relative",display:"flex",flexDirection:"row",userSelect:"none",children:[showBackButton?jsx(BaseBox,{overflow:"visible",marginRight:"spacing.5",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:jsx(IconButton,{ref:backButtonRef,size:"large",icon:ChevronLeftIcon,onClick:function onClick(){return onBackButtonClick==null?void 0:onBackButtonClick();},accessibilityLabel:"Back"})}))}):null,hasOnlyChildren?null:jsxs(BaseBox,{paddingRight:"spacing.5",marginRight:"auto",flex:"auto",display:"flex",flexDirection:"row",alignItems:alignItems,children:[renderLeadingElement(),jsxs(BaseBox,{flex:"auto",children:[jsxs(BaseBox,{maxWidth:isReactNative()&&shouldWrapTitle?'100px':undefined,flexShrink:0,display:"flex",flexDirection:"row",children:[title?sizeTokensMapping[size$1].type==='heading'?jsx(Heading,{as:"h2",marginTop:makeSize(size['1']),size:sizeTokensMapping[size$1].title,weight:"semibold",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.normal',wordBreak:"break-word",children:title}):jsx(Text,{size:sizeTokensMapping[size$1].title,marginTop:makeSize(size['1']),weight:"semibold",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.normal',wordBreak:"break-word",children:title}):null,titleSuffix&&jsx(BaseBox,{marginLeft:"spacing.3",children:jsx(Box,Object.assign({},centerBoxProps[size$1],{children:titleSuffix}))})]}),subtitle?jsx(Text,{variant:"body",size:"small",weight:"regular",color:isDisabled?'surface.text.gray.disabled':'surface.text.gray.muted',children:subtitle}):null]})]}),renderTrailingElement(),showCloseButton?jsx(Box,Object.assign({},hasOnlyChildren?absolutePositionedButton:centerBoxProps[size$1],{children:jsx(IconButton,{ref:closeButtonRef,size:"large",icon:CloseIcon,accessibilityLabel:"Close",onClick:function onClick(){return onCloseButtonClick==null?void 0:onCloseButtonClick();}})})):null,renderTrailingInteractionElementWithoutChildren()]}),jsxs(BaseBox,{display:"flex",width:"100%",flexDirection:"row",alignItems:"center",justifyContent:"space-between",children:[jsx(Box,{width:"100%",children:children}),renderTrailingInteractionElementWithChildren()]})]})),showDivider?jsx(Divider,Object.assign({},dividerProps)):null]}));};var BaseHeader=assignWithoutSideEffects(_BaseHeader,{componentId:'BaseHeader'});
 
 export { BaseHeader };
 //# sourceMappingURL=BaseHeader.js.map

package/build/lib/native/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 type { DividerProps } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Heading, Text } from '~components/Typography';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ChevronLeftIcon, CloseIcon } from '~components/Icons';\nimport type { DataAnalyticsAttribute, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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?: 'xlarge' | '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  marginTop?: BoxProps['marginTop'];\n  marginBottom?: BoxProps['marginBottom'];\n  alignItems?: BoxProps['alignItems'];\n  dividerProps?: DividerProps;\n\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  /**\n   * Background image of the header\n   *\n   * You can use this for adding gradients.\n   */\n  backgroundImage?: BoxProps['backgroundImage'];\n} & Pick<\n  ReactDOMAttributes,\n  | 'onClickCapture'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onLostPointerCapture'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerMove'\n  | 'onPointerUp'\n> &\n  TestID &\n  DataAnalyticsAttribute;\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: { xlarge: BoxProps; large: BoxProps; medium: BoxProps } = {\n  xlarge: {\n    ...commonCenterBoxProps,\n    height: '28px',\n  },\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 absolutePositionedButton = {\n  position: 'absolute',\n  top: 'spacing.0',\n  right: 'spacing.0',\n} as const;\n\nconst sizeTokensMapping = {\n  xlarge: {\n    title: 'small',\n    type: 'heading',\n  },\n  large: {\n    title: 'large',\n    type: 'text',\n  },\n  medium: {\n    title: 'medium',\n    type: 'text',\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    IconButton: {\n      size: 'large',\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  xlarge: {\n    Button: {\n      size: 'xsmall',\n      variant: 'tertiary',\n    },\n    IconButton: {\n      size: 'large',\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    IconButton: {\n      size: 'large',\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\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  marginBottom,\n  marginTop,\n  size = 'large',\n  isDisabled,\n  children,\n  trailingInteractionElement,\n  backgroundImage,\n  alignItems = 'flex-start',\n  dividerProps,\n  ...rest\n}: BaseHeaderProps): React.ReactElement => {\n  const validatedTrailingComponent = useTrailingRestriction({ trailing, size });\n  const shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;\n  const hasOnlyChildren = children && !(title || subtitle || titleSuffix || leading);\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\n      {...metaAttribute({ name: metaComponentName, testID })}\n      {...makeAnalyticsAttribute(rest)}\n      backgroundImage={backgroundImage}\n    >\n      <BaseBox\n        marginY={marginY ?? { base: 'spacing.5', m: 'spacing.6' }}\n        paddingX={paddingX ?? { base: 'spacing.5', m: 'spacing.6' }}\n        marginTop={marginTop}\n        marginBottom={marginBottom}\n        touchAction=\"none\"\n        {...webOnlyEventHandlers}\n      >\n        <BaseBox position=\"relative\" 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          {hasOnlyChildren ? null : (\n            <BaseBox\n              paddingRight=\"spacing.5\"\n              marginRight=\"auto\"\n              flex=\"auto\"\n              display=\"flex\"\n              flexDirection=\"row\"\n              alignItems={alignItems}\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                    sizeTokensMapping[size].type === 'heading' ? (\n                      <Heading\n                        as=\"h2\"\n                        marginTop={makeSize(sizeToken['1'])}\n                        size={sizeTokensMapping[size].title}\n                        weight=\"semibold\"\n                        color={\n                          isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'\n                        }\n                        wordBreak=\"break-word\"\n                      >\n                        {title}\n                      </Heading>\n                    ) : (\n                      <Text\n                        size={sizeTokensMapping[size].title}\n                        marginTop={makeSize(sizeToken['1'])}\n                        weight=\"semibold\"\n                        color={\n                          isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'\n                        }\n                        wordBreak=\"break-word\"\n                      >\n                        {title}\n                      </Text>\n                    )\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          )}\n          {validatedTrailingComponent ? (\n            <BaseBox marginRight=\"spacing.5\">\n              <Box {...centerBoxProps[size]}>{validatedTrailingComponent}</Box>\n            </BaseBox>\n          ) : null}\n          {showCloseButton ? (\n            <Box {...(hasOnlyChildren ? absolutePositionedButton : 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 width=\"100%\">{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 {...dividerProps} /> : 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","xlarge","Object","assign","height","large","medium","absolutePositionedButton","position","top","right","sizeTokensMapping","title","type","propRestrictionMap","Button","size","variant","IconButton","Badge","Link","Text","Amount","useTrailingRestriction","_ref","trailing","_React$useState","React","useState","_React$useState2","_slicedToArray","validatedTrailingComponent","setValidatedTrailingComponent","useEffect","isValidElement","trailingComponentType","getComponentId","restrictedProps","allowedComponents","keys","__DEV__","throwBladeError","message","join","moduleName","restrictedPropKeys","prop","_trailing$props","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","marginBottom","marginTop","_ref2$size","isDisabled","children","trailingInteractionElement","backgroundImage","_ref2$alignItems","dividerProps","rest","_objectWithoutProperties","_excluded","shouldWrapTitle","hasOnlyChildren","webOnlyEventHandlers","isReactNative","_jsxs","BaseBox","metaAttribute","name","makeAnalyticsAttribute","base","m","touchAction","flexDirection","userSelect","_jsx","overflow","marginRight","Box","ref","icon","ChevronLeftIcon","onClick","accessibilityLabel","paddingRight","flex","maxWidth","undefined","flexShrink","Heading","as","makeSize","sizeToken","weight","color","wordBreak","marginLeft","CloseIcon","width","alignSelf","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 type { DividerProps } from '~components/Divider';\nimport BaseBox from '~components/Box/BaseBox';\nimport { Heading, Text } from '~components/Typography';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ChevronLeftIcon, CloseIcon } from '~components/Icons';\nimport type { DataAnalyticsAttribute, 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';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\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?: 'xlarge' | '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  marginTop?: BoxProps['marginTop'];\n  marginBottom?: BoxProps['marginBottom'];\n  alignItems?: BoxProps['alignItems'];\n  dividerProps?: DividerProps;\n\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  /**\n   * Background image of the header\n   *\n   * You can use this for adding gradients.\n   */\n  backgroundImage?: BoxProps['backgroundImage'];\n  /**\n   * So we add a wrapper with custom styles in elements like leading, trailing interaction elements and trailing.\n   * this props allows you to control that.\n   *\n   * For example, in Accordion, we add a wrapper with flex to center the icon (in some cases)\n   *\n   * @default false\n   */\n  shouldAlignLeadingAndTrailingElementsToCenter?: boolean;\n} & Pick<\n  ReactDOMAttributes,\n  | 'onClickCapture'\n  | 'onKeyDown'\n  | 'onKeyUp'\n  | 'onLostPointerCapture'\n  | 'onPointerCancel'\n  | 'onPointerDown'\n  | 'onPointerMove'\n  | 'onPointerUp'\n> &\n  TestID &\n  DataAnalyticsAttribute;\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: { xlarge: BoxProps; large: BoxProps; medium: BoxProps } = {\n  xlarge: {\n    ...commonCenterBoxProps,\n    height: '28px',\n  },\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 absolutePositionedButton = {\n  position: 'absolute',\n  top: 'spacing.0',\n  right: 'spacing.0',\n} as const;\n\nconst sizeTokensMapping = {\n  xlarge: {\n    title: 'small',\n    type: 'heading',\n  },\n  large: {\n    title: 'large',\n    type: 'text',\n  },\n  medium: {\n    title: 'medium',\n    type: 'text',\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    IconButton: {\n      size: 'large',\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  xlarge: {\n    Button: {\n      size: 'xsmall',\n      variant: 'tertiary',\n    },\n    IconButton: {\n      size: 'large',\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    IconButton: {\n      size: 'large',\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\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  marginBottom,\n  marginTop,\n  size = 'large',\n  isDisabled,\n  children,\n  trailingInteractionElement,\n  backgroundImage,\n  alignItems = 'flex-start',\n  dividerProps,\n  shouldAlignLeadingAndTrailingElementsToCenter = false,\n  ...rest\n}: BaseHeaderProps): React.ReactElement => {\n  const validatedTrailingComponent = useTrailingRestriction({ trailing, size });\n  const shouldWrapTitle = titleSuffix && trailing && showBackButton && showCloseButton;\n  const hasOnlyChildren = children && !(title || subtitle || titleSuffix || leading);\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  const renderTrailingInteractionElementWithChildren = (): React.ReactNode => {\n    if (trailingInteractionElement && children) {\n      return (\n        <Box\n          alignSelf={shouldAlignLeadingAndTrailingElementsToCenter ? 'center' : 'flex-start'}\n          {...centerBoxProps[size]}\n        >\n          {trailingInteractionElement}\n        </Box>\n      );\n    }\n    return null;\n  };\n\n  const renderTrailingInteractionElementWithoutChildren = (): React.ReactNode => {\n    if (trailingInteractionElement && !children) {\n      return (\n        <Box\n          {...centerBoxProps[size]}\n          alignSelf={shouldAlignLeadingAndTrailingElementsToCenter ? 'center' : undefined}\n        >\n          {trailingInteractionElement}\n        </Box>\n      );\n    }\n    return null;\n  };\n\n  const renderLeadingElement = (): React.ReactNode => {\n    if (Boolean(leading)) {\n      return (\n        <BaseBox\n          marginRight=\"spacing.3\"\n          {...centerBoxProps[size]}\n          alignSelf={shouldAlignLeadingAndTrailingElementsToCenter ? 'center' : undefined}\n        >\n          {leading}\n        </BaseBox>\n      );\n    }\n    return null;\n  };\n\n  const renderTrailingElement = (): React.ReactNode => {\n    if (shouldAlignLeadingAndTrailingElementsToCenter && validatedTrailingComponent) {\n      return (\n        <BaseBox marginRight=\"spacing.5\" display=\"flex\" alignItems=\"center\" justifyContent=\"center\">\n          <Box {...centerBoxProps[size]}>{validatedTrailingComponent}</Box>\n        </BaseBox>\n      );\n    }\n    if (validatedTrailingComponent) {\n      return (\n        <BaseBox marginRight=\"spacing.5\">\n          <Box {...centerBoxProps[size]}>{validatedTrailingComponent}</Box>\n        </BaseBox>\n      );\n    }\n    return null;\n  };\n\n  return (\n    <BaseBox\n      {...metaAttribute({ name: metaComponentName, testID })}\n      {...makeAnalyticsAttribute(rest)}\n      backgroundImage={backgroundImage}\n    >\n      <BaseBox\n        marginY={marginY ?? { base: 'spacing.5', m: 'spacing.6' }}\n        paddingX={paddingX ?? { base: 'spacing.5', m: 'spacing.6' }}\n        marginTop={marginTop}\n        marginBottom={marginBottom}\n        touchAction=\"none\"\n        {...webOnlyEventHandlers}\n      >\n        <BaseBox position=\"relative\" 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          {hasOnlyChildren ? null : (\n            <BaseBox\n              paddingRight=\"spacing.5\"\n              marginRight=\"auto\"\n              flex=\"auto\"\n              display=\"flex\"\n              flexDirection=\"row\"\n              alignItems={alignItems}\n            >\n              {renderLeadingElement()}\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                    sizeTokensMapping[size].type === 'heading' ? (\n                      <Heading\n                        as=\"h2\"\n                        marginTop={makeSize(sizeToken['1'])}\n                        size={sizeTokensMapping[size].title}\n                        weight=\"semibold\"\n                        color={\n                          isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'\n                        }\n                        wordBreak=\"break-word\"\n                      >\n                        {title}\n                      </Heading>\n                    ) : (\n                      <Text\n                        size={sizeTokensMapping[size].title}\n                        marginTop={makeSize(sizeToken['1'])}\n                        weight=\"semibold\"\n                        color={\n                          isDisabled ? 'surface.text.gray.disabled' : 'surface.text.gray.normal'\n                        }\n                        wordBreak=\"break-word\"\n                      >\n                        {title}\n                      </Text>\n                    )\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          )}\n          {renderTrailingElement()}\n\n          {showCloseButton ? (\n            <Box {...(hasOnlyChildren ? absolutePositionedButton : 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          {renderTrailingInteractionElementWithoutChildren()}\n        </BaseBox>\n        <BaseBox\n          display=\"flex\"\n          width=\"100%\"\n          flexDirection=\"row\"\n          alignItems=\"center\"\n          justifyContent=\"space-between\"\n        >\n          <Box width=\"100%\">{children}</Box>\n          {renderTrailingInteractionElementWithChildren()}\n        </BaseBox>\n      </BaseBox>\n      {showDivider ? <Divider {...dividerProps} /> : 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","xlarge","Object","assign","height","large","medium","absolutePositionedButton","position","top","right","sizeTokensMapping","title","type","propRestrictionMap","Button","size","variant","IconButton","Badge","Link","Text","Amount","useTrailingRestriction","_ref","trailing","_React$useState","React","useState","_React$useState2","_slicedToArray","validatedTrailingComponent","setValidatedTrailingComponent","useEffect","isValidElement","trailingComponentType","getComponentId","restrictedProps","allowedComponents","keys","__DEV__","throwBladeError","message","join","moduleName","restrictedPropKeys","prop","_trailing$props","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","marginBottom","marginTop","_ref2$size","isDisabled","children","trailingInteractionElement","backgroundImage","_ref2$alignItems","dividerProps","_ref2$shouldAlignLead","shouldAlignLeadingAndTrailingElementsToCenter","rest","_objectWithoutProperties","_excluded","shouldWrapTitle","hasOnlyChildren","webOnlyEventHandlers","isReactNative","renderTrailingInteractionElementWithChildren","_jsx","Box","alignSelf","renderTrailingInteractionElementWithoutChildren","undefined","renderLeadingElement","Boolean","BaseBox","marginRight","renderTrailingElement","_jsxs","metaAttribute","name","makeAnalyticsAttribute","base","m","touchAction","flexDirection","userSelect","overflow","ref","icon","ChevronLeftIcon","onClick","accessibilityLabel","paddingRight","flex","maxWidth","flexShrink","Heading","as","makeSize","sizeToken","weight","color","wordBreak","marginLeft","CloseIcon","width","Divider","BaseHeader","assignWithoutSideEffects","componentId"],"mappings":"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"}

package/build/lib/web/development/components/Accordion/AccordionItemHeader.js

@@ -10,18 +10,27 @@ import { CollapsibleChevronIcon } from '../Collapsible/CollapsibleChevronIcon.we
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/metaAttribute/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import '../../utils/makeSize/index.js';
+import '../../tokens/global/index.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { makeSize } from '../../utils/makeSize/makeSize.js';
+import { size } from '../../tokens/global/size.js';
+import { Text } from '../Typography/Text/Text.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
-import { Text } from '../Typography/Text/Text.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
 var _excluded = ["title", "subtitle", "leading", "children", "trailing", "titleSuffix"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var getLeadingElementMaxHeightAndWidth = function getLeadingElementMaxHeightAndWidth(size$1) {
+  if (size$1 === 'large') return makeSize(size['32']);
+  return makeSize(size['24']);
+};
 var _AccordionItemHeader = function _AccordionItemHeader(_ref) {
+  var _leading$type$name;
   var title = _ref.title,
     subtitle = _ref.subtitle,
     leading = _ref.leading,
@@ -36,30 +45,46 @@ var _AccordionItemHeader = function _AccordionItemHeader(_ref) {
   var _useAccordionItemInde = useAccordionItemIndex(),
     index = _useAccordionItemInde.index,
     isDisabled = _useAccordionItemInde.isDisabled;
+  var isLeadingIcon = /*#__PURE__*/React__default.isValidElement(leading) && typeof leading.type === 'function' && ((_leading$type$name = leading.type.name) === null || _leading$type$name === void 0 ? void 0 : _leading$type$name.endsWith('Icon'));
   var isLeadingNumberOrIcon = React__default.useMemo(function () {
-    var _leading$type$name;
     // Check if leading is a number
     if (showNumberPrefix && typeof index === 'number') return true;
 
     // Check if leading is an Icon component (name ends with "Icon")
-    if (leading && /*#__PURE__*/React__default.isValidElement(leading) && typeof leading.type === 'function' && (_leading$type$name = leading.type.name) !== null && _leading$type$name !== void 0 && _leading$type$name.endsWith('Icon')) return true;
+    if (isLeadingIcon) return true;
     return false;
-  }, [leading, showNumberPrefix, index]);
-  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
-    name: MetaConstants.AccordionItemHeader
-  })), {}, {
-    flex: "1",
-    children: /*#__PURE__*/jsx(BaseHeader, _objectSpread(_objectSpread({
-      leading: showNumberPrefix && typeof index === 'number' ?
-      /*#__PURE__*/
-      // we have to add -2px margin to align the number with title of BaseHeader
-      jsxs(Text, {
+  }, [showNumberPrefix, index, isLeadingIcon]);
+  var shouldAlignHeaderItemsInCenter = Boolean(children || Boolean(leading) && !isLeadingNumberOrIcon);
+  var leadingElement = React__default.useMemo(function () {
+    if (showNumberPrefix && typeof index === 'number') {
+      return /*#__PURE__*/jsxs(Text, {
         size: size,
         weight: "semibold",
         marginTop: "-2px",
         as: "span",
         children: [index + 1, "."]
-      }) : leading,
+      });
+    }
+    if (leading) {
+      return /*#__PURE__*/jsx(BaseBox, {
+        marginRight: isLeadingIcon ? 'spacing.0' : 'spacing.3',
+        marginTop: "spacing.1"
+        // So in design, we have set max height and width for the leading element, doing same here
+        ,
+        maxHeight: getLeadingElementMaxHeightAndWidth(size),
+        maxWidth: getLeadingElementMaxHeightAndWidth(size),
+        overflow: "hidden",
+        children: leading
+      });
+    }
+    return null;
+  }, [showNumberPrefix, index, leading, size, isLeadingIcon]);
+  return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({}, metaAttribute({
+    name: MetaConstants.AccordionItemHeader
+  })), {}, {
+    flex: "1",
+    children: /*#__PURE__*/jsx(BaseHeader, _objectSpread(_objectSpread({
+      leading: leadingElement,
       title: title,
       subtitle: subtitle,
       trailing: trailing,
@@ -79,7 +104,8 @@ var _AccordionItemHeader = function _AccordionItemHeader(_ref) {
       trailingInteractionElement: /*#__PURE__*/jsx(CollapsibleChevronIcon, {
         color: isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted',
         size: "large"
-      })
+      }),
+      shouldAlignLeadingAndTrailingElementsToCenter: shouldAlignHeaderItemsInCenter
     }, makeAnalyticsAttribute(rest)), {}, {
       children: children
     }))

package/build/lib/web/development/components/Accordion/AccordionItemHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"AccordionItemHeader.js","sources":["../../../../../../src/components/Accordion/AccordionItemHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useAccordion, useAccordionItemIndex } from './AccordionContext';\nimport { componentIds } from './componentIds';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\nconst _AccordionItemHeader = ({\n  title,\n  subtitle,\n  leading,\n  children,\n  trailing,\n  titleSuffix,\n  ...rest\n}: Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'\n> &\n  DataAnalyticsAttribute): React.ReactElement => {\n  const { size, showNumberPrefix, expandedIndex } = useAccordion();\n  const { index, isDisabled } = useAccordionItemIndex();\n\n  const isLeadingNumberOrIcon = React.useMemo(() => {\n    // Check if leading is a number\n    if (showNumberPrefix && typeof index === 'number') return true;\n\n    // Check if leading is an Icon component (name ends with \"Icon\")\n    if (\n      leading &&\n      React.isValidElement(leading) &&\n      typeof leading.type === 'function' &&\n      leading.type.name?.endsWith('Icon')\n    )\n      return true;\n\n    return false;\n  }, [leading, showNumberPrefix, index]);\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemHeader })} flex=\"1\">\n      <BaseHeader\n        leading={\n          showNumberPrefix && typeof index === 'number' ? (\n            // we have to add -2px margin to align the number with title of BaseHeader\n            <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n              {index + 1}.\n            </Text>\n          ) : (\n            leading\n          )\n        }\n        title={title}\n        subtitle={subtitle}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        isDisabled={isDisabled}\n        showBackButton={false}\n        showCloseButton={false}\n        showDivider={expandedIndex === index}\n        paddingX=\"spacing.5\"\n        marginY=\"spacing.5\"\n        size={size}\n        alignItems={!subtitle && !isLeadingNumberOrIcon ? 'center' : 'flex-start'}\n        dividerProps={{\n          thickness: 'thinner',\n          marginX: 'spacing.5',\n        }}\n        trailingInteractionElement={\n          <CollapsibleChevronIcon\n            color={isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'}\n            size=\"large\"\n          />\n        }\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseHeader>\n    </BaseBox>\n  );\n};\n\nconst AccordionItemHeader = assignWithoutSideEffects(_AccordionItemHeader, {\n  componentId: componentIds.AccordionItemHeader,\n});\n\nexport { AccordionItemHeader };\n"],"names":["_AccordionItemHeader","_ref","title","subtitle","leading","children","trailing","titleSuffix","rest","_objectWithoutProperties","_excluded","_useAccordion","useAccordion","size","showNumberPrefix","expandedIndex","_useAccordionItemInde","useAccordionItemIndex","index","isDisabled","isLeadingNumberOrIcon","React","useMemo","_leading$type$name","isValidElement","type","name","endsWith","_jsx","BaseBox","_objectSpread","metaAttribute","MetaConstants","AccordionItemHeader","flex","BaseHeader","_jsxs","Text","weight","marginTop","as","showBackButton","showCloseButton","showDivider","paddingX","marginY","alignItems","dividerProps","thickness","marginX","trailingInteractionElement","CollapsibleChevronIcon","color","makeAnalyticsAttribute","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}
+{"version":3,"file":"AccordionItemHeader.js","sources":["../../../../../../src/components/Accordion/AccordionItemHeader.tsx"],"sourcesContent":["import React from 'react';\nimport { useAccordion, useAccordionItemIndex } from './AccordionContext';\nimport { componentIds } from './componentIds';\nimport type { BaseHeaderProps } from '~components/BaseHeaderFooter/BaseHeader';\nimport { BaseHeader } from '~components/BaseHeaderFooter/BaseHeader';\nimport { Text } from '~components/Typography';\nimport BaseBox from '~components/Box/BaseBox';\nimport { CollapsibleChevronIcon } from '~components/Collapsible/CollapsibleChevronIcon';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport type { BoxProps } from '~components/Box';\nimport { makeSize } from '~utils/makeSize';\nimport { size as sizeToken } from '~tokens/global';\n\nconst getLeadingElementMaxHeightAndWidth = (\n  size: BaseHeaderProps['size'],\n): BoxProps['maxHeight'] => {\n  if (size === 'large') return makeSize(sizeToken['32']);\n  return makeSize(sizeToken['24']);\n};\n\nconst _AccordionItemHeader = ({\n  title,\n  subtitle,\n  leading,\n  children,\n  trailing,\n  titleSuffix,\n  ...rest\n}: Pick<\n  BaseHeaderProps,\n  'title' | 'subtitle' | 'leading' | 'children' | 'trailing' | 'titleSuffix'\n> &\n  DataAnalyticsAttribute): React.ReactElement => {\n  const { size, showNumberPrefix, expandedIndex } = useAccordion();\n  const { index, isDisabled } = useAccordionItemIndex();\n\n  const isLeadingIcon =\n    React.isValidElement(leading) &&\n    typeof leading.type === 'function' &&\n    leading.type.name?.endsWith('Icon');\n\n  const isLeadingNumberOrIcon = React.useMemo(() => {\n    // Check if leading is a number\n    if (showNumberPrefix && typeof index === 'number') return true;\n\n    // Check if leading is an Icon component (name ends with \"Icon\")\n    if (isLeadingIcon) return true;\n\n    return false;\n  }, [showNumberPrefix, index, isLeadingIcon]);\n\n  const shouldAlignHeaderItemsInCenter = Boolean(\n    children || (Boolean(leading) && !isLeadingNumberOrIcon),\n  );\n\n  const leadingElement = React.useMemo(() => {\n    if (showNumberPrefix && typeof index === 'number') {\n      return (\n        <Text size={size} weight=\"semibold\" marginTop=\"-2px\" as=\"span\">\n          {index + 1}.\n        </Text>\n      );\n    }\n    if (leading) {\n      return (\n        <BaseBox\n          marginRight={isLeadingIcon ? 'spacing.0' : 'spacing.3'}\n          marginTop=\"spacing.1\"\n          // So in design, we have set max height and width for the leading element, doing same here\n          maxHeight={getLeadingElementMaxHeightAndWidth(size)}\n          maxWidth={getLeadingElementMaxHeightAndWidth(size)}\n          overflow=\"hidden\"\n        >\n          {leading}\n        </BaseBox>\n      );\n    }\n    return null;\n  }, [showNumberPrefix, index, leading, size, isLeadingIcon]);\n\n  return (\n    <BaseBox {...metaAttribute({ name: MetaConstants.AccordionItemHeader })} flex=\"1\">\n      <BaseHeader\n        leading={leadingElement}\n        title={title}\n        subtitle={subtitle}\n        trailing={trailing}\n        titleSuffix={titleSuffix}\n        isDisabled={isDisabled}\n        showBackButton={false}\n        showCloseButton={false}\n        showDivider={expandedIndex === index}\n        paddingX=\"spacing.5\"\n        marginY=\"spacing.5\"\n        size={size}\n        alignItems={!subtitle && !isLeadingNumberOrIcon ? 'center' : 'flex-start'}\n        dividerProps={{\n          thickness: 'thinner',\n          marginX: 'spacing.5',\n        }}\n        trailingInteractionElement={\n          <CollapsibleChevronIcon\n            color={isDisabled ? 'interactive.icon.gray.disabled' : 'interactive.icon.gray.muted'}\n            size=\"large\"\n          />\n        }\n        shouldAlignLeadingAndTrailingElementsToCenter={shouldAlignHeaderItemsInCenter}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {children}\n      </BaseHeader>\n    </BaseBox>\n  );\n};\n\nconst AccordionItemHeader = assignWithoutSideEffects(_AccordionItemHeader, {\n  componentId: componentIds.AccordionItemHeader,\n});\n\nexport { AccordionItemHeader };\n"],"names":["getLeadingElementMaxHeightAndWidth","size","makeSize","sizeToken","_AccordionItemHeader","_ref","_leading$type$name","title","subtitle","leading","children","trailing","titleSuffix","rest","_objectWithoutProperties","_excluded","_useAccordion","useAccordion","showNumberPrefix","expandedIndex","_useAccordionItemInde","useAccordionItemIndex","index","isDisabled","isLeadingIcon","React","isValidElement","type","name","endsWith","isLeadingNumberOrIcon","useMemo","shouldAlignHeaderItemsInCenter","Boolean","leadingElement","_jsxs","Text","weight","marginTop","as","_jsx","BaseBox","marginRight","maxHeight","maxWidth","overflow","_objectSpread","metaAttribute","MetaConstants","AccordionItemHeader","flex","BaseHeader","showBackButton","showCloseButton","showDivider","paddingX","marginY","alignItems","dividerProps","thickness","marginX","trailingInteractionElement","CollapsibleChevronIcon","color","shouldAlignLeadingAndTrailingElementsToCenter","makeAnalyticsAttribute","assignWithoutSideEffects","componentId","componentIds"],"mappings":"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"}

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

@@ -15,14 +15,14 @@ import '../../utils/metaAttribute/index.js';
 import '../../utils/logger/index.js';
 import '../../tokens/global/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { getComponentId } from '../../utils/isValidAllowedChildren/isValidAllowedChildren.js';
 import { throwBladeError, logger } from '../../utils/logger/logger.js';
 import { isReactNative } from '../../utils/platform/isReactNative.js';
+import { Box } from '../Box/Box.js';
 import { BaseBox } from '../Box/BaseBox/BaseBox.web.js';
 import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
-import { Box } from '../Box/Box.js';
 import { IconButton } from '../Button/IconButton/IconButton.js';
 import ChevronLeftIcon from '../Icons/ChevronLeftIcon/ChevronLeftIcon.js';
 import { Heading } from '../Typography/Heading/Heading.js';
@@ -33,7 +33,7 @@ import CloseIcon from '../Icons/CloseIcon/CloseIcon.js';
 import { Divider } from '../Divider/Divider.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["title", "subtitle", "leading", "titleSuffix", "trailing", "showDivider", "showBackButton", "showCloseButton", "onBackButtonClick", "onCloseButtonClick", "closeButtonRef", "backButtonRef", "testID", "onClickCapture", "onKeyDown", "onKeyUp", "onLostPointerCapture", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "metaComponentName", "paddingX", "marginY", "marginBottom", "marginTop", "size", "isDisabled", "children", "trailingInteractionElement", "backgroundImage", "alignItems", "dividerProps"];
+var _excluded = ["title", "subtitle", "leading", "titleSuffix", "trailing", "showDivider", "showBackButton", "showCloseButton", "onBackButtonClick", "onCloseButtonClick", "closeButtonRef", "backButtonRef", "testID", "onClickCapture", "onKeyDown", "onKeyUp", "onLostPointerCapture", "onPointerCancel", "onPointerDown", "onPointerMove", "onPointerUp", "metaComponentName", "paddingX", "marginY", "marginBottom", "marginTop", "size", "isDisabled", "children", "trailingInteractionElement", "backgroundImage", "alignItems", "dividerProps", "shouldAlignLeadingAndTrailingElementsToCenter"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var commonCenterBoxProps = {
@@ -226,6 +226,8 @@ var _BaseHeader = function _BaseHeader(_ref2) {
     _ref2$alignItems = _ref2.alignItems,
     alignItems = _ref2$alignItems === void 0 ? 'flex-start' : _ref2$alignItems,
     dividerProps = _ref2.dividerProps,
+    _ref2$shouldAlignLead = _ref2.shouldAlignLeadingAndTrailingElementsToCenter,
+    shouldAlignLeadingAndTrailingElementsToCenter = _ref2$shouldAlignLead === void 0 ? false : _ref2$shouldAlignLead,
     rest = _objectWithoutProperties(_ref2, _excluded);
   var validatedTrailingComponent = useTrailingRestriction({
     trailing: trailing,
@@ -243,6 +245,58 @@ var _BaseHeader = function _BaseHeader(_ref2) {
     onPointerMove: onPointerMove,
     onPointerUp: onPointerUp
   };
+  var renderTrailingInteractionElementWithChildren = function renderTrailingInteractionElementWithChildren() {
+    if (trailingInteractionElement && children) {
+      return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
+        alignSelf: shouldAlignLeadingAndTrailingElementsToCenter ? 'center' : 'flex-start'
+      }, centerBoxProps[size$1]), {}, {
+        children: trailingInteractionElement
+      }));
+    }
+    return null;
+  };
+  var renderTrailingInteractionElementWithoutChildren = function renderTrailingInteractionElementWithoutChildren() {
+    if (trailingInteractionElement && !children) {
+      return /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
+        alignSelf: shouldAlignLeadingAndTrailingElementsToCenter ? 'center' : undefined,
+        children: trailingInteractionElement
+      }));
+    }
+    return null;
+  };
+  var renderLeadingElement = function renderLeadingElement() {
+    if (Boolean(leading)) {
+      return /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
+        marginRight: "spacing.3"
+      }, centerBoxProps[size$1]), {}, {
+        alignSelf: shouldAlignLeadingAndTrailingElementsToCenter ? 'center' : undefined,
+        children: leading
+      }));
+    }
+    return null;
+  };
+  var renderTrailingElement = function renderTrailingElement() {
+    if (shouldAlignLeadingAndTrailingElementsToCenter && validatedTrailingComponent) {
+      return /*#__PURE__*/jsx(BaseBox, {
+        marginRight: "spacing.5",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
+          children: validatedTrailingComponent
+        }))
+      });
+    }
+    if (validatedTrailingComponent) {
+      return /*#__PURE__*/jsx(BaseBox, {
+        marginRight: "spacing.5",
+        children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
+          children: validatedTrailingComponent
+        }))
+      });
+    }
+    return null;
+  };
   return /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread(_objectSpread({}, metaAttribute({
     name: metaComponentName,
     testID: testID
@@ -287,11 +341,7 @@ var _BaseHeader = function _BaseHeader(_ref2) {
           display: "flex",
           flexDirection: "row",
           alignItems: alignItems,
-          children: [leading ? /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
-            marginRight: "spacing.3"
-          }, centerBoxProps[size$1]), {}, {
-            children: leading
-          })) : null, /*#__PURE__*/jsxs(BaseBox, {
+          children: [renderLeadingElement(), /*#__PURE__*/jsxs(BaseBox, {
             flex: "auto",
             children: [/*#__PURE__*/jsxs(BaseBox
             // Explicitly setting maxWidth in React Native because text is not being wrapped properly when multiple fix width components are rendered in header
@@ -331,12 +381,7 @@ var _BaseHeader = function _BaseHeader(_ref2) {
               children: subtitle
             }) : null]
           })]
-        }), validatedTrailingComponent ? /*#__PURE__*/jsx(BaseBox, {
-          marginRight: "spacing.5",
-          children: /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
-            children: validatedTrailingComponent
-          }))
-        }) : null, showCloseButton ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, hasOnlyChildren ? absolutePositionedButton : centerBoxProps[size$1]), {}, {
+        }), renderTrailingElement(), showCloseButton ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, hasOnlyChildren ? absolutePositionedButton : centerBoxProps[size$1]), {}, {
           children: /*#__PURE__*/jsx(IconButton, {
             ref: closeButtonRef,
             size: "large",
@@ -346,9 +391,7 @@ var _BaseHeader = function _BaseHeader(_ref2) {
               return onCloseButtonClick === null || onCloseButtonClick === void 0 ? void 0 : onCloseButtonClick();
             }
           })
-        })) : null, trailingInteractionElement && !children ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({}, centerBoxProps[size$1]), {}, {
-          children: trailingInteractionElement
-        })) : null]
+        })) : null, renderTrailingInteractionElementWithoutChildren()]
       }), /*#__PURE__*/jsxs(BaseBox, {
         display: "flex",
         width: "100%",
@@ -358,11 +401,7 @@ var _BaseHeader = function _BaseHeader(_ref2) {
         children: [/*#__PURE__*/jsx(Box, {
           width: "100%",
           children: children
-        }), trailingInteractionElement && children ? /*#__PURE__*/jsx(Box, _objectSpread(_objectSpread({
-          alignSelf: "flex-start"
-        }, centerBoxProps[size$1]), {}, {
-          children: trailingInteractionElement
-        })) : null]
+        }), renderTrailingInteractionElementWithChildren()]
       })]
     })), showDivider ? /*#__PURE__*/jsx(Divider, _objectSpread({}, dividerProps)) : null]
   }));