@carto/ps-react-ui 5.1.0 → 5.3.0

package/src/widgets-v2/toolbox/toolbox.tsx

@@ -56,7 +56,7 @@ export interface ToolboxProps {
  * Smart overflow toolbar with **single-mount** items. Children mount once
  * into a stable, hidden host element and are *physically reparented* via
  * `appendChild` between the inline preview area and the overflow `<Paper>`
- * as the popper opens / closes — same pattern as `Widget.FullScreen.Slot`.
+ * as the popper opens / closes.
  * Items with no inline space when closed are kept mounted but visually
  * hidden via `display: none`.
  *

package/src/widgets-v2/wrapper/style.ts

@@ -57,14 +57,50 @@ export const styles = {
     height: ({ spacing }: Theme) => spacing(0.35),
     zIndex: 1,
   },
+  // Title button, then Actions / Options, then the chevron, as siblings.
+  // Same spacing as when they all sat inside the summary: its 16px end
+  // padding moves to the row, the content's 6px end padding sits before
+  // the chevron.
+  header: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: ({ spacing }: Theme) => spacing(0.5),
+    minHeight: ({ spacing }: Theme) => spacing(7),
+    paddingInlineEnd: ({ spacing }: Theme) => spacing(2),
+  },
   summary: {
+    flex: 1,
+    minWidth: 0,
     minHeight: ({ spacing }: Theme) => spacing(7),
+    paddingInlineEnd: 0,
     '& .MuiAccordionSummary-content': {
-      gap: ({ spacing }: Theme) => spacing(0.5),
-      paddingInlineEnd: ({ spacing }: Theme) => spacing(0.75),
       alignItems: 'center',
+      minWidth: 0,
+      marginInlineEnd: 0,
+      paddingInlineEnd: 0,
     },
   },
+  // No chevron (disabled): keep the actions where they sat when the
+  // chevron's slot was empty — 10px further from the edge.
+  headerNoIcon: {
+    paddingInlineEnd: ({ spacing }: Theme) => spacing(3.25),
+  },
+  // Looks like the icon the summary used to render in its
+  // `expandIconWrapper`: 18px, secondary text colour, rotated when open.
+  expandIcon: {
+    display: 'flex',
+    marginInlineStart: ({ spacing }: Theme) => spacing(0.75),
+    color: 'text.secondary',
+    cursor: 'pointer',
+    '& svg': { width: 18, height: 18, color: 'inherit' },
+    transition: ({ transitions }: Theme) =>
+      transitions.create('transform', {
+        duration: transitions.duration.shortest,
+      }),
+  },
+  expanded: {
+    transform: 'rotate(180deg)',
+  },
   // Disabled state — only the collapse toggle is inert (enforced by the
   // guarded `onChange` handler, not `pointer-events`). Actions and Options in
   // the summary row, and the details panel, all keep their events. We just

package/src/widgets-v2/wrapper/widget-actions.tsx

@@ -14,8 +14,8 @@ export interface ActionsProps {
  * pointer devices), and stay full-opacity when a descendant is marked with
  * `.active` — typically applied by toggled actions.
  *
- * The container also stops click propagation so interacting with an action
- * doesn't toggle the wrapper's collapse.
+ * The container also stops click propagation, so a click on an action never
+ * reaches handlers further up the widget.
  */
 export function Actions({ sx, children }: ActionsProps) {
   return (

package/src/widgets-v2/wrapper/widget-wrapper.test.tsx

@@ -112,11 +112,41 @@ describe('<Wrapper>', () => {
     )
     const actionBtn = screen.getByTestId('action-btn')
     const bodyContent = screen.getByTestId('body-content')
-    // The action lives inside the AccordionSummary, the body inside AccordionDetails.
-    expect(actionBtn.closest('.MuiAccordionSummary-root')).not.toBeNull()
+    // The action lives in the header row, beside the summary button rather
+    // than inside it (a <button> can't contain another); the body lives in
+    // AccordionDetails.
+    expect(actionBtn.closest('.widget-wrapper-header')).not.toBeNull()
+    expect(actionBtn.closest('.MuiAccordionSummary-root')).toBeNull()
     expect(bodyContent.closest('.MuiAccordionDetails-root')).not.toBeNull()
   })
 
+  it('never nests a button inside another', () => {
+    const { container } = render(
+      withProvider(
+        'wrap-6b',
+        <Wrapper title='t'>
+          <Actions>
+            <button type='button'>A</button>
+          </Actions>
+        </Wrapper>,
+      ),
+    )
+    expect(container.querySelector('button button')).toBeNull()
+  })
+
+  it('clicking the chevron toggles the wrapper', () => {
+    const { container } = render(
+      withProvider('wrap-6c', <Wrapper title='t'>body</Wrapper>),
+    )
+    const summary = screen.getByRole('button', { name: 'Collapse' })
+    expect(summary.getAttribute('aria-expanded')).toBe('true')
+    const chevron = container.querySelector(
+      '.widget-wrapper-header [aria-hidden]',
+    )
+    fireEvent.click(chevron!)
+    expect(summary.getAttribute('aria-expanded')).toBe('false')
+  })
+
   it('shows a LinearProgress at the top when the store reports isFetching', () => {
     render(
       withProvider(

package/src/widgets-v2/wrapper/widget-wrapper.tsx

@@ -54,8 +54,8 @@ export interface WrapperProps {
   variant?: 'outlined' | 'elevation'
   labels?: Partial<WrapperLabels>
   /**
-   * Icon shown at the right edge of the summary row. Accordion rotates it
-   * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
+   * Icon shown at the right edge of the header row, rotated 180° while the
+   * wrapper is expanded. Default: `ExpandMoreIcon`.
    */
   expandIcon?: ComponentType<SvgIconProps>
   iconProps?: SvgIconProps
@@ -117,10 +117,23 @@ export function Wrapper({
 
   const ariaLabel = effectiveCollapsed ? _labels.expand : _labels.collapse
 
+  const expanded = !effectiveCollapsed
+  const toggle = useCallback(
+    () => handleAccordionToggle(null, !expanded),
+    [handleAccordionToggle, expanded],
+  )
+
+  // The header row is the Accordion's first child, which MUI treats as its
+  // summary slot. Only the title sits inside `<AccordionSummary>` — it
+  // renders as a `<button>`, and Actions / Options hold buttons of their
+  // own, which HTML doesn't allow inside another button. They sit next to
+  // it instead, followed by the chevron: a pointer shortcut for the same
+  // toggle, hidden from assistive tech since the summary button already
+  // carries it.
   return (
     <Accordion
       data-collapsed={effectiveCollapsed ? 'true' : undefined}
-      expanded={!effectiveCollapsed}
+      expanded={expanded}
       onChange={handleAccordionToggle}
       disableGutters
       elevation={0}
@@ -131,37 +144,50 @@ export function Wrapper({
         ...sx,
       }}
     >
-      {isFetching ? (
-        <LinearProgress sx={styles.loading} color='primary' />
-      ) : null}
-
-      <AccordionSummary
-        expandIcon={
-          disabled ? null : <ExpandIcon fontSize='small' {...iconProps} />
-        }
-        aria-label={ariaLabel}
-        aria-disabled={disabled || undefined}
-        sx={{
-          ...styles.summary,
-          ...(disabled ? styles.summaryDisabled : null),
-        }}
+      <Box
+        className='widget-wrapper-header'
+        sx={{ ...styles.header, ...(disabled && styles.headerNoIcon) }}
       >
-        <SmartTooltip title={title}>
-          {({ ref }) => (
-            <Box sx={styles.titleCell}>
-              <Typography
-                ref={ref}
-                variant='subtitle1'
-                sx={styles.titleText}
-                textTransform='none'
-              >
-                {title}
-              </Typography>
-            </Box>
-          )}
-        </SmartTooltip>
+        {isFetching ? (
+          <LinearProgress sx={styles.loading} color='primary' />
+        ) : null}
+        <AccordionSummary
+          // The chevron is rendered after Actions below; `null` also keeps
+          // a theme-level default icon out of the summary.
+          expandIcon={null}
+          aria-label={ariaLabel}
+          aria-disabled={disabled || undefined}
+          sx={{
+            ...styles.summary,
+            ...(disabled ? styles.summaryDisabled : null),
+          }}
+        >
+          <SmartTooltip title={title}>
+            {({ ref }) => (
+              <Box sx={styles.titleCell}>
+                <Typography
+                  ref={ref}
+                  variant='subtitle1'
+                  sx={styles.titleText}
+                  textTransform='none'
+                >
+                  {title}
+                </Typography>
+              </Box>
+            )}
+          </SmartTooltip>
+        </AccordionSummary>
         {summarySlots}
-      </AccordionSummary>
+        {disabled ? null : (
+          <Box
+            aria-hidden
+            onClick={toggle}
+            sx={{ ...styles.expandIcon, ...(expanded && styles.expanded) }}
+          >
+            <ExpandIcon fontSize='small' {...iconProps} />
+          </Box>
+        )}
+      </Box>
       <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
     </Accordion>
   )