@carto/ps-react-ui 4.5.0 → 4.6.0

package/dist/widgets/stores.js

@@ -1,5 +1,5 @@
-import { u as o, w as r } from "../widget-store-CIrb9RKP.js";
-import { u as i } from "../use-widget-selector-DqRmWQ1K.js";
+import { u as o, w as r } from "../widget-store-Bw5zRUGg.js";
+import { u as i } from "../use-widget-selector-DFl2hW0R.js";
 export {
   i as useWidgetSelector,
   o as useWidgetStore,

package/dist/widgets/subheader.js

@@ -1,16 +1,16 @@
-import { jsx as g, jsxs as m } from "react/jsx-runtime";
-import { c as d } from "react/compiler-runtime";
-import { Box as x } from "@mui/material";
-const c = {
+import { jsx as c, jsxs as g } from "react/jsx-runtime";
+import { c as x } from "react/compiler-runtime";
+import { Box as a } from "@mui/material";
+const d = {
   root: {
     display: "flex",
     alignItems: "center",
     gap: ({
-      spacing: e
-    }) => e(1),
+      spacing: t
+    }) => t(1),
     minHeight: ({
-      spacing: e
-    }) => e(3)
+      spacing: t
+    }) => t(3)
   },
   slotLeft: {
     flexShrink: 0
@@ -21,30 +21,30 @@ const c = {
     justifyContent: "flex-end",
     alignItems: "center",
     gap: ({
-      spacing: e
-    }) => e(1)
+      spacing: t
+    }) => t(1)
   }
 };
-function u(e) {
-  const t = d(10), {
-    slotLeft: i,
-    slotRight: n,
-    sx: f
-  } = e;
-  let l;
-  t[0] !== f ? (l = {
-    ...c.root,
-    ...f
-  }, t[0] = f, t[1] = l) : l = t[1];
+function u(t) {
+  const e = x(10), {
+    slotLeft: o,
+    slotRight: r,
+    sx: n
+  } = t;
   let s;
-  t[2] !== i ? (s = i && /* @__PURE__ */ g(x, { sx: c.slotLeft, children: i }), t[2] = i, t[3] = s) : s = t[3];
-  let o;
-  t[4] !== n ? (o = /* @__PURE__ */ g(x, { sx: c.slotRight, children: n }), t[4] = n, t[5] = o) : o = t[5];
-  let r;
-  return t[6] !== l || t[7] !== s || t[8] !== o ? (r = /* @__PURE__ */ m(x, { sx: l, children: [
-    s,
-    o
-  ] }), t[6] = l, t[7] = s, t[8] = o, t[9] = r) : r = t[9], r;
+  e[0] !== n ? (s = {
+    ...d.root,
+    ...n
+  }, e[0] = n, e[1] = s) : s = e[1];
+  let l;
+  e[2] !== o ? (l = o && /* @__PURE__ */ c(a, { sx: d.slotLeft, className: "widget-subheader-slot-left", children: o }), e[2] = o, e[3] = l) : l = e[3];
+  let i;
+  e[4] !== r ? (i = r && /* @__PURE__ */ c(a, { sx: d.slotRight, className: "widget-subheader-slot-right", children: r }), e[4] = r, e[5] = i) : i = e[5];
+  let f;
+  return e[6] !== s || e[7] !== l || e[8] !== i ? (f = /* @__PURE__ */ g(a, { sx: s, className: "widget-subheader", children: [
+    l,
+    i
+  ] }), e[6] = s, e[7] = l, e[8] = i, e[9] = f) : f = e[9], f;
 }
 export {
   u as WidgetSubHeader

package/dist/widgets/subheader.js.map

@@ -1 +1 @@
-{"version":3,"file":"subheader.js","sources":["../../src/widgets/subheader/style.ts","../../src/widgets/subheader/subheader.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(1),\n    minHeight: ({ spacing }) => spacing(3),\n  },\n  slotLeft: {\n    flexShrink: 0,\n  },\n  slotRight: {\n    flexGrow: 1,\n    display: 'flex',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(1),\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { Box } from '@mui/material'\nimport { styles } from './style'\nimport type { WidgetSubHeaderProps } from './types'\n\n/**\n * Flexible two-slot layout for displaying supplementary widget information such as totals, timestamps, or controls. Uses flexbox with space-between justification.\n *\n * @example\n * ```tsx\n * <WidgetSubHeader\n *   slotLeft={<Typography variant=\"caption\">Total: 1,234</Typography>}\n *   slotRight={<Typography variant=\"caption\">Updated: 2m ago</Typography>}\n * />\n * ```\n */\nexport function WidgetSubHeader({\n  slotLeft,\n  slotRight,\n  sx,\n}: WidgetSubHeaderProps) {\n  return (\n    <Box sx={{ ...styles.root, ...sx }}>\n      {slotLeft && <Box sx={styles.slotLeft}>{slotLeft}</Box>}\n      <Box sx={styles.slotRight}>{slotRight}</Box>\n    </Box>\n  )\n}\n"],"names":["styles","root","display","alignItems","gap","spacing","minHeight","slotLeft","flexShrink","slotRight","flexGrow","justifyContent","WidgetSubHeader","t0","$","_c","sx","t1","t2","jsx","Box","t3","t4"],"mappings":";;;AAEO,MAAMA,IAAS;AAAA,EACpBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,KAAKA,CAAC;AAAA,MAAEC,SAAAA;AAAAA,IAAAA,MAAcA,EAAQ,CAAC;AAAA,IAC/BC,WAAWA,CAAC;AAAA,MAAED,SAAAA;AAAAA,IAAAA,MAAcA,EAAQ,CAAC;AAAA,EAAA;AAAA,EAEvCE,UAAU;AAAA,IACRC,YAAY;AAAA,EAAA;AAAA,EAEdC,WAAW;AAAA,IACTC,UAAU;AAAA,IACVR,SAAS;AAAA,IACTS,gBAAgB;AAAA,IAChBR,YAAY;AAAA,IACZC,KAAKA,CAAC;AAAA,MAAEC,SAAAA;AAAAA,IAAAA,MAAcA,EAAQ,CAAC;AAAA,EAAA;AAEnC;ACJO,SAAAO,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAyB;AAAA,IAAAR,UAAAA;AAAAA,IAAAE,WAAAA;AAAAA,IAAAO,IAAAA;AAAAA,EAAAA,IAAAH;AAIT,MAAAI;AAAA,EAAAH,SAAAE,KAEVC,IAAA;AAAA,IAAA,GAAKjB,EAAMC;AAAAA,IAAK,GAAKe;AAAAA,EAAAA,GAAIF,OAAAE,GAAAF,OAAAG,KAAAA,IAAAH,EAAA,CAAA;AAAA,MAAAI;AAAA,EAAAJ,SAAAP,KAC/BW,IAAAX,KAAY,gBAAAY,EAACC,GAAA,EAAQ,IAAApB,EAAMO,uBAAqB,GAAMO,OAAAP,GAAAO,OAAAI,KAAAA,IAAAJ,EAAA,CAAA;AAAA,MAAAO;AAAA,EAAAP,SAAAL,KACvDY,IAAA,gBAAAF,EAACC,GAAA,EAAQ,IAAApB,EAAMS,WAAaA,UAAAA,GAAU,GAAMK,OAAAL,GAAAK,OAAAO,KAAAA,IAAAP,EAAA,CAAA;AAAA,MAAAQ;AAAA,SAAAR,EAAA,CAAA,MAAAG,KAAAH,SAAAI,KAAAJ,EAAA,CAAA,MAAAO,KAF9CC,sBAACF,GAAA,EAAQ,IAAAH,GACNC,UAAAA;AAAAA,IAAAA;AAAAA,IACDG;AAAAA,EAAAA,GACF,GAAMP,OAAAG,GAAAH,OAAAI,GAAAJ,OAAAO,GAAAP,OAAAQ,KAAAA,IAAAR,EAAA,CAAA,GAHNQ;AAGM;"}
+{"version":3,"file":"subheader.js","sources":["../../src/widgets/subheader/style.ts","../../src/widgets/subheader/subheader.tsx"],"sourcesContent":["import type { SxProps, Theme } from '@mui/material'\n\nexport const styles = {\n  root: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(1),\n    minHeight: ({ spacing }) => spacing(3),\n  },\n  slotLeft: {\n    flexShrink: 0,\n  },\n  slotRight: {\n    flexGrow: 1,\n    display: 'flex',\n    justifyContent: 'flex-end',\n    alignItems: 'center',\n    gap: ({ spacing }) => spacing(1),\n  },\n} satisfies Record<string, SxProps<Theme>>\n","import { Box } from '@mui/material'\nimport { styles } from './style'\nimport type { WidgetSubHeaderProps } from './types'\n\n/**\n * Flexible two-slot layout for displaying supplementary widget information such as totals, timestamps, or controls. Uses flexbox with space-between justification.\n *\n * @example\n * ```tsx\n * <WidgetSubHeader\n *   slotLeft={<Typography variant=\"caption\">Total: 1,234</Typography>}\n *   slotRight={<Typography variant=\"caption\">Updated: 2m ago</Typography>}\n * />\n * ```\n */\nexport function WidgetSubHeader({\n  slotLeft,\n  slotRight,\n  sx,\n}: WidgetSubHeaderProps) {\n  return (\n    <Box sx={{ ...styles.root, ...sx }} className='widget-subheader'>\n      {slotLeft && (\n        <Box sx={styles.slotLeft} className='widget-subheader-slot-left'>\n          {slotLeft}\n        </Box>\n      )}\n      {slotRight && (\n        <Box sx={styles.slotRight} className='widget-subheader-slot-right'>\n          {slotRight}\n        </Box>\n      )}\n    </Box>\n  )\n}\n"],"names":["styles","root","display","alignItems","gap","spacing","minHeight","slotLeft","flexShrink","slotRight","flexGrow","justifyContent","WidgetSubHeader","t0","$","_c","sx","t1","t2","Box","t3","t4","jsxs"],"mappings":";;;AAEO,MAAMA,IAAS;AAAA,EACpBC,MAAM;AAAA,IACJC,SAAS;AAAA,IACTC,YAAY;AAAA,IACZC,KAAKA,CAAC;AAAA,MAAEC,SAAAA;AAAAA,IAAAA,MAAcA,EAAQ,CAAC;AAAA,IAC/BC,WAAWA,CAAC;AAAA,MAAED,SAAAA;AAAAA,IAAAA,MAAcA,EAAQ,CAAC;AAAA,EAAA;AAAA,EAEvCE,UAAU;AAAA,IACRC,YAAY;AAAA,EAAA;AAAA,EAEdC,WAAW;AAAA,IACTC,UAAU;AAAA,IACVR,SAAS;AAAA,IACTS,gBAAgB;AAAA,IAChBR,YAAY;AAAA,IACZC,KAAKA,CAAC;AAAA,MAAEC,SAAAA;AAAAA,IAAAA,MAAcA,EAAQ,CAAC;AAAA,EAAA;AAEnC;ACJO,SAAAO,EAAAC,GAAA;AAAA,QAAAC,IAAAC,EAAA,EAAA,GAAyB;AAAA,IAAAR,UAAAA;AAAAA,IAAAE,WAAAA;AAAAA,IAAAO,IAAAA;AAAAA,EAAAA,IAAAH;AAIT,MAAAI;AAAA,EAAAH,SAAAE,KAEVC,IAAA;AAAA,IAAA,GAAKjB,EAAMC;AAAAA,IAAK,GAAKe;AAAAA,EAAAA,GAAIF,OAAAE,GAAAF,OAAAG,KAAAA,IAAAH,EAAA,CAAA;AAAA,MAAAI;AAAA,EAAAJ,SAAAP,KAC/BW,IAAAX,uBACEY,GAAA,EAAQ,IAAAnB,EAAMO,UAAqB,WAAA,8BACjCA,UAAAA,EAAAA,CACH,GACDO,OAAAP,GAAAO,OAAAI,KAAAA,IAAAJ,EAAA,CAAA;AAAA,MAAAM;AAAA,EAAAN,SAAAL,KACAW,IAAAX,uBACEU,GAAA,EAAQ,IAAAnB,EAAMS,WAAsB,WAAA,+BAClCA,UAAAA,EAAAA,CACH,GACDK,OAAAL,GAAAK,OAAAM,KAAAA,IAAAN,EAAA,CAAA;AAAA,MAAAO;AAAA,SAAAP,EAAA,CAAA,MAAAG,KAAAH,SAAAI,KAAAJ,EAAA,CAAA,MAAAM,KAVHC,IAAA,gBAAAC,EAACH,GAAA,EAAQ,IAAAF,GAAqC,WAAA,oBAC3CC,UAAAA;AAAAA,IAAAA;AAAAA,IAKAE;AAAAA,EAAAA,GAKH,GAAMN,OAAAG,GAAAH,OAAAI,GAAAJ,OAAAM,GAAAN,OAAAO,KAAAA,IAAAP,EAAA,CAAA,GAXNO;AAWM;"}

package/dist/widgets/table.js

@@ -6,10 +6,10 @@ import se from "@mui/icons-material/FirstPage";
 import ce from "@mui/icons-material/KeyboardArrowLeft";
 import ae from "@mui/icons-material/KeyboardArrowRight";
 import fe from "@mui/icons-material/LastPage";
+import { u as de } from "../use-widget-ref-Ddr_SlJJ.js";
 import "react";
-import { u as de } from "../use-widget-ref-BFazQvJK.js";
-import { w as x } from "../widget-store-CIrb9RKP.js";
-import { u as B } from "../use-widget-selector-DqRmWQ1K.js";
+import { w as x } from "../widget-store-Bw5zRUGg.js";
+import { u as B } from "../use-widget-selector-DFl2hW0R.js";
 import "zustand/shallow";
 import "@mui/icons-material";
 import { d as J, a as F } from "../exports-Cr43OCul.js";

package/dist/widgets/timeseries.js

@@ -2,11 +2,11 @@ import { jsxs as m, jsx as r } from "react/jsx-runtime";
 import { c as y } from "react/compiler-runtime";
 import "react";
 import "echarts";
-import "../widget-store-CIrb9RKP.js";
+import "../widget-store-Bw5zRUGg.js";
 import "zustand/shallow";
 import { g as b } from "../options-D9wflre6.js";
 import { m as k } from "../utils-BOhInag6.js";
-import { c as v, f as w } from "../download-config-DemuQ3Jm.js";
+import { c as v, f as w } from "../download-config-C3I0jWIL.js";
 import { g as L, b as C, a as I, d as S, e as _, c as A } from "../styles-Y8q7Jff3.js";
 import { Box as l, Skeleton as s } from "@mui/material";
 const Y = v(w);

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-DemuQ3Jm.js";
+import { c as f, f as p, s as c } from "../download-config-C3I0jWIL.js";
 import { a as m, b as u, c as C, d as b, e as x, f as g, g as F, h as y, n as A } from "../styles-Y8q7Jff3.js";
 function r({
   type: a,

package/dist/widgets/wrapper.js

@@ -6,8 +6,8 @@ import { useState as H, useLayoutEffect as G } from "react";
 import "../lasso-tool-BYbxrJ-7.js";
 import "../cjs-D4KH3azB.js";
 import { S as U } from "../smart-tooltip-D4vwQpFf.js";
-import { u as V } from "../use-widget-selector-DqRmWQ1K.js";
-import { w as M } from "../widget-store-CIrb9RKP.js";
+import { u as V } from "../use-widget-selector-DFl2hW0R.js";
+import { w as M } from "../widget-store-Bw5zRUGg.js";
 const k = {
   root: {
     ".Mui-disabled .MuiAccordionSummary-expandIconWrapper": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carto/ps-react-ui",
-  "version": "4.5.0",
+  "version": "4.6.0",
   "description": "CARTO's Professional Service React Material library",
   "type": "module",
   "devDependencies": {
@@ -38,10 +38,6 @@
       "import": "./dist/components.js",
       "types": "./dist/types/components/index.d.ts"
     },
-    "./widgets": {
-      "import": "./dist/widgets.js",
-      "types": "./dist/types/widgets/index.d.ts"
-    },
     "./widgets/actions": {
       "import": "./dist/widgets/actions.js",
       "types": "./dist/types/widgets/actions/index.d.ts"

package/src/hooks/index.ts

@@ -1,2 +1 @@
-export { useDebounce } from './use-debounce'
 export { useWidgetRef } from './use-widget-ref'

package/src/widgets/actions/brush-toggle/brush-toggle.tsx

@@ -2,7 +2,7 @@ import { Box, IconButton } from '@mui/material'
 import { HighlightAltOutlined } from '@mui/icons-material'
 import { useEffect, useCallback, useRef } from 'react'
 import { widgetStoreActions } from '../../stores/widget-store'
-import type { BrushSelectedItems, BrushToggleProps } from './types'
+import type { BrushSelectedItems, BrushToggleProps, BrushState } from './types'
 import { styles } from './style'
 import { Tooltip } from '../../../components'
 import { getEChartBrushConfig } from '../../echart/utils'
@@ -17,6 +17,9 @@ export const BRUSH_TOGGLE_TOOL_ID = 'brush-toggle'
  * Registers as a config pipeline tool so that brush configuration is automatically
  * re-applied when the base config is updated (e.g., by WidgetLoader).
  *
+ * Brush state is stored in the widget store root, and the tool derives its
+ * `enabled` flag from the store. This keeps state accessible across component instances.
+ *
  * When brush is active, users can drag across bars to select a range.
  * Selection clearing is handled via the chart's brush interactions/toolbox configuration.
  * Only intended for use in fullscreen ToolbarActions for bar and histogram widgets.
@@ -38,26 +41,19 @@ export function BrushToggle({
 }: BrushToggleProps) {
   const selected = useRef<BrushSelectedItems>({ dataIndex: [], seriesIndex: 0 })
 
+  // Read brush state from widget store root — single source of truth
   const { brush } = useWidgetSelector(id, (w) => ({
-    brush: w?.registeredTools?.find((tool) => tool.id === BRUSH_TOGGLE_TOOL_ID)
-      ?.enabled,
+    brush: (w as BrushState | undefined)?.brush ?? false,
   }))
 
-  const toggleTool = useCallback(
-    (value: boolean) => {
-      widgetStoreActions.setToolEnabled(id, BRUSH_TOGGLE_TOOL_ID, value)
-    },
-    [id],
-  )
-
   const handleToggle = useCallback(() => {
     const newBrush = !brush
-    toggleTool(newBrush)
+    widgetStoreActions.setWidget(id, { brush: newBrush })
 
     if (newBrush) {
       onBrushSelected?.({ dataIndex: [], seriesIndex: 0 }) // Clear selection when enabling brush
     }
-  }, [brush, onBrushSelected, toggleTool])
+  }, [brush, id, onBrushSelected])
 
   // Re-dispatch brush action after every ECharts render while brush is active
   useEffect(() => {
@@ -135,22 +131,17 @@ export function BrushToggle({
 
   const handleBrushEnd = useCallback(() => {
     onBrushSelected?.(selected.current)
-    toggleTool(false) // Disable brush after selection is made
-  }, [onBrushSelected, toggleTool])
+    widgetStoreActions.setWidget(id, { brush: false }) // Disable brush after selection is made
+  }, [onBrushSelected, id])
 
-  // Register config tool with all reactive deps — store's no-op detection handles performance
+  // Register config tool once — fn closure depends on event handlers.
+  // Enabled is synced separately to avoid full re-registration on toggle.
   useEffect(() => {
-    const existingTool = widgetStoreActions
-      .getWidget(id)
-      ?.registeredTools?.find((tool) => tool.id === BRUSH_TOGGLE_TOOL_ID)
-
-    const initialEnabled = existingTool?.enabled ?? false
-
     widgetStoreActions.registerTool(id, {
       id: BRUSH_TOGGLE_TOOL_ID,
       type: 'config',
       order: 25,
-      enabled: initialEnabled,
+      enabled: false,
       fn: (currentConfig) => {
         const config = currentConfig as Record<string, unknown>
         const option = config.option as EchartOptionsProps | undefined
@@ -178,6 +169,11 @@ export function BrushToggle({
     return () => widgetStoreActions.unregisterTool(id, BRUSH_TOGGLE_TOOL_ID)
   }, [id, handleBrushSelected, handleBrushEnd])
 
+  // Sync enabled from store — lightweight, no re-registration
+  useEffect(() => {
+    widgetStoreActions.setToolEnabled(id, BRUSH_TOGGLE_TOOL_ID, brush)
+  }, [id, brush])
+
   const enableLabel = labels?.enable ?? 'Enable brush selection'
   const disableLabel = labels?.disable ?? 'Disable brush selection'
   const tooltipLabel = brush ? disableLabel : enableLabel

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

@@ -217,7 +217,7 @@ describe('ChangeColumn', () => {
 
       // When config columns match widget columns, fn returns the same reference
       const input = { columns: mockColumns }
-      const result = tool?.fn(input, tool.config)
+      const result = tool?.fn(input)
       expect(result).toBe(input)
     })
 

package/src/widgets/actions/download/download.test.tsx

@@ -1,7 +1,7 @@
 import { describe, test, expect, beforeEach, vi } from 'vitest'
 import { render, screen, fireEvent, waitFor } from '@testing-library/react'
 import { Download } from './download'
-import { useWidgetStore } from '../../../widgets'
+import { useWidgetStore } from '../../../widgets/stores'
 import type { DownloadItem } from './types'
 
 describe('Download', () => {

package/src/widgets/actions/index.ts

@@ -1,6 +1,10 @@
 /* Fullscreen Widget */
 export { FullScreen } from './fullscreen/fullscreen'
-export type { FullScreenState, FullScreenConfig } from './fullscreen/types'
+export type {
+  FullScreenState,
+  FullScreenConfig,
+  FullScreenProps,
+} from './fullscreen/types'
 
 /* Download Widget */
 export { Download } from './download/download'
@@ -13,7 +17,10 @@ export {
   RELATIVE_DATA_TOOL_ID,
   RELATIVE_DATA_CONFIG_TOOL_ID,
 } from './relative-data/relative-data'
-export type { RelativeDataProps } from './relative-data/types'
+export type {
+  RelativeDataProps,
+  RelativeDataState,
+} from './relative-data/types'
 
 /* Zoom Toggle Widget */
 export { ZoomToggle, ZOOM_TOGGLE_TOOL_ID } from './zoom-toggle/zoom-toggle'
@@ -35,6 +42,7 @@ export type {
   SearcherProps,
   SearcherFilterFn,
   SearcherState,
+  SearcherStateProps,
 } from './searcher/types'
 
 /* Change Column Widget */
@@ -52,6 +60,7 @@ export {
 export type {
   LockSelectionProps,
   LockSelectionState,
+  LockSelectionStateProps,
 } from './lock-selection/types'
 
 /* Brush Toggle Widget */

package/src/widgets/actions/lock-selection/lock-selection.test.tsx

@@ -3,6 +3,7 @@ import { render, screen, fireEvent } from '@testing-library/react'
 import { LockSelection, LOCK_SELECTION_TOOL_ID } from './lock-selection'
 import { useWidgetStore } from '../../stores/widget-store'
 import type { EchartWidgetData } from '../../echart/types'
+import type { LockSelectionState } from './types'
 import { WidgetLoader } from '../../loader/loader'
 
 // Test data
@@ -110,6 +111,19 @@ describe('LockSelection', () => {
     expect(tool?.enabled).toBe(false)
   })
 
+  test('clears lock state when selectedItems becomes empty while locked', () => {
+    // Simulate remount: isLocked persists in store but selectedItems is now empty
+    useWidgetStore
+      .getState()
+      .setWidget(widgetId, { isLocked: true, lockedItems: ['Electronics'] })
+
+    render(<LockSelection id={widgetId} selectedItems={[]} />)
+
+    const widget = useWidgetStore.getState().getWidget(widgetId)
+    expect((widget as LockSelectionState | undefined)?.isLocked).toBe(false)
+    expect((widget as LockSelectionState | undefined)?.lockedItems).toEqual([])
+  })
+
   test('has active state when locked', () => {
     render(<LockSelection id={widgetId} selectedItems={['Electronics']} />)
 

package/src/widgets/actions/lock-selection/lock-selection.tsx

@@ -1,6 +1,6 @@
 import { IconButton } from '@mui/material'
 import { CheckBoxOutlined } from '@mui/icons-material'
-import { useCallback, useEffect, useMemo } from 'react'
+import { useCallback, useEffect } from 'react'
 import type { LockSelectionProps, LockSelectionState } from './types'
 import { actionButtonStyles } from '../shared/styles'
 import { Tooltip } from '../../../components'
@@ -39,28 +39,35 @@ export function LockSelection({
   }))
 
   const isLocked = storeIsLocked ?? false
-  const lockedItems = useMemo(
-    () => (isLocked ? selectedItems : []),
-    [isLocked, selectedItems],
-  )
 
-  // Register tool with all reactive deps — store's no-op detection handles performance
+  // Register tool once — fn reads lockedItems from the store at execution time
   useEffect(() => {
     widgetStoreActions.registerTool(id, {
       id: LOCK_SELECTION_TOOL_ID,
       order,
-      enabled: isLocked,
-      fn: (data, config) => {
-        const items = (config?.lockedItems as string[]) || []
+      enabled: false,
+      fn: (data) => {
+        const widget = widgetStoreActions.getWidget<LockSelectionState>(id)
+        const items = widget?.lockedItems ?? []
         if (items.length === 0) return data
 
         return filterDataByLockedItems(data as EchartWidgetData, items)
       },
-      config: { lockedItems },
     })
 
     return () => widgetStoreActions.unregisterTool(id, LOCK_SELECTION_TOOL_ID)
-  }, [id, order, isLocked, lockedItems])
+  }, [id, order])
+
+  // Sync enabled from store — lightweight, no re-registration.
+  // When selectedItems is empty (e.g., remount with no active selection),
+  // disable the tool and clear stale lock state.
+  useEffect(() => {
+    if (isLocked && selectedItems.length === 0) {
+      widgetStoreActions.setWidget(id, { isLocked: false, lockedItems: [] })
+      return
+    }
+    widgetStoreActions.setToolEnabled(id, LOCK_SELECTION_TOOL_ID, isLocked)
+  }, [id, isLocked, selectedItems.length])
 
   const handleToggle = useCallback(() => {
     if (isLocked) {

package/src/widgets/actions/lock-selection/types.ts

@@ -38,4 +38,6 @@ export interface LockSelectionProps {
 export interface LockSelectionStateProps {
   /** Whether the selection is currently locked */
   isLocked?: boolean
+  /** Items locked for filtering */
+  lockedItems?: string[]
 }