@carto/ps-react-ui 4.18.0 → 4.19.0

package/dist/types/widgets-v2/actions/change-column/labels.d.ts

@@ -1,5 +1,6 @@
 export interface ChangeColumnLabels {
     trigger: string;
+    title?: string;
     reset: string;
 }
 export declare const DEFAULT_CHANGE_COLUMN_LABELS: ChangeColumnLabels;

package/dist/types/widgets-v2/actions/change-column/style.d.ts

@@ -11,23 +11,49 @@ export declare const styles: {
     };
     menuPaper: {
         overflow: "hidden";
-        minWidth: number;
+    };
+    header: {
+        color: "text.secondary";
+        backgroundColor: "transparent";
+        typography: string;
+        px: number;
+        py: number;
     };
     item: {
+        position: "relative";
         cursor: "grab";
+        px: number;
+        touchAction: "none";
+        '&:hover .change-column-drag-handle': {
+            opacity: number;
+        };
         '&:focus-visible': {
             outline: string;
             outlineColor: "primary.main";
             outlineOffset: number;
         };
+        '&:focus-visible .change-column-drag-handle': {
+            opacity: number;
+        };
     };
     itemDragging: {
         opacity: number;
         cursor: "grabbing";
     };
     dragHandle: {
+        position: "absolute";
+        left: number;
+        top: string;
+        transform: "translateY(-50%)";
         color: "text.secondary";
-        mr: number;
         fontSize: number;
+        opacity: number;
+        transition: "opacity 0.1s";
+        '@media (hover: none)': {
+            opacity: number;
+        };
+    };
+    dragHandleVisible: {
+        opacity: number;
     };
 };

package/dist/widgets-v2/actions.js

@@ -1,4 +1,4 @@
-import { B as L, C as o, D as e, a as A, b as E, c as r, d as t, e as S, f as _, g as T, h as l, i as D, j as d, F as n, L as c, R as O, S as g, k as B, l as C, m, n as F, Z as U, o as i, p as I, q as h, r as w, s as G, t as f, u as N, v as R } from "../change-column-Bhcxmp-r.js";
+import { B as L, C as o, D as e, a as A, b as E, c as r, d as t, e as S, f as _, g as T, h as l, i as D, j as d, F as n, L as c, R as O, S as g, k as B, l as C, m, n as F, Z as U, o as i, p as I, q as h, r as w, s as G, t as f, u as N, v as R } from "../change-column-Fu1DCYQ3.js";
 import { Z as u, a as x, c as M } from "../transforms-Cdx4fkU5.js";
 import { d as b, a as p, t as v, b as H } from "../exports-Cx-f6m6U.js";
 import { C as W, D as V, M as y, P as K, b as j } from "../png-item-9dNbB37T.js";

package/dist/widgets-v2.js

@@ -16,7 +16,7 @@ import "@carto/ps-utils";
 import { o as Ze, a as Ke, E as Ye } from "./echart-B10dhEaM.js";
 import { D as $n } from "./echart-B10dhEaM.js";
 import { MarkdownContent as Je } from "./markdown-content-Dk2DSgbf.js";
-import { C as Qe, L as et, F as tt, j as nt, R as ot, B as rt, Z as it, m as lt, n as st, l as at, k as ct } from "./change-column-Bhcxmp-r.js";
+import { C as Qe, L as et, F as tt, j as nt, R as ot, B as rt, Z as it, m as lt, n as st, l as at, k as ct } from "./change-column-Fu1DCYQ3.js";
 import "html2canvas";
 import { a as dt, F as ft } from "./formula-DuC0NQLH.js";
 import { a as pt, M as mt } from "./markdown-DdqANCiN.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.18.0",
+  "version": "4.19.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {

package/src/widgets-v2/actions/change-column/change-column.tsx

@@ -14,7 +14,12 @@ import {
   sortableKeyboardCoordinates,
   verticalListSortingStrategy,
 } from '@dnd-kit/sortable'
-import { IconButton, Menu, type SvgIconProps } from '@mui/material'
+import {
+  IconButton,
+  ListSubheader,
+  Menu,
+  type SvgIconProps,
+} from '@mui/material'
 import { Tooltip } from '../../../components'
 import { getWidgetStore, useWidget, useWidgetId } from '../../stores'
 import { ChangeColumnIcon } from './change-column-icon'
@@ -150,6 +155,7 @@ export function ChangeColumn({
         sensors={sensors}
         collisionDetection={closestCenter}
         onDragEnd={handleDragEnd}
+        autoScroll={false}
       >
         <Menu
           id='change-column-menu'
@@ -160,6 +166,9 @@ export function ChangeColumn({
           transformOrigin={{ vertical: 'top', horizontal: 'right' }}
           slotProps={{ paper: { sx: styles.menuPaper } }}
         >
+          <ListSubheader disableSticky role='presentation' sx={styles.header}>
+            {_labels.title}
+          </ListSubheader>
           <SortableContext
             items={orderedIds}
             strategy={verticalListSortingStrategy}

package/src/widgets-v2/actions/change-column/labels.ts

@@ -1,9 +1,11 @@
 export interface ChangeColumnLabels {
   trigger: string
+  title?: string
   reset: string
 }
 
 export const DEFAULT_CHANGE_COLUMN_LABELS: ChangeColumnLabels = {
   trigger: 'Change column order',
+  title: 'Column reorder',
   reset: 'Reset to default',
 }

package/src/widgets-v2/actions/change-column/sortable-column-item.tsx

@@ -45,11 +45,18 @@ export function SortableColumnItem({
       style={transformStyle}
       {...attributes}
       {...listeners}
+      disableGutters
       role='menuitem'
       tabIndex={0}
       sx={{ ...styles.item, ...(isDragging && styles.itemDragging) }}
     >
-      <HandleIcon sx={styles.dragHandle} />
+      <HandleIcon
+        className='change-column-drag-handle'
+        sx={{
+          ...styles.dragHandle,
+          ...(isDragging && styles.dragHandleVisible),
+        }}
+      />
       <ListItemText>{label}</ListItemText>
     </MenuItem>
   )

package/src/widgets-v2/actions/change-column/style.ts

@@ -10,23 +10,49 @@ export const styles = {
   },
   menuPaper: {
     overflow: 'hidden',
-    minWidth: 220,
+  },
+  header: {
+    color: 'text.secondary',
+    backgroundColor: 'transparent',
+    typography: 'caption',
+    px: 2,
+    py: 0.75,
   },
   item: {
+    position: 'relative',
     cursor: 'grab',
+    px: 2,
+    touchAction: 'none',
+    '&:hover .change-column-drag-handle': {
+      opacity: 1,
+    },
     '&:focus-visible': {
       outline: '2px solid',
       outlineColor: 'primary.main',
       outlineOffset: -2,
     },
+    '&:focus-visible .change-column-drag-handle': {
+      opacity: 1,
+    },
   },
   itemDragging: {
     opacity: 0.5,
     cursor: 'grabbing',
   },
   dragHandle: {
+    position: 'absolute',
+    left: 0,
+    top: '50%',
+    transform: 'translateY(-50%)',
     color: 'text.secondary',
-    mr: 1,
     fontSize: 18,
+    opacity: 0,
+    transition: 'opacity 0.1s',
+    '@media (hover: none)': {
+      opacity: 1,
+    },
+  },
+  dragHandleVisible: {
+    opacity: 1,
   },
 } satisfies Record<string, SxProps<Theme>>