@yamada-ui/react/dist/cjs/components/breadcrumb/use-breadcrumb.cjs.map

React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion

{"version":3,"file":"use-breadcrumb.cjs","names":["useValidChildren","useI18n","items","rest","length","getRootProps: PropGetter<\"nav\">","getListProps: PropGetter<\"ol\">","getLinkProps: PropGetter<\"a\", { currentPage?: boolean }>"],"sources":["../../../../src/components/breadcrumb/use-breadcrumb.tsx"],"sourcesContent":["\"use client\"\n\nimport type { ReactElement, ReactNode } from \"react\"\nimport type { HTMLProps, PropGetter } from \"../../core\"\nimport type { ReactNodeOrFunction } from \"../../utils\"\nimport { cloneElement, useCallback, useMemo } from \"react\"\nimport { useI18n } from \"../../providers/i18n-provider\"\nimport { runIfFn, useValidChildren } from \"../../utils\"\n\nexport interface BreadcrumbItem extends HTMLProps<\"a\"> {\n  currentPage?: boolean\n  label?: ReactNode\n}\n\nexport interface UseBreadcrumbProps extends HTMLProps<\"nav\"> {\n  /**\n   * The icon to be used in the ellipsis.\n   */\n  ellipsis?: ReactNodeOrFunction<{ items: BreadcrumbItem[] }>\n  /**\n   * Number of elements visible on the end(right) edges.\n   *\n   * @default 0\n   */\n  endBoundaries?: number\n  /**\n   * If provided, generate breadcrumb items based on items.\n   */\n  items?: BreadcrumbItem[]\n  /**\n   * The component to be used for the link.\n   */\n  link?: ReactElement<any>\n  /**\n   * Number of elements visible on the start(left) edges.\n   *\n   * @default 0\n   */\n  startBoundaries?: number\n}\n\nexport const useBreadcrumb = ({\n  children,\n  ellipsis,\n  endBoundaries = 0,\n  items = [],\n  link,\n  startBoundaries = 0,\n  ...rest\n}: UseBreadcrumbProps = {}) => {\n  const validChildren = useValidChildren(children)\n  const length = validChildren.length || items.length\n  const { t } = useI18n(\"breadcrumb\")\n\n  const hasBoundaries =\n    startBoundaries + endBoundaries > 0 &&\n    length > startBoundaries + endBoundaries\n\n  const renderLink = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!link) return []\n\n      return items.map(({ label, ...rest }) =>\n        cloneElement<any>(link, { ...link.props, children: label, ...rest }),\n      )\n    },\n    [link],\n  )\n\n  const renderEllipsis = useCallback(\n    (items: BreadcrumbItem[]) => {\n      if (!ellipsis) return null\n\n      return runIfFn(ellipsis, { items })\n    },\n    [ellipsis],\n  )\n\n  const splitItems = useCallback(\n    (items: BreadcrumbItem[]) => {\n      const length = items.length\n      const firstItems = items.slice(0, startBoundaries)\n      const ellipsisItems = items.slice(startBoundaries, length - endBoundaries)\n      const lastItems = items.slice(length - endBoundaries)\n\n      return [firstItems, ellipsisItems, lastItems] as const\n    },\n    [startBoundaries, endBoundaries],\n  )\n\n  const cloneChildren = useMemo(() => {\n    const hasChildren = !!validChildren.length\n\n    if (hasChildren) {\n      return validChildren\n    } else if (hasBoundaries) {\n      const [firstItems, ellipsisItems, lastItems] = splitItems(items)\n\n      return [\n        ...renderLink(firstItems),\n        renderEllipsis(ellipsisItems),\n        ...renderLink(lastItems),\n      ]\n    } else {\n      return renderLink(items)\n    }\n  }, [\n    validChildren,\n    items,\n    hasBoundaries,\n    renderEllipsis,\n    renderLink,\n    splitItems,\n  ])\n\n  const getRootProps: PropGetter<\"nav\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Breadcrumb\"),\n      ...rest,\n      ...props,\n    }),\n    [rest, t],\n  )\n\n  const getListProps: PropGetter<\"ol\"> = useCallback(\n    (props) => ({ ...props }),\n    [],\n  )\n\n  const getLinkProps: PropGetter<\"a\", { currentPage?: boolean }> = useCallback(\n    ({ href, currentPage, ...props } = {}) => ({\n      href: !currentPage ? href : undefined,\n      \"aria-current\": currentPage ? \"page\" : undefined,\n      ...props,\n    }),\n    [],\n  )\n\n  const getEllipsisProps: PropGetter<\"svg\"> = useCallback(\n    (props) => ({\n      \"aria-label\": t(\"Ellipsis\"),\n      role: \"presentation\",\n      ...props,\n    }),\n    [t],\n  )\n\n  return {\n    children: cloneChildren,\n    getEllipsisProps,\n    getLinkProps,\n    getListProps,\n    getRootProps,\n  }\n}\n\nexport type UseBreadcrumbReturn = ReturnType<typeof useBreadcrumb>\n"],"mappings":";;;;;;;;;;;AAyCA,MAAa,iBAAiB,EAC5B,UACA,UACA,gBAAgB,GAChB,QAAQ,EAAE,EACV,MACA,kBAAkB,EAClB,GAAG,SACmB,EAAE,KAAK;CAC7B,MAAM,gBAAgBA,kCAAiB,SAAS;CAChD,MAAM,SAAS,cAAc,UAAU,MAAM;CAC7C,MAAM,EAAE,MAAMC,8BAAQ,aAAa;CAEnC,MAAM,gBACJ,kBAAkB,gBAAgB,KAClC,SAAS,kBAAkB;CAE7B,MAAM,qCACH,YAA4B;AAC3B,MAAI,CAAC,KAAM,QAAO,EAAE;AAEpB,SAAOC,QAAM,KAAK,EAAE,MAAO,GAAGC,qCACV,MAAM;GAAE,GAAG,KAAK;GAAO,UAAU;GAAO,GAAGA;GAAM,CAAC,CACrE;IAEH,CAAC,KAAK,CACP;CAED,MAAM,yCACH,YAA4B;AAC3B,MAAI,CAAC,SAAU,QAAO;AAEtB,wDAAe,UAAU,EAAE,gBAAO,CAAC;IAErC,CAAC,SAAS,CACX;CAED,MAAM,qCACH,YAA4B;EAC3B,MAAMC,WAASF,QAAM;AAKrB,SAAO;GAJYA,QAAM,MAAM,GAAG,gBAAgB;GAC5BA,QAAM,MAAM,iBAAiBE,WAAS,cAAc;GACxDF,QAAM,MAAME,WAAS,cAAc;GAER;IAE/C,CAAC,iBAAiB,cAAc,CACjC;CAED,MAAM,yCAA8B;AAGlC,MAFoB,CAAC,CAAC,cAAc,OAGlC,QAAO;WACE,eAAe;GACxB,MAAM,CAAC,YAAY,eAAe,aAAa,WAAW,MAAM;AAEhE,UAAO;IACL,GAAG,WAAW,WAAW;IACzB,eAAe,cAAc;IAC7B,GAAG,WAAW,UAAU;IACzB;QAED,QAAO,WAAW,MAAM;IAEzB;EACD;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;CAEF,MAAMC,uCACH,WAAW;EACV,cAAc,EAAE,aAAa;EAC7B,GAAG;EACH,GAAG;EACJ,GACD,CAAC,MAAM,EAAE,CACV;CAED,MAAMC,uCACH,WAAW,EAAE,GAAG,OAAO,GACxB,EAAE,CACH;CAED,MAAMC,uCACH,EAAE,MAAM,YAAa,GAAG,UAAU,EAAE,MAAM;EACzC,MAAM,CAAC,cAAc,OAAO;EAC5B,gBAAgB,cAAc,SAAS;EACvC,GAAG;EACJ,GACD,EAAE,CACH;AAWD,QAAO;EACL,UAAU;EACV,0CAVC,WAAW;GACV,cAAc,EAAE,WAAW;GAC3B,MAAM;GACN,GAAG;GACJ,GACD,CAAC,EAAE,CACJ;EAKC;EACA;EACA;EACD"}