@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
1 lines • 6.29 kB
Source Map (JSON)
{"version":3,"file":"breadcrumb.cjs","names":["createSlotComponent","breadcrumbStyle","useBreadcrumb","styled","Fragment","ChevronRightIcon","EllipsisIcon"],"sources":["../../../../src/components/breadcrumb/breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement } from \"react\"\nimport type { HTMLStyledProps, PropGetter, ThemeProps } from \"../../core\"\nimport type { BreadcrumbStyle } from \"./breadcrumb.style\"\nimport type { UseBreadcrumbProps } from \"./use-breadcrumb\"\nimport { Fragment, useMemo } from \"react\"\nimport { createSlotComponent, styled } from \"../../core\"\nimport { ChevronRightIcon, EllipsisIcon } from \"../icon\"\nimport { breadcrumbStyle } from \"./breadcrumb.style\"\nimport { useBreadcrumb } from \"./use-breadcrumb\"\n\ninterface ComponentContext {\n getEllipsisProps: PropGetter<\"svg\">\n getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>\n}\n\nexport interface BreadcrumbRootProps\n extends HTMLStyledProps<\"nav\">,\n ThemeProps<BreadcrumbStyle>,\n Omit<UseBreadcrumbProps, \"endBoundaries\" | \"startBoundaries\"> {\n /**\n * Number of elements visible on the end(right) edges.\n *\n * @default 0\n */\n endBoundaries?: number\n /**\n * The visual separator between each breadcrumb item.\n *\n * @default '/'\n */\n separator?: ReactElement | string\n /**\n * Number of elements visible on the start(left) edges.\n *\n * @default 0\n */\n startBoundaries?: number\n /**\n * Props for item element.\n */\n itemProps?: BreadcrumbItemProps\n /**\n * Props for ol element.\n */\n listProps?: HTMLStyledProps<\"ol\">\n /**\n * Props for separator element.\n */\n separatorProps?: BreadcrumbSeparatorProps\n}\n\nconst {\n ComponentContext,\n PropsContext: BreadcrumbPropsContext,\n useComponentContext,\n usePropsContext: useBreadcrumbPropsContext,\n withContext,\n withProvider,\n} = createSlotComponent<BreadcrumbRootProps, BreadcrumbStyle, ComponentContext>(\n \"breadcrumb\",\n breadcrumbStyle,\n)\n\nexport { BreadcrumbPropsContext, useBreadcrumbPropsContext }\n\n/**\n * `Breadcrumb` is a component that helps users understand the hierarchy of a website.\n *\n * @see https://yamada-ui.com/docs/components/breadcrumb\n */\nexport const BreadcrumbRoot = withProvider<\"nav\", BreadcrumbRootProps>(\n ({\n endBoundaries,\n gap,\n separator,\n startBoundaries,\n itemProps,\n listProps,\n separatorProps,\n ...rest\n }) => {\n const {\n children,\n getEllipsisProps,\n getLinkProps,\n getListProps,\n getRootProps,\n } = useBreadcrumb({\n ellipsis: <BreadcrumbEllipsis />,\n endBoundaries,\n link: <BreadcrumbLink />,\n startBoundaries,\n ...rest,\n })\n\n const context = useMemo(\n () => ({ getEllipsisProps, getLinkProps }),\n [getEllipsisProps, getLinkProps],\n )\n\n return (\n <ComponentContext value={context}>\n <styled.nav {...getRootProps()}>\n <BreadcrumbList {...getListProps({ gap, ...listProps })}>\n {children.map((child, index) => {\n const last = index === children.length - 1\n\n return (\n <Fragment key={index}>\n <BreadcrumbItem {...itemProps}>{child}</BreadcrumbItem>\n\n {!last ? (\n <BreadcrumbSeparator {...separatorProps}>\n {separator}\n </BreadcrumbSeparator>\n ) : null}\n </Fragment>\n )\n })}\n </BreadcrumbList>\n </styled.nav>\n </ComponentContext>\n )\n },\n \"root\",\n)()\n\ninterface BreadcrumbListProps extends HTMLStyledProps<\"ol\"> {}\n\nconst BreadcrumbList = withContext<\"ol\", BreadcrumbListProps>(\"ol\", \"list\")()\n\ninterface BreadcrumbItemProps extends HTMLStyledProps<\"li\"> {}\n\nconst BreadcrumbItem = withContext<\"li\", BreadcrumbItemProps>(\"li\", \"item\")()\n\ninterface BreadcrumbSeparatorProps extends HTMLStyledProps<\"li\"> {}\n\nconst BreadcrumbSeparator = withContext<\"li\", BreadcrumbSeparatorProps>(\n BreadcrumbItem,\n \"separator\",\n)(({ children, ...rest }) => ({\n children: children ?? <ChevronRightIcon />,\n ...rest,\n}))\n\nexport interface BreadcrumbLinkProps extends HTMLStyledProps<\"a\"> {\n /**\n * If `true`, change to span element.\n *\n * @default false\n */\n currentPage?: boolean\n}\n\nexport const BreadcrumbLink = withContext<\"a\", BreadcrumbLinkProps>(\n \"a\",\n \"link\",\n)(undefined, ({ currentPage, ...rest }) => {\n const { getLinkProps } = useComponentContext()\n\n return {\n as: !currentPage ? \"a\" : \"span\",\n ...getLinkProps({ currentPage, ...rest }),\n }\n})\n\nexport interface BreadcrumbEllipsisProps extends HTMLStyledProps<\"svg\"> {}\n\nexport const BreadcrumbEllipsis = withContext<\"svg\", BreadcrumbEllipsisProps>(\n EllipsisIcon,\n \"ellipsis\",\n)(undefined, (props) => {\n const { getEllipsisProps } = useComponentContext()\n\n return { ...getEllipsisProps(props) }\n})\n"],"mappings":";;;;;;;;;;;;;;;;AAqDA,MAAM,EACJ,kBACA,cAAc,wBACd,qBACA,iBAAiB,2BACjB,aACA,iBACEA,6CACF,cACAC,yCACD;;;;;;AASD,MAAa,iBAAiB,cAC3B,EACC,eACA,KACA,WACA,iBACA,WACA,WACA,eACA,GAAG,WACC;CACJ,MAAM,EACJ,UACA,kBACA,cACA,cACA,iBACEC,qCAAc;EAChB,UAAU,2CAAC,uBAAqB;EAChC;EACA,MAAM,2CAAC,mBAAiB;EACxB;EACA,GAAG;EACJ,CAAC;AAOF,QACE,2CAAC;EAAiB,iCALX;GAAE;GAAkB;GAAc,GACzC,CAAC,kBAAkB,aAAa,CACjC;YAIG,2CAACC,uBAAO;GAAI,GAAI,cAAc;aAC5B,2CAAC;IAAe,GAAI,aAAa;KAAE;KAAK,GAAG;KAAW,CAAC;cACpD,SAAS,KAAK,OAAO,UAAU;KAC9B,MAAM,OAAO,UAAU,SAAS,SAAS;AAEzC,YACE,4CAACC,6BACC,2CAAC;MAAe,GAAI;gBAAY;OAAuB,EAEtD,CAAC,OACA,2CAAC;MAAoB,GAAI;gBACtB;OACmB,GACpB,SAPS,MAQJ;MAEb;KACa;IACN;GACI;GAGvB,OACD,EAAE;AAIH,MAAM,iBAAiB,YAAuC,MAAM,OAAO,EAAE;AAI7E,MAAM,iBAAiB,YAAuC,MAAM,OAAO,EAAE;AAI7E,MAAM,sBAAsB,YAC1B,gBACA,YACD,EAAE,EAAE,SAAU,GAAG,YAAY;CAC5B,UAAU,YAAY,2CAACC,gDAAmB;CAC1C,GAAG;CACJ,EAAE;AAWH,MAAa,iBAAiB,YAC5B,KACA,OACD,CAAC,SAAY,EAAE,YAAa,GAAG,WAAW;CACzC,MAAM,EAAE,iBAAiB,qBAAqB;AAE9C,QAAO;EACL,IAAI,CAAC,cAAc,MAAM;EACzB,GAAG,aAAa;GAAE;GAAa,GAAG;GAAM,CAAC;EAC1C;EACD;AAIF,MAAa,qBAAqB,YAChCC,oCACA,WACD,CAAC,SAAY,UAAU;CACtB,MAAM,EAAE,qBAAqB,qBAAqB;AAElD,QAAO,EAAE,GAAG,iBAAiB,MAAM,EAAE;EACrC"}