@umodeapporg/ui 0.6.2 → 0.7.0

package/dist/components/Navigation/PageTitle.d.ts

@@ -1,5 +1,12 @@
 import { ReactNode } from 'react';
 import { SymbolCodepoints } from '../UI/MaterialSymbol';
+export interface IPageTitleImage {
+    src: string;
+    /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */
+    alt: string;
+    /** Escape hatch for the shape, e.g. `rounded-full` for an avatar. */
+    className?: string;
+}
 interface IPageTitleProps {
     title?: string;
     /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */
@@ -20,6 +27,12 @@ interface IPageTitleProps {
     /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */
     titleIcon?: SymbolCodepoints;
     titleIconClassName?: string;
+    /**
+     * An image in the icon chip's place, at the same size and radius (e.g. the product cover on a
+     * datasheet header). A src that fails to load falls back to the icon instead of leaving a broken
+     * image in the header.
+     */
+    titleImage?: IPageTitleImage;
     /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */
     autoIcon?: boolean;
     /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */

package/dist/components/Navigation/PageTitle.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
 import ControlledButton from "../Form/ControlledButton.js";
@@ -25,6 +25,7 @@ const PageTitle = ({
   autoBreadcrumb = true,
   titleIcon,
   titleIconClassName,
+  titleImage,
   autoIcon = true,
   compact = false,
   capitalizeTitle = true,
@@ -49,9 +50,9 @@ const PageTitle = ({
   };
   const { resolveTrail } = usePageTitleNavigation();
   const menuTrail = useMemo(() => {
-    const needsTrail = autoBreadcrumb && !breadcrumb && !canFloat || autoIcon && !titleIcon;
+    const needsTrail = autoBreadcrumb && !breadcrumb && !canFloat || autoIcon && !titleIcon && !titleImage;
     return needsTrail ? resolveTrail(location.pathname) : [];
-  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, location.pathname, resolveTrail]);
+  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, titleImage, location.pathname, resolveTrail]);
   const resolvedBreadcrumb = breadcrumb ?? (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? /* @__PURE__ */ jsx(
     ControlledBreadcrumb,
     {
@@ -64,6 +65,8 @@ const PageTitle = ({
     }
   ) : void 0);
   const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : void 0);
+  const [failedTitleImageSrc, setFailedTitleImageSrc] = useState(null);
+  const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -98,7 +101,19 @@ const PageTitle = ({
                     children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "arrow_back", size: compact ? 18 : 20 })
                   }
                 ) }),
-                resolvedTitleIcon && /* @__PURE__ */ jsx(
+                rendersTitleImage && titleImage ? /* @__PURE__ */ jsx(
+                  "img",
+                  {
+                    src: titleImage.src,
+                    alt: titleImage.alt,
+                    onError: () => setFailedTitleImageSrc(titleImage.src),
+                    className: classNames(
+                      "shrink-0 border border-border object-cover",
+                      compact ? "size-8 rounded-lg" : "size-10 rounded-xl",
+                      titleImage.className
+                    )
+                  }
+                ) : resolvedTitleIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
                     className: classNames(

package/dist/components/Navigation/PageTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTitle.js","sources":["../../../src/components/Navigation/PageTitle.tsx"],"sourcesContent":["import { ReactNode, useMemo } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport ControlledBreadcrumb from './ControlledBreadcrumb';\nimport { usePageTitleNavigation } from './PageTitleNavigationContext';\nimport { useUiNavigation } from './UiNavigationContext';\n\ninterface IPageTitleProps {\n  title?: string;\n  /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */\n  titleContent?: ReactNode;\n  /** Rótulo pequeno em caixa alta acima do título (ex.: \"FICHA TÉCNICA\"). */\n  eyebrow?: string;\n  /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */\n  subtitleSlot?: ReactNode;\n  slot?: ReactNode;\n  /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */\n  titleSlot?: ReactNode;\n  /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */\n  leadingSlot?: ReactNode;\n  /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */\n  breadcrumb?: ReactNode;\n  /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */\n  autoBreadcrumb?: boolean;\n  /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */\n  titleIcon?: SymbolCodepoints;\n  titleIconClassName?: string;\n  /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */\n  autoIcon?: boolean;\n  /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */\n  compact?: boolean;\n  /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */\n  capitalizeTitle?: boolean;\n  /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */\n  showDivider?: boolean;\n  canBack?: boolean;\n  canBackTo?: string;\n  canFloat?: boolean;\n  headline?: string;\n  className?: string;\n  titleClassName?: string;\n  onBackClick?: () => void;\n  disableBack?: boolean;\n}\n\nconst PageTitle: React.FC<IPageTitleProps> = ({\n  canBack = false,\n  canFloat = false,\n  canBackTo,\n  title = '',\n  titleContent,\n  eyebrow,\n  subtitleSlot,\n  headline,\n  slot,\n  titleSlot,\n  leadingSlot,\n  breadcrumb,\n  autoBreadcrumb = true,\n  titleIcon,\n  titleIconClassName,\n  autoIcon = true,\n  compact = false,\n  capitalizeTitle = true,\n  showDivider = true,\n  className,\n  titleClassName,\n  onBackClick,\n  disableBack = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const { navigate, goBack, location } = useUiNavigation();\n\n  const isFirefox = () => typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');\n\n  const handleBack = () => {\n    if (disableBack) return;\n\n    if (onBackClick) {\n      onBackClick();\n    } else if (canBackTo) {\n      navigate(canBackTo);\n    } else {\n      goBack();\n    }\n  };\n\n  const { resolveTrail } = usePageTitleNavigation();\n\n  const menuTrail = useMemo(() => {\n    const needsTrail = (autoBreadcrumb && !breadcrumb && !canFloat) || (autoIcon && !titleIcon);\n    return needsTrail ? resolveTrail(location.pathname) : [];\n  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, location.pathname, resolveTrail]);\n\n  const resolvedBreadcrumb =\n    breadcrumb ??\n    (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? (\n      <ControlledBreadcrumb\n        ariaLabel={t('pageTitle.breadcrumbLabel')}\n        items={menuTrail.map((item, index) => ({\n          key: item.key,\n          label: item.label,\n          to: index < menuTrail.length - 1 ? item.to : undefined,\n        }))}\n      />\n    ) : undefined);\n\n  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : undefined);\n\n  return (\n    <div\n      className={classNames('flex flex-col', {\n        'zIndexMax fixed top-16 mr-7': canFloat,\n        className,\n      })}\n      style={{\n        width: canFloat ? (isFirefox() ? '-moz-available' : '-webkit-fill-available') : '100%',\n      }}\n    >\n      {resolvedBreadcrumb && <div className=\"mb-2 shrink-0\">{resolvedBreadcrumb}</div>}\n\n      <div\n        className={classNames('flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2', {\n          'bg-surface py-5': canFloat,\n        })}\n      >\n        <div className={classNames('flex min-w-0 flex-1 basis-60 items-center', compact ? 'gap-2' : 'gap-3')}>\n          {leadingSlot}\n\n          {canBack && (\n            <ControlledTooltip content={t('actions.back')}>\n              <ControlledButton\n                defaultHtmlButton\n                onClick={handleBack}\n                disabled={disableBack}\n                className={classNames(\n                  'flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint',\n                  compact ? 'size-8' : 'size-9',\n                )}\n              >\n                <MaterialSymbol icon=\"arrow_back\" size={compact ? 18 : 20} />\n              </ControlledButton>\n            </ControlledTooltip>\n          )}\n\n          {resolvedTitleIcon && (\n            <span\n              className={classNames(\n                'flex shrink-0 items-center justify-center',\n                compact ? 'size-8 rounded-lg' : 'size-10 rounded-xl',\n                titleIconClassName ?? 'bg-brand-soft text-brand-emphasis',\n              )}\n            >\n              <MaterialSymbol icon={resolvedTitleIcon} size={compact ? 18 : 22} fill className=\"text-inherit\" />\n            </span>\n          )}\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            {eyebrow && (\n              <span className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint\">\n                {eyebrow}\n              </span>\n            )}\n\n            <div className=\"flex min-w-0 items-center gap-2\">\n              {titleContent ?? (\n                <span\n                  className={classNames(\n                    'min-w-0 truncate',\n                    compact\n                      ? 'text-sm font-semibold text-foreground'\n                      : 'text-lg font-bold tracking-tight text-foreground laptop:text-xl',\n                    titleClassName,\n                  )}\n                >\n                  {capitalizeTitle ? capitalizeAllLetters(title) : title}\n                </span>\n              )}\n\n              {titleSlot}\n            </div>\n\n            {headline && <span className=\"mt-0.5 text-xs text-foreground-subtle\">{headline}</span>}\n\n            {subtitleSlot && <div className=\"mt-1 flex min-w-0 flex-col gap-1\">{subtitleSlot}</div>}\n          </div>\n        </div>\n\n        {slot && <div className=\"ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2\">{slot}</div>}\n      </div>\n      {showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && (\n        <hr className={classNames('border-border-subtle', compact ? 'mb-2 mt-2' : 'mb-2 mt-3')} />\n      )}\n    </div>\n  );\n};\n\nexport default PageTitle;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTitle.js","sources":["../../../src/components/Navigation/PageTitle.tsx"],"sourcesContent":["import { ReactNode, useMemo, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport ControlledBreadcrumb from './ControlledBreadcrumb';\nimport { usePageTitleNavigation } from './PageTitleNavigationContext';\nimport { useUiNavigation } from './UiNavigationContext';\n\nexport interface IPageTitleImage {\n  src: string;\n  /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */\n  alt: string;\n  /** Escape hatch for the shape, e.g. `rounded-full` for an avatar. */\n  className?: string;\n}\n\ninterface IPageTitleProps {\n  title?: string;\n  /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */\n  titleContent?: ReactNode;\n  /** Rótulo pequeno em caixa alta acima do título (ex.: \"FICHA TÉCNICA\"). */\n  eyebrow?: string;\n  /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */\n  subtitleSlot?: ReactNode;\n  slot?: ReactNode;\n  /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */\n  titleSlot?: ReactNode;\n  /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */\n  leadingSlot?: ReactNode;\n  /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */\n  breadcrumb?: ReactNode;\n  /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */\n  autoBreadcrumb?: boolean;\n  /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */\n  titleIcon?: SymbolCodepoints;\n  titleIconClassName?: string;\n  /**\n   * An image in the icon chip's place, at the same size and radius (e.g. the product cover on a\n   * datasheet header). A src that fails to load falls back to the icon instead of leaving a broken\n   * image in the header.\n   */\n  titleImage?: IPageTitleImage;\n  /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */\n  autoIcon?: boolean;\n  /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */\n  compact?: boolean;\n  /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */\n  capitalizeTitle?: boolean;\n  /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */\n  showDivider?: boolean;\n  canBack?: boolean;\n  canBackTo?: string;\n  canFloat?: boolean;\n  headline?: string;\n  className?: string;\n  titleClassName?: string;\n  onBackClick?: () => void;\n  disableBack?: boolean;\n}\n\nconst PageTitle: React.FC<IPageTitleProps> = ({\n  canBack = false,\n  canFloat = false,\n  canBackTo,\n  title = '',\n  titleContent,\n  eyebrow,\n  subtitleSlot,\n  headline,\n  slot,\n  titleSlot,\n  leadingSlot,\n  breadcrumb,\n  autoBreadcrumb = true,\n  titleIcon,\n  titleIconClassName,\n  titleImage,\n  autoIcon = true,\n  compact = false,\n  capitalizeTitle = true,\n  showDivider = true,\n  className,\n  titleClassName,\n  onBackClick,\n  disableBack = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const { navigate, goBack, location } = useUiNavigation();\n\n  const isFirefox = () => typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');\n\n  const handleBack = () => {\n    if (disableBack) return;\n\n    if (onBackClick) {\n      onBackClick();\n    } else if (canBackTo) {\n      navigate(canBackTo);\n    } else {\n      goBack();\n    }\n  };\n\n  const { resolveTrail } = usePageTitleNavigation();\n\n  const menuTrail = useMemo(() => {\n    const needsTrail = (autoBreadcrumb && !breadcrumb && !canFloat) || (autoIcon && !titleIcon && !titleImage);\n    return needsTrail ? resolveTrail(location.pathname) : [];\n  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, titleImage, location.pathname, resolveTrail]);\n\n  const resolvedBreadcrumb =\n    breadcrumb ??\n    (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? (\n      <ControlledBreadcrumb\n        ariaLabel={t('pageTitle.breadcrumbLabel')}\n        items={menuTrail.map((item, index) => ({\n          key: item.key,\n          label: item.label,\n          to: index < menuTrail.length - 1 ? item.to : undefined,\n        }))}\n      />\n    ) : undefined);\n\n  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : undefined);\n\n  // Holds the src that failed rather than a boolean, so pointing at another image retries on its own.\n  const [failedTitleImageSrc, setFailedTitleImageSrc] = useState<string | null>(null);\n  const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;\n\n  return (\n    <div\n      className={classNames('flex flex-col', {\n        'zIndexMax fixed top-16 mr-7': canFloat,\n        className,\n      })}\n      style={{\n        width: canFloat ? (isFirefox() ? '-moz-available' : '-webkit-fill-available') : '100%',\n      }}\n    >\n      {resolvedBreadcrumb && <div className=\"mb-2 shrink-0\">{resolvedBreadcrumb}</div>}\n\n      <div\n        className={classNames('flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2', {\n          'bg-surface py-5': canFloat,\n        })}\n      >\n        <div className={classNames('flex min-w-0 flex-1 basis-60 items-center', compact ? 'gap-2' : 'gap-3')}>\n          {leadingSlot}\n\n          {canBack && (\n            <ControlledTooltip content={t('actions.back')}>\n              <ControlledButton\n                defaultHtmlButton\n                onClick={handleBack}\n                disabled={disableBack}\n                className={classNames(\n                  'flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint',\n                  compact ? 'size-8' : 'size-9',\n                )}\n              >\n                <MaterialSymbol icon=\"arrow_back\" size={compact ? 18 : 20} />\n              </ControlledButton>\n            </ControlledTooltip>\n          )}\n\n          {rendersTitleImage && titleImage ? (\n            <img\n              src={titleImage.src}\n              alt={titleImage.alt}\n              onError={() => setFailedTitleImageSrc(titleImage.src)}\n              className={classNames(\n                'shrink-0 border border-border object-cover',\n                compact ? 'size-8 rounded-lg' : 'size-10 rounded-xl',\n                titleImage.className,\n              )}\n            />\n          ) : (\n            resolvedTitleIcon && (\n              <span\n                className={classNames(\n                  'flex shrink-0 items-center justify-center',\n                  compact ? 'size-8 rounded-lg' : 'size-10 rounded-xl',\n                  titleIconClassName ?? 'bg-brand-soft text-brand-emphasis',\n                )}\n              >\n                <MaterialSymbol icon={resolvedTitleIcon} size={compact ? 18 : 22} fill className=\"text-inherit\" />\n              </span>\n            )\n          )}\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            {eyebrow && (\n              <span className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint\">\n                {eyebrow}\n              </span>\n            )}\n\n            <div className=\"flex min-w-0 items-center gap-2\">\n              {titleContent ?? (\n                <span\n                  className={classNames(\n                    'min-w-0 truncate',\n                    compact\n                      ? 'text-sm font-semibold text-foreground'\n                      : 'text-lg font-bold tracking-tight text-foreground laptop:text-xl',\n                    titleClassName,\n                  )}\n                >\n                  {capitalizeTitle ? capitalizeAllLetters(title) : title}\n                </span>\n              )}\n\n              {titleSlot}\n            </div>\n\n            {headline && <span className=\"mt-0.5 text-xs text-foreground-subtle\">{headline}</span>}\n\n            {subtitleSlot && <div className=\"mt-1 flex min-w-0 flex-col gap-1\">{subtitleSlot}</div>}\n          </div>\n        </div>\n\n        {slot && <div className=\"ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2\">{slot}</div>}\n      </div>\n      {showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && (\n        <hr className={classNames('border-border-subtle', compact ? 'mb-2 mt-2' : 'mb-2 mt-3')} />\n      )}\n    </div>\n  );\n};\n\nexport default PageTitle;\n"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.6.2",
+  "version": "0.7.0",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [