@razorpay/blade 11.39.0 → 11.40.0

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/BaseMenuItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { size } from '~tokens/global';\nimport { makeSize } from '~utils';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\n\nconst menuItemTitleColor = {\n  negative: {\n    default: 'feedback.text.negative.intense',\n    disabled: 'interactive.text.gray.disabled',\n  },\n  normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n  default: 'interactive.text.gray.muted',\n  disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\nconst itemFirstRowHeight = makeSize(size[20]);\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n  {\n    title,\n    description,\n    as,\n    leading,\n    trailing,\n    titleSuffix,\n    isDisabled,\n    selectionType = 'single',\n    isSelected,\n    isVisible = true,\n    color,\n    role = 'menuitem',\n    children,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { containerRef, textRef } = useTruncationTitle({ content: title });\n  return (\n    <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n      <StyledMenuItemContainer\n        ref={ref as never}\n        as={as}\n        type=\"button\"\n        disabled={isDisabled}\n        {...makeAccessible({\n          role,\n          current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n          disabled: isDisabled,\n          selected: isSelected,\n        })}\n        color={color}\n        isVisible={isVisible}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        selectionType={selectionType}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <Box display=\"flex\" alignItems=\"flex-start\" width=\"100%\" justifyContent=\"flex-start\">\n            <Box\n              display=\"flex\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              height={itemFirstRowHeight}\n            >\n              {leading}\n            </Box>\n            <Box\n              paddingLeft={leading ? 'spacing.3' : 'spacing.0'}\n              paddingRight=\"spacing.3\"\n              display=\"flex\"\n              flexDirection=\"column\"\n            >\n              <Box\n                display=\"flex\"\n                alignItems=\"center\"\n                flexDirection=\"row\"\n                height={itemFirstRowHeight}\n                ref={containerRef as never}\n              >\n                <BaseText\n                  as=\"p\"\n                  ref={textRef as never}\n                  truncateAfterLines={1}\n                  wordBreak=\"break-all\"\n                  {...getTextProps({\n                    size: 'medium',\n                    color:\n                      menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][\n                        isDisabled ? 'disabled' : 'default'\n                      ],\n                    weight: 'regular',\n                  })}\n                >\n                  {title}\n                </BaseText>\n                {titleSuffix}\n              </Box>\n              <Box>\n                {description ? (\n                  <Text\n                    color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}\n                    size=\"small\"\n                  >\n                    {description}\n                  </Text>\n                ) : null}\n              </Box>\n            </Box>\n            <Box marginLeft=\"auto\">{trailing}</Box>\n          </Box>\n        )}\n      </StyledMenuItemContainer>\n    </BaseMenuItemContext.Provider>\n  );\n};\n\nconst BaseMenuItem = React.forwardRef(_BaseMenuItem);\n\nexport { BaseMenuItem };\n"],"names":["menuItemTitleColor","negative","disabled","normal","menuItemDescriptionColor","itemFirstRowHeight","makeSize","size","_BaseMenuItem","_ref","ref","title","description","as","leading","trailing","titleSuffix","isDisabled","_ref$selectionType","selectionType","isSelected","_ref$isVisible","isVisible","color","_ref$role","role","children","props","_objectWithoutProperties","_excluded","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","_jsx","BaseMenuItemContext","Provider","value","StyledMenuItemContainer","_objectSpread","type","makeAccessible","current","undefined","selected","_jsxs","Box","display","alignItems","width","justifyContent","height","paddingLeft","paddingRight","flexDirection","BaseText","truncateAfterLines","wordBreak","getTextProps","weight","Text","marginLeft","BaseMenuItem","React","forwardRef"],"mappings":"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"}
+{"version":3,"file":"BaseMenuItem.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/BaseMenuItem.tsx"],"sourcesContent":["import React from 'react';\nimport type { BaseMenuItemProps } from '../types';\nimport { BaseMenuItemContext } from '../BaseMenuContext';\nimport { StyledMenuItemContainer } from './StyledMenuItemContainer';\nimport { itemFirstRowHeight } from './tokens';\nimport { Box } from '~components/Box';\nimport { getTextProps, Text } from '~components/Typography';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { BladeElementRef } from '~utils/types';\nimport { BaseText } from '~components/Typography/BaseText';\nimport { useTruncationTitle } from '~utils/useTruncationTitle';\nimport { makeSize } from '~utils';\n\nconst menuItemTitleColor = {\n  negative: {\n    default: 'feedback.text.negative.intense',\n    disabled: 'interactive.text.gray.disabled',\n  },\n  normal: { default: 'interactive.text.gray.normal', disabled: 'interactive.text.gray.disabled' },\n} as const;\n\nconst menuItemDescriptionColor = {\n  default: 'interactive.text.gray.muted',\n  disabled: 'interactive.text.gray.disabled',\n} as const;\n\n// This is the height of item excluding the description to make sure description comes at the bottom and other first row items are center aligned\n\nconst _BaseMenuItem: React.ForwardRefRenderFunction<BladeElementRef, BaseMenuItemProps> = (\n  {\n    title,\n    description,\n    as,\n    leading,\n    trailing,\n    titleSuffix,\n    isDisabled,\n    selectionType = 'single',\n    isSelected,\n    isVisible = true,\n    color,\n    role = 'menuitem',\n    children,\n    ...props\n  },\n  ref,\n): React.ReactElement => {\n  const { containerRef, textRef } = useTruncationTitle({ content: title });\n  return (\n    <BaseMenuItemContext.Provider value={{ color, isDisabled }}>\n      <StyledMenuItemContainer\n        ref={ref as never}\n        as={as}\n        type=\"button\"\n        disabled={isDisabled}\n        {...makeAccessible({\n          role,\n          current: role === 'menuitem' || role === 'menuitemcheckbox' ? isSelected : undefined,\n          disabled: isDisabled,\n          selected: isSelected,\n        })}\n        color={color}\n        isVisible={isVisible}\n        isSelected={isSelected}\n        isDisabled={isDisabled}\n        selectionType={selectionType}\n        {...props}\n      >\n        {children ? (\n          children\n        ) : (\n          <Box display=\"flex\" alignItems=\"flex-start\" width=\"100%\" justifyContent=\"flex-start\">\n            <Box\n              display=\"flex\"\n              justifyContent=\"center\"\n              alignItems=\"center\"\n              height={makeSize(itemFirstRowHeight)}\n            >\n              {leading}\n            </Box>\n            <Box\n              paddingLeft={leading ? 'spacing.3' : 'spacing.0'}\n              paddingRight=\"spacing.3\"\n              display=\"flex\"\n              flexDirection=\"column\"\n            >\n              <Box\n                display=\"flex\"\n                alignItems=\"center\"\n                flexDirection=\"row\"\n                height={makeSize(itemFirstRowHeight)}\n                ref={containerRef as never}\n              >\n                <BaseText\n                  as=\"p\"\n                  ref={textRef as never}\n                  truncateAfterLines={1}\n                  wordBreak=\"break-all\"\n                  {...getTextProps({\n                    size: 'medium',\n                    color:\n                      menuItemTitleColor[color === 'negative' ? 'negative' : 'normal'][\n                        isDisabled ? 'disabled' : 'default'\n                      ],\n                    weight: 'regular',\n                  })}\n                >\n                  {title}\n                </BaseText>\n                {titleSuffix}\n              </Box>\n              <Box>\n                {description ? (\n                  <Text\n                    color={menuItemDescriptionColor[isDisabled ? 'disabled' : 'default']}\n                    size=\"small\"\n                  >\n                    {description}\n                  </Text>\n                ) : null}\n              </Box>\n            </Box>\n            <Box marginLeft=\"auto\">{trailing}</Box>\n          </Box>\n        )}\n      </StyledMenuItemContainer>\n    </BaseMenuItemContext.Provider>\n  );\n};\n\nconst BaseMenuItem = React.forwardRef(_BaseMenuItem);\n\nexport { BaseMenuItem };\n"],"names":["menuItemTitleColor","negative","disabled","normal","menuItemDescriptionColor","_BaseMenuItem","_ref","ref","title","description","as","leading","trailing","titleSuffix","isDisabled","_ref$selectionType","selectionType","isSelected","_ref$isVisible","isVisible","color","_ref$role","role","children","props","_objectWithoutProperties","_excluded","_useTruncationTitle","useTruncationTitle","content","containerRef","textRef","_jsx","BaseMenuItemContext","Provider","value","StyledMenuItemContainer","_objectSpread","type","makeAccessible","current","undefined","selected","_jsxs","Box","display","alignItems","width","justifyContent","height","makeSize","itemFirstRowHeight","paddingLeft","paddingRight","flexDirection","BaseText","truncateAfterLines","wordBreak","getTextProps","size","weight","Text","marginLeft","BaseMenuItem","React","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/StyledMenuItemContainer.web.js

@@ -1,6 +1,7 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import styled from 'styled-components';
 import { getBaseMenuItemStyles } from './getBaseMenuItemStyles.js';
+import { getItemPadding } from './tokens.js';
 import '../../../utils/index.js';
 import '../../../utils/getFocusRingStyles/index.js';
 import '../../Box/BaseBox/index.js';
@@ -18,12 +19,12 @@ var StyledMenuItemContainer = /*#__PURE__*/styled(BaseBox).withConfig({
   return _objectSpread(_objectSpread({}, getBaseMenuItemStyles({
     theme: props.theme
   })), {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-    padding: makeSize(props.theme.spacing[2]),
+    padding: makeSize(getItemPadding(props.theme).itemPaddingMobile),
     display: props.isVisible ? 'flex' : 'none'
   }, "@media ".concat(getMediaQuery({
     min: props.theme.breakpoints.m
   })), {
-    padding: makeSize(props.theme.spacing[3])
+    padding: makeSize(getItemPadding(props.theme).itemPaddingDesktop)
   }), '&:hover:not([aria-disabled=true]), &[aria-expanded="true"]', {
     backgroundColor: props.color === 'negative' ? props.theme.colors.interactive.background.negative.faded : props.theme.colors.interactive.background.gray["default"]
   }), '&:focus-visible', getFocusRingStyles({

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/StyledMenuItemContainer.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledMenuItemContainer.web.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/StyledMenuItemContainer.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledBaseMenuItemContainerProps } from '../types';\nimport { getBaseMenuItemStyles } from './getBaseMenuItemStyles';\nimport { getMediaQuery, makeSize } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst StyledMenuItemContainer = styled(BaseBox)<StyledBaseMenuItemContainerProps>((props) => {\n  return {\n    ...getBaseMenuItemStyles({ theme: props.theme }),\n    padding: makeSize(props.theme.spacing[2]),\n    display: props.isVisible ? 'flex' : 'none',\n    [`@media ${getMediaQuery({ min: props.theme.breakpoints.m })}`]: {\n      padding: makeSize(props.theme.spacing[3]),\n    },\n    '&:hover:not([aria-disabled=true]), &[aria-expanded=\"true\"]': {\n      backgroundColor:\n        props.color === 'negative'\n          ? props.theme.colors.interactive.background.negative.faded\n          : props.theme.colors.interactive.background.gray.default,\n    },\n    '&:focus-visible': getFocusRingStyles({ theme: props.theme }),\n    '&.active-focus': props.isKeydownPressed\n      ? getFocusRingStyles({ theme: props.theme })\n      : undefined,\n    '&[aria-selected=true]': {\n      backgroundColor:\n        props.selectionType === 'single'\n          ? props.theme.colors.interactive.background.primary.faded\n          : undefined,\n    },\n    '&[aria-selected=true]:hover': {\n      backgroundColor: props.theme.colors.interactive.background.primary.fadedHighlighted,\n    },\n  };\n});\n\nexport { StyledMenuItemContainer };\n"],"names":["StyledMenuItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getBaseMenuItemStyles","theme","_defineProperty","padding","makeSize","spacing","display","isVisible","concat","getMediaQuery","min","breakpoints","m","backgroundColor","color","colors","interactive","background","negative","faded","gray","getFocusRingStyles","isKeydownPressed","undefined","selectionType","primary","fadedHighlighted"],"mappings":";;;;;;;;;;;;;AAOA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAmC,CAAA,CAAA,UAACC,KAAK,EAAK;AAC3F,EAAA,OAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKC,qBAAqB,CAAC;IAAEC,KAAK,EAAEH,KAAK,CAACG,KAAAA;AAAM,GAAC,CAAC,CAAA,EAAA,EAAA,EAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA;IAChDC,OAAO,EAAEC,QAAQ,CAACN,KAAK,CAACG,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,CAAC;AACzCC,IAAAA,OAAO,EAAER,KAAK,CAACS,SAAS,GAAG,MAAM,GAAG,MAAA;GAAMC,EAAAA,SAAAA,CAAAA,MAAA,CAC/BC,aAAa,CAAC;AAAEC,IAAAA,GAAG,EAAEZ,KAAK,CAACG,KAAK,CAACU,WAAW,CAACC,CAAAA;AAAE,GAAC,CAAC,CAAK,EAAA;IAC/DT,OAAO,EAAEC,QAAQ,CAACN,KAAK,CAACG,KAAK,CAACI,OAAO,CAAC,CAAC,CAAC,CAAA;GACzC,CAAA,EACD,4DAA4D,EAAE;AAC5DQ,IAAAA,eAAe,EACbf,KAAK,CAACgB,KAAK,KAAK,UAAU,GACtBhB,KAAK,CAACG,KAAK,CAACc,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,QAAQ,CAACC,KAAK,GACxDrB,KAAK,CAACG,KAAK,CAACc,MAAM,CAACC,WAAW,CAACC,UAAU,CAACG,IAAI,CAAA,SAAA,CAAA;AACtD,GAAC,CACD,EAAA,iBAAiB,EAAEC,kBAAkB,CAAC;IAAEpB,KAAK,EAAEH,KAAK,CAACG,KAAAA;GAAO,CAAC,GAC7D,gBAAgB,EAAEH,KAAK,CAACwB,gBAAgB,GACpCD,kBAAkB,CAAC;IAAEpB,KAAK,EAAEH,KAAK,CAACG,KAAAA;AAAM,GAAC,CAAC,GAC1CsB,SAAS,CAAA,EACb,uBAAuB,EAAE;IACvBV,eAAe,EACbf,KAAK,CAAC0B,aAAa,KAAK,QAAQ,GAC5B1B,KAAK,CAACG,KAAK,CAACc,MAAM,CAACC,WAAW,CAACC,UAAU,CAACQ,OAAO,CAACN,KAAK,GACvDI,SAAAA;GACP,CAAA,EACD,6BAA6B,EAAE;AAC7BV,IAAAA,eAAe,EAAEf,KAAK,CAACG,KAAK,CAACc,MAAM,CAACC,WAAW,CAACC,UAAU,CAACQ,OAAO,CAACC,gBAAAA;GACpE,CAAA,CAAA,CAAA;AAEL,CAAC;;;;"}
+{"version":3,"file":"StyledMenuItemContainer.web.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/StyledMenuItemContainer.web.tsx"],"sourcesContent":["import styled from 'styled-components';\nimport type { StyledBaseMenuItemContainerProps } from '../types';\nimport { getBaseMenuItemStyles } from './getBaseMenuItemStyles';\nimport { getItemPadding } from './tokens';\nimport { getMediaQuery, makeSize } from '~utils';\nimport { getFocusRingStyles } from '~utils/getFocusRingStyles';\nimport BaseBox from '~components/Box/BaseBox';\n\nconst StyledMenuItemContainer = styled(BaseBox)<StyledBaseMenuItemContainerProps>((props) => {\n  return {\n    ...getBaseMenuItemStyles({ theme: props.theme }),\n    padding: makeSize(getItemPadding(props.theme).itemPaddingMobile),\n    display: props.isVisible ? 'flex' : 'none',\n    [`@media ${getMediaQuery({ min: props.theme.breakpoints.m })}`]: {\n      padding: makeSize(getItemPadding(props.theme).itemPaddingDesktop),\n    },\n    '&:hover:not([aria-disabled=true]), &[aria-expanded=\"true\"]': {\n      backgroundColor:\n        props.color === 'negative'\n          ? props.theme.colors.interactive.background.negative.faded\n          : props.theme.colors.interactive.background.gray.default,\n    },\n    '&:focus-visible': getFocusRingStyles({ theme: props.theme }),\n    '&.active-focus': props.isKeydownPressed\n      ? getFocusRingStyles({ theme: props.theme })\n      : undefined,\n    '&[aria-selected=true]': {\n      backgroundColor:\n        props.selectionType === 'single'\n          ? props.theme.colors.interactive.background.primary.faded\n          : undefined,\n    },\n    '&[aria-selected=true]:hover': {\n      backgroundColor: props.theme.colors.interactive.background.primary.fadedHighlighted,\n    },\n  };\n});\n\nexport { StyledMenuItemContainer };\n"],"names":["StyledMenuItemContainer","styled","BaseBox","withConfig","displayName","componentId","props","_objectSpread","getBaseMenuItemStyles","theme","_defineProperty","padding","makeSize","getItemPadding","itemPaddingMobile","display","isVisible","concat","getMediaQuery","min","breakpoints","m","itemPaddingDesktop","backgroundColor","color","colors","interactive","background","negative","faded","gray","getFocusRingStyles","isKeydownPressed","undefined","selectionType","primary","fadedHighlighted"],"mappings":";;;;;;;;;;;;;;AAQA,IAAMA,uBAAuB,gBAAGC,MAAM,CAACC,OAAO,CAAC,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,qDAAA;EAAAC,WAAA,EAAA,UAAA;AAAA,CAAmC,CAAA,CAAA,UAACC,KAAK,EAAK;AAC3F,EAAA,OAAAC,aAAA,CAAAA,aAAA,CAAA,EAAA,EACKC,qBAAqB,CAAC;IAAEC,KAAK,EAAEH,KAAK,CAACG,KAAAA;AAAM,GAAC,CAAC,CAAA,EAAA,EAAA,EAAAC,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAAA,eAAA,CAAA;IAChDC,OAAO,EAAEC,QAAQ,CAACC,cAAc,CAACP,KAAK,CAACG,KAAK,CAAC,CAACK,iBAAiB,CAAC;AAChEC,IAAAA,OAAO,EAAET,KAAK,CAACU,SAAS,GAAG,MAAM,GAAG,MAAA;GAAMC,EAAAA,SAAAA,CAAAA,MAAA,CAC/BC,aAAa,CAAC;AAAEC,IAAAA,GAAG,EAAEb,KAAK,CAACG,KAAK,CAACW,WAAW,CAACC,CAAAA;AAAE,GAAC,CAAC,CAAK,EAAA;IAC/DV,OAAO,EAAEC,QAAQ,CAACC,cAAc,CAACP,KAAK,CAACG,KAAK,CAAC,CAACa,kBAAkB,CAAA;GACjE,CAAA,EACD,4DAA4D,EAAE;AAC5DC,IAAAA,eAAe,EACbjB,KAAK,CAACkB,KAAK,KAAK,UAAU,GACtBlB,KAAK,CAACG,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,UAAU,CAACC,QAAQ,CAACC,KAAK,GACxDvB,KAAK,CAACG,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,UAAU,CAACG,IAAI,CAAA,SAAA,CAAA;AACtD,GAAC,CACD,EAAA,iBAAiB,EAAEC,kBAAkB,CAAC;IAAEtB,KAAK,EAAEH,KAAK,CAACG,KAAAA;GAAO,CAAC,GAC7D,gBAAgB,EAAEH,KAAK,CAAC0B,gBAAgB,GACpCD,kBAAkB,CAAC;IAAEtB,KAAK,EAAEH,KAAK,CAACG,KAAAA;AAAM,GAAC,CAAC,GAC1CwB,SAAS,CAAA,EACb,uBAAuB,EAAE;IACvBV,eAAe,EACbjB,KAAK,CAAC4B,aAAa,KAAK,QAAQ,GAC5B5B,KAAK,CAACG,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,UAAU,CAACQ,OAAO,CAACN,KAAK,GACvDI,SAAAA;GACP,CAAA,EACD,6BAA6B,EAAE;AAC7BV,IAAAA,eAAe,EAAEjB,KAAK,CAACG,KAAK,CAACgB,MAAM,CAACC,WAAW,CAACC,UAAU,CAACQ,OAAO,CAACC,gBAAAA;GACpE,CAAA,CAAA,CAAA;AAEL,CAAC;;;;"}

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/getBaseMenuItemStyles.js

@@ -1,3 +1,4 @@
+import { getItemMargin } from './tokens.js';
 import '../../../utils/index.js';
 import '../../../utils/makeSize/index.js';
 import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js';
@@ -12,8 +13,8 @@ var getBaseMenuItemStyles = function getBaseMenuItemStyles(props) {
     textAlign: isReactNative() ? undefined : 'left',
     backgroundColor: 'transparent',
     borderRadius: makeSize(props.theme.border.radius.medium),
-    marginTop: makeSize(props.theme.spacing[1]),
-    marginBottom: makeSize(props.theme.spacing[1]),
+    marginTop: makeSize(getItemMargin(props.theme)),
+    marginBottom: makeSize(getItemMargin(props.theme)),
     textDecoration: 'none',
     cursor: 'pointer',
     width: '100%'

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/getBaseMenuItemStyles.js.map

@@ -1 +1 @@
-{"version":3,"file":"getBaseMenuItemStyles.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/getBaseMenuItemStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport type { Theme } from '~components/BladeProvider';\nimport { isReactNative, makeBorderSize } from '~utils';\nimport { makeSize } from '~utils/makeSize';\n\nconst getBaseMenuItemStyles = (props: { theme: Theme }): CSSObject => {\n  return {\n    borderWidth: makeBorderSize(props.theme.border.width.none),\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: isReactNative() ? undefined : 'left',\n    backgroundColor: 'transparent',\n    borderRadius: makeSize(props.theme.border.radius.medium),\n    marginTop: makeSize(props.theme.spacing[1]),\n    marginBottom: makeSize(props.theme.spacing[1]),\n    textDecoration: 'none',\n    cursor: 'pointer',\n    width: '100%',\n  };\n};\n\nexport { getBaseMenuItemStyles };\n"],"names":["getBaseMenuItemStyles","props","borderWidth","makeBorderSize","theme","border","width","none","display","flexDirection","textAlign","isReactNative","undefined","backgroundColor","borderRadius","makeSize","radius","medium","marginTop","spacing","marginBottom","textDecoration","cursor"],"mappings":";;;;;;AAKA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAuB,EAAgB;EACpE,OAAO;AACLC,IAAAA,WAAW,EAAEC,cAAc,CAACF,KAAK,CAACG,KAAK,CAACC,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC;AAC1DC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,aAAa,EAAE,QAAQ;AACvBC,IAAAA,SAAS,EAAEC,aAAa,EAAE,GAAGC,SAAS,GAAG,MAAM;AAC/CC,IAAAA,eAAe,EAAE,aAAa;AAC9BC,IAAAA,YAAY,EAAEC,QAAQ,CAACd,KAAK,CAACG,KAAK,CAACC,MAAM,CAACW,MAAM,CAACC,MAAM,CAAC;IACxDC,SAAS,EAAEH,QAAQ,CAACd,KAAK,CAACG,KAAK,CAACe,OAAO,CAAC,CAAC,CAAC,CAAC;IAC3CC,YAAY,EAAEL,QAAQ,CAACd,KAAK,CAACG,KAAK,CAACe,OAAO,CAAC,CAAC,CAAC,CAAC;AAC9CE,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,EAAE,SAAS;AACjBhB,IAAAA,KAAK,EAAE,MAAA;GACR,CAAA;AACH;;;;"}
+{"version":3,"file":"getBaseMenuItemStyles.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/getBaseMenuItemStyles.ts"],"sourcesContent":["import type { CSSObject } from 'styled-components';\nimport { getItemMargin } from './tokens';\nimport type { Theme } from '~components/BladeProvider';\nimport { isReactNative, makeBorderSize } from '~utils';\nimport { makeSize } from '~utils/makeSize';\n\nconst getBaseMenuItemStyles = (props: { theme: Theme }): CSSObject => {\n  return {\n    borderWidth: makeBorderSize(props.theme.border.width.none),\n    display: 'flex',\n    flexDirection: 'column',\n    textAlign: isReactNative() ? undefined : 'left',\n    backgroundColor: 'transparent',\n    borderRadius: makeSize(props.theme.border.radius.medium),\n    marginTop: makeSize(getItemMargin(props.theme)),\n    marginBottom: makeSize(getItemMargin(props.theme)),\n    textDecoration: 'none',\n    cursor: 'pointer',\n    width: '100%',\n  };\n};\n\nexport { getBaseMenuItemStyles };\n"],"names":["getBaseMenuItemStyles","props","borderWidth","makeBorderSize","theme","border","width","none","display","flexDirection","textAlign","isReactNative","undefined","backgroundColor","borderRadius","makeSize","radius","medium","marginTop","getItemMargin","marginBottom","textDecoration","cursor"],"mappings":";;;;;;;AAMA,IAAMA,qBAAqB,GAAG,SAAxBA,qBAAqBA,CAAIC,KAAuB,EAAgB;EACpE,OAAO;AACLC,IAAAA,WAAW,EAAEC,cAAc,CAACF,KAAK,CAACG,KAAK,CAACC,MAAM,CAACC,KAAK,CAACC,IAAI,CAAC;AAC1DC,IAAAA,OAAO,EAAE,MAAM;AACfC,IAAAA,aAAa,EAAE,QAAQ;AACvBC,IAAAA,SAAS,EAAEC,aAAa,EAAE,GAAGC,SAAS,GAAG,MAAM;AAC/CC,IAAAA,eAAe,EAAE,aAAa;AAC9BC,IAAAA,YAAY,EAAEC,QAAQ,CAACd,KAAK,CAACG,KAAK,CAACC,MAAM,CAACW,MAAM,CAACC,MAAM,CAAC;IACxDC,SAAS,EAAEH,QAAQ,CAACI,aAAa,CAAClB,KAAK,CAACG,KAAK,CAAC,CAAC;IAC/CgB,YAAY,EAAEL,QAAQ,CAACI,aAAa,CAAClB,KAAK,CAACG,KAAK,CAAC,CAAC;AAClDiB,IAAAA,cAAc,EAAE,MAAM;AACtBC,IAAAA,MAAM,EAAE,SAAS;AACjBhB,IAAAA,KAAK,EAAE,MAAA;GACR,CAAA;AACH;;;;"}

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/tokens.js

@@ -0,0 +1,26 @@
+import '../../../tokens/global/index.js';
+import { size } from '../../../tokens/global/size.js';
+
+var itemFirstRowHeight = size[20];
+var getItemPadding = function getItemPadding(theme) {
+  return {
+    itemPaddingMobile: theme.spacing[2],
+    itemPaddingDesktop: theme.spacing[3]
+  };
+};
+var getItemMargin = function getItemMargin(theme) {
+  return theme.spacing[1];
+};
+var getItemHeight = function getItemHeight(theme) {
+  return {
+    itemHeightMobile:
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    itemFirstRowHeight + getItemPadding(theme).itemPaddingMobile * 2 + getItemMargin(theme) * 2,
+    itemHeightDesktop:
+    // eslint-disable-next-line @typescript-eslint/restrict-plus-operands
+    itemFirstRowHeight + getItemPadding(theme).itemPaddingDesktop * 2 + getItemMargin(theme) * 2
+  };
+};
+
+export { getItemHeight, getItemMargin, getItemPadding, itemFirstRowHeight };
+//# sourceMappingURL=tokens.js.map

package/build/lib/web/development/components/BaseMenu/BaseMenuItem/tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokens.js","sources":["../../../../../../../src/components/BaseMenu/BaseMenuItem/tokens.ts"],"sourcesContent":["import type { Theme } from '~components/BladeProvider';\nimport { size } from '~tokens/global';\n\nconst itemFirstRowHeight = size[20];\n\nconst getItemPadding = (\n  theme: Theme,\n): {\n  itemPaddingMobile: 4;\n  itemPaddingDesktop: 8;\n} => {\n  return {\n    itemPaddingMobile: theme.spacing[2],\n    itemPaddingDesktop: theme.spacing[3],\n  };\n};\n\nconst getItemMargin = (theme: Theme): number => {\n  return theme.spacing[1];\n};\n\nconst getItemHeight = (\n  theme: Theme,\n): {\n  itemHeightMobile: number;\n  itemHeightDesktop: number;\n} => {\n  return {\n    itemHeightMobile:\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n      itemFirstRowHeight + getItemPadding(theme).itemPaddingMobile * 2 + getItemMargin(theme) * 2,\n    itemHeightDesktop:\n      // eslint-disable-next-line @typescript-eslint/restrict-plus-operands\n      itemFirstRowHeight + getItemPadding(theme).itemPaddingDesktop * 2 + getItemMargin(theme) * 2,\n  };\n};\n\nexport { itemFirstRowHeight, getItemPadding, getItemMargin, getItemHeight };\n"],"names":["itemFirstRowHeight","size","getItemPadding","theme","itemPaddingMobile","spacing","itemPaddingDesktop","getItemMargin","getItemHeight","itemHeightMobile","itemHeightDesktop"],"mappings":";;;AAGA,IAAMA,kBAAkB,GAAGC,IAAI,CAAC,EAAE,EAAC;AAEnC,IAAMC,cAAc,GAAG,SAAjBA,cAAcA,CAClBC,KAAY,EAIT;EACH,OAAO;AACLC,IAAAA,iBAAiB,EAAED,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC;AACnCC,IAAAA,kBAAkB,EAAEH,KAAK,CAACE,OAAO,CAAC,CAAC,CAAA;GACpC,CAAA;AACH,EAAC;AAED,IAAME,aAAa,GAAG,SAAhBA,aAAaA,CAAIJ,KAAY,EAAa;AAC9C,EAAA,OAAOA,KAAK,CAACE,OAAO,CAAC,CAAC,CAAC,CAAA;AACzB,EAAC;AAED,IAAMG,aAAa,GAAG,SAAhBA,aAAaA,CACjBL,KAAY,EAIT;EACH,OAAO;IACLM,gBAAgB;AACd;AACAT,IAAAA,kBAAkB,GAAGE,cAAc,CAACC,KAAK,CAAC,CAACC,iBAAiB,GAAG,CAAC,GAAGG,aAAa,CAACJ,KAAK,CAAC,GAAG,CAAC;IAC7FO,iBAAiB;AACf;AACAV,IAAAA,kBAAkB,GAAGE,cAAc,CAACC,KAAK,CAAC,CAACG,kBAAkB,GAAG,CAAC,GAAGC,aAAa,CAACJ,KAAK,CAAC,GAAG,CAAA;GAC9F,CAAA;AACH;;;;"}

package/build/lib/web/development/utils/useCallbackRef.js

@@ -1,7 +1,15 @@
-import { useRef, useInsertionEffect, useCallback } from 'react';
+import React__default, { useRef, useCallback } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 
+// Prevent webpack from importing this:
+// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985
+// https://github.com/radix-ui/primitives/issues/2796
+var useReactInsertionEffect = React__default[' useInsertionEffect '.trim().toString()];
+var useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;
+
 /**
  * This hook is user-land implementation of the experimental `useEffectEvent` hook.
  * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event
@@ -10,10 +18,8 @@ import { useRef, useInsertionEffect, useCallback } from 'react';
  */
 function useCallbackRef(callback) {
   var deps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
-  var callbackRef = useRef(function () {
-    throw new Error('Cannot call an event handler while rendering.');
-  });
-  useInsertionEffect(function () {
+  var callbackRef = useRef(callback);
+  useInsertionEffectFallback(function () {
     callbackRef.current = callback;
   });
 

package/build/lib/web/development/utils/useCallbackRef.js.map

@@ -1 +1 @@
-{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport { useCallback, useInsertionEffect, useRef } from 'react';\n\n/**\n * This hook is user-land implementation of the experimental `useEffectEvent` hook.\n * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n *\n * This hook is useful when you want to use a callback function inside a useEffect while keeping it \"fresh\" but you don't want to add it to the dependency array.\n */\nfunction useCallbackRef<Args extends unknown[], Return>(\n  callback: ((...args: Args) => Return) | undefined,\n  deps: React.DependencyList = [],\n) {\n  const callbackRef = useRef<typeof callback>(() => {\n    throw new Error('Cannot call an event handler while rendering.');\n  });\n\n  useInsertionEffect(() => {\n    callbackRef.current = callback;\n  });\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useCallback((...args: Args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n"],"names":["useCallbackRef","callback","deps","arguments","length","undefined","callbackRef","useRef","Error","useInsertionEffect","current","useCallback","_callbackRef$current","_len","args","Array","_key","call","apply","concat"],"mappings":";;AAAA;;AAGA;AACA;AACA;AACA;AACA;AACA;AACA,SAASA,cAAcA,CACrBC,QAAiD,EAEjD;AAAA,EAAA,IADAC,IAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AAE/B,EAAA,IAAMG,WAAW,GAAGC,MAAM,CAAkB,YAAM;AAChD,IAAA,MAAM,IAAIC,KAAK,CAAC,+CAA+C,CAAC,CAAA;AAClE,GAAC,CAAC,CAAA;AAEFC,EAAAA,kBAAkB,CAAC,YAAM;IACvBH,WAAW,CAACI,OAAO,GAAGT,QAAQ,CAAA;AAChC,GAAC,CAAC,CAAA;;AAEF;AACA,EAAA,OAAOU,WAAW,CAAC,YAAA;AAAA,IAAA,IAAAC,oBAAA,CAAA;AAAA,IAAA,KAAA,IAAAC,IAAA,GAAAV,SAAA,CAAAC,MAAA,EAAIU,IAAI,GAAAC,IAAAA,KAAA,CAAAF,IAAA,GAAAG,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA,EAAA,EAAA;AAAJF,MAAAA,IAAI,CAAAE,IAAA,CAAAb,GAAAA,SAAA,CAAAa,IAAA,CAAA,CAAA;AAAA,KAAA;IAAA,OAAAJ,CAAAA,oBAAA,GAAWN,WAAW,CAACI,OAAO,MAAAE,IAAAA,IAAAA,oBAAA,uBAAnBA,oBAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,oBAAA,EAAA,CAAAN,WAAW,CAAAa,CAAAA,MAAA,CAAcL,IAAI,CAAC,CAAA,CAAA;AAAA,GAAA,EAAEZ,IAAI,CAAC,CAAA;AAC7E;;;;"}
+{"version":3,"file":"useCallbackRef.js","sources":["../../../../../src/utils/useCallbackRef.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/* eslint-disable @typescript-eslint/explicit-function-return-type */\nimport React, { useCallback, useRef } from 'react';\nimport { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';\n\n// Prevent webpack from importing this:\n// https://github.com/webpack/webpack/issues/14814#issuecomment-1536757985\n// https://github.com/radix-ui/primitives/issues/2796\nconst useReactInsertionEffect = (React as any)[' useInsertionEffect '.trim().toString()];\nconst useInsertionEffectFallback = useReactInsertionEffect || useIsomorphicLayoutEffect;\n\n/**\n * This hook is user-land implementation of the experimental `useEffectEvent` hook.\n * React docs: https://react.dev/learn/separating-events-from-effects#declaring-an-effect-event\n *\n * This hook is useful when you want to use a callback function inside a useEffect while keeping it \"fresh\" but you don't want to add it to the dependency array.\n */\nfunction useCallbackRef<Args extends unknown[], Return>(\n  callback: ((...args: Args) => Return) | undefined,\n  deps: React.DependencyList = [],\n) {\n  const callbackRef = useRef<typeof callback>(callback);\n\n  useInsertionEffectFallback(() => {\n    callbackRef.current = callback;\n  });\n\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  return useCallback((...args: Args) => callbackRef.current?.(...args), deps);\n}\n\nexport { useCallbackRef };\n"],"names":["useReactInsertionEffect","React","trim","toString","useInsertionEffectFallback","useIsomorphicLayoutEffect","useCallbackRef","callback","deps","arguments","length","undefined","callbackRef","useRef","current","useCallback","_callbackRef$current","_len","args","Array","_key","call","apply","concat"],"mappings":";;;AAAA;AACA;;AAIA;AACA;AACA;AACA,IAAMA,uBAAuB,GAAIC,cAAK,CAAS,sBAAsB,CAACC,IAAI,EAAE,CAACC,QAAQ,EAAE,CAAC,CAAA;AACxF,IAAMC,0BAA0B,GAAGJ,uBAAuB,IAAIK,yBAAyB,CAAA;;AAEvF;AACA;AACA;AACA;AACA;AACA;AACA,SAASC,cAAcA,CACrBC,QAAiD,EAEjD;AAAA,EAAA,IADAC,IAA0B,GAAAC,SAAA,CAAAC,MAAA,GAAA,CAAA,IAAAD,SAAA,CAAA,CAAA,CAAA,KAAAE,SAAA,GAAAF,SAAA,CAAA,CAAA,CAAA,GAAG,EAAE,CAAA;AAE/B,EAAA,IAAMG,WAAW,GAAGC,MAAM,CAAkBN,QAAQ,CAAC,CAAA;AAErDH,EAAAA,0BAA0B,CAAC,YAAM;IAC/BQ,WAAW,CAACE,OAAO,GAAGP,QAAQ,CAAA;AAChC,GAAC,CAAC,CAAA;;AAEF;AACA,EAAA,OAAOQ,WAAW,CAAC,YAAA;AAAA,IAAA,IAAAC,oBAAA,CAAA;AAAA,IAAA,KAAA,IAAAC,IAAA,GAAAR,SAAA,CAAAC,MAAA,EAAIQ,IAAI,GAAAC,IAAAA,KAAA,CAAAF,IAAA,GAAAG,IAAA,GAAA,CAAA,EAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA,EAAA,EAAA;AAAJF,MAAAA,IAAI,CAAAE,IAAA,CAAAX,GAAAA,SAAA,CAAAW,IAAA,CAAA,CAAA;AAAA,KAAA;IAAA,OAAAJ,CAAAA,oBAAA,GAAWJ,WAAW,CAACE,OAAO,MAAAE,IAAAA,IAAAA,oBAAA,uBAAnBA,oBAAA,CAAAK,IAAA,CAAAC,KAAA,CAAAN,oBAAA,EAAA,CAAAJ,WAAW,CAAAW,CAAAA,MAAA,CAAcL,IAAI,CAAC,CAAA,CAAA;AAAA,GAAA,EAAEV,IAAI,CAAC,CAAA;AAC7E;;;;"}

package/build/lib/web/production/components/ActionList/ActionList.js

@@ -3,7 +3,7 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React__default from 'react';
 import { getActionListContainerRole, getActionListItemWrapperRole } from './getA11yRoles.js';
 import { getActionListProperties } from './actionListUtils.js';
-import { ActionListBox } from './ActionListBox.web.js';
+import { ActionListVirtualizedBox, ActionListBox } from './ActionListBox.web.js';
 import { componentIds } from './componentIds.js';
 import { ActionListNoResults } from './ActionListNoResults.js';
 import { useDropdown } from '../Dropdown/useDropdown.js';
@@ -22,12 +22,13 @@ import { metaAttribute } from '../../utils/metaAttribute/metaAttribute.web.js';
 import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
 
-var _excluded = ["children", "testID"];
+var _excluded = ["children", "testID", "isVirtualized"];
 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 _ActionList = function _ActionList(_ref) {
   var children = _ref.children,
     testID = _ref.testID,
+    isVirtualized = _ref.isVirtualized,
     rest = _objectWithoutProperties(_ref, _excluded);
   var _useDropdown = useDropdown(),
     setOptions = _useDropdown.setOptions,
@@ -37,6 +38,7 @@ var _ActionList = function _ActionList(_ref) {
     dropdownTriggerer = _useDropdown.dropdownTriggerer,
     hasFooterAction = _useDropdown.hasFooterAction,
     filteredValues = _useDropdown.filteredValues;
+  var ActionListBox$1 = isVirtualized ? ActionListVirtualizedBox : ActionListBox;
   var _useBottomSheetContex = useBottomSheetContext(),
     isInBottomSheet = _useBottomSheetContex.isInBottomSheet;
   var _React$useMemo = React__default.useMemo(function () {
@@ -61,7 +63,7 @@ var _ActionList = function _ActionList(_ref) {
   // 1. We don't render the box wrapper styles which includes shadows, padding, border etc
   // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside
   // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.
-  return isInBottomSheet ? /*#__PURE__*/jsx(ActionListBox, _objectSpread({
+  return isInBottomSheet ? /*#__PURE__*/jsx(ActionListBox$1, _objectSpread({
     isInBottomSheet: isInBottomSheet,
     actionListItemWrapperRole: actionListItemWrapperRole,
     childrenWithId: childrenWithId,
@@ -78,7 +80,7 @@ var _ActionList = function _ActionList(_ref) {
     name: MetaConstants.ActionList,
     testID: testID
   })), makeAnalyticsAttribute(rest)), {}, {
-    children: /*#__PURE__*/jsx(ActionListBox, {
+    children: /*#__PURE__*/jsx(ActionListBox$1, {
       isInBottomSheet: isInBottomSheet,
       actionListItemWrapperRole: actionListItemWrapperRole,
       childrenWithId: childrenWithId,

package/build/lib/web/production/components/ActionList/ActionList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionList.js","sources":["../../../../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { getActionListContainerRole, getActionListItemWrapperRole } from './getA11yRoles';\nimport { getActionListProperties } from './actionListUtils';\nimport { ActionListBox } from './ActionListBox';\nimport { componentIds } from './componentIds';\nimport { ActionListNoResults } from './ActionListNoResults';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype ActionListProps = {\n  children: React.ReactNode[];\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _ActionList = ({ children, testID, ...rest }: ActionListProps): React.ReactElement => {\n  const {\n    setOptions,\n    actionListItemRef,\n    selectionType,\n    dropdownBaseId,\n    dropdownTriggerer,\n    hasFooterAction,\n    filteredValues,\n  } = useDropdown();\n\n  const { isInBottomSheet } = useBottomSheetContext();\n\n  const { sectionData, childrenWithId, actionListOptions } = React.useMemo(\n    () => getActionListProperties(children),\n    [children],\n  );\n\n  React.useEffect(() => {\n    setOptions(actionListOptions);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [actionListOptions]);\n\n  if (\n    filteredValues.length <= 0 &&\n    dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete\n  ) {\n    return <ActionListNoResults />;\n  }\n\n  const actionListContainerRole = getActionListContainerRole(hasFooterAction, dropdownTriggerer);\n  const actionListItemWrapperRole = getActionListItemWrapperRole(\n    hasFooterAction,\n    dropdownTriggerer,\n  );\n  const isMultiSelectable = selectionType === 'multiple';\n\n  // If we are inside BottomSheet, we don't render The StyledActionList wrapper\n  // This is to ensure:\n  // 1. We don't render the box wrapper styles which includes shadows, padding, border etc\n  // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside\n  // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.\n  return isInBottomSheet ? (\n    <ActionListBox\n      isInBottomSheet={isInBottomSheet}\n      actionListItemWrapperRole={actionListItemWrapperRole}\n      childrenWithId={childrenWithId}\n      sectionData={sectionData}\n      isMultiSelectable={isMultiSelectable}\n      ref={actionListItemRef as any}\n      {...makeAnalyticsAttribute(rest)}\n    />\n  ) : (\n    <BaseBox\n      id={`${dropdownBaseId}-actionlist`}\n      {...makeAccessible({\n        role: actionListContainerRole,\n        multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,\n        labelledBy: `${dropdownBaseId}-label`,\n      })}\n      {...metaAttribute({ name: MetaConstants.ActionList, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <ActionListBox\n        isInBottomSheet={isInBottomSheet}\n        actionListItemWrapperRole={actionListItemWrapperRole}\n        childrenWithId={childrenWithId}\n        sectionData={sectionData}\n        isMultiSelectable={isMultiSelectable}\n        ref={actionListItemRef as any}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### ActionList\n *\n * List of multiple actionable items. Can be used as menu items inside `Dropdown`,\n * `BottomSheet` and as selectable items when combined with `SelectInput`\n *\n * #### Usage\n *\n * ```jsx\n * <Dropdown>\n *  <SelectInput label=\"Select Action\" />\n *  <DropdownOverlay>\n *    <DropdownHeader title=\"Header Title\" />\n *    <ActionList>\n *      <ActionListItem\n *        title=\"Home\"\n *        value=\"home\"\n *        leading={<ActionListItemIcon icon={HomeIcon} />}\n *      />\n *      <ActionListItem\n *        title=\"Pricing\"\n *        value=\"pricing\"\n *        leading={<ActionListItemAsset src=\"https://flagcdn.com/w20/in.png\" alt=\"India Flag\" />}\n *      />\n *    </ActionList>\n *    <DropdownFooter><Button>Apply</Button></DropdownFooter>\n *  </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n */\nconst ActionList = assignWithoutSideEffects(React.memo(_ActionList), {\n  displayName: componentIds.ActionList,\n  componentId: componentIds.ActionList,\n});\n\nexport type { ActionListProps };\nexport { ActionList };\n"],"names":["_ActionList","_ref","children","testID","rest","_objectWithoutProperties","_excluded","_useDropdown","useDropdown","setOptions","actionListItemRef","selectionType","dropdownBaseId","dropdownTriggerer","hasFooterAction","filteredValues","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_React$useMemo","React","useMemo","getActionListProperties","sectionData","childrenWithId","actionListOptions","useEffect","length","dropdownComponentIds","triggers","AutoComplete","_jsx","ActionListNoResults","actionListContainerRole","getActionListContainerRole","actionListItemWrapperRole","getActionListItemWrapperRole","isMultiSelectable","ActionListBox","_objectSpread","ref","makeAnalyticsAttribute","BaseBox","id","concat","makeAccessible","role","multiSelectable","undefined","labelledBy","metaAttribute","name","MetaConstants","ActionList","assignWithoutSideEffects","memo","displayName","componentIds","componentId"],"mappings":"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"}
+{"version":3,"file":"ActionList.js","sources":["../../../../../../src/components/ActionList/ActionList.tsx"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\nimport React from 'react';\nimport { getActionListContainerRole, getActionListItemWrapperRole } from './getA11yRoles';\nimport { getActionListProperties } from './actionListUtils';\nimport { ActionListBox as ActionListNormalBox, ActionListVirtualizedBox } from './ActionListBox';\nimport { componentIds } from './componentIds';\nimport { ActionListNoResults } from './ActionListNoResults';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport type { DataAnalyticsAttribute, TestID } from '~utils/types';\nimport BaseBox from '~components/Box/BaseBox';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype ActionListProps = {\n  children: React.ReactNode[];\n  isVirtualized?: boolean;\n} & TestID &\n  DataAnalyticsAttribute;\n\nconst _ActionList = ({\n  children,\n  testID,\n  isVirtualized,\n  ...rest\n}: ActionListProps): React.ReactElement => {\n  const {\n    setOptions,\n    actionListItemRef,\n    selectionType,\n    dropdownBaseId,\n    dropdownTriggerer,\n    hasFooterAction,\n    filteredValues,\n  } = useDropdown();\n\n  const ActionListBox = isVirtualized ? ActionListVirtualizedBox : ActionListNormalBox;\n\n  const { isInBottomSheet } = useBottomSheetContext();\n\n  const { sectionData, childrenWithId, actionListOptions } = React.useMemo(\n    () => getActionListProperties(children),\n    [children],\n  );\n\n  React.useEffect(() => {\n    setOptions(actionListOptions);\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [actionListOptions]);\n\n  if (\n    filteredValues.length <= 0 &&\n    dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete\n  ) {\n    return <ActionListNoResults />;\n  }\n\n  const actionListContainerRole = getActionListContainerRole(hasFooterAction, dropdownTriggerer);\n  const actionListItemWrapperRole = getActionListItemWrapperRole(\n    hasFooterAction,\n    dropdownTriggerer,\n  );\n  const isMultiSelectable = selectionType === 'multiple';\n\n  // If we are inside BottomSheet, we don't render The StyledActionList wrapper\n  // This is to ensure:\n  // 1. We don't render the box wrapper styles which includes shadows, padding, border etc\n  // 2. to ensure GorhomBottomSheetSectionList works as expected, if we add extra wrappers GorhomBottomSheet won't render the content inside\n  // NOTE: That this also means inside BottomSheet, ActionList won't render any ActionListHeader or Footer.\n  return isInBottomSheet ? (\n    <ActionListBox\n      isInBottomSheet={isInBottomSheet}\n      actionListItemWrapperRole={actionListItemWrapperRole}\n      childrenWithId={childrenWithId}\n      sectionData={sectionData}\n      isMultiSelectable={isMultiSelectable}\n      ref={actionListItemRef as any}\n      {...makeAnalyticsAttribute(rest)}\n    />\n  ) : (\n    <BaseBox\n      id={`${dropdownBaseId}-actionlist`}\n      {...makeAccessible({\n        role: actionListContainerRole,\n        multiSelectable: actionListContainerRole === 'listbox' ? isMultiSelectable : undefined,\n        labelledBy: `${dropdownBaseId}-label`,\n      })}\n      {...metaAttribute({ name: MetaConstants.ActionList, testID })}\n      {...makeAnalyticsAttribute(rest)}\n    >\n      <ActionListBox\n        isInBottomSheet={isInBottomSheet}\n        actionListItemWrapperRole={actionListItemWrapperRole}\n        childrenWithId={childrenWithId}\n        sectionData={sectionData}\n        isMultiSelectable={isMultiSelectable}\n        ref={actionListItemRef as any}\n      />\n    </BaseBox>\n  );\n};\n\n/**\n * ### ActionList\n *\n * List of multiple actionable items. Can be used as menu items inside `Dropdown`,\n * `BottomSheet` and as selectable items when combined with `SelectInput`\n *\n * #### Usage\n *\n * ```jsx\n * <Dropdown>\n *  <SelectInput label=\"Select Action\" />\n *  <DropdownOverlay>\n *    <DropdownHeader title=\"Header Title\" />\n *    <ActionList>\n *      <ActionListItem\n *        title=\"Home\"\n *        value=\"home\"\n *        leading={<ActionListItemIcon icon={HomeIcon} />}\n *      />\n *      <ActionListItem\n *        title=\"Pricing\"\n *        value=\"pricing\"\n *        leading={<ActionListItemAsset src=\"https://flagcdn.com/w20/in.png\" alt=\"India Flag\" />}\n *      />\n *    </ActionList>\n *    <DropdownFooter><Button>Apply</Button></DropdownFooter>\n *  </DropdownOverlay>\n * </Dropdown>\n * ```\n *\n */\nconst ActionList = assignWithoutSideEffects(React.memo(_ActionList), {\n  displayName: componentIds.ActionList,\n  componentId: componentIds.ActionList,\n});\n\nexport type { ActionListProps };\nexport { ActionList };\n"],"names":["_ActionList","_ref","children","testID","isVirtualized","rest","_objectWithoutProperties","_excluded","_useDropdown","useDropdown","setOptions","actionListItemRef","selectionType","dropdownBaseId","dropdownTriggerer","hasFooterAction","filteredValues","ActionListBox","ActionListVirtualizedBox","ActionListNormalBox","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_React$useMemo","React","useMemo","getActionListProperties","sectionData","childrenWithId","actionListOptions","useEffect","length","dropdownComponentIds","triggers","AutoComplete","_jsx","ActionListNoResults","actionListContainerRole","getActionListContainerRole","actionListItemWrapperRole","getActionListItemWrapperRole","isMultiSelectable","_objectSpread","ref","makeAnalyticsAttribute","BaseBox","id","concat","makeAccessible","role","multiSelectable","undefined","labelledBy","metaAttribute","name","MetaConstants","ActionList","assignWithoutSideEffects","memo","displayName","componentIds","componentId"],"mappings":"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"}

package/build/lib/web/production/components/ActionList/ActionListBox.web.js

@@ -1,17 +1,26 @@
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React__default from 'react';
+import { FixedSizeList } from 'react-window';
 import { StyledListBoxWrapper } from './styles/StyledListBoxWrapper.web.js';
+import { getActionListPadding, actionListMaxHeight } from './styles/getBaseListBoxWrapperStyles.js';
 import { useBottomSheetContext } from '../BottomSheet/BottomSheetContext.js';
 import '../../utils/assignWithoutSideEffects/index.js';
 import '../../utils/makeAccessible/index.js';
 import '../../utils/makeAnalyticsAttribute/index.js';
+import { useIsMobile } from '../../utils/useIsMobile.js';
+import { getItemHeight } from '../BaseMenu/BaseMenuItem/tokens.js';
+import '../../utils/index.js';
+import { useDropdown } from '../Dropdown/useDropdown.js';
+import { dropdownComponentIds } from '../Dropdown/dropdownComponentIds.js';
 import { jsx } from 'react/jsx-runtime';
 import { makeAccessible } from '../../utils/makeAccessible/makeAccessible.web.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import { assignWithoutSideEffects } from '../../utils/assignWithoutSideEffects/assignWithoutSideEffects.js';
+import useTheme from '../BladeProvider/useTheme.js';
 
-var _excluded = ["childrenWithId", "actionListItemWrapperRole", "isMultiSelectable"];
+var _excluded = ["childrenWithId", "actionListItemWrapperRole", "isMultiSelectable"],
+  _excluded2 = ["childrenWithId", "actionListItemWrapperRole", "isMultiSelectable"];
 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 _ActionListBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref) {
@@ -31,9 +40,111 @@ var _ActionListBox = /*#__PURE__*/React__default.forwardRef(function (_ref, ref)
     children: childrenWithId
   }));
 });
-var ActionListBox = /*#__PURE__*/assignWithoutSideEffects(_ActionListBox, {
+var ActionListBox = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListBox), {
   displayName: 'ActionListBox'
 });
 
-export { ActionListBox };
+/**
+ * Returns the height of item and height of container based on theme and device
+ */
+var getVirtualItemParams = function getVirtualItemParams(_ref2) {
+  var theme = _ref2.theme,
+    isMobile = _ref2.isMobile;
+  var itemHeightResponsive = getItemHeight(theme);
+  var actionListPadding = getActionListPadding(theme);
+  var actionListBoxHeight = actionListMaxHeight - actionListPadding * 2;
+  return {
+    itemHeight: isMobile ? itemHeightResponsive.itemHeightMobile : itemHeightResponsive.itemHeightDesktop,
+    actionListBoxHeight: actionListBoxHeight
+  };
+};
+
+/**
+ * Takes the children (ActionListItem) and returns the filtered items based on `filteredValues` state
+ */
+var useFilteredItems = function useFilteredItems(children) {
+  var childrenArray = React__default.Children.toArray(children); // Convert children to an array
+
+  var _useDropdown = useDropdown(),
+    filteredValues = _useDropdown.filteredValues,
+    hasAutoCompleteInBottomSheetHeader = _useDropdown.hasAutoCompleteInBottomSheetHeader,
+    dropdownTriggerer = _useDropdown.dropdownTriggerer;
+  var items = React__default.useMemo(function () {
+    var hasAutoComplete = hasAutoCompleteInBottomSheetHeader || dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;
+    if (!hasAutoComplete) {
+      return childrenArray;
+    }
+
+    // @ts-expect-error: props does exist
+    var filteredItems = childrenArray.filter(function (item) {
+      return filteredValues.includes(item.props.value);
+    });
+    return filteredItems;
+  }, [filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, childrenArray]);
+  return {
+    itemData: items,
+    itemCount: items.length
+  };
+};
+var VirtualListItem = function VirtualListItem(_ref3) {
+  var index = _ref3.index,
+    style = _ref3.style,
+    data = _ref3.data;
+  return /*#__PURE__*/jsx("div", {
+    style: style,
+    children: data[index]
+  });
+};
+var _ActionListVirtualizedBox = /*#__PURE__*/React__default.forwardRef(function (_ref4, ref) {
+  var childrenWithId = _ref4.childrenWithId,
+    actionListItemWrapperRole = _ref4.actionListItemWrapperRole,
+    isMultiSelectable = _ref4.isMultiSelectable,
+    rest = _objectWithoutProperties(_ref4, _excluded2);
+  var items = React__default.Children.toArray(childrenWithId); // Convert children to an array
+  var _useBottomSheetContex2 = useBottomSheetContext(),
+    isInBottomSheet = _useBottomSheetContex2.isInBottomSheet;
+  var _useFilteredItems = useFilteredItems(items),
+    itemData = _useFilteredItems.itemData,
+    itemCount = _useFilteredItems.itemCount;
+  var isMobile = useIsMobile();
+  var _useTheme = useTheme(),
+    theme = _useTheme.theme;
+  var _React$useMemo = React__default.useMemo(function () {
+      return getVirtualItemParams({
+        theme: theme,
+        isMobile: isMobile
+      });
+    },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [theme.name, isMobile]),
+    itemHeight = _React$useMemo.itemHeight,
+    actionListBoxHeight = _React$useMemo.actionListBoxHeight;
+  return /*#__PURE__*/jsx(StyledListBoxWrapper, _objectSpread(_objectSpread(_objectSpread({
+    isInBottomSheet: isInBottomSheet,
+    ref: ref
+  }, makeAccessible({
+    role: actionListItemWrapperRole,
+    multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined
+  })), makeAnalyticsAttribute(rest)), {}, {
+    children: itemCount < 10 ? childrenWithId : /*#__PURE__*/jsx(FixedSizeList, {
+      height: actionListBoxHeight,
+      width: "100%",
+      itemSize: itemHeight,
+      itemCount: itemCount,
+      itemData: itemData
+      // @ts-expect-error: props does exist
+      ,
+      itemKey: function itemKey(index) {
+        var _itemData$index;
+        return (_itemData$index = itemData[index]) === null || _itemData$index === void 0 ? void 0 : _itemData$index.props.value;
+      },
+      children: VirtualListItem
+    })
+  }));
+});
+var ActionListVirtualizedBox = /*#__PURE__*/assignWithoutSideEffects( /*#__PURE__*/React__default.memo(_ActionListVirtualizedBox), {
+  displayName: 'ActionListVirtualizedBox'
+});
+
+export { ActionListBox, ActionListVirtualizedBox };
 //# sourceMappingURL=ActionListBox.web.js.map

package/build/lib/web/production/components/ActionList/ActionListBox.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionListBox.web.js","sources":["../../../../../../src/components/ActionList/ActionListBox.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport { StyledListBoxWrapper } from './styles/StyledListBoxWrapper';\nimport type { SectionData } from './actionListUtils';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\n\ntype ActionListBoxProps = {\n  childrenWithId?: React.ReactNode[] | null;\n  sectionData: SectionData;\n  actionListItemWrapperRole: 'listbox' | 'menu' | undefined;\n  isMultiSelectable: boolean;\n  isInBottomSheet: boolean;\n} & DataAnalyticsAttribute;\n\nconst _ActionListBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const { isInBottomSheet } = useBottomSheetContext();\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {childrenWithId}\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListBox = assignWithoutSideEffects(_ActionListBox, { displayName: 'ActionListBox' });\n\nexport { ActionListBox };\n"],"names":["_ActionListBox","React","forwardRef","_ref","ref","childrenWithId","actionListItemWrapperRole","isMultiSelectable","rest","_objectWithoutProperties","_excluded","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_jsx","StyledListBoxWrapper","_objectSpread","makeAccessible","role","multiSelectable","undefined","makeAnalyticsAttribute","children","ActionListBox","assignWithoutSideEffects","displayName"],"mappings":";;;;;;;;;;;;;;;;AAkBA,IAAMA,cAAc,gBAAGC,cAAK,CAACC,UAAU,CACrC,UAAAC,IAAA,EAA4EC,GAAG,EAAK;AAAA,EAAA,IAAjFC,cAAc,GAAAF,IAAA,CAAdE,cAAc;IAAEC,yBAAyB,GAAAH,IAAA,CAAzBG,yBAAyB;IAAEC,iBAAiB,GAAAJ,IAAA,CAAjBI,iBAAiB;AAAKC,IAAAA,IAAI,GAAAC,wBAAA,CAAAN,IAAA,EAAAO,SAAA,CAAA,CAAA;AACtE,EAAA,IAAAC,qBAAA,GAA4BC,qBAAqB,EAAE;IAA3CC,eAAe,GAAAF,qBAAA,CAAfE,eAAe,CAAA;EAEvB,oBACEC,GAAA,CAACC,oBAAoB,EAAAC,aAAA,CAAAA,aAAA,CAAAA,aAAA,CAAA;AACnBH,IAAAA,eAAe,EAAEA,eAAgB;AACjCT,IAAAA,GAAG,EAAEA,GAAAA;AAAI,GAAA,EACLa,cAAc,CAAC;AACjBC,IAAAA,IAAI,EAAEZ,yBAAyB;AAC/Ba,IAAAA,eAAe,EAAEb,yBAAyB,KAAK,SAAS,GAAGC,iBAAiB,GAAGa,SAAAA;AACjF,GAAC,CAAC,CAAA,EACEC,sBAAsB,CAACb,IAAI,CAAC,CAAA,EAAA,EAAA,EAAA;AAAAc,IAAAA,QAAA,EAE/BjB,cAAAA;AAAc,GAAA,CACK,CAAC,CAAA;AAE3B,CACF,CAAC,CAAA;AAED,IAAMkB,aAAa,gBAAGC,wBAAwB,CAACxB,cAAc,EAAE;AAAEyB,EAAAA,WAAW,EAAE,eAAA;AAAgB,CAAC;;;;"}
+{"version":3,"file":"ActionListBox.web.js","sources":["../../../../../../src/components/ActionList/ActionListBox.web.tsx"],"sourcesContent":["/* eslint-disable react/display-name */\nimport React from 'react';\nimport { FixedSizeList as VirtualizedList } from 'react-window';\nimport { StyledListBoxWrapper } from './styles/StyledListBoxWrapper';\nimport type { SectionData } from './actionListUtils';\nimport { actionListMaxHeight, getActionListPadding } from './styles/getBaseListBoxWrapperStyles';\nimport { useBottomSheetContext } from '~components/BottomSheet/BottomSheetContext';\nimport { assignWithoutSideEffects } from '~utils/assignWithoutSideEffects';\nimport { makeAccessible } from '~utils/makeAccessible';\nimport type { DataAnalyticsAttribute } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getItemHeight } from '~components/BaseMenu/BaseMenuItem/tokens';\nimport { useTheme } from '~utils';\nimport type { Theme } from '~components/BladeProvider';\nimport { useDropdown } from '~components/Dropdown/useDropdown';\nimport { dropdownComponentIds } from '~components/Dropdown/dropdownComponentIds';\n\ntype ActionListBoxProps = {\n  childrenWithId?: React.ReactNode[] | null;\n  sectionData: SectionData;\n  actionListItemWrapperRole: 'listbox' | 'menu' | undefined;\n  isMultiSelectable: boolean;\n  isInBottomSheet: boolean;\n} & DataAnalyticsAttribute;\n\nconst _ActionListBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const { isInBottomSheet } = useBottomSheetContext();\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {childrenWithId}\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListBox = assignWithoutSideEffects(React.memo(_ActionListBox), {\n  displayName: 'ActionListBox',\n});\n\n/**\n * Returns the height of item and height of container based on theme and device\n */\nconst getVirtualItemParams = ({\n  theme,\n  isMobile,\n}: {\n  theme: Theme;\n  isMobile: boolean;\n}): {\n  itemHeight: number;\n  actionListBoxHeight: number;\n} => {\n  const itemHeightResponsive = getItemHeight(theme);\n  const actionListPadding = getActionListPadding(theme);\n  const actionListBoxHeight = actionListMaxHeight - actionListPadding * 2;\n\n  return {\n    itemHeight: isMobile\n      ? itemHeightResponsive.itemHeightMobile\n      : itemHeightResponsive.itemHeightDesktop,\n    actionListBoxHeight,\n  };\n};\n\n/**\n * Takes the children (ActionListItem) and returns the filtered items based on `filteredValues` state\n */\nconst useFilteredItems = (\n  children: React.ReactNode[],\n): {\n  itemData: React.ReactNode[];\n  itemCount: number;\n} => {\n  const childrenArray = React.Children.toArray(children); // Convert children to an array\n\n  const { filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer } = useDropdown();\n\n  const items = React.useMemo(() => {\n    const hasAutoComplete =\n      hasAutoCompleteInBottomSheetHeader ||\n      dropdownTriggerer === dropdownComponentIds.triggers.AutoComplete;\n\n    if (!hasAutoComplete) {\n      return childrenArray;\n    }\n\n    // @ts-expect-error: props does exist\n    const filteredItems = childrenArray.filter((item) => filteredValues.includes(item.props.value));\n    return filteredItems;\n  }, [filteredValues, hasAutoCompleteInBottomSheetHeader, dropdownTriggerer, childrenArray]);\n\n  return {\n    itemData: items,\n    itemCount: items.length,\n  };\n};\n\nconst VirtualListItem = ({\n  index,\n  style,\n  data,\n}: {\n  index: number;\n  style: React.CSSProperties;\n  data: React.ReactNode[];\n}): React.ReactElement => {\n  return <div style={style}>{data[index]}</div>;\n};\n\nconst _ActionListVirtualizedBox = React.forwardRef<HTMLDivElement, ActionListBoxProps>(\n  ({ childrenWithId, actionListItemWrapperRole, isMultiSelectable, ...rest }, ref) => {\n    const items = React.Children.toArray(childrenWithId); // Convert children to an array\n    const { isInBottomSheet } = useBottomSheetContext();\n    const { itemData, itemCount } = useFilteredItems(items);\n\n    const isMobile = useIsMobile();\n    const { theme } = useTheme();\n    const { itemHeight, actionListBoxHeight } = React.useMemo(\n      () => getVirtualItemParams({ theme, isMobile }),\n      // eslint-disable-next-line react-hooks/exhaustive-deps\n      [theme.name, isMobile],\n    );\n\n    return (\n      <StyledListBoxWrapper\n        isInBottomSheet={isInBottomSheet}\n        ref={ref}\n        {...makeAccessible({\n          role: actionListItemWrapperRole,\n          multiSelectable: actionListItemWrapperRole === 'listbox' ? isMultiSelectable : undefined,\n        })}\n        {...makeAnalyticsAttribute(rest)}\n      >\n        {itemCount < 10 ? (\n          childrenWithId\n        ) : (\n          <VirtualizedList\n            height={actionListBoxHeight}\n            width=\"100%\"\n            itemSize={itemHeight}\n            itemCount={itemCount}\n            itemData={itemData}\n            // @ts-expect-error: props does exist\n            itemKey={(index) => itemData[index]?.props.value}\n          >\n            {VirtualListItem}\n          </VirtualizedList>\n        )}\n      </StyledListBoxWrapper>\n    );\n  },\n);\n\nconst ActionListVirtualizedBox = assignWithoutSideEffects(React.memo(_ActionListVirtualizedBox), {\n  displayName: 'ActionListVirtualizedBox',\n});\n\nexport { ActionListBox, ActionListVirtualizedBox };\n"],"names":["_ActionListBox","React","forwardRef","_ref","ref","childrenWithId","actionListItemWrapperRole","isMultiSelectable","rest","_objectWithoutProperties","_excluded","_useBottomSheetContex","useBottomSheetContext","isInBottomSheet","_jsx","StyledListBoxWrapper","_objectSpread","makeAccessible","role","multiSelectable","undefined","makeAnalyticsAttribute","children","ActionListBox","assignWithoutSideEffects","memo","displayName","getVirtualItemParams","_ref2","theme","isMobile","itemHeightResponsive","getItemHeight","actionListPadding","getActionListPadding","actionListBoxHeight","actionListMaxHeight","itemHeight","itemHeightMobile","itemHeightDesktop","useFilteredItems","childrenArray","Children","toArray","_useDropdown","useDropdown","filteredValues","hasAutoCompleteInBottomSheetHeader","dropdownTriggerer","items","useMemo","hasAutoComplete","dropdownComponentIds","triggers","AutoComplete","filteredItems","filter","item","includes","props","value","itemData","itemCount","length","VirtualListItem","_ref3","index","style","data","_ActionListVirtualizedBox","_ref4","_excluded2","_useBottomSheetContex2","_useFilteredItems","useIsMobile","_useTheme","useTheme","_React$useMemo","name","VirtualizedList","height","width","itemSize","itemKey","_itemData$index","ActionListVirtualizedBox"],"mappings":"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"}