@mantine/core
Version:
React components library focused on usability, accessibility and developer experience
1 lines • 4.25 kB
Source Map (JSON)
{"version":3,"file":"Breadcrumbs.cjs","names":["createVarsResolver","getSpacing","factory","useProps","useStyles","Children","isElement","Box","classes"],"sources":["../../../src/components/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import { Children, cloneElement } from 'react';\nimport {\n Box,\n BoxProps,\n createVarsResolver,\n ElementProps,\n factory,\n Factory,\n getSpacing,\n isElement,\n MantineSpacing,\n StylesApiProps,\n useProps,\n useStyles,\n} from '../../core';\nimport classes from './Breadcrumbs.module.css';\n\nexport type BreadcrumbsStylesNames = 'root' | 'separator' | 'breadcrumb';\nexport type BreadcrumbsCssVariables = {\n root: '--bc-separator-margin';\n};\n\nexport interface BreadcrumbsProps\n extends BoxProps, StylesApiProps<BreadcrumbsFactory>, ElementProps<'div'> {\n /** Separator between children @default '/' */\n separator?: React.ReactNode;\n\n /** Controls spacing between separator and breadcrumb @default 'xs' */\n separatorMargin?: MantineSpacing;\n\n /** React nodes that should be separated with `separator` */\n children: React.ReactNode;\n}\n\nexport type BreadcrumbsFactory = Factory<{\n props: BreadcrumbsProps;\n ref: HTMLDivElement;\n stylesNames: BreadcrumbsStylesNames;\n vars: BreadcrumbsCssVariables;\n}>;\n\nconst defaultProps = {\n separator: '/',\n} satisfies Partial<BreadcrumbsProps>;\n\nconst varsResolver = createVarsResolver<BreadcrumbsFactory>((_, { separatorMargin }) => ({\n root: {\n '--bc-separator-margin': getSpacing(separatorMargin),\n },\n}));\n\nexport const Breadcrumbs = factory<BreadcrumbsFactory>((_props) => {\n const props = useProps('Breadcrumbs', defaultProps, _props);\n const {\n classNames,\n className,\n style,\n styles,\n unstyled,\n vars,\n children,\n separator,\n separatorMargin,\n attributes,\n ...others\n } = props;\n\n const getStyles = useStyles<BreadcrumbsFactory>({\n name: 'Breadcrumbs',\n classes,\n props,\n className,\n style,\n classNames,\n styles,\n unstyled,\n attributes,\n vars,\n varsResolver,\n });\n\n const items = Children.toArray(children).reduce<React.ReactNode[]>((acc, child, index, array) => {\n const item = isElement(child) ? (\n cloneElement(child, {\n ...getStyles('breadcrumb', { className: (child.props as any)?.className }),\n key: index,\n })\n ) : (\n <div {...getStyles('breadcrumb')} key={index}>\n {child}\n </div>\n );\n\n acc.push(item);\n\n if (index !== array.length - 1) {\n acc.push(\n <Box {...getStyles('separator')} key={`separator-${index}`}>\n {separator}\n </Box>\n );\n }\n\n return acc;\n }, []);\n\n return (\n <Box {...getStyles('root')} {...others}>\n {items}\n </Box>\n );\n});\n\nBreadcrumbs.classes = classes;\nBreadcrumbs.varsResolver = varsResolver;\nBreadcrumbs.displayName = '@mantine/core/Breadcrumbs';\n\nexport namespace Breadcrumbs {\n export type Props = BreadcrumbsProps;\n export type StylesNames = BreadcrumbsStylesNames;\n export type CssVariables = BreadcrumbsCssVariables;\n export type Factory = BreadcrumbsFactory;\n}\n"],"mappings":";;;;;;;;;;;;;AAyCA,MAAM,eAAe,EACnB,WAAW,IACb;AAEA,MAAM,eAAeA,6BAAAA,oBAAwC,GAAG,EAAE,uBAAuB,EACvF,MAAM,EACJ,yBAAyBC,iBAAAA,WAAW,eAAe,EACrD,EACF,EAAE;AAEF,MAAa,cAAcC,gBAAAA,SAA6B,WAAW;CACjE,MAAM,QAAQC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAC1D,MAAM,EACJ,YACA,WACA,OACA,QACA,UACA,MACA,UACA,WACA,iBACA,YACA,GAAG,WACD;CAEJ,MAAM,YAAYC,mBAAAA,UAA8B;EAC9C,MAAM;EACN,SAAA,2BAAA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;CACF,CAAC;CAED,MAAM,QAAQC,MAAAA,SAAS,QAAQ,QAAQ,EAAE,QAA2B,KAAK,OAAO,OAAO,UAAU;EAC/F,MAAM,OAAOC,mBAAAA,UAAU,KAAK,KAAA,GAAA,MAAA,cACb,OAAO;GAClB,GAAG,UAAU,cAAc,EAAE,WAAY,MAAM,OAAe,UAAU,CAAC;GACzE,KAAK;EACP,CAAC,IAED,iBAAA,GAAA,MAAA,eAAC,OAAD;GAAK,GAAI,UAAU,YAAY;GAAG,KAAK;EAElC,GADF,KACE;EAGP,IAAI,KAAK,IAAI;EAEb,IAAI,UAAU,MAAM,SAAS,GAC3B,IAAI,KACF,iBAAA,GAAA,MAAA,eAACC,YAAAA,KAAD;GAAK,GAAI,UAAU,WAAW;GAAG,KAAK,aAAa;EAE9C,GADF,SACE,CACP;EAGF,OAAO;CACT,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACA,YAAAA,KAAD;EAAK,GAAI,UAAU,MAAM;EAAG,GAAI;YAC7B;CACE,CAAA;AAET,CAAC;AAED,YAAY,UAAUC,2BAAAA;AACtB,YAAY,eAAe;AAC3B,YAAY,cAAc"}