koval-ui/dist/src/lib/Breadcrumbs/Breadcrumbs.cjs.map

React components collection with minimalistic design. Supports theming, layout, and input validation.

{"version":3,"file":"Breadcrumbs.cjs","sources":["../../../../src/lib/Breadcrumbs/Breadcrumbs.tsx"],"sourcesContent":["import type {FC, HTMLAttributes, ReactNode, JSX} from 'react';\nimport {forwardRef} from 'react';\nimport classNames from 'classnames';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\n\nimport classes from './Breadcrumbs.module.css';\n\ntype Item = {\n    name: string;\n    url: string;\n    icon?: FC<HTMLAttributes<HTMLOrSVGElement> & unknown>;\n};\n\ntype LinkProps = {\n    href: string;\n    title?: string;\n    className?: string;\n    children?: ReactNode;\n};\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        children?: ReactNode;\n        /** Provide a list of items to render inside breadcrumbs */\n        items: Item[];\n        /** Enable to show ellipsis (...) after the first breadcrumb item */\n        showEllipsis?: boolean;\n        /**\n         * Provide a link component to render as a breadcrumb. Can be used with Next.js\n         * @example\n         * import Link from 'next/link'\n         * <Breadcrumbs linkComponent={Link} />\n         */\n        linkComponent?: FC<LinkProps & unknown>;\n    };\n\nconst conditionallyAddEllipsis = (items: JSX.Element[], showEllipsis: boolean) => {\n    if (showEllipsis) {\n        const [first, ...rest] = items;\n        return [\n            first,\n            <div className={classes.ellipsis} key=\"ellypsis\">\n                &hellip;\n            </div>,\n            ...rest,\n        ];\n    } else {\n        return items;\n    }\n};\n\nconst Link: FC<LinkProps> = ({href, children, className, title}) => {\n    return (\n        <a href={href} className={className} title={title}>\n            {children}\n        </a>\n    );\n};\n\nexport const Breadcrumbs = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            className,\n            items,\n            showEllipsis = false,\n            linkComponent: LinkComponent = Link,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const children = items.map(({name, url, icon: Icon}) => {\n            return (\n                <LinkComponent key={name} title={name} className={classes.crumb} href={url}>\n                    {Icon && <Icon className={classes.icon} />}\n                    <span className={classes.text}>{name}</span>\n                </LinkComponent>\n            );\n        });\n        return (\n            <div {...nativeProps} className={classNames(classes.breadcrumbs, className)} ref={ref}>\n                {conditionallyAddEllipsis(children, showEllipsis)}\n            </div>\n        );\n    }\n);\n\nBreadcrumbs.displayName = 'Breadcrumbs';\n"],"names":["conditionallyAddEllipsis","items","showEllipsis","first","rest","classes","Link","href","children","className","title","jsx","Breadcrumbs","forwardRef","LinkComponent","nativeProps","ref","name","url","Icon","jsxs","classNames"],"mappings":"uNAqCMA,EAA2B,CAACC,EAAsBC,IAA0B,CAC9E,GAAIA,EAAc,CACd,KAAM,CAACC,EAAO,GAAGC,CAAI,EAAIH,EAClB,MAAA,CACHE,QACC,MAAI,CAAA,UAAWE,EAAAA,QAAQ,SAAyB,cAAX,UAEtC,EACA,GAAGD,CACP,CAAA,KAEO,QAAAH,CAEf,EAEMK,EAAsB,CAAC,CAAC,KAAAC,EAAM,SAAAC,EAAU,UAAAC,EAAW,MAAAC,KAEhDC,EAAAA,IAAA,IAAA,CAAE,KAAAJ,EAAY,UAAAE,EAAsB,MAAAC,EAChC,SAAAF,EACL,EAIKI,EAAcC,EAAA,WACvB,CACI,CACI,UAAAJ,EACA,MAAAR,EACA,aAAAC,EAAe,GACf,cAAeY,EAAgBR,EAC/B,GAAGS,GAEPC,IACC,CACK,MAAAR,EAAWP,EAAM,IAAI,CAAC,CAAC,KAAAgB,EAAM,IAAAC,EAAK,KAAMC,KAEtCC,OAACN,GAAyB,MAAOG,EAAM,UAAWZ,EAAAA,QAAQ,MAAO,KAAMa,EAClE,SAAA,CAAAC,GAASR,EAAA,IAAAQ,EAAA,CAAK,UAAWd,EAAAA,QAAQ,KAAM,EACvCM,EAAA,IAAA,OAAA,CAAK,UAAWN,EAAA,QAAQ,KAAO,SAAKY,CAAA,CAAA,CAAA,CAAA,EAFrBA,CAGpB,CAEP,EACD,OACKN,EAAAA,IAAA,MAAA,CAAK,GAAGI,EAAa,UAAWM,EAAWhB,EAAA,QAAQ,YAAaI,CAAS,EAAG,IAAAO,EACxE,SAAyBhB,EAAAQ,EAAUN,CAAY,EACpD,CAAA,CAGZ,EAEAU,EAAY,YAAc"}