@carto/ps-react-ui 4.12.2 → 4.14.0

package/dist/widgets/utils.js

@@ -1,5 +1,5 @@
 import { d as i, a as n } from "../formatter-B9Bxn1k7.js";
-import { c as f, f as p, s as c } from "../download-config-oJIFZ2WC.js";
+import { c as f, f as p, s as c } from "../download-config-OKlLLSW_.js";
 import { a as d, b as u, c as b, d as x, e as C, f as g, g as F, n as y } from "../option-builders-DPeoyQaM.js";
 import { b as S } from "../styles-cohnxh9F.js";
 function r({

package/dist/widgets/wrapper.js

@@ -3,7 +3,7 @@ import { c as w } from "react/compiler-runtime";
 import { Box as E, IconButton as _, MenuItem as W, ListItemIcon as $, ListItemText as B, Menu as L, Typography as N, LinearProgress as j, AccordionSummary as z, AccordionDetails as F, Accordion as Y } from "@mui/material";
 import { MoreVert as D } from "@mui/icons-material";
 import { useState as H, useLayoutEffect as G } from "react";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import { S as U } from "../smart-tooltip-D4vwQpFf.js";
 import "@carto/ps-utils";

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-DjjwoPt1.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-CiVAjOUB.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/bar.js

@@ -8,7 +8,7 @@ import "zustand/shallow";
 import "@mui/icons-material";
 import "react";
 import "html2canvas";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "@dnd-kit/core";
@@ -22,7 +22,7 @@ import "zustand/middleware";
 import "zustand/react/shallow";
 import { Z as O } from "../transforms-Cdx4fkU5.js";
 import { m as z, r as U } from "../resolve-theme-color-BdojIw0K.js";
-import { p as V } from "../data-zoom-layout-CkVnm6ej.js";
+import { p as V } from "../data-zoom-layout-D_FYdnap.js";
 import { b as J } from "../png-item-9dNbB37T.js";
 import { b as K } from "../csv-item-hH_Gt7ur.js";
 function Q({

package/dist/widgets-v2/category.js

@@ -1,10 +1,10 @@
-import { C as N, a as P, b as $, c as z, d as G, e as L, f as M } from "../category-Dnd2_j0x.js";
+import { C as N, a as P, b as $, c as z, d as G, e as L, f as M } from "../category-CGS_eHr4.js";
 import { jsx as m, jsxs as g } from "react/jsx-runtime";
 import { c as d } from "react/compiler-runtime";
 import { Box as c, Skeleton as p } from "@mui/material";
 import "react";
 import "@mui/icons-material";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "html2canvas";

package/dist/widgets-v2/formula.js

@@ -5,7 +5,7 @@ import { c as l } from "react/compiler-runtime";
 import { Box as m, Skeleton as s } from "@mui/material";
 import "react";
 import "@mui/icons-material";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "html2canvas";

package/dist/widgets-v2/histogram.js

@@ -8,7 +8,7 @@ import "zustand/shallow";
 import "@mui/icons-material";
 import "react";
 import "html2canvas";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "@dnd-kit/core";
@@ -22,7 +22,7 @@ import "zustand/middleware";
 import "zustand/react/shallow";
 import { Z as _ } from "../transforms-Cdx4fkU5.js";
 import { m as V, r as J } from "../resolve-theme-color-BdojIw0K.js";
-import { p as K } from "../data-zoom-layout-CkVnm6ej.js";
+import { p as K } from "../data-zoom-layout-D_FYdnap.js";
 import { b as Q } from "../png-item-9dNbB37T.js";
 import { b as X } from "../csv-item-hH_Gt7ur.js";
 function tt({

package/dist/widgets-v2/markdown.js

@@ -4,7 +4,7 @@ import { c as s } from "react/compiler-runtime";
 import { Box as c, Skeleton as p } from "@mui/material";
 import "react";
 import "@mui/icons-material";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "html2canvas";

package/dist/widgets-v2/pie.js

@@ -8,7 +8,7 @@ import "zustand/shallow";
 import "@mui/icons-material";
 import "react";
 import "html2canvas";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "@dnd-kit/core";

package/dist/widgets-v2/scatterplot.js

@@ -8,7 +8,7 @@ import "zustand/shallow";
 import "@mui/icons-material";
 import "react";
 import "html2canvas";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "@dnd-kit/core";

package/dist/widgets-v2/spread.js

@@ -1,10 +1,10 @@
-import { S as R, a as B, b as P } from "../spread-DYNpzgh_.js";
+import { S as R, a as B, b as P } from "../spread-4MYPOntd.js";
 import { jsx as i } from "react/jsx-runtime";
 import { c as m } from "react/compiler-runtime";
 import { Box as p, Skeleton as l } from "@mui/material";
 import "react";
 import "@mui/icons-material";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "html2canvas";

package/dist/widgets-v2/table.js

@@ -1,11 +1,11 @@
-import { s, t as g } from "../table-B3ZWWhJt.js";
-import { D as q, a as J, b as K, T as M, c as Q, d as W, e as X, p as Y, r as ee, f as te } from "../table-B3ZWWhJt.js";
+import { s, t as g } from "../table-CTcLOycx.js";
+import { D as q, a as J, b as K, T as M, c as Q, d as W, e as X, p as Y, r as ee, f as te } from "../table-CTcLOycx.js";
 import { jsx as a, jsxs as _ } from "react/jsx-runtime";
 import { c as E } from "react/compiler-runtime";
 import { TableHead as w, TableRow as h, TableBody as x, TableCell as u, Skeleton as b, Box as A, Table as C } from "@mui/material";
 import "react";
 import "@mui/icons-material";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "html2canvas";

package/dist/widgets-v2/timeseries.js

@@ -8,7 +8,7 @@ import "zustand/shallow";
 import "@mui/icons-material";
 import "react";
 import "html2canvas";
-import "../lasso-tool-CDFj4zKY.js";
+import "../lasso-tool-YLFRgb-S.js";
 import "../cjs-D4KH3azB.js";
 import "@carto/ps-utils";
 import "@dnd-kit/core";
@@ -22,7 +22,7 @@ import "zustand/middleware";
 import "zustand/react/shallow";
 import { Z as B } from "../transforms-Cdx4fkU5.js";
 import { m as V, r as W } from "../resolve-theme-color-BdojIw0K.js";
-import { p as J } from "../data-zoom-layout-CkVnm6ej.js";
+import { p as J } from "../data-zoom-layout-D_FYdnap.js";
 import { b as Q } from "../png-item-9dNbB37T.js";
 import { b as X } from "../csv-item-hH_Gt7ur.js";
 function ee({

package/dist/widgets-v2/utils.js

@@ -1,5 +1,5 @@
 import { m as r, r as m } from "../resolve-theme-color-BdojIw0K.js";
-import { p as a } from "../data-zoom-layout-CkVnm6ej.js";
+import { p as a } from "../data-zoom-layout-D_FYdnap.js";
 export {
   r as mergeOptions,
   a as positionDataZoomForLegend,

package/dist/widgets-v2.js

@@ -9,21 +9,21 @@ import { ExpandMore as ze, Close as He } from "@mui/icons-material";
 import { S as Ve } from "./smart-tooltip-D4vwQpFf.js";
 import { createPortal as Ge } from "react-dom";
 import { WidgetOptions as qe } from "@carto/meridian-ds/custom-icons";
-import "./lasso-tool-CDFj4zKY.js";
+import "./lasso-tool-YLFRgb-S.js";
 import "./cjs-D4KH3azB.js";
 import { T as Xe } from "./tooltip-BDnrRKrp.js";
 import "@carto/ps-utils";
 import { o as Ze, a as Ke, E as Ye } from "./echart-Bdvbfx9s.js";
 import { D as Wn } from "./echart-Bdvbfx9s.js";
 import { a as Je, b as Qe, M as et } from "./markdown-BD1jcknS.js";
-import { C as tt, L as nt, F as ot, j as rt, R as it, B as lt, Z as st, m as at, n as ct, l as dt, k as ft } from "./change-column-DjjwoPt1.js";
+import { C as tt, L as nt, F as ot, j as rt, R as it, B as lt, Z as st, m as at, n as ct, l as dt, k as ft } from "./change-column-CiVAjOUB.js";
 import "html2canvas";
 import { a as pt, F as mt } from "./formula-DuC0NQLH.js";
 import "react-markdown";
-import { b as ut, a as gt } from "./spread-DYNpzgh_.js";
+import { b as ut, a as gt } from "./spread-4MYPOntd.js";
 import { a as ht, R as yt } from "./range-l4fNHLEg.js";
-import { f as xt, C as bt } from "./category-Dnd2_j0x.js";
-import { c as vt, T as St } from "./table-B3ZWWhJt.js";
+import { f as xt, C as bt } from "./category-CGS_eHr4.js";
+import { c as vt, T as St } from "./table-CTcLOycx.js";
 function wt(t) {
   const e = T(31), {
     id: n,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.12.2",
+  "version": "4.14.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -31,8 +31,8 @@
     "@mui/x-date-pickers": "^7.0.0",
     "echarts": "^6.0.0",
     "html2canvas": "^1.4.1",
-    "react": "^18.0.0 || ^19.0.0",
-    "react-dom": "^18.0.0 || ^19.0.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
     "react-markdown": "^10.0.0",
     "zustand": "^5.0.0",
     "@carto/ps-utils": "2.0.1"
@@ -46,6 +46,14 @@
       "import": "./dist/components.js",
       "types": "./dist/types/components/index.d.ts"
     },
+    "./legend": {
+      "import": "./dist/legend.js",
+      "types": "./dist/types/legend/index.d.ts"
+    },
+    "./legend/stores": {
+      "import": "./dist/legend/stores.js",
+      "types": "./dist/types/legend/stores/index.d.ts"
+    },
     "./widgets/actions": {
       "import": "./dist/widgets/actions.js",
       "types": "./dist/types/widgets/actions/index.d.ts"

package/src/components/geolocation-controls/geolocation-controls.test.tsx

@@ -111,6 +111,21 @@ describe('GeolocationControls', () => {
     expect(mockOnChange).toHaveBeenCalledWith(mockPosition.coords)
   })
 
+  test('does not re-query permissions when only the onError identity changes', () => {
+    mockPermissions.query.mockResolvedValue(mockPermissions)
+
+    const { rerender } = render(
+      <GeolocationControls onChange={mockOnChange} onError={vi.fn()} />,
+    )
+    expect(mockPermissions.query).toHaveBeenCalledTimes(1)
+
+    // `onError` is read through an Effect Event, so the permission-query
+    // effect depends on `hasGeolocation` alone. A fresh callback identity
+    // must NOT re-run the query or re-register the permission listener.
+    rerender(<GeolocationControls onChange={mockOnChange} onError={vi.fn()} />)
+    expect(mockPermissions.query).toHaveBeenCalledTimes(1)
+  })
+
   test('handles geolocation errors', () => {
     mockPermissions.query.mockResolvedValue(mockPermissions)
 

package/src/components/geolocation-controls/geolocation-controls.tsx

@@ -4,7 +4,14 @@ import {
   LocationDisabledOutlined,
 } from '@mui/icons-material'
 import type { GeolocationControlProps } from './types'
-import { useCallback, useEffect, useReducer, useRef, type JSX } from 'react'
+import {
+  useCallback,
+  useEffect,
+  useEffectEvent,
+  useReducer,
+  useRef,
+  type JSX,
+} from 'react'
 import { ariaLabel, tooltipLabelsDefault } from './const'
 import { Tooltip } from '../tooltip/tooltip'
 
@@ -36,6 +43,15 @@ export function GeolocationControls({
     hasGeolocation,
   )
 
+  // Read the latest `onError` without making the permission-query effect
+  // re-run (and re-register the `result.onchange` permission listener)
+  // whenever the consumer passes a fresh callback identity.
+  const notifyError = useEffectEvent(
+    (error: Parameters<PositionErrorCallback>[0]): void => {
+      onError?.(error)
+    },
+  )
+
   useEffect(() => {
     if (hasGeolocation) {
       navigator.permissions
@@ -48,7 +64,7 @@ export function GeolocationControls({
         })
         .catch((error: Parameters<PositionErrorCallback>[0]) => {
           dispatch('denied')
-          onError?.(error)
+          notifyError(error)
         })
     }
 
@@ -57,7 +73,7 @@ export function GeolocationControls({
         navigator.geolocation.clearWatch(watchRef.current)
       }
     }
-  }, [hasGeolocation, onError])
+  }, [hasGeolocation])
 
   const success = useCallback(
     (position: Parameters<PositionCallback>[0]) => {

package/src/components/index.ts

@@ -24,9 +24,15 @@ export type {
 export type {
   LassoToolsComponentProps,
   LassoToolsInlineComponentProps,
+  LassoGeometryToolbarUIProps,
+  LassoGeometryType,
+  LassoLayerFiltersUIProps,
+  LassoLayerFilterItem,
 } from './lasso-tool/types'
 export { LassoToolsUI } from './lasso-tool/lasso-tool'
 export { LassoToolsInlineUI } from './lasso-tool/lasso-tool-inline'
+export { LassoGeometryToolbarUI } from './lasso-tool/geometry-toolbar'
+export { LassoLayerFiltersUI } from './lasso-tool/layer-filters'
 export {
   DEFAULT_LASSO_TOOLS_MODES_MAPPING,
   LASSO_TOOLS_LABELS,
@@ -37,6 +43,8 @@ export {
   DrawPolygonIcon,
   DrawSquareIcon,
   SelectToolIcon,
+  SpatialMaskIcon,
+  TextAaIcon,
 } from './lasso-tool/icons'
 
 export type { MeasurementToolsComponentProps } from './measurement-tools/types'
@@ -63,5 +71,7 @@ export type { BasemapsUIProps } from './basemaps/types'
 export { Tooltip, setTooltipEnterDelay } from './tooltip/tooltip'
 export { SmartTooltip } from './smart-tooltip/smart-tooltip'
 
+export { ResponsiveDrawer } from './responsive-drawer/responsive-drawer'
+
 export type { CopyButtonProps } from './copy-button/types'
 export { CopyButton } from './copy-button/copy-button'

package/src/components/lasso-tool/const.tsx

@@ -35,6 +35,7 @@ export const LASSO_TOOLS_LABELS: NonNullable<
         edit: 'Edit feature',
       },
     },
+    layerFilters: 'Layer filters',
   },
   noData: {
     title: 'Spatial filter not applied',

package/src/components/lasso-tool/geometry-toolbar.test.tsx

@@ -0,0 +1,138 @@
+/**
+ * Tests for LassoGeometryToolbarUI — type toggle, rename popover (Enter/blur
+ * commit, no-op on empty/unchanged), lock toggle, delete, and the locked
+ * read-only behavior (every action but unlock disabled).
+ */
+import { describe, it, expect, vi } from 'vitest'
+import { render, fireEvent, screen } from '@testing-library/react'
+import { LassoGeometryToolbarUI } from './geometry-toolbar'
+
+function setup(
+  props: Partial<Parameters<typeof LassoGeometryToolbarUI>[0]> = {},
+) {
+  const handlers = {
+    onToggleType: vi.fn(),
+    onRename: vi.fn(),
+    onToggleLock: vi.fn(),
+    onDelete: vi.fn(),
+  }
+  render(
+    <LassoGeometryToolbarUI
+      type='mask'
+      label='Mask 1'
+      {...handlers}
+      {...props}
+    />,
+  )
+  return handlers
+}
+
+describe('LassoGeometryToolbarUI', () => {
+  it('toggles mask -> draw', () => {
+    const { onToggleType } = setup({ type: 'mask' })
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to drawing' }))
+    expect(onToggleType).toHaveBeenCalledWith('draw')
+  })
+
+  it('toggles draw -> mask', () => {
+    const { onToggleType } = setup({ type: 'draw' })
+    fireEvent.click(screen.getByRole('button', { name: 'Switch to mask' }))
+    expect(onToggleType).toHaveBeenCalledWith('mask')
+  })
+
+  it('marks the mask button pressed when type is mask', () => {
+    setup({ type: 'mask' })
+    expect(
+      screen
+        .getByRole('button', { name: 'Switch to drawing' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true')
+  })
+
+  it('marks the mask button not-pressed when type is draw', () => {
+    setup({ type: 'draw' })
+    expect(
+      screen
+        .getByRole('button', { name: 'Switch to mask' })
+        .getAttribute('aria-pressed'),
+    ).toBe('false')
+  })
+
+  it('marks the lock button pressed when locked', () => {
+    setup({ locked: true })
+    expect(
+      screen
+        .getByRole('button', { name: 'Unlock' })
+        .getAttribute('aria-pressed'),
+    ).toBe('true')
+  })
+
+  it('commits a new label on Enter', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).toHaveBeenCalledWith('Downtown')
+  })
+
+  it('does not call onRename when the label is unchanged', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.keyDown(input, { key: 'Enter' })
+    expect(onRename).not.toHaveBeenCalled()
+  })
+
+  it('commits the rename only once (blur after Enter does not double-fire)', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    fireEvent.keyDown(input, { key: 'Enter' })
+    fireEvent.blur(input)
+    expect(onRename).toHaveBeenCalledTimes(1)
+  })
+
+  it('discards the rename on Escape (does not call onRename)', () => {
+    const { onRename } = setup({ label: 'Mask 1' })
+    fireEvent.click(screen.getByRole('button', { name: 'Rename' }))
+    const input = screen.getByRole('textbox')
+    fireEvent.change(input, { target: { value: 'Downtown' } })
+    fireEvent.keyDown(input, { key: 'Escape' })
+    fireEvent.blur(input)
+    expect(onRename).not.toHaveBeenCalled()
+  })
+
+  it('locks an unlocked geometry', () => {
+    const { onToggleLock } = setup({ locked: false })
+    fireEvent.click(screen.getByRole('button', { name: 'Lock' }))
+    expect(onToggleLock).toHaveBeenCalledWith(true)
+  })
+
+  it('unlocks a locked geometry', () => {
+    const { onToggleLock } = setup({ locked: true })
+    fireEvent.click(screen.getByRole('button', { name: 'Unlock' }))
+    expect(onToggleLock).toHaveBeenCalledWith(false)
+  })
+
+  it('deletes the geometry', () => {
+    const { onDelete } = setup()
+    fireEvent.click(screen.getByRole('button', { name: 'Delete' }))
+    expect(onDelete).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables every action but unlock when locked', () => {
+    const handlers = setup({ locked: true })
+    const disabled = (name: string) =>
+      screen.getByRole('button', { name }).hasAttribute('disabled')
+    expect(disabled('Switch to drawing')).toBe(true)
+    expect(disabled('Rename')).toBe(true)
+    expect(disabled('Delete')).toBe(true)
+    // Unlock stays enabled.
+    const unlock = screen.getByRole('button', { name: 'Unlock' })
+    expect(unlock.hasAttribute('disabled')).toBe(false)
+    fireEvent.click(unlock)
+    expect(handlers.onToggleLock).toHaveBeenCalledWith(false)
+  })
+})