@12-apps/ui 6.7.0 → 6.9.0

package/src/components/layout/ScrollArea/ScrollArea.types.ts

@@ -5,7 +5,25 @@ export type ScrollOrientation = 'vertical' | 'horizontal' | 'both';
 export type ScrollbarSize = 'thin' | 'medium' | 'thick';
 export type ScrollAreaVariant = 'default' | 'overlay' | 'glass';
 
-export interface ScrollAreaProps extends Omit<BoxProps, 'ref'> {
+/**
+ * Conditionally-required copy for the scroll-to-top control. The fab only exists
+ * when `scrollToTopButton` is set, so only that side of the union owes a name —
+ * a host that never shows the button is not asked for a word it cannot place.
+ */
+type ScrollAreaScrollToTop =
+  | { scrollToTopButton?: false; scrollToTopLabel?: never }
+  | { scrollToTopButton: true; scrollToTopLabel: string };
+
+export type ScrollAreaProps = ScrollAreaBase & ScrollAreaScrollToTop;
+
+export interface ScrollAreaBase extends Omit<BoxProps, 'ref'> {
+  /**
+   * The scroll region's accessible name. REQUIRED: the viewport is a
+   * `role="region"`, so a screen reader announces this word and no other. The
+   * package cannot know whether it wraps a menu, a chat log or a table.
+   */
+  regionLabel: string;
+
   /** Content to be rendered inside the scrollable area */
   children: ReactNode;
 
@@ -45,9 +63,6 @@ export interface ScrollAreaProps extends Omit<BoxProps, 'ref'> {
   /** Scroll event handler */
   onScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
 
-  /** Show scroll-to-top button */
-  scrollToTopButton?: boolean;
-
   /** Threshold for showing scroll-to-top button (in pixels) */
   scrollToTopThreshold?: number;
 

package/src/components/layout/ScrollArea/ScrollViewport.tsx

@@ -20,6 +20,8 @@ export interface ScrollViewportProps
     | 'loading'
     | 'smoothScroll'
   > {
+  /** The scroll region's accessible name. REQUIRED. */
+  regionLabel: string;
   children: ReactNode;
   shouldShowScrollbar: boolean;
   setScrollRef: (node: HTMLDivElement | null) => void;
@@ -29,6 +31,7 @@ export interface ScrollViewportProps
 // The element that actually scrolls: its own overflow and scrollbar styling,
 // plus the disabled and loading treatments.
 export const ScrollViewport: FC<ScrollViewportProps> = ({
+  regionLabel,
   children,
   height,
   maxHeight,
@@ -52,7 +55,7 @@ export const ScrollViewport: FC<ScrollViewportProps> = ({
       ref={setScrollRef}
       onScroll={onScroll}
       role="region"
-      aria-label="Scrollable content"
+      aria-label={regionLabel}
       aria-busy={loading}
       tabIndex={disabled ? -1 : 0}
       sx={{

package/src/components/layout/TableFilter/TableFilter.tsx

@@ -54,9 +54,10 @@ export function TableFilter({
   open,
   onOpenChange,
   hasActiveFilters = false,
+  copy,
 }: TableFilterProps): React.JSX.Element {
   return (
-    <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters }}>
+    <TableFilterContext.Provider value={{ open, onOpenChange, hasActiveFilters, copy }}>
       {children}
     </TableFilterContext.Provider>
   );
@@ -97,7 +98,7 @@ const TableFilterPanel = ({
   ariaLabel = 'Filters',
   clearTestId,
 }: TableFilterPanelProps): React.JSX.Element => {
-  const { open } = useTableFilterContext();
+  const { open, copy } = useTableFilterContext();
   return (
     <Box
       component="aside"
@@ -142,7 +143,7 @@ const TableFilterPanel = ({
               onClick={onClearAll}
               sx={{ fontSize: '0.75rem', color: 'text.secondary' }}
             >
-              Clear All Filters
+              {copy.clearAllFilters}
             </Link>
           </Box>
           {children}
@@ -160,6 +161,7 @@ const TableFilterKeyword = ({
   label = 'Filter by keyword',
   testId,
 }: TableFilterKeywordProps): React.JSX.Element => {
+  const { copy } = useTableFilterContext();
   const [draft, setDraft] = useState(value);
   const prevValue = useRef(value);
   if (prevValue.current !== value) {
@@ -204,7 +206,7 @@ const TableFilterKeyword = ({
               <InputAdornment position="end">
                 <IconButton
                   size="small"
-                  aria-label="Clear keyword filter"
+                  aria-label={copy.clearKeyword}
                   data-testid={testId ? `${testId}-clear` : undefined}
                   onMouseDown={(event) => event.preventDefault()}
                   onClick={clearKeyword}
@@ -326,12 +328,18 @@ const TableFilterRangeField = ({
   onChange,
   unit,
   step,
-  minPlaceholder = 'min',
-  maxPlaceholder = 'max',
+  minPlaceholder,
+  maxPlaceholder,
   invalidLabel,
   testId,
 }: TableFilterRangeFieldProps): React.JSX.Element => {
+  const { copy } = useTableFilterContext();
   const invalid = isRangeInverted(value);
+  // A field may override any of the three; unset, they come from the root's
+  // table. Neither path reaches an English literal in this package.
+  const minText = minPlaceholder ?? copy.rangeMin;
+  const maxText = maxPlaceholder ?? copy.rangeMax;
+  const invalidText = invalidLabel ?? copy.invalidRange;
   return (
     <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }} data-testid={testId}>
       <Typography sx={{ fontSize: '0.75rem', fontWeight: 500, color: 'text.secondary' }}>
@@ -342,9 +350,9 @@ const TableFilterRangeField = ({
         <RangeBound
           bound={value.min}
           error={invalid}
-          placeholder={minPlaceholder}
+          placeholder={minText}
           step={step}
-          ariaLabel={`${label} ${minPlaceholder}`}
+          ariaLabel={`${label} ${minText}`}
           testId={testId ? `${testId}-min` : undefined}
           onChange={(min) => onChange({ ...value, min })}
         />
@@ -354,9 +362,9 @@ const TableFilterRangeField = ({
         <RangeBound
           bound={value.max}
           error={invalid}
-          placeholder={maxPlaceholder}
+          placeholder={maxText}
           step={step}
-          ariaLabel={`${label} ${maxPlaceholder}`}
+          ariaLabel={`${label} ${maxText}`}
           testId={testId ? `${testId}-max` : undefined}
           onChange={(max) => onChange({ ...value, max })}
         />
@@ -367,7 +375,7 @@ const TableFilterRangeField = ({
           data-testid={testId ? `${testId}-error` : undefined}
           sx={{ fontSize: '0.7rem', color: 'error.main' }}
         >
-          {invalidLabel}
+          {invalidText}
         </Typography>
       )}
     </Box>

package/src/components/layout/TableFilter/TableFilter.types.ts

@@ -1,8 +1,16 @@
 import type { ReactNode } from 'react';
 
+import type { TableFilterCopy } from '../../../copy';
+
 /** Props for the `<TableFilter>` root (provider). */
 export interface TableFilterProps {
   children: ReactNode;
+  /**
+   * Every word this compound renders. REQUIRED: this package ships no default
+   * copy, and the two ends of a range plus the panel's clear link are read by
+   * the store's own customer, in the store's own language.
+   */
+  copy: TableFilterCopy;
   /** Whether the panel is open. */
   open: boolean;
   /** Toggle the panel. */

package/src/components/layout/TableFilter/TableFilterContext.tsx

@@ -2,6 +2,8 @@
 
 import { createContext, useContext } from 'react';
 
+import type { TableFilterCopy } from '../../../copy';
+
 /** Open/close + active state shared by every `TableFilter` compound part. */
 export interface TableFilterContextValue {
   /** Whether the filter panel is expanded. */
@@ -10,6 +12,14 @@ export interface TableFilterContextValue {
   onOpenChange: (open: boolean) => void;
   /** When true, the trigger shows a filled indicator dot. */
   hasActiveFilters: boolean;
+  /**
+   * Every word the compound's parts render. Carried on the root's context
+   * rather than on each part's props because the parts are a TREE — a host
+   * composes `Panel`, `Keyword` and the fields under one root, and asking each
+   * one separately for its share of the same table is the shape that makes a
+   * host answer four times and get one of them wrong.
+   */
+  copy: TableFilterCopy;
 }
 
 /** Backing context. `null` outside a `<TableFilter>` root. */

package/src/components/navigation/Breadcrumbs/BreadcrumbEntry.tsx

@@ -6,6 +6,7 @@ import React from 'react';
 
 import { breadcrumbLinkStyles } from './Breadcrumbs.styles';
 import type { BreadcrumbItem } from './Breadcrumbs.types';
+import type { BreadcrumbCopy } from '../../../copy';
 
 const BreadcrumbLink = styled(Link, {
   shouldForwardProp: (prop) => prop !== 'size' && prop !== 'active' && prop !== 'visualStyle' })<{ size?: string; active?: boolean; visualStyle?: string }>(
@@ -96,10 +97,12 @@ const CollapsedMenu = ({
   items,
   size,
   visualStyle,
+  copy,
   dataTestId }: {
   items: BreadcrumbItem[];
   size: string;
   visualStyle?: string;
+  copy: BreadcrumbCopy;
   dataTestId?: string;
 }) => {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
@@ -115,7 +118,7 @@ const CollapsedMenu = ({
 
   return (
     <>
-      <Tooltip title="Show more" arrow>
+      <Tooltip title={copy.showMore} arrow>
         <BreadcrumbLink
           onClick={handleClick}
           size={size}
@@ -174,10 +177,11 @@ const crumbIcon = ({
   );
 };
 
-const EllipsisCrumb: React.FC<{ label: string; dataTestId?: string }> = ({
+const EllipsisCrumb: React.FC<{ label: string; copy: BreadcrumbCopy; dataTestId?: string }> = ({
   label,
+  copy,
   dataTestId }) => (
-  <Tooltip title="More items" arrow>
+  <Tooltip title={copy.moreItems} arrow>
             <Box
               sx={{
                 px: 1,
@@ -237,6 +241,7 @@ export const BreadcrumbEntry: React.FC<{
   iconSize: 'small' | 'medium';
   size: string;
   variant: string;
+  copy: BreadcrumbCopy;
   dataTestId?: string;
 }> = ({
   item,
@@ -249,6 +254,7 @@ export const BreadcrumbEntry: React.FC<{
   iconSize,
   size,
   variant,
+  copy,
   dataTestId }) => {
   const testId = makeTestId(dataTestId);
   const isLast = index === itemCount - 1;
@@ -262,6 +268,7 @@ export const BreadcrumbEntry: React.FC<{
     return (
       <>
         <CollapsedMenu
+          copy={copy}
           items={collapsedItems}
           size={size}
           visualStyle={variant}
@@ -273,7 +280,7 @@ export const BreadcrumbEntry: React.FC<{
   }
 
   if (item.isEllipsis) {
-    return <EllipsisCrumb label={item.label} dataTestId={dataTestId} />;
+    return <EllipsisCrumb copy={copy} label={item.label} dataTestId={dataTestId} />;
   }
 
   const icon = crumbIcon({ item, isFirst: index === 0, showHomeIcon, iconSize });

package/src/components/navigation/Breadcrumbs/Breadcrumbs.tsx

@@ -145,6 +145,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
       collapseBehavior,
       mobileMaxItems,
       ariaLabel,
+      copy,
       dataTestId,
       ...props
     } = resolveProps(componentProps);
@@ -181,6 +182,7 @@ export const Breadcrumbs = React.forwardRef<HTMLElement, BreadcrumbsProps>(
       >
         {displayItems.map((item, index) => (
           <BreadcrumbEntry
+            copy={copy}
             key={index}
             item={item}
             index={index}

package/src/components/navigation/Breadcrumbs/Breadcrumbs.types.ts

@@ -1,6 +1,7 @@
 import type { ColorValue, SizeValue } from '../../../tokens/scales';
 import type { BreadcrumbsProps as MuiBreadcrumbsProps } from '@mui/material';
 import type { ReactNode } from 'react';
+import type { BreadcrumbCopy } from '../../../copy';
 
 export interface BreadcrumbItem {
   /**
@@ -57,6 +58,8 @@ export interface BreadcrumbItem {
 }
 
 export interface BreadcrumbsProps extends Omit<MuiBreadcrumbsProps, 'separator'> {
+  /** The overflow control's tooltip, in its two spellings. REQUIRED. */
+  copy: BreadcrumbCopy;
   /**
    * The visual variant of the breadcrumbs container
    * - default: No special styling

package/src/components/navigation/CommandPalette/CommandPalette.tsx

@@ -21,6 +21,7 @@ import { useCommandPalette } from './CommandPalette.hooks';
 import { PaletteResults } from './CommandPaletteResults';
 import { ShortcutChip } from './ShortcutChip';
 import type { CommandPaletteProps } from './CommandPalette.types';
+import type { CommandPaletteCopy } from '../../../copy';
 
 // Styled components
 const StyledDialog = styled(Dialog)(() => ({
@@ -98,7 +99,10 @@ const PaletteSearch: React.FC<{
   </SearchContainer>
 );
 
-const PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) => {
+const PaletteFooter: React.FC<{ commandCount: number; copy: CommandPaletteCopy }> = ({
+  commandCount,
+  copy,
+}) => {
   const theme = useTheme();
 
   return (
@@ -112,9 +116,13 @@ const PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) =>
         background: alpha(theme.palette.background.default, 0.4) }}
     >
       <Box sx={{ display: 'flex', gap: 1 }}>
-        <ShortcutChip icon={<EnterIcon sx={{ fontSize: 12 }} />} label="Execute" size="small" />
-        <ShortcutChip label="↑↓ Navigate" size="small" />
-        <ShortcutChip label="ESC Close" size="small" />
+        <ShortcutChip
+          icon={<EnterIcon sx={{ fontSize: 12 }} />}
+          label={copy.execute}
+          size="small"
+        />
+        <ShortcutChip label={copy.navigate} size="small" />
+        <ShortcutChip label={copy.close} size="small" />
       </Box>
       <Typography variant="caption" color="text.secondary">
         {commandCount} commands
@@ -124,6 +132,7 @@ const PaletteFooter: React.FC<{ commandCount: number }> = ({ commandCount }) =>
 };
 
 export const CommandPalette: FC<CommandPaletteProps> = ({
+  copy,
   open,
   onClose,
   commands,
@@ -177,6 +186,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
           />
 
           <PaletteResults
+          copy={copy}
             listRef={listRef}
             dataTestId={dataTestId}
             searchQuery={searchQuery}
@@ -190,7 +200,7 @@ export const CommandPalette: FC<CommandPaletteProps> = ({
             onExecute={executeCommand}
           />
 
-          <PaletteFooter commandCount={filteredCommands.length} />
+          <PaletteFooter copy={copy} commandCount={filteredCommands.length} />
         </PaletteContainer>
       </DialogContent>
     </StyledDialog>

package/src/components/navigation/CommandPalette/CommandPalette.types.ts

@@ -1,4 +1,5 @@
 import type React from 'react';
+import type { CommandPaletteCopy } from '../../../copy';
 
 export interface PaletteCommand {
   id: string;
@@ -12,6 +13,8 @@ export interface PaletteCommand {
 }
 
 export interface CommandPaletteProps {
+  /** The footer's keyboard hints and the empty state's nudge. REQUIRED. */
+  copy: CommandPaletteCopy;
   open: boolean;
   onClose: () => void;
   commands: PaletteCommand[];

package/src/components/navigation/CommandPalette/CommandPaletteResults.tsx

@@ -5,6 +5,7 @@ import React from 'react';
 
 import { ShortcutChip } from './ShortcutChip';
 import type { PaletteCommand } from './CommandPalette.types';
+import type { CommandPaletteCopy } from '../../../copy';
 
 const ResultsList = styled(List)(({ theme }) => ({
   maxHeight: 400,
@@ -90,6 +91,7 @@ const slug = (value: string) => value.toLowerCase().replace(/\s+/g, '-');
 // has to stay consistent across both sections, so it is threaded through here
 // rather than mutated from inside the render as it was before.
 export const PaletteResults: React.FC<{
+  copy: CommandPaletteCopy;
   listRef: React.Ref<globalThis.HTMLUListElement>;
   dataTestId?: string;
   searchQuery: string;
@@ -102,6 +104,7 @@ export const PaletteResults: React.FC<{
   onSelect: (index: number) => void;
   onExecute: (command: PaletteCommand) => void;
 }> = ({
+  copy,
   listRef,
   dataTestId,
   searchQuery,
@@ -121,7 +124,7 @@ export const PaletteResults: React.FC<{
           No commands found for "{searchQuery}"
         </Typography>
         <Typography variant="caption" color="text.disabled" sx={{ mt: 1 }}>
-          Try a different search term
+          {copy.tryAnotherTerm}
         </Typography>
       </NoResults>
     );
@@ -160,7 +163,7 @@ export const PaletteResults: React.FC<{
         <>
           <CategoryLabel data-testid={`${dataTestId}-group-recent`}>
             <RecentIcon sx={{ fontSize: 14, mr: 0.5, verticalAlign: 'middle' }} />
-            Recent
+            {copy.recent}
           </CategoryLabel>
           {recent.map(row)}
           {filteredCommands.length > recentCommandIds.length && <Divider sx={{ my: 1 }} />}

package/src/components/navigation/Pagination/Pagination.tsx

@@ -152,6 +152,7 @@ export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
   (componentProps, ref) => {
     const resolved = resolvePaginationProps(componentProps);
     const {
+      pageSizeLabel,
       variant,
       size,
       page,
@@ -194,6 +195,7 @@ export const Pagination = React.forwardRef<HTMLElement, PaginationProps>(
       <PaginationContainer className={className} data-testid={dataTestId || 'pagination'}>
         {showItemsPerPage && onItemsPerPageChange && (
           <ItemsPerPageSelect
+            pageSizeLabel={pageSizeLabel}
             value={itemsPerPage}
             options={itemsPerPageOptions}
             size={size}

package/src/components/navigation/Pagination/Pagination.types.ts

@@ -3,6 +3,8 @@ import type { PaginationProps as MuiPaginationProps } from '@mui/material';
 import type { ReactNode } from 'react';
 
 export interface PaginationProps extends Omit<MuiPaginationProps, 'variant' | 'size' | 'color'> {
+  /** The label in front of the page-size select. REQUIRED. */
+  pageSizeLabel: string;
   /**
    * The variant of the pagination
    */

package/src/components/navigation/Pagination/PaginationParts.tsx

@@ -20,6 +20,8 @@ const PageInfoContainer = styled(Box)(({ theme }) => ({
 }));
 
 export interface ItemsPerPageSelectProps {
+  /** The label in front of the select. REQUIRED — it was `"Show:"`. */
+  pageSizeLabel: string;
   value: number;
   options: number[];
   size: string;
@@ -29,6 +31,7 @@ export interface ItemsPerPageSelectProps {
 }
 
 export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
+  pageSizeLabel,
   value,
   options,
   size,
@@ -38,7 +41,7 @@ export const ItemsPerPageSelect: FC<ItemsPerPageSelectProps> = ({
 }) => (
   <ItemsPerPageContainer>
     <Typography variant="body2" color="text.secondary">
-      Show:
+      {pageSizeLabel}
     </Typography>
     <FormControl size="small" sx={{ minWidth: 80 }}>
       <Select

package/src/components/navigation/Tabs/Tabs.tsx

@@ -105,8 +105,9 @@ const buildTabsSx = ({
 // A tab's label: icon, text, optional close affordance, optionally badged.
 const TabLabel: React.FC<{
   item: TabItem;
+  closeTabLabel: string;
   onClose: (event: React.MouseEvent | React.KeyboardEvent, tabId: string) => void;
-}> = ({ item, onClose }) => {
+}> = ({ item, closeTabLabel, onClose }) => {
   const content = (
     <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
       {item.icon}
@@ -116,7 +117,7 @@ const TabLabel: React.FC<{
           onClick={(e) => onClose(e, item.id)}
           role="button"
           tabIndex={0}
-          aria-label="Close tab"
+          aria-label={closeTabLabel}
           onKeyDown={(e) => {
             if (e.key !== 'Enter' && e.key !== ' ') return;
             onClose(e, item.id);
@@ -176,7 +177,7 @@ const TabsBar: React.FC<
       <MuiTab
         key={item.id}
         value={item.id}
-        label={<TabLabel item={item} onClose={onCloseTab} />}
+        label={<TabLabel closeTabLabel={p.closeTabLabel} item={item} onClose={onCloseTab} />}
         disabled={item.disabled || p.disabled}
         className={item.className}
         id={`tab-${item.id}`}
@@ -224,6 +225,10 @@ export const Tabs = React.forwardRef<HTMLDivElement, TabsProps>(
   (tabsProps, ref) => {
     const resolved = { ...TABS_DEFAULTS, ...definedProps(tabsProps) } as TabsProps;
     const {
+      // Destructured only to keep it OUT of `rest`, which is spread onto the
+      // DOM node — `{...resolved}` below is what actually carries it to
+      // `TabsBar`. Same reason as `value` on the next line.
+      closeTabLabel: _closeTabLabel,
       value: _value,
       onChange,
       onTabClose,

package/src/components/navigation/Tabs/Tabs.types.ts

@@ -50,6 +50,8 @@ export interface TabItem {
 }
 
 export interface TabsProps extends Omit<MuiTabsProps, 'variant' | 'children' | 'indicatorColor' | 'scrollButtons'> {
+  /** A closable tab's dismiss — a glyph with no visible label. REQUIRED. */
+  closeTabLabel: string;
   /**
    * The visual variant of the tabs
    */

package/src/components/utility/InfiniteScroll/InfiniteScroll.parts.tsx

@@ -12,19 +12,19 @@ const CENTERED = {
   p: 2,
 } as const;
 
-export const DefaultLoader: React.FC = () => (
+export const DefaultLoader: React.FC<{ loadingText: string }> = ({ loadingText }) => (
   <Box sx={CENTERED}>
     <CircularProgress size={24} />
     <Typography variant="body2" sx={{ ml: 1 }}>
-      Loading...
+      {loadingText}
     </Typography>
   </Box>
 );
 
-export const DefaultEndMessage: React.FC = () => (
+export const DefaultEndMessage: React.FC<{ endText: string }> = ({ endText }) => (
   <Box sx={CENTERED}>
     <Typography variant="body2" color="text.secondary">
-      No more items to load
+      {endText}
     </Typography>
   </Box>
 );

package/src/components/utility/InfiniteScroll/InfiniteScroll.tsx

@@ -18,6 +18,8 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   threshold = 150,
   loadMore,
   loader,
+  loadingText,
+  endText,
   endMessage,
   error,
   errorComponent,
@@ -45,9 +47,9 @@ export const InfiniteScroll: React.FC<InfiniteScrollProps> = ({
   // The tail of the list is one of four things: the end message, an error, a
   // spinner, or the sentinel that asks for the next page.
   const renderSentinel = () => {
-    if (!hasMore) return endMessage || <DefaultEndMessage />;
+    if (!hasMore) return endMessage || <DefaultEndMessage endText={endText} />;
     if (error) return errorComponent || <DefaultError error={error} />;
-    if (loading) return loader || <DefaultLoader />;
+    if (loading) return loader || <DefaultLoader loadingText={loadingText} />;
 
     return (
       <div

package/src/components/utility/InfiniteScroll/InfiniteScroll.types.ts

@@ -3,6 +3,12 @@ import type { ReactNode } from 'react';
 export type InfiniteScrollVariant = 'default' | 'reverse' | 'horizontal';
 
 export interface InfiniteScrollProps {
+  /**
+   * The two states the scroller renders on its own: fetching the next page,
+   * and having reached the end. REQUIRED — both were English literals.
+   */
+  loadingText: string;
+  endText: string;
   children: ReactNode;
   variant?: InfiniteScrollVariant;
   hasMore: boolean;