@12-apps/ui 1.5.1 → 1.6.0

package/src/components/layout/ContentToolbar/ContentToolbar.tsx

@@ -98,6 +98,58 @@ function SelectionCluster({
   );
 }
 
+/**
+ * The BROWSING half of the toolbar: search + filters on the left, the page's
+ * own controls on the right. Split out of {@link ContentToolbar} so that
+ * function stays inside the complexity gate — it is layout only, and the
+ * decision of whether to show it at all is made by the caller.
+ */
+function BrowsingClusters({
+  leadingControls,
+  rightControls,
+  hasSelection,
+  edgeAlign,
+}: {
+  leadingControls?: React.ReactNode;
+  rightControls: React.ReactNode;
+  hasSelection: boolean;
+  edgeAlign: boolean;
+}): React.JSX.Element {
+  return (
+    <>
+      {/* minWidth:0 lets this cluster be the one that gives up width as the row
+       * tightens, which is what the filter overflow measures against. */}
+      {leadingControls !== undefined && (
+        <Box sx={{ display: 'flex', alignItems: 'center', flexGrow: 1, minWidth: 0 }}>
+          {leadingControls}
+        </Box>
+      )}
+      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to
+       * its own row (where justify-content:space-between would otherwise snap a
+       * lone item to the left); it's a no-op on a shared row. */}
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          // Same single-line rule as the row itself: this cluster wrapping
+          // INTERNALLY buys a second line just as surely as the row wrapping
+          // does. It bit at exactly 900px, the `md` breakpoint where the "N de
+          // N" counter appears and pushes Exibir/Exportar over the edge.
+          flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',
+          // Tight (5px) when browsing so the controls fit one line beside the
+          // checkbox; roomier (14px) in selection mode where they get their own row.
+          gap: hasSelection ? '14px' : '5px',
+          ml: 'auto',
+          mr: edgeAlign ? -1.5 : 0,
+          '& > *': { flexShrink: 0 },
+        }}
+      >
+        {rightControls}
+      </Box>
+    </>
+  );
+}
+
 /**
  * Shared toolbar for content pages (Favorites, Personal Space, Recents, …). The
  * left cluster owns selection chrome — **Select All**, and once items are
@@ -133,52 +185,56 @@ export function ContentToolbar({
   selectAll,
   clearSelection,
   rightControls,
+  leadingControls,
   actions,
   selectAllTestId,
   clearAllTestId,
   edgeAlign = false,
+  exclusiveSelection = false,
 }: ContentToolbarProps): React.JSX.Element {
+  // Under `exclusiveSelection` the two states are alternatives, not neighbours:
+  // browsing shows the controls and no checkbox, selecting shows the checkbox
+  // and no controls. Anything else double-books the row.
+  const showSelection = !exclusiveSelection || hasSelection;
+  const showControls = !exclusiveSelection || !hasSelection;
   return (
-    // Wrap the two clusters onto separate rows when they can't share one line
-    // (narrow screens / phones) instead of letting the controls collide.
+    // Two clusters on one line. They may wrap onto separate rows ONLY for a
+    // toolbar without `leadingControls` — one carrying search + filters is
+    // driven by a measured collapse ladder (see `useFilterOverflow`), and a
+    // wrap there is the ladder having failed: it would silently buy a second
+    // row instead of shedding a control into "Mais", which is the one outcome
+    // the ladder exists to prevent.
     <Box
       sx={{
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'space-between',
         gap: 2,
-        flexWrap: 'wrap',
+        flexWrap: leadingControls === undefined ? 'wrap' : 'nowrap',
         rowGap: 1,
       }}
     >
-      <SelectionCluster
-        hasSelection={hasSelection}
-        selectedCount={selectedCount}
-        selectAll={selectAll}
-        clearSelection={clearSelection}
-        actions={actions}
-        selectAllTestId={selectAllTestId}
-        clearAllTestId={clearAllTestId}
-        edgeAlign={edgeAlign}
-      />
+      {showSelection && (
+        <SelectionCluster
+          hasSelection={hasSelection}
+          selectedCount={selectedCount}
+          selectAll={selectAll}
+          clearSelection={clearSelection}
+          actions={actions}
+          selectAllTestId={selectAllTestId}
+          clearAllTestId={clearAllTestId}
+          edgeAlign={edgeAlign}
+        />
+      )}
 
-      {/* ml:auto keeps the controls right-aligned even when the cluster wraps to
-       * its own row (where justify-content:space-between would otherwise snap a
-       * lone item to the left); it's a no-op on a shared row. */}
-      <Box
-        sx={{
-          display: 'flex',
-          alignItems: 'center',
-          flexWrap: 'wrap',
-          // Tight (5px) when browsing so the controls fit one line beside the
-          // checkbox; roomier (14px) in selection mode where they get their own row.
-          gap: hasSelection ? '14px' : '5px',
-          ml: 'auto',
-          mr: edgeAlign ? -1.5 : 0,
-        }}
-      >
-        {rightControls}
-      </Box>
+      {showControls && (
+        <BrowsingClusters
+          leadingControls={leadingControls}
+          rightControls={rightControls}
+          hasSelection={hasSelection}
+          edgeAlign={edgeAlign}
+        />
+      )}
     </Box>
   );
 }

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

@@ -14,6 +14,22 @@ export interface ContentToolbarProps {
   clearSelection: () => void;
   /** Page-specific right-aligned controls (ViewSelector, SortByDropdown, …). */
   rightControls: ReactNode;
+  /**
+   * Controls that share the toolbar's own line, left-aligned after the
+   * selection cluster — the search box and the filter controls, which belong on
+   * the toolbar rather than on a row of their own. Left unset the toolbar keeps
+   * its two-cluster shape.
+   */
+  leadingControls?: ReactNode;
+  /**
+   * Selection OWNS the toolbar line instead of sharing it. Nothing selected ⇒
+   * no Select All at all (the row is search + filters + controls); something
+   * selected ⇒ those give way entirely and only the selection cluster remains.
+   *
+   * Off by default: a toolbar that already shows Select All permanently keeps
+   * doing so, so this cannot move a control on a consumer that did not ask.
+   */
+  exclusiveSelection?: boolean;
   /**
    * Selection actions slot, rendered after the count when items are selected
    * (e.g. a "Delete" / "Send email" control). Kept generic — the consumer owns
@@ -134,6 +150,15 @@ export interface MultiSelectDropdownProps<TValue extends string = string> {
    */
   layout?: 'inline' | 'stacked' | 'pill';
   'data-testid'?: string;
+  /**
+   * Notified when the menu opens and closes.
+   *
+   * For a toolbar whose LAYOUT is measured: applying a filter changes this
+   * control's label and therefore its width, and re-measuring mid-interaction
+   * moves the row under the operator's cursor. A caller that measures uses this
+   * to hold still while the menu is open.
+   */
+  onOpenChange?: (open: boolean) => void;
 }
 
 /* ── FilterTrigger ───────────────────────────────────────────────────────── */

package/src/components/layout/ContentToolbar/MultiSelectDropdown.tsx

@@ -67,6 +67,7 @@ export function MultiSelectDropdown<TValue extends string = string>({
   noResultsLabel = 'No results',
   layout = 'inline',
   'data-testid': testId,
+  onOpenChange,
 }: MultiSelectDropdownProps<TValue>): React.JSX.Element {
   const [anchorEl, setAnchorEl] = useState<HTMLElement | null>(null);
   const [query, setQuery] = useState('');
@@ -76,6 +77,7 @@ export function MultiSelectDropdown<TValue extends string = string>({
   const close = (): void => {
     setAnchorEl(null);
     setQuery('');
+    onOpenChange?.(false);
   };
   const triggerLabel = buildTriggerLabel(selected, options, allLabel);
   // Auto-enable search for long lists (e.g. many categories) unless overridden.
@@ -83,7 +85,10 @@ export function MultiSelectDropdown<TValue extends string = string>({
   const anyExtraChecked = extraOptions?.some((option) => option.checked) ?? false;
   const clearDisabled = selected.size === 0 && !anyExtraChecked;
 
-  const openMenu = (event: React.MouseEvent<HTMLElement>): void => setAnchorEl(event.currentTarget);
+  const openMenu = (event: React.MouseEvent<HTMLElement>): void => {
+    setAnchorEl(event.currentTarget);
+    onOpenChange?.(true);
+  };
   const triggerProps = { triggerLabel, open, onOpen: openMenu, testId };
 
   const renderTrigger = (): React.JSX.Element => {