@carto/ps-react-ui 5.3.0 → 6.1.0

package/src/{widgets-v2 → widgets}/wrapper/style.ts

@@ -57,50 +57,14 @@ 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 → widgets}/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 a click on an action never
- * reaches handlers further up the widget.
+ * The container also stops click propagation so interacting with an action
+ * doesn't toggle the wrapper's collapse.
  */
 export function Actions({ sx, children }: ActionsProps) {
   return (

package/src/{widgets-v2 → widgets}/wrapper/widget-wrapper.test.tsx

@@ -112,41 +112,11 @@ describe('<Wrapper>', () => {
     )
     const actionBtn = screen.getByTestId('action-btn')
     const bodyContent = screen.getByTestId('body-content')
-    // 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()
+    // The action lives inside the AccordionSummary, the body inside AccordionDetails.
+    expect(actionBtn.closest('.MuiAccordionSummary-root')).not.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 → widgets}/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 header row, rotated 180° while the
-   * wrapper is expanded. Default: `ExpandMoreIcon`.
+   * Icon shown at the right edge of the summary row. Accordion rotates it
+   * 180° automatically when the wrapper expands. Default: `ExpandMoreIcon`.
    */
   expandIcon?: ComponentType<SvgIconProps>
   iconProps?: SvgIconProps
@@ -117,23 +117,10 @@ 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={expanded}
+      expanded={!effectiveCollapsed}
       onChange={handleAccordionToggle}
       disableGutters
       elevation={0}
@@ -144,50 +131,41 @@ export function Wrapper({
         ...sx,
       }}
     >
-      <Box
-        className='widget-wrapper-header'
-        sx={{ ...styles.header, ...(disabled && styles.headerNoIcon) }}
+      {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),
+        }}
       >
-        {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>
+        <SmartTooltip title={title}>
+          {({ ref }) => (
+            <Box sx={styles.titleCell}>
+              <Typography
+                ref={ref}
+                variant='subtitle1'
+                sx={[
+                  {
+                    textTransform: 'none',
+                  },
+                  styles.titleText,
+                ]}
+              >
+                {title}
+              </Typography>
+            </Box>
+          )}
+        </SmartTooltip>
         {summarySlots}
-        {disabled ? null : (
-          <Box
-            aria-hidden
-            onClick={toggle}
-            sx={{ ...styles.expandIcon, ...(expanded && styles.expanded) }}
-          >
-            <ExpandIcon fontSize='small' {...iconProps} />
-          </Box>
-        )}
-      </Box>
+      </AccordionSummary>
       <AccordionDetails sx={styles.detail}>{detailsSlots}</AccordionDetails>
     </Accordion>
   )