@razorpay/blade 12.4.0 → 12.5.0

package/build/lib/web/development/components/FileUpload/FileUploadItem.js

@@ -86,6 +86,8 @@ var FileUploadItem = /*#__PURE__*/memo(function (_ref) {
             children: errorText !== null && errorText !== void 0 ? errorText : "".concat((showSizeInKB ? sizeInKB : sizeInMB).toFixed(2), " ").concat(showSizeInKB ? 'KB' : 'MB', " ").concat(isUploading && uploadPercent ? "(".concat(uploadPercent, "%)") : '')
           })]
         }), status === 'uploading' ? /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          alignItems: "center",
           children: /*#__PURE__*/jsx(IconButton, {
             accessibilityLabel: "Remove File",
             icon: CloseIcon,

package/build/lib/web/development/components/FileUpload/FileUploadItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"FileUploadItem.js","sources":["../../../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper';\nimport type { FileUploadItemProps } from './types';\nimport { FileUploadItemIcon } from './FileUploadItemIcon';\nimport { TrashIcon, EyeIcon, CloseIcon, CheckCircleIcon, RefreshIcon } from '~components/Icons';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { Divider } from '~components/Divider';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ProgressBar } from '~components/ProgressBar';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { BaseLink } from '~components/Link/BaseLink';\n\nconst FileUploadItem = memo(\n  ({\n    file,\n    onPreview,\n    onRemove,\n    onReupload,\n    onDismiss,\n    size: containerSize,\n  }: FileUploadItemProps): React.ReactElement => {\n    const { name, size, uploadPercent, errorText, status } = file;\n    const isUploading = status === 'uploading';\n    const sizeInKB = size / 1024;\n    const sizeInMB = sizeInKB / 1024;\n    const showSizeInKB = sizeInKB < 1024;\n\n    return (\n      <StyledFileUploadItemWrapper\n        size={containerSize ?? 'medium'}\n        status={status ?? 'success'}\n        borderRadius=\"medium\"\n        borderWidth=\"thin\"\n      >\n        <BaseBox width=\"100%\" display=\"flex\" flexDirection=\"column\">\n          <BaseBox\n            display=\"flex\"\n            flexDirection=\"row\"\n            margin={containerSize === 'large' ? 'spacing.4' : 'spacing.3'}\n          >\n            <BaseBox marginRight=\"spacing.3\">\n              <FileUploadItemIcon fileName={name} uploadStatus={status} />\n            </BaseBox>\n            <BaseBox flexGrow={1}>\n              <BaseBox alignItems=\"center\" display=\"flex\">\n                <BaseBox alignItems=\"center\" maxWidth=\"70%\" display=\"flex\" marginRight=\"spacing.3\">\n                  <Text\n                    size=\"medium\"\n                    weight=\"medium\"\n                    color=\"surface.text.gray.subtle\"\n                    truncateAfterLines={1}\n                  >\n                    {name}\n                  </Text>\n                </BaseBox>\n                {status === 'success' && (\n                  <CheckCircleIcon\n                    size=\"medium\"\n                    marginRight=\"spacing.2\"\n                    color=\"interactive.icon.positive.normal\"\n                  />\n                )}\n              </BaseBox>\n              <Text\n                size=\"small\"\n                weight=\"regular\"\n                color={\n                  status === 'error' ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'\n                }\n              >\n                {errorText ??\n                  `${(showSizeInKB ? sizeInKB : sizeInMB).toFixed(2)} ${\n                    showSizeInKB ? 'KB' : 'MB'\n                  } ${isUploading && uploadPercent ? `(${uploadPercent}%)` : ''}`}\n              </Text>\n            </BaseBox>\n            {status === 'uploading' ? (\n              <BaseBox>\n                <IconButton\n                  accessibilityLabel=\"Remove File\"\n                  icon={CloseIcon}\n                  onClick={() => onDismiss?.({ file })}\n                />\n              </BaseBox>\n            ) : status === 'error' ? (\n              <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n                <BaseLink\n                  marginX=\"spacing.1\"\n                  variant=\"button\"\n                  icon={RefreshIcon}\n                  color=\"negative\"\n                  size=\"small\"\n                  onClick={() => {\n                    onReupload?.({ file });\n                  }}\n                >\n                  Re-upload\n                </BaseLink>\n              </BaseBox>\n            ) : (\n              <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n                {onPreview ? (\n                  <BaseBox\n                    display=\"flex\"\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    padding=\"spacing.0\"\n                    gap=\"spacing.3\"\n                  >\n                    <IconButton\n                      accessibilityLabel=\"Preview File\"\n                      icon={EyeIcon}\n                      onClick={() => onPreview?.({ file })}\n                    />\n                    <Divider orientation=\"vertical\" thickness=\"thinner\" variant=\"normal\" />\n                    <IconButton\n                      accessibilityLabel=\"Remove File\"\n                      icon={TrashIcon}\n                      onClick={() => onRemove?.({ file })}\n                    />\n                  </BaseBox>\n                ) : (\n                  <IconButton\n                    accessibilityLabel=\"Remove File\"\n                    icon={TrashIcon}\n                    onClick={() => onRemove?.({ file })}\n                  />\n                )}\n              </BaseBox>\n            )}\n          </BaseBox>\n          {isUploading && (\n            <BaseBox width=\"100%\" position=\"absolute\" bottom=\"spacing.0\">\n              <ProgressBar\n                left=\"spacing.0\"\n                showPercentage={false}\n                value={uploadPercent ?? 0}\n                isIndeterminate={isUndefined(uploadPercent)}\n              />\n            </BaseBox>\n          )}\n        </BaseBox>\n      </StyledFileUploadItemWrapper>\n    );\n  },\n);\n\nexport { FileUploadItem };\n"],"names":["FileUploadItem","memo","_ref","file","onPreview","onRemove","onReupload","onDismiss","containerSize","size","name","uploadPercent","errorText","status","isUploading","sizeInKB","sizeInMB","showSizeInKB","_jsx","StyledFileUploadItemWrapper","borderRadius","borderWidth","children","_jsxs","BaseBox","width","display","flexDirection","margin","marginRight","FileUploadItemIcon","fileName","uploadStatus","flexGrow","alignItems","maxWidth","Text","weight","color","truncateAfterLines","CheckCircleIcon","concat","toFixed","IconButton","accessibilityLabel","icon","CloseIcon","onClick","BaseLink","marginX","variant","RefreshIcon","padding","gap","EyeIcon","Divider","orientation","thickness","TrashIcon","position","bottom","ProgressBar","left","showPercentage","value","isIndeterminate","isUndefined"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAaA,IAAMA,cAAc,gBAAGC,IAAI,CACzB,UAAAC,IAAA,EAO+C;AAAA,EAAA,IAN7CC,IAAI,GAAAD,IAAA,CAAJC,IAAI;IACJC,SAAS,GAAAF,IAAA,CAATE,SAAS;IACTC,QAAQ,GAAAH,IAAA,CAARG,QAAQ;IACRC,UAAU,GAAAJ,IAAA,CAAVI,UAAU;IACVC,SAAS,GAAAL,IAAA,CAATK,SAAS;IACHC,aAAa,GAAAN,IAAA,CAAnBO,IAAI,CAAA;AAEJ,EAAA,IAAQC,IAAI,GAA6CP,IAAI,CAArDO,IAAI;IAAED,IAAI,GAAuCN,IAAI,CAA/CM,IAAI;IAAEE,aAAa,GAAwBR,IAAI,CAAzCQ,aAAa;IAAEC,SAAS,GAAaT,IAAI,CAA1BS,SAAS;IAAEC,MAAM,GAAKV,IAAI,CAAfU,MAAM,CAAA;AACpD,EAAA,IAAMC,WAAW,GAAGD,MAAM,KAAK,WAAW,CAAA;AAC1C,EAAA,IAAME,QAAQ,GAAGN,IAAI,GAAG,IAAI,CAAA;AAC5B,EAAA,IAAMO,QAAQ,GAAGD,QAAQ,GAAG,IAAI,CAAA;AAChC,EAAA,IAAME,YAAY,GAAGF,QAAQ,GAAG,IAAI,CAAA;EAEpC,oBACEG,GAAA,CAACC,2BAA2B,EAAA;AAC1BV,IAAAA,IAAI,EAAED,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,aAAa,GAAI,QAAS;AAChCK,IAAAA,MAAM,EAAEA,MAAM,KAAA,IAAA,IAANA,MAAM,KAANA,KAAAA,CAAAA,GAAAA,MAAM,GAAI,SAAU;AAC5BO,IAAAA,YAAY,EAAC,QAAQ;AACrBC,IAAAA,WAAW,EAAC,MAAM;IAAAC,QAAA,eAElBC,IAAA,CAACC,OAAO,EAAA;AAACC,MAAAA,KAAK,EAAC,MAAM;AAACC,MAAAA,OAAO,EAAC,MAAM;AAACC,MAAAA,aAAa,EAAC,QAAQ;MAAAL,QAAA,EAAA,cACzDC,IAAA,CAACC,OAAO,EAAA;AACNE,QAAAA,OAAO,EAAC,MAAM;AACdC,QAAAA,aAAa,EAAC,KAAK;AACnBC,QAAAA,MAAM,EAAEpB,aAAa,KAAK,OAAO,GAAG,WAAW,GAAG,WAAY;QAAAc,QAAA,EAAA,cAE9DJ,GAAA,CAACM,OAAO,EAAA;AAACK,UAAAA,WAAW,EAAC,WAAW;UAAAP,QAAA,eAC9BJ,GAAA,CAACY,kBAAkB,EAAA;AAACC,YAAAA,QAAQ,EAAErB,IAAK;AAACsB,YAAAA,YAAY,EAAEnB,MAAAA;WAAS,CAAA;AAAC,SACrD,CAAC,eACVU,IAAA,CAACC,OAAO,EAAA;AAACS,UAAAA,QAAQ,EAAE,CAAE;UAAAX,QAAA,EAAA,cACnBC,IAAA,CAACC,OAAO,EAAA;AAACU,YAAAA,UAAU,EAAC,QAAQ;AAACR,YAAAA,OAAO,EAAC,MAAM;YAAAJ,QAAA,EAAA,cACzCJ,GAAA,CAACM,OAAO,EAAA;AAACU,cAAAA,UAAU,EAAC,QAAQ;AAACC,cAAAA,QAAQ,EAAC,KAAK;AAACT,cAAAA,OAAO,EAAC,MAAM;AAACG,cAAAA,WAAW,EAAC,WAAW;cAAAP,QAAA,eAChFJ,GAAA,CAACkB,IAAI,EAAA;AACH3B,gBAAAA,IAAI,EAAC,QAAQ;AACb4B,gBAAAA,MAAM,EAAC,QAAQ;AACfC,gBAAAA,KAAK,EAAC,0BAA0B;AAChCC,gBAAAA,kBAAkB,EAAE,CAAE;AAAAjB,gBAAAA,QAAA,EAErBZ,IAAAA;eACG,CAAA;aACC,CAAC,EACTG,MAAM,KAAK,SAAS,iBACnBK,GAAA,CAACsB,eAAe,EAAA;AACd/B,cAAAA,IAAI,EAAC,QAAQ;AACboB,cAAAA,WAAW,EAAC,WAAW;AACvBS,cAAAA,KAAK,EAAC,kCAAA;AAAkC,aACzC,CACF,CAAA;AAAA,WACM,CAAC,eACVpB,GAAA,CAACkB,IAAI,EAAA;AACH3B,YAAAA,IAAI,EAAC,OAAO;AACZ4B,YAAAA,MAAM,EAAC,SAAS;AAChBC,YAAAA,KAAK,EACHzB,MAAM,KAAK,OAAO,GAAG,gCAAgC,GAAG,yBACzD;AAAAS,YAAAA,QAAA,EAEAV,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAATA,SAAS,GAAA6B,EAAAA,CAAAA,MAAA,CACL,CAACxB,YAAY,GAAGF,QAAQ,GAAGC,QAAQ,EAAE0B,OAAO,CAAC,CAAC,CAAC,EAAA,GAAA,CAAA,CAAAD,MAAA,CAChDxB,YAAY,GAAG,IAAI,GAAG,IAAI,EAAAwB,GAAAA,CAAAA,CAAAA,MAAA,CACxB3B,WAAW,IAAIH,aAAa,GAAA,GAAA,CAAA8B,MAAA,CAAO9B,aAAa,UAAO,EAAE,CAAA;AAAA,WAC3D,CAAC,CAAA;SACA,CAAC,EACTE,MAAM,KAAK,WAAW,gBACrBK,GAAA,CAACM,OAAO,EAAA;UAAAF,QAAA,eACNJ,GAAA,CAACyB,UAAU,EAAA;AACTC,YAAAA,kBAAkB,EAAC,aAAa;AAChCC,YAAAA,IAAI,EAAEC,SAAU;YAChBC,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,cAAA,OAAMxC,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAG;AAAEJ,gBAAAA,IAAI,EAAJA,IAAAA;AAAK,eAAC,CAAC,CAAA;AAAA,aAAA;WACrC,CAAA;SACM,CAAC,GACRU,MAAM,KAAK,OAAO,gBACpBK,GAAA,CAACM,OAAO,EAAA;AAACE,UAAAA,OAAO,EAAC,MAAM;AAACC,UAAAA,aAAa,EAAC,KAAK;AAACO,UAAAA,UAAU,EAAC,QAAQ;UAAAZ,QAAA,eAC7DJ,GAAA,CAAC8B,QAAQ,EAAA;AACPC,YAAAA,OAAO,EAAC,WAAW;AACnBC,YAAAA,OAAO,EAAC,QAAQ;AAChBL,YAAAA,IAAI,EAAEM,WAAY;AAClBb,YAAAA,KAAK,EAAC,UAAU;AAChB7B,YAAAA,IAAI,EAAC,OAAO;YACZsC,OAAO,EAAE,SAAAA,OAAAA,GAAM;AACbzC,cAAAA,UAAU,KAAVA,IAAAA,IAAAA,UAAU,KAAVA,KAAAA,CAAAA,GAAAA,KAAAA,CAAAA,GAAAA,UAAU,CAAG;AAAEH,gBAAAA,IAAI,EAAJA,IAAAA;AAAK,eAAC,CAAC,CAAA;aACtB;AAAAmB,YAAAA,QAAA,EACH,WAAA;WAES,CAAA;AAAC,SACJ,CAAC,gBAEVJ,GAAA,CAACM,OAAO,EAAA;AAACE,UAAAA,OAAO,EAAC,MAAM;AAACC,UAAAA,aAAa,EAAC,KAAK;AAACO,UAAAA,UAAU,EAAC,QAAQ;AAAAZ,UAAAA,QAAA,EAC5DlB,SAAS,gBACRmB,IAAA,CAACC,OAAO,EAAA;AACNE,YAAAA,OAAO,EAAC,MAAM;AACdC,YAAAA,aAAa,EAAC,KAAK;AACnBO,YAAAA,UAAU,EAAC,QAAQ;AACnBkB,YAAAA,OAAO,EAAC,WAAW;AACnBC,YAAAA,GAAG,EAAC,WAAW;YAAA/B,QAAA,EAAA,cAEfJ,GAAA,CAACyB,UAAU,EAAA;AACTC,cAAAA,kBAAkB,EAAC,cAAc;AACjCC,cAAAA,IAAI,EAAES,OAAQ;cACdP,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,gBAAA,OAAM3C,SAAS,KAAA,IAAA,IAATA,SAAS,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAATA,SAAS,CAAG;AAAED,kBAAAA,IAAI,EAAJA,IAAAA;AAAK,iBAAC,CAAC,CAAA;AAAA,eAAA;AAAC,aACtC,CAAC,eACFe,GAAA,CAACqC,OAAO,EAAA;AAACC,cAAAA,WAAW,EAAC,UAAU;AAACC,cAAAA,SAAS,EAAC,SAAS;AAACP,cAAAA,OAAO,EAAC,QAAA;AAAQ,aAAE,CAAC,eACvEhC,GAAA,CAACyB,UAAU,EAAA;AACTC,cAAAA,kBAAkB,EAAC,aAAa;AAChCC,cAAAA,IAAI,EAAEa,SAAU;cAChBX,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,gBAAA,OAAM1C,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAG;AAAEF,kBAAAA,IAAI,EAAJA,IAAAA;AAAK,iBAAC,CAAC,CAAA;AAAA,eAAA;AAAC,aACrC,CAAC,CAAA;AAAA,WACK,CAAC,gBAEVe,GAAA,CAACyB,UAAU,EAAA;AACTC,YAAAA,kBAAkB,EAAC,aAAa;AAChCC,YAAAA,IAAI,EAAEa,SAAU;YAChBX,OAAO,EAAE,SAAAA,OAAA,GAAA;AAAA,cAAA,OAAM1C,QAAQ,KAAA,IAAA,IAARA,QAAQ,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAARA,QAAQ,CAAG;AAAEF,gBAAAA,IAAI,EAAJA,IAAAA;AAAK,eAAC,CAAC,CAAA;AAAA,aAAA;WACpC,CAAA;AACF,SACM,CACV,CAAA;AAAA,OACM,CAAC,EACTW,WAAW,iBACVI,GAAA,CAACM,OAAO,EAAA;AAACC,QAAAA,KAAK,EAAC,MAAM;AAACkC,QAAAA,QAAQ,EAAC,UAAU;AAACC,QAAAA,MAAM,EAAC,WAAW;QAAAtC,QAAA,eAC1DJ,GAAA,CAAC2C,WAAW,EAAA;AACVC,UAAAA,IAAI,EAAC,WAAW;AAChBC,UAAAA,cAAc,EAAE,KAAM;AACtBC,UAAAA,KAAK,EAAErD,aAAa,KAAA,IAAA,IAAbA,aAAa,KAAbA,KAAAA,CAAAA,GAAAA,aAAa,GAAI,CAAE;UAC1BsD,eAAe,EAAEC,WAAW,CAACvD,aAAa,CAAA;SAC3C,CAAA;AAAC,OACK,CACV,CAAA;KACM,CAAA;AAAC,GACiB,CAAC,CAAA;AAElC,CACF;;;;"}
+{"version":3,"file":"FileUploadItem.js","sources":["../../../../../../src/components/FileUpload/FileUploadItem.tsx"],"sourcesContent":["import { memo } from 'react';\nimport { StyledFileUploadItemWrapper } from './StyledFileUploadItemWrapper';\nimport type { FileUploadItemProps } from './types';\nimport { FileUploadItemIcon } from './FileUploadItemIcon';\nimport { TrashIcon, EyeIcon, CloseIcon, CheckCircleIcon, RefreshIcon } from '~components/Icons';\nimport { BaseBox } from '~components/Box/BaseBox';\nimport { Text } from '~components/Typography';\nimport { Divider } from '~components/Divider';\nimport { IconButton } from '~components/Button/IconButton';\nimport { ProgressBar } from '~components/ProgressBar';\nimport isUndefined from '~utils/lodashButBetter/isUndefined';\nimport { BaseLink } from '~components/Link/BaseLink';\n\nconst FileUploadItem = memo(\n  ({\n    file,\n    onPreview,\n    onRemove,\n    onReupload,\n    onDismiss,\n    size: containerSize,\n  }: FileUploadItemProps): React.ReactElement => {\n    const { name, size, uploadPercent, errorText, status } = file;\n    const isUploading = status === 'uploading';\n    const sizeInKB = size / 1024;\n    const sizeInMB = sizeInKB / 1024;\n    const showSizeInKB = sizeInKB < 1024;\n\n    return (\n      <StyledFileUploadItemWrapper\n        size={containerSize ?? 'medium'}\n        status={status ?? 'success'}\n        borderRadius=\"medium\"\n        borderWidth=\"thin\"\n      >\n        <BaseBox width=\"100%\" display=\"flex\" flexDirection=\"column\">\n          <BaseBox\n            display=\"flex\"\n            flexDirection=\"row\"\n            margin={containerSize === 'large' ? 'spacing.4' : 'spacing.3'}\n          >\n            <BaseBox marginRight=\"spacing.3\">\n              <FileUploadItemIcon fileName={name} uploadStatus={status} />\n            </BaseBox>\n            <BaseBox flexGrow={1}>\n              <BaseBox alignItems=\"center\" display=\"flex\">\n                <BaseBox alignItems=\"center\" maxWidth=\"70%\" display=\"flex\" marginRight=\"spacing.3\">\n                  <Text\n                    size=\"medium\"\n                    weight=\"medium\"\n                    color=\"surface.text.gray.subtle\"\n                    truncateAfterLines={1}\n                  >\n                    {name}\n                  </Text>\n                </BaseBox>\n                {status === 'success' && (\n                  <CheckCircleIcon\n                    size=\"medium\"\n                    marginRight=\"spacing.2\"\n                    color=\"interactive.icon.positive.normal\"\n                  />\n                )}\n              </BaseBox>\n              <Text\n                size=\"small\"\n                weight=\"regular\"\n                color={\n                  status === 'error' ? 'feedback.text.negative.intense' : 'surface.text.gray.muted'\n                }\n              >\n                {errorText ??\n                  `${(showSizeInKB ? sizeInKB : sizeInMB).toFixed(2)} ${\n                    showSizeInKB ? 'KB' : 'MB'\n                  } ${isUploading && uploadPercent ? `(${uploadPercent}%)` : ''}`}\n              </Text>\n            </BaseBox>\n            {status === 'uploading' ? (\n              <BaseBox display=\"flex\" alignItems=\"center\">\n                <IconButton\n                  accessibilityLabel=\"Remove File\"\n                  icon={CloseIcon}\n                  onClick={() => onDismiss?.({ file })}\n                />\n              </BaseBox>\n            ) : status === 'error' ? (\n              <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n                <BaseLink\n                  marginX=\"spacing.1\"\n                  variant=\"button\"\n                  icon={RefreshIcon}\n                  color=\"negative\"\n                  size=\"small\"\n                  onClick={() => {\n                    onReupload?.({ file });\n                  }}\n                >\n                  Re-upload\n                </BaseLink>\n              </BaseBox>\n            ) : (\n              <BaseBox display=\"flex\" flexDirection=\"row\" alignItems=\"center\">\n                {onPreview ? (\n                  <BaseBox\n                    display=\"flex\"\n                    flexDirection=\"row\"\n                    alignItems=\"center\"\n                    padding=\"spacing.0\"\n                    gap=\"spacing.3\"\n                  >\n                    <IconButton\n                      accessibilityLabel=\"Preview File\"\n                      icon={EyeIcon}\n                      onClick={() => onPreview?.({ file })}\n                    />\n                    <Divider orientation=\"vertical\" thickness=\"thinner\" variant=\"normal\" />\n                    <IconButton\n                      accessibilityLabel=\"Remove File\"\n                      icon={TrashIcon}\n                      onClick={() => onRemove?.({ file })}\n                    />\n                  </BaseBox>\n                ) : (\n                  <IconButton\n                    accessibilityLabel=\"Remove File\"\n                    icon={TrashIcon}\n                    onClick={() => onRemove?.({ file })}\n                  />\n                )}\n              </BaseBox>\n            )}\n          </BaseBox>\n          {isUploading && (\n            <BaseBox width=\"100%\" position=\"absolute\" bottom=\"spacing.0\">\n              <ProgressBar\n                left=\"spacing.0\"\n                showPercentage={false}\n                value={uploadPercent ?? 0}\n                isIndeterminate={isUndefined(uploadPercent)}\n              />\n            </BaseBox>\n          )}\n        </BaseBox>\n      </StyledFileUploadItemWrapper>\n    );\n  },\n);\n\nexport { FileUploadItem };\n"],"names":["FileUploadItem","memo","_ref","file","onPreview","onRemove","onReupload","onDismiss","containerSize","size","name","uploadPercent","errorText","status","isUploading","sizeInKB","sizeInMB","showSizeInKB","_jsx","StyledFileUploadItemWrapper","borderRadius","borderWidth","children","_jsxs","BaseBox","width","display","flexDirection","margin","marginRight","FileUploadItemIcon","fileName","uploadStatus","flexGrow","alignItems","maxWidth","Text","weight","color","truncateAfterLines","CheckCircleIcon","concat","toFixed","IconButton","accessibilityLabel","icon","CloseIcon","onClick","BaseLink","marginX","variant","RefreshIcon","padding","gap","EyeIcon","Divider","orientation","thickness","TrashIcon","position","bottom","ProgressBar","left","showPercentage","value","isIndeterminate","isUndefined"],"mappings":"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"}

package/build/lib/web/development/components/SideNav/SideNav.web.js

@@ -28,7 +28,7 @@ import { MetaConstants } from '../../utils/metaAttribute/metaConstants.js';
 import { getStyledProps } from '../Box/styledProps/getStyledProps.js';
 import { makeAnalyticsAttribute } from '../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 
-var _excluded = ["children", "isOpen", "onDismiss", "banner", "testID"];
+var _excluded = ["children", "isOpen", "onDismiss", "onVisibleLevelChange", "banner", "testID"];
 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; }
 function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it["return"] != null) it["return"](); } finally { if (didErr) throw err; } } }; }
@@ -122,6 +122,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
   var children = _ref4.children,
     isOpen = _ref4.isOpen,
     onDismiss = _ref4.onDismiss,
+    onVisibleLevelChange = _ref4.onVisibleLevelChange,
     banner = _ref4.banner,
     testID = _ref4.testID,
     rest = _objectWithoutProperties(_ref4, _excluded);
@@ -158,6 +159,9 @@ var _SideNav = function _SideNav(_ref4, ref) {
     if (isMobile) {
       setIsMobileL2Open(false);
       onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss();
+      onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+        visibleLevel: 0
+      });
     }
   };
   var cleanupTransition = function cleanupTransition() {
@@ -168,6 +172,41 @@ var _SideNav = function _SideNav(_ref4, ref) {
     }, TRANSITION_CLEANUP_DELAY);
     timeoutIdsRef.current.push(clearTransitionTimeout);
   };
+  var collapseL1 = function collapseL1(title) {
+    if (isMobile) {
+      setL2DrawerTitle(title);
+      setIsMobileL2Open(true);
+      onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+        visibleLevel: 2
+      });
+      return;
+    }
+    if (!isL1Collapsed) {
+      setIsL1Collapsed(true);
+      onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+        visibleLevel: 2
+      });
+    }
+  };
+  var expandL1 = function expandL1() {
+    if (isMobile) {
+      setIsMobileL2Open(false);
+      onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+        visibleLevel: 1
+      });
+      return;
+    }
+    // Ensures that if Normal L1 item is clicked, the L1 stays expanded
+    if (isL1Collapsed) {
+      setIsL1Collapsed(false);
+      // We want to avoid calling onVisibleLevelChange twice when L1 is hovered and then item on L1 is selected
+      if (!isL1Hovered) {
+        onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+          visibleLevel: 1
+        });
+      }
+    }
+  };
 
   /**
    * Handles L1 -> L2 menu changes based on active item
@@ -177,12 +216,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
     if (isL1ItemActive) {
       if (args.isL2Trigger) {
         // Click on L2 Trigger
-        if (isMobile) {
-          setL2DrawerTitle(args.title);
-          setIsMobileL2Open(true);
-          return;
-        }
-        setIsL1Collapsed(true);
+        collapseL1(args.title);
 
         // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change
         if (!args.isFirstRender) {
@@ -198,12 +232,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
         }
       } else {
         // Click on normal L1 Item
-        // eslint-disable-next-line no-lonely-if
-        if (isMobile) {
-          setIsMobileL2Open(false);
-        }
-        // Ensures that if Normal L1 item is clicked, the L1 stays expanded
-        setIsL1Collapsed(false);
+        expandL1();
       }
     }
   };
@@ -217,7 +246,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
     };
   },
   // eslint-disable-next-line react-hooks/exhaustive-deps
-  [isL1Collapsed, isMobile, isMobileL2Open]);
+  [isL1Collapsed, isMobile, isMobileL2Open, isL1Hovered]);
   React__default.useEffect(function () {
     return function () {
       var _iterator = _createForOfIteratorHelper(timeoutIdsRef.current),
@@ -240,7 +269,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
     children: isMobile && onDismiss ? /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsxs(Drawer, {
         isOpen: isOpen !== null && isOpen !== void 0 ? isOpen : false,
-        onDismiss: onDismiss,
+        onDismiss: closeMobileNav,
         children: [/*#__PURE__*/jsx(DrawerHeader, {
           title: "Main Menu"
         }), /*#__PURE__*/jsx(DrawerBody, {
@@ -260,7 +289,7 @@ var _SideNav = function _SideNav(_ref4, ref) {
       }), /*#__PURE__*/jsxs(Drawer, {
         isOpen: isMobileL2Open,
         onDismiss: function onDismiss() {
-          return setIsMobileL2Open(false);
+          return expandL1();
         },
         isLazy: false,
         children: [/*#__PURE__*/jsx(DrawerHeader, {
@@ -351,8 +380,11 @@ var _SideNav = function _SideNav(_ref4, ref) {
             if (mouseOverTimeoutRef.current) {
               clearTimeout(mouseOverTimeoutRef.current);
             }
-            if (isL1Collapsed && isHoverAgainEnabled) {
+            if (isL1Collapsed && isHoverAgainEnabled && !isL1Hovered) {
               setIsL1Hovered(true);
+              onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+                visibleLevel: 1
+              });
             }
           },
           onMouseLeave: function onMouseLeave() {
@@ -361,6 +393,9 @@ var _SideNav = function _SideNav(_ref4, ref) {
                 setIsL1Hovered(false);
                 setIsTransitioning(true);
                 cleanupTransition();
+                onVisibleLevelChange === null || onVisibleLevelChange === void 0 ? void 0 : onVisibleLevelChange({
+                  visibleLevel: 2
+                });
               }, L1_EXIT_HOVER_DELAY);
             }
           },

package/build/lib/web/development/components/SideNav/SideNav.web.js.map

@@ -1 +1 @@
-{"version":3,"file":"SideNav.web.js","sources":["../../../../../../src/components/SideNav/SideNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { SideNavContext } from './SideNavContext';\nimport type { SideNavContextType, SideNavProps } from './types';\nimport {\n  classes,\n  COLLAPSED_L1_WIDTH,\n  HOVER_AGAIN_DELAY,\n  L1_EXIT_HOVER_DELAY,\n  SKIP_NAV_ID,\n  TRANSITION_CLEANUP_DELAY,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n} from './tokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { Drawer, DrawerBody, DrawerHeader } from '~components/Drawer';\nimport { SkipNavContent, SkipNavLink } from '~components/SkipNav/SkipNav';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { size as sizeTokens } from '~tokens/global';\n\nconst {\n  COLLAPSED,\n  SHOW_WHEN_COLLAPSED,\n  HIDE_WHEN_COLLAPSED,\n  TRANSITIONING,\n  L1_ITEM_WRAPPER,\n} = classes;\n\nconst MobileL1Container = styled(BaseBox)(() => {\n  return {\n    [`.${SHOW_WHEN_COLLAPSED}`]: {\n      display: 'none',\n    },\n  };\n});\n\nconst StyledL1Menu = styled(BaseBox)((props) => {\n  const quick = makeMotionTime(props.theme.motion.duration.quick);\n  const xmoderate = makeMotionTime(props.theme.motion.duration.xmoderate);\n  const easing = props.theme.motion.easing;\n\n  const l1Expand = `width ${xmoderate} ${easing.entrance}`;\n  const l1Collapse = `width ${quick} ${easing.exit}`;\n\n  return {\n    width: '100%',\n    transition: l1Expand,\n    [`& > .${L1_ITEM_WRAPPER}`]: {\n      padding: makeSpace(props.theme.spacing[3]),\n    },\n    [`.${SHOW_WHEN_COLLAPSED}`]: {\n      display: 'none',\n    },\n    [`&.${COLLAPSED}`]: {\n      width: makeSize(COLLAPSED_L1_WIDTH),\n      transition: l1Collapse,\n      [`& > .${L1_ITEM_WRAPPER}`]: {\n        padding: `${makeSpace(props.theme.spacing[3])} ${makeSpace(props.theme.spacing[3])}`,\n      },\n      [`&:not(.${TRANSITIONING}) .${HIDE_WHEN_COLLAPSED}`]: {\n        display: 'none',\n      },\n      [`&:not(.${TRANSITIONING}) .${SHOW_WHEN_COLLAPSED}`]: {\n        display: 'initial',\n      },\n    },\n  };\n});\n\nconst getL1MenuClassName = ({\n  isL1Collapsed,\n  isL1Hovered,\n  isTransitioning,\n}: {\n  isL1Collapsed: boolean;\n  isL1Hovered: boolean;\n  isTransitioning: boolean;\n}): string => {\n  const isMenuCollapsed = isL1Collapsed && !isL1Hovered;\n\n  if (isMenuCollapsed) {\n    if (isTransitioning) {\n      return `${COLLAPSED} ${TRANSITIONING}`;\n    }\n\n    return COLLAPSED;\n  }\n\n  return '';\n};\n\nconst BannerContainer = styled(BaseBox)((props) => {\n  return {\n    '&:not(:empty)': {\n      borderBottom: makeBorderSize(props.theme.border.width.thin),\n      borderBottomStyle: 'solid',\n      borderBottomColor: props.theme.colors.surface.border.gray.muted,\n      borderRight: makeBorderSize(props.theme.border.width.thin),\n      borderRightStyle: 'solid',\n      borderRightColor: props.theme.colors.surface.border.gray.muted,\n      padding: makeSpace(props.theme.spacing[3]),\n      maxHeight: makeSize(sizeTokens['100']),\n      width: '100%',\n    },\n  };\n});\n\n/**\n * ### SideNav component\n *\n * The side navigation is positioned along the left side of the screen that provides quick access to different sections or functionalities of the application.\n *\n * ---\n *\n * #### Usage\n *\n * SideNav requires handling active state with React Router, Checkout Usage with React Router v6 at - [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)\n *\n */\nconst _SideNav = (\n  { children, isOpen, onDismiss, banner, testID, ...rest }: SideNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const l2PortalContainerRef = React.useRef(null);\n  const l1ContainerRef = React.useRef<HTMLDivElement>(null);\n  const timeoutIdsRef = React.useRef<NodeJS.Timeout[]>([]);\n  const mouseOverTimeoutRef = React.useRef<NodeJS.Timeout>();\n  const [isL1Collapsed, setIsL1Collapsed] = React.useState(false);\n  const [isMobileL2Open, setIsMobileL2Open] = React.useState(false);\n  const [isL1Hovered, setIsL1Hovered] = React.useState(false);\n  const [isHoverAgainEnabled, setIsHoverAgainEnabled] = React.useState(true);\n  const [isTransitioning, setIsTransitioning] = React.useState(false);\n  const [l2DrawerTitle, setL2DrawerTitle] = React.useState('');\n\n  const isMobile = useIsMobile();\n\n  const closeMobileNav = (): void => {\n    if (isMobile) {\n      setIsMobileL2Open(false);\n      onDismiss?.();\n    }\n  };\n\n  const cleanupTransition = (): void => {\n    const clearTransitionTimeout = setTimeout(() => {\n      if (isTransitioning) {\n        setIsTransitioning(false);\n      }\n    }, TRANSITION_CLEANUP_DELAY);\n    timeoutIdsRef.current.push(clearTransitionTimeout);\n  };\n\n  /**\n   * Handles L1 -> L2 menu changes based on active item\n   */\n  const onLinkActiveChange: SideNavContextType['onLinkActiveChange'] = (args) => {\n    const isL1ItemActive = args.level === 1 && args.isActive;\n\n    if (isL1ItemActive) {\n      if (args.isL2Trigger) {\n        // Click on L2 Trigger\n        if (isMobile) {\n          setL2DrawerTitle(args.title);\n          setIsMobileL2Open(true);\n          return;\n        }\n\n        setIsL1Collapsed(true);\n\n        // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change\n        if (!args.isFirstRender) {\n          setIsTransitioning(true);\n          cleanupTransition();\n          setIsL1Hovered(false);\n          setIsHoverAgainEnabled(false);\n          // For some delay, we disable hover to expand behaviour to avoid buggy flicker when cursor is on L1 while its trying to close\n          const hoverAgainTimeout = setTimeout(() => {\n            setIsHoverAgainEnabled(true);\n          }, HOVER_AGAIN_DELAY);\n          timeoutIdsRef.current.push(hoverAgainTimeout);\n        }\n      } else {\n        // Click on normal L1 Item\n        // eslint-disable-next-line no-lonely-if\n        if (isMobile) {\n          setIsMobileL2Open(false);\n        }\n        // Ensures that if Normal L1 item is clicked, the L1 stays expanded\n        setIsL1Collapsed(false);\n      }\n    }\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      l2PortalContainerRef,\n      onLinkActiveChange,\n      closeMobileNav,\n      isL1Collapsed: isMobile ? isMobileL2Open : isL1Collapsed,\n      setIsL1Collapsed,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isL1Collapsed, isMobile, isMobileL2Open],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const timeoutId of timeoutIdsRef.current) {\n        clearTimeout(timeoutId);\n      }\n      timeoutIdsRef.current = [];\n    };\n  }, []);\n\n  return (\n    <SideNavContext.Provider value={contextValue}>\n      {isMobile && onDismiss ? (\n        <>\n          {/* L1 */}\n          <Drawer isOpen={isOpen ?? false} onDismiss={onDismiss}>\n            <DrawerHeader title=\"Main Menu\" />\n            <DrawerBody>\n              <MobileL1Container\n                display=\"flex\"\n                flexDirection=\"column\"\n                justifyContent=\"space-between\"\n                className=\"mobile-l1-container\"\n                height=\"100%\"\n                {...metaAttribute({\n                  name: MetaConstants.SideNav,\n                  testID,\n                })}\n              >\n                {children}\n              </MobileL1Container>\n            </DrawerBody>\n          </Drawer>\n          {/* L2 */}\n          <Drawer isOpen={isMobileL2Open} onDismiss={() => setIsMobileL2Open(false)} isLazy={false}>\n            <DrawerHeader title={l2DrawerTitle} />\n            <DrawerBody>\n              <BaseBox ref={l2PortalContainerRef} />\n            </DrawerBody>\n          </Drawer>\n        </>\n      ) : (\n        <BaseBox\n          ref={ref as never}\n          position=\"fixed\"\n          backgroundColor=\"surface.background.gray.moderate\"\n          height=\"100%\"\n          top=\"spacing.0\"\n          left=\"spacing.0\"\n          display={{ base: 'none', m: 'flex' }}\n          flexDirection=\"column\"\n          width={{\n            base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n            xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n          }}\n          as=\"nav\"\n          {...metaAttribute({\n            name: MetaConstants.SideNav,\n            testID,\n          })}\n          {...getStyledProps(rest)}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {banner ? <BannerContainer>{banner}</BannerContainer> : null}\n          <BaseBox position=\"relative\" display=\"block\" flex=\"1\" width=\"100%\">\n            <BaseBox\n              position=\"absolute\"\n              backgroundColor=\"surface.background.gray.moderate\"\n              height=\"100%\"\n              width=\"100%\"\n              top=\"spacing.0\"\n              left=\"spacing.0\"\n              id=\"blade-sidenav-l2\"\n              borderRightWidth=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              ref={l2PortalContainerRef}\n            />\n            <StyledL1Menu\n              ref={l1ContainerRef}\n              id=\"blade-sidenav-l1\"\n              className={getL1MenuClassName({ isL1Collapsed, isL1Hovered, isTransitioning })}\n              position=\"absolute\"\n              display=\"flex\"\n              flexDirection=\"column\"\n              justifyContent=\"space-between\"\n              backgroundColor=\"surface.background.gray.moderate\"\n              height=\"100%\"\n              overflow=\"hidden\"\n              top=\"spacing.0\"\n              left=\"spacing.0\"\n              borderRightWidth=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              onTransitionEnd={(e) => {\n                // This check ensures transitioning is set to false only when its true\n                // And only the l1Container element's transitions are considered and other transitions of l1 expand or child elements are ignored\n                if (isTransitioning && l1ContainerRef.current === e.target) {\n                  setIsTransitioning(false);\n                }\n              }}\n              // Hmm you might be wondering, why is `onMouseOver` paired with `onMouseLeave`? A sane person would pair `onMouseOver` with `onMouseOut`, and `onMouseEnter` with `onMouseLeave`\n              // since they are logical equivalents of each other. So why don't we do that? Hold tight, you're in for a ride ☕️.\n              //\n              // 1. In an ideal scenario, we would put `onMouseEnter` and `onMouseLeave` here and expect things to work.\n              // 2. The L2 menu of our SideNav is React Portalled out of the L1 child\n              // 3. React considers its own children as true children for JS events and not DOM children (Checkout React Portal Caveats - https://react.dev/reference/react-dom/createPortal#caveats)\n              // 3. In the next ideal scenario, we would put `e.stopPropagation` on child component of portal like React recommends, except mouseenter, mouseleave events don't propagate at all (https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event#usage_notes)\n              // 4. So `onMouseEnter` gets triggered on L2 enter. But we don't want to open L1 menu on L2 hover\n              // 5. Thus we use `onMouseOver` for hover part and call e.stopPropagation in portal child (SideNavLevel).\n              // 6. But in case of unhover/leave, we don't want to trigger mouseOut for all child components individually. We want 1 hover out of L1 menu. Thus we use `onMouseLeave`\n              onMouseOver={() => {\n                if (mouseOverTimeoutRef.current) {\n                  clearTimeout(mouseOverTimeoutRef.current);\n                }\n                if (isL1Collapsed && isHoverAgainEnabled) {\n                  setIsL1Hovered(true);\n                }\n              }}\n              onMouseLeave={() => {\n                if (isL1Collapsed && isL1Hovered) {\n                  mouseOverTimeoutRef.current = setTimeout(() => {\n                    setIsL1Hovered(false);\n                    setIsTransitioning(true);\n                    cleanupTransition();\n                  }, L1_EXIT_HOVER_DELAY);\n                }\n              }}\n            >\n              <SkipNavLink id={SKIP_NAV_ID} _hasBackground={true} />\n              {children}\n            </StyledL1Menu>\n            <SkipNavContent id={SKIP_NAV_ID} />\n          </BaseBox>\n        </BaseBox>\n      )}\n    </SideNavContext.Provider>\n  );\n};\n\nconst SideNav = React.forwardRef(_SideNav);\n\nexport { SideNav };\n"],"names":["COLLAPSED","classes","SHOW_WHEN_COLLAPSED","HIDE_WHEN_COLLAPSED","TRANSITIONING","L1_ITEM_WRAPPER","MobileL1Container","styled","BaseBox","withConfig","displayName","componentId","_defineProperty","concat","display","StyledL1Menu","props","quick","makeMotionTime","theme","motion","duration","xmoderate","easing","l1Expand","entrance","l1Collapse","exit","width","transition","padding","makeSpace","spacing","makeSize","COLLAPSED_L1_WIDTH","getL1MenuClassName","_ref3","isL1Collapsed","isL1Hovered","isTransitioning","isMenuCollapsed","BannerContainer","borderBottom","makeBorderSize","border","thin","borderBottomStyle","borderBottomColor","colors","surface","gray","muted","borderRight","borderRightStyle","borderRightColor","maxHeight","sizeTokens","_SideNav","_ref4","ref","children","isOpen","onDismiss","banner","testID","rest","_objectWithoutProperties","_excluded","l2PortalContainerRef","React","useRef","l1ContainerRef","timeoutIdsRef","mouseOverTimeoutRef","_React$useState","useState","_React$useState2","_slicedToArray","setIsL1Collapsed","_React$useState3","_React$useState4","isMobileL2Open","setIsMobileL2Open","_React$useState5","_React$useState6","setIsL1Hovered","_React$useState7","_React$useState8","isHoverAgainEnabled","setIsHoverAgainEnabled","_React$useState9","_React$useState10","setIsTransitioning","_React$useState11","_React$useState12","l2DrawerTitle","setL2DrawerTitle","isMobile","useIsMobile","closeMobileNav","cleanupTransition","clearTransitionTimeout","setTimeout","TRANSITION_CLEANUP_DELAY","current","push","onLinkActiveChange","args","isL1ItemActive","level","isActive","isL2Trigger","title","isFirstRender","hoverAgainTimeout","HOVER_AGAIN_DELAY","contextValue","useMemo","useEffect","_iterator","_createForOfIteratorHelper","_step","s","n","done","timeoutId","value","clearTimeout","err","e","f","_jsx","SideNavContext","Provider","_jsxs","_Fragment","Drawer","DrawerHeader","DrawerBody","_objectSpread","flexDirection","justifyContent","className","height","metaAttribute","name","MetaConstants","SideNav","isLazy","position","backgroundColor","top","left","base","m","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","as","getStyledProps","makeAnalyticsAttribute","flex","id","borderRightWidth","overflow","onTransitionEnd","target","onMouseOver","onMouseLeave","L1_EXIT_HOVER_DELAY","SkipNavLink","SKIP_NAV_ID","_hasBackground","SkipNavContent","forwardRef"],"mappings":"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"}
+{"version":3,"file":"SideNav.web.js","sources":["../../../../../../src/components/SideNav/SideNav.web.tsx"],"sourcesContent":["import React from 'react';\nimport styled from 'styled-components';\nimport { SideNavContext } from './SideNavContext';\nimport type { SideNavContextType, SideNavProps } from './types';\nimport {\n  classes,\n  COLLAPSED_L1_WIDTH,\n  HOVER_AGAIN_DELAY,\n  L1_EXIT_HOVER_DELAY,\n  SKIP_NAV_ID,\n  TRANSITION_CLEANUP_DELAY,\n  SIDE_NAV_EXPANDED_L1_WIDTH_BASE,\n  SIDE_NAV_EXPANDED_L1_WIDTH_XL,\n} from './tokens';\nimport BaseBox from '~components/Box/BaseBox';\nimport { makeBorderSize, makeMotionTime, makeSize, makeSpace } from '~utils';\nimport { Drawer, DrawerBody, DrawerHeader } from '~components/Drawer';\nimport { SkipNavContent, SkipNavLink } from '~components/SkipNav/SkipNav';\nimport { useIsMobile } from '~utils/useIsMobile';\nimport { getStyledProps } from '~components/Box/styledProps';\nimport { metaAttribute, MetaConstants } from '~utils/metaAttribute';\nimport type { BladeElementRef } from '~utils/types';\nimport { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';\nimport { size as sizeTokens } from '~tokens/global';\n\nconst {\n  COLLAPSED,\n  SHOW_WHEN_COLLAPSED,\n  HIDE_WHEN_COLLAPSED,\n  TRANSITIONING,\n  L1_ITEM_WRAPPER,\n} = classes;\n\nconst MobileL1Container = styled(BaseBox)(() => {\n  return {\n    [`.${SHOW_WHEN_COLLAPSED}`]: {\n      display: 'none',\n    },\n  };\n});\n\nconst StyledL1Menu = styled(BaseBox)((props) => {\n  const quick = makeMotionTime(props.theme.motion.duration.quick);\n  const xmoderate = makeMotionTime(props.theme.motion.duration.xmoderate);\n  const easing = props.theme.motion.easing;\n\n  const l1Expand = `width ${xmoderate} ${easing.entrance}`;\n  const l1Collapse = `width ${quick} ${easing.exit}`;\n\n  return {\n    width: '100%',\n    transition: l1Expand,\n    [`& > .${L1_ITEM_WRAPPER}`]: {\n      padding: makeSpace(props.theme.spacing[3]),\n    },\n    [`.${SHOW_WHEN_COLLAPSED}`]: {\n      display: 'none',\n    },\n    [`&.${COLLAPSED}`]: {\n      width: makeSize(COLLAPSED_L1_WIDTH),\n      transition: l1Collapse,\n      [`& > .${L1_ITEM_WRAPPER}`]: {\n        padding: `${makeSpace(props.theme.spacing[3])} ${makeSpace(props.theme.spacing[3])}`,\n      },\n      [`&:not(.${TRANSITIONING}) .${HIDE_WHEN_COLLAPSED}`]: {\n        display: 'none',\n      },\n      [`&:not(.${TRANSITIONING}) .${SHOW_WHEN_COLLAPSED}`]: {\n        display: 'initial',\n      },\n    },\n  };\n});\n\nconst getL1MenuClassName = ({\n  isL1Collapsed,\n  isL1Hovered,\n  isTransitioning,\n}: {\n  isL1Collapsed: boolean;\n  isL1Hovered: boolean;\n  isTransitioning: boolean;\n}): string => {\n  const isMenuCollapsed = isL1Collapsed && !isL1Hovered;\n\n  if (isMenuCollapsed) {\n    if (isTransitioning) {\n      return `${COLLAPSED} ${TRANSITIONING}`;\n    }\n\n    return COLLAPSED;\n  }\n\n  return '';\n};\n\nconst BannerContainer = styled(BaseBox)((props) => {\n  return {\n    '&:not(:empty)': {\n      borderBottom: makeBorderSize(props.theme.border.width.thin),\n      borderBottomStyle: 'solid',\n      borderBottomColor: props.theme.colors.surface.border.gray.muted,\n      borderRight: makeBorderSize(props.theme.border.width.thin),\n      borderRightStyle: 'solid',\n      borderRightColor: props.theme.colors.surface.border.gray.muted,\n      padding: makeSpace(props.theme.spacing[3]),\n      maxHeight: makeSize(sizeTokens['100']),\n      width: '100%',\n    },\n  };\n});\n\n/**\n * ### SideNav component\n *\n * The side navigation is positioned along the left side of the screen that provides quick access to different sections or functionalities of the application.\n *\n * ---\n *\n * #### Usage\n *\n * SideNav requires handling active state with React Router, Checkout Usage with React Router v6 at - [SideNav Documentation](https://blade.razorpay.com/?path=/docs/components-sidenav--docs)\n *\n */\nconst _SideNav = (\n  { children, isOpen, onDismiss, onVisibleLevelChange, banner, testID, ...rest }: SideNavProps,\n  ref: React.Ref<BladeElementRef>,\n): React.ReactElement => {\n  const l2PortalContainerRef = React.useRef(null);\n  const l1ContainerRef = React.useRef<HTMLDivElement>(null);\n  const timeoutIdsRef = React.useRef<NodeJS.Timeout[]>([]);\n  const mouseOverTimeoutRef = React.useRef<NodeJS.Timeout>();\n  const [isL1Collapsed, setIsL1Collapsed] = React.useState(false);\n  const [isMobileL2Open, setIsMobileL2Open] = React.useState(false);\n  const [isL1Hovered, setIsL1Hovered] = React.useState(false);\n  const [isHoverAgainEnabled, setIsHoverAgainEnabled] = React.useState(true);\n  const [isTransitioning, setIsTransitioning] = React.useState(false);\n  const [l2DrawerTitle, setL2DrawerTitle] = React.useState('');\n\n  const isMobile = useIsMobile();\n\n  const closeMobileNav = (): void => {\n    if (isMobile) {\n      setIsMobileL2Open(false);\n      onDismiss?.();\n      onVisibleLevelChange?.({ visibleLevel: 0 });\n    }\n  };\n\n  const cleanupTransition = (): void => {\n    const clearTransitionTimeout = setTimeout(() => {\n      if (isTransitioning) {\n        setIsTransitioning(false);\n      }\n    }, TRANSITION_CLEANUP_DELAY);\n    timeoutIdsRef.current.push(clearTransitionTimeout);\n  };\n\n  const collapseL1 = (title: string): void => {\n    if (isMobile) {\n      setL2DrawerTitle(title);\n      setIsMobileL2Open(true);\n      onVisibleLevelChange?.({ visibleLevel: 2 });\n      return;\n    }\n\n    if (!isL1Collapsed) {\n      setIsL1Collapsed(true);\n      onVisibleLevelChange?.({ visibleLevel: 2 });\n    }\n  };\n\n  const expandL1 = (): void => {\n    if (isMobile) {\n      setIsMobileL2Open(false);\n      onVisibleLevelChange?.({ visibleLevel: 1 });\n      return;\n    }\n    // Ensures that if Normal L1 item is clicked, the L1 stays expanded\n    if (isL1Collapsed) {\n      setIsL1Collapsed(false);\n      // We want to avoid calling onVisibleLevelChange twice when L1 is hovered and then item on L1 is selected\n      if (!isL1Hovered) {\n        onVisibleLevelChange?.({ visibleLevel: 1 });\n      }\n    }\n  };\n\n  /**\n   * Handles L1 -> L2 menu changes based on active item\n   */\n  const onLinkActiveChange: SideNavContextType['onLinkActiveChange'] = (args) => {\n    const isL1ItemActive = args.level === 1 && args.isActive;\n\n    if (isL1ItemActive) {\n      if (args.isL2Trigger) {\n        // Click on L2 Trigger\n        collapseL1(args.title);\n\n        // `args.isFirstRender` checks if the item that triggered this change, triggered it during first render or during subsequent change\n        if (!args.isFirstRender) {\n          setIsTransitioning(true);\n          cleanupTransition();\n          setIsL1Hovered(false);\n          setIsHoverAgainEnabled(false);\n          // For some delay, we disable hover to expand behaviour to avoid buggy flicker when cursor is on L1 while its trying to close\n          const hoverAgainTimeout = setTimeout(() => {\n            setIsHoverAgainEnabled(true);\n          }, HOVER_AGAIN_DELAY);\n          timeoutIdsRef.current.push(hoverAgainTimeout);\n        }\n      } else {\n        // Click on normal L1 Item\n        expandL1();\n      }\n    }\n  };\n\n  const contextValue = React.useMemo(\n    () => ({\n      l2PortalContainerRef,\n      onLinkActiveChange,\n      closeMobileNav,\n      isL1Collapsed: isMobile ? isMobileL2Open : isL1Collapsed,\n      setIsL1Collapsed,\n    }),\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n    [isL1Collapsed, isMobile, isMobileL2Open, isL1Hovered],\n  );\n\n  React.useEffect(() => {\n    return () => {\n      for (const timeoutId of timeoutIdsRef.current) {\n        clearTimeout(timeoutId);\n      }\n      timeoutIdsRef.current = [];\n    };\n  }, []);\n\n  return (\n    <SideNavContext.Provider value={contextValue}>\n      {isMobile && onDismiss ? (\n        <>\n          {/* L1 */}\n          <Drawer isOpen={isOpen ?? false} onDismiss={closeMobileNav}>\n            <DrawerHeader title=\"Main Menu\" />\n            <DrawerBody>\n              <MobileL1Container\n                display=\"flex\"\n                flexDirection=\"column\"\n                justifyContent=\"space-between\"\n                className=\"mobile-l1-container\"\n                height=\"100%\"\n                {...metaAttribute({\n                  name: MetaConstants.SideNav,\n                  testID,\n                })}\n              >\n                {children}\n              </MobileL1Container>\n            </DrawerBody>\n          </Drawer>\n          {/* L2 */}\n          <Drawer isOpen={isMobileL2Open} onDismiss={() => expandL1()} isLazy={false}>\n            <DrawerHeader title={l2DrawerTitle} />\n            <DrawerBody>\n              <BaseBox ref={l2PortalContainerRef} />\n            </DrawerBody>\n          </Drawer>\n        </>\n      ) : (\n        <BaseBox\n          ref={ref as never}\n          position=\"fixed\"\n          backgroundColor=\"surface.background.gray.moderate\"\n          height=\"100%\"\n          top=\"spacing.0\"\n          left=\"spacing.0\"\n          display={{ base: 'none', m: 'flex' }}\n          flexDirection=\"column\"\n          width={{\n            base: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_BASE),\n            xl: makeSize(SIDE_NAV_EXPANDED_L1_WIDTH_XL),\n          }}\n          as=\"nav\"\n          {...metaAttribute({\n            name: MetaConstants.SideNav,\n            testID,\n          })}\n          {...getStyledProps(rest)}\n          {...makeAnalyticsAttribute(rest)}\n        >\n          {banner ? <BannerContainer>{banner}</BannerContainer> : null}\n          <BaseBox position=\"relative\" display=\"block\" flex=\"1\" width=\"100%\">\n            <BaseBox\n              position=\"absolute\"\n              backgroundColor=\"surface.background.gray.moderate\"\n              height=\"100%\"\n              width=\"100%\"\n              top=\"spacing.0\"\n              left=\"spacing.0\"\n              id=\"blade-sidenav-l2\"\n              borderRightWidth=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              ref={l2PortalContainerRef}\n            />\n            <StyledL1Menu\n              ref={l1ContainerRef}\n              id=\"blade-sidenav-l1\"\n              className={getL1MenuClassName({ isL1Collapsed, isL1Hovered, isTransitioning })}\n              position=\"absolute\"\n              display=\"flex\"\n              flexDirection=\"column\"\n              justifyContent=\"space-between\"\n              backgroundColor=\"surface.background.gray.moderate\"\n              height=\"100%\"\n              overflow=\"hidden\"\n              top=\"spacing.0\"\n              left=\"spacing.0\"\n              borderRightWidth=\"thin\"\n              borderRightColor=\"surface.border.gray.muted\"\n              onTransitionEnd={(e) => {\n                // This check ensures transitioning is set to false only when its true\n                // And only the l1Container element's transitions are considered and other transitions of l1 expand or child elements are ignored\n                if (isTransitioning && l1ContainerRef.current === e.target) {\n                  setIsTransitioning(false);\n                }\n              }}\n              // Hmm you might be wondering, why is `onMouseOver` paired with `onMouseLeave`? A sane person would pair `onMouseOver` with `onMouseOut`, and `onMouseEnter` with `onMouseLeave`\n              // since they are logical equivalents of each other. So why don't we do that? Hold tight, you're in for a ride ☕️.\n              //\n              // 1. In an ideal scenario, we would put `onMouseEnter` and `onMouseLeave` here and expect things to work.\n              // 2. The L2 menu of our SideNav is React Portalled out of the L1 child\n              // 3. React considers its own children as true children for JS events and not DOM children (Checkout React Portal Caveats - https://react.dev/reference/react-dom/createPortal#caveats)\n              // 3. In the next ideal scenario, we would put `e.stopPropagation` on child component of portal like React recommends, except mouseenter, mouseleave events don't propagate at all (https://developer.mozilla.org/en-US/docs/Web/API/Element/mouseenter_event#usage_notes)\n              // 4. So `onMouseEnter` gets triggered on L2 enter. But we don't want to open L1 menu on L2 hover\n              // 5. Thus we use `onMouseOver` for hover part and call e.stopPropagation in portal child (SideNavLevel).\n              // 6. But in case of unhover/leave, we don't want to trigger mouseOut for all child components individually. We want 1 hover out of L1 menu. Thus we use `onMouseLeave`\n              onMouseOver={() => {\n                if (mouseOverTimeoutRef.current) {\n                  clearTimeout(mouseOverTimeoutRef.current);\n                }\n                if (isL1Collapsed && isHoverAgainEnabled && !isL1Hovered) {\n                  setIsL1Hovered(true);\n                  onVisibleLevelChange?.({ visibleLevel: 1 });\n                }\n              }}\n              onMouseLeave={() => {\n                if (isL1Collapsed && isL1Hovered) {\n                  mouseOverTimeoutRef.current = setTimeout(() => {\n                    setIsL1Hovered(false);\n                    setIsTransitioning(true);\n                    cleanupTransition();\n                    onVisibleLevelChange?.({ visibleLevel: 2 });\n                  }, L1_EXIT_HOVER_DELAY);\n                }\n              }}\n            >\n              <SkipNavLink id={SKIP_NAV_ID} _hasBackground={true} />\n              {children}\n            </StyledL1Menu>\n            <SkipNavContent id={SKIP_NAV_ID} />\n          </BaseBox>\n        </BaseBox>\n      )}\n    </SideNavContext.Provider>\n  );\n};\n\nconst SideNav = React.forwardRef(_SideNav);\n\nexport { SideNav };\n"],"names":["COLLAPSED","classes","SHOW_WHEN_COLLAPSED","HIDE_WHEN_COLLAPSED","TRANSITIONING","L1_ITEM_WRAPPER","MobileL1Container","styled","BaseBox","withConfig","displayName","componentId","_defineProperty","concat","display","StyledL1Menu","props","quick","makeMotionTime","theme","motion","duration","xmoderate","easing","l1Expand","entrance","l1Collapse","exit","width","transition","padding","makeSpace","spacing","makeSize","COLLAPSED_L1_WIDTH","getL1MenuClassName","_ref3","isL1Collapsed","isL1Hovered","isTransitioning","isMenuCollapsed","BannerContainer","borderBottom","makeBorderSize","border","thin","borderBottomStyle","borderBottomColor","colors","surface","gray","muted","borderRight","borderRightStyle","borderRightColor","maxHeight","sizeTokens","_SideNav","_ref4","ref","children","isOpen","onDismiss","onVisibleLevelChange","banner","testID","rest","_objectWithoutProperties","_excluded","l2PortalContainerRef","React","useRef","l1ContainerRef","timeoutIdsRef","mouseOverTimeoutRef","_React$useState","useState","_React$useState2","_slicedToArray","setIsL1Collapsed","_React$useState3","_React$useState4","isMobileL2Open","setIsMobileL2Open","_React$useState5","_React$useState6","setIsL1Hovered","_React$useState7","_React$useState8","isHoverAgainEnabled","setIsHoverAgainEnabled","_React$useState9","_React$useState10","setIsTransitioning","_React$useState11","_React$useState12","l2DrawerTitle","setL2DrawerTitle","isMobile","useIsMobile","closeMobileNav","visibleLevel","cleanupTransition","clearTransitionTimeout","setTimeout","TRANSITION_CLEANUP_DELAY","current","push","collapseL1","title","expandL1","onLinkActiveChange","args","isL1ItemActive","level","isActive","isL2Trigger","isFirstRender","hoverAgainTimeout","HOVER_AGAIN_DELAY","contextValue","useMemo","useEffect","_iterator","_createForOfIteratorHelper","_step","s","n","done","timeoutId","value","clearTimeout","err","e","f","_jsx","SideNavContext","Provider","_jsxs","_Fragment","Drawer","DrawerHeader","DrawerBody","_objectSpread","flexDirection","justifyContent","className","height","metaAttribute","name","MetaConstants","SideNav","isLazy","position","backgroundColor","top","left","base","m","SIDE_NAV_EXPANDED_L1_WIDTH_BASE","xl","SIDE_NAV_EXPANDED_L1_WIDTH_XL","as","getStyledProps","makeAnalyticsAttribute","flex","id","borderRightWidth","overflow","onTransitionEnd","target","onMouseOver","onMouseLeave","L1_EXIT_HOVER_DELAY","SkipNavLink","SKIP_NAV_ID","_hasBackground","SkipNavContent","forwardRef"],"mappings":"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"}

package/build/lib/web/development/components/SideNav/SideNavItems/SideNavLink.web.js

@@ -19,6 +19,7 @@ import '../../../utils/getFocusRingStyles/index.js';
 import { useIsomorphicLayoutEffect } from '../../../utils/useIsomorphicLayoutEffect.js';
 import '../../../utils/logger/index.js';
 import '../../../utils/makeAnalyticsAttribute/index.js';
+import '../../Typography/index.js';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { BaseBox } from '../../Box/BaseBox/BaseBox.web.js';
 import { makeSize } from '../../../utils/makeSize/makeSize.js';
@@ -27,6 +28,7 @@ import { makeBorderSize } from '../../../utils/makeBorderSize/makeBorderSize.js'
 import { getFocusRingStyles } from '../../../utils/getFocusRingStyles/getFocusRingStyles.web.js';
 import { Box } from '../../Box/Box.js';
 import { BaseText } from '../../Typography/BaseText/BaseText.web.js';
+import { Text } from '../../Typography/Text/Text.js';
 import { makeAccessible } from '../../../utils/makeAccessible/makeAccessible.web.js';
 import ChevronUpIcon from '../../Icons/ChevronUpIcon/ChevronUpIcon.js';
 import ChevronDownIcon from '../../Icons/ChevronDownIcon/ChevronDownIcon.js';
@@ -36,7 +38,7 @@ import { CollapsibleBody } from '../../Collapsible/CollapsibleBody.js';
 import { makeAnalyticsAttribute } from '../../../utils/makeAnalyticsAttribute/makeAnalyticsAttribute.js';
 import ChevronRightIcon from '../../Icons/ChevronRightIcon/ChevronRightIcon.js';
 
-var _excluded = ["title", "href", "children", "titleSuffix", "trailing", "isActive", "icon", "tooltip", "as", "target", "onClick"];
+var _excluded = ["title", "description", "href", "children", "titleSuffix", "trailing", "isActive", "icon", "tooltip", "as", "target", "onClick"];
 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 SHOW_ON_LINK_HOVER = classes.SHOW_ON_LINK_HOVER,
@@ -63,14 +65,13 @@ var StyledNavLinkContainer = /*#__PURE__*/styled(BaseBox).withConfig({
     display: 'flex',
     flexDirection: 'row',
     alignItems: 'center',
-    justifyContent: 'space-between',
-    height: makeSize(NAV_ITEM_HEIGHT),
+    height: props.$hasDescription ? undefined : makeSize(NAV_ITEM_HEIGHT),
     width: '100%',
     textDecoration: 'none',
     overflow: 'hidden',
     flexWrap: 'nowrap',
     cursor: 'pointer',
-    padding: "".concat(makeSpace(props.theme.spacing[0]), " ").concat(makeSpace(props.theme.spacing[4])),
+    padding: "".concat(makeSpace(props.theme.spacing[props.$hasDescription ? 3 : 0]), " ").concat(makeSpace(props.theme.spacing[4])),
     margin: "".concat(makeSpace(props.theme.spacing[1]), " ").concat(makeSpace(props.theme.spacing[0])),
     color: props.theme.colors.interactive.text.gray.subtle,
     borderRadius: props.theme.border.radius.medium,
@@ -93,39 +94,64 @@ var StyledNavLinkContainer = /*#__PURE__*/styled(BaseBox).withConfig({
 var NavLinkIconTitle = function NavLinkIconTitle(_ref2) {
   var Icon = _ref2.icon,
     title = _ref2.title,
+    description = _ref2.description,
     titleSuffix = _ref2.titleSuffix,
+    isActive = _ref2.isActive,
+    trailing = _ref2.trailing,
     isL1Item = _ref2.isL1Item;
   return /*#__PURE__*/jsxs(Box, {
-    display: "flex",
-    flexDirection: "row",
-    gap: "spacing.3",
-    children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
+    width: "100%",
+    textAlign: "left",
+    children: [/*#__PURE__*/jsxs(Box, {
       display: "flex",
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      children: /*#__PURE__*/jsx(Icon, {
-        size: "medium",
-        color: "currentColor"
-      })
-    }) : null, /*#__PURE__*/jsx(BaseText, {
+      justifyContent: "space-between",
+      width: "100%",
+      children: [/*#__PURE__*/jsxs(Box, {
+        display: "flex",
+        flexDirection: "row",
+        gap: "spacing.3",
+        alignItems: "center",
+        children: [Icon ? /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          children: /*#__PURE__*/jsx(Icon, {
+            size: "medium",
+            color: "currentColor"
+          })
+        }) : null, /*#__PURE__*/jsx(BaseText, {
+          truncateAfterLines: 1,
+          color: "currentColor",
+          fontWeight: "medium",
+          fontSize: 100,
+          lineHeight: 100,
+          as: "p",
+          className: isL1Item ? HIDE_WHEN_COLLAPSED : '',
+          children: title
+        }), titleSuffix ? /*#__PURE__*/jsx(BaseBox, {
+          display: "flex",
+          alignItems: "center",
+          children: titleSuffix
+        }) : null]
+      }), /*#__PURE__*/jsx(Box, {
+        display: "flex",
+        alignItems: "center",
+        children: trailing
+      })]
+    }), !isL1Item && description ? /*#__PURE__*/jsx(Text, {
+      size: "small",
+      marginLeft: "spacing.7",
+      textAlign: "left",
+      weight: "medium",
+      color: isActive ? 'interactive.text.primary.muted' : 'interactive.text.gray.muted',
       truncateAfterLines: 1,
-      color: "currentColor",
-      fontWeight: "medium",
-      fontSize: 100,
-      lineHeight: 100,
-      as: "p",
-      className: isL1Item ? HIDE_WHEN_COLLAPSED : '',
-      children: title
-    }), titleSuffix ? /*#__PURE__*/jsx(BaseBox, {
-      display: "flex",
-      alignItems: "center",
-      children: titleSuffix
+      children: description
     }) : null]
   });
 };
 var L3Trigger = function L3Trigger(_ref3) {
   var title = _ref3.title,
+    description = _ref3.description,
     icon = _ref3.icon,
     as = _ref3.as,
     href = _ref3.href,
@@ -148,7 +174,8 @@ var L3Trigger = function L3Trigger(_ref3) {
   return /*#__PURE__*/jsx(TooltipifyNavItem, {
     tooltip: tooltip,
     children: /*#__PURE__*/jsx(StyledNavLinkContainer, {
-      children: /*#__PURE__*/jsxs(BaseBox, _objectSpread(_objectSpread({
+      $hasDescription: Boolean(description),
+      children: /*#__PURE__*/jsx(BaseBox, _objectSpread(_objectSpread({
         className: STYLED_NAV_LINK,
         as: href ? as : 'button',
         to: href,
@@ -160,16 +187,14 @@ var L3Trigger = function L3Trigger(_ref3) {
         expanded: isExpanded,
         controls: collapsibleBodyId
       })), {}, {
-        children: [/*#__PURE__*/jsx(NavLinkIconTitle, {
+        children: /*#__PURE__*/jsx(NavLinkIconTitle, {
           title: title,
+          description: description,
           icon: icon,
           isL1Item: false,
-          titleSuffix: titleSuffix
-        }), /*#__PURE__*/jsx(BaseBox, {
-          display: "flex",
-          alignItems: "center",
-          children: isExpanded ? /*#__PURE__*/jsx(ChevronUpIcon, _objectSpread({}, iconProps)) : /*#__PURE__*/jsx(ChevronDownIcon, _objectSpread({}, iconProps))
-        })]
+          titleSuffix: titleSuffix,
+          trailing: isExpanded ? /*#__PURE__*/jsx(ChevronUpIcon, _objectSpread({}, iconProps)) : /*#__PURE__*/jsx(ChevronDownIcon, _objectSpread({}, iconProps))
+        })
       }))
     })
   });
@@ -202,6 +227,7 @@ var CurvedVerticalLine = /*#__PURE__*/styled(BaseBox).withConfig({
 });
 var SideNavLink = function SideNavLink(_ref4) {
   var title = _ref4.title,
+    description = _ref4.description,
     href = _ref4.href,
     children = _ref4.children,
     titleSuffix = _ref4.titleSuffix,
@@ -232,6 +258,12 @@ var SideNavLink = function SideNavLink(_ref4) {
         moduleName: 'SideNavLink'
       });
     }
+    if (currentLevel === 1 && Boolean(description)) {
+      throwBladeError({
+        message: 'Description is not supported for L1 items',
+        moduleName: 'SideNavLink'
+      });
+    }
   }
   var isFirstRender = useFirstRender();
   var _useFloating = useFloating({
@@ -260,6 +292,7 @@ var SideNavLink = function SideNavLink(_ref4) {
       _shouldApplyWidthRestrictions: false,
       children: [/*#__PURE__*/jsx(L3Trigger, {
         title: title,
+        description: description,
         icon: icon,
         as: as,
         href: href,
@@ -275,6 +308,7 @@ var SideNavLink = function SideNavLink(_ref4) {
       })]
     }) : /*#__PURE__*/jsxs(Fragment, {
       children: [/*#__PURE__*/jsxs(StyledNavLinkContainer, {
+        $hasDescription: currentLevel !== 1 && Boolean(description),
         position: "relative",
         children: [/*#__PURE__*/jsx(TooltipifyNavItem, {
           tooltip: tooltip,
@@ -318,6 +352,8 @@ var SideNavLink = function SideNavLink(_ref4) {
             children: [/*#__PURE__*/jsx(NavLinkIconTitle, {
               icon: icon,
               title: title,
+              description: description,
+              isActive: isActive,
               isL1Item: currentLevel === 1,
               titleSuffix: titleSuffix
             }), isL2Trigger ? /*#__PURE__*/jsx(BaseBox, {