diff --git a/packages/components/src/tools-panel/tools-panel-item/hook.ts b/packages/components/src/tools-panel/tools-panel-item/hook.ts index fe415b8723a88..4026777296c10 100644 --- a/packages/components/src/tools-panel/tools-panel-item/hook.ts +++ b/packages/components/src/tools-panel/tools-panel-item/hook.ts @@ -125,17 +125,11 @@ export function useToolsPanelItem( const isRegistered = menuItems?.[ menuGroup ]?.[ label ] !== undefined; const isValueSet = hasValue(); - const wasValueSet = usePrevious( isValueSet ); - const newValueSet = isValueSet && ! wasValueSet; - - // Notify the panel when an item's value has been set. - useEffect( () => { - if ( ! newValueSet ) { - return; - } - - flagItemCustomization( label, menuGroup ); - }, [ newValueSet, menuGroup, label, flagItemCustomization ] ); + // Notify the panel when an item's value has changed. + useEffect( + () => flagItemCustomization( isValueSet, label, menuGroup ), + [ isValueSet, menuGroup, label, flagItemCustomization ] + ); // Determine if the panel item's corresponding menu is being toggled and // trigger appropriate callback if it is. diff --git a/packages/components/src/tools-panel/tools-panel/hook.ts b/packages/components/src/tools-panel/tools-panel/hook.ts index 8a38a15084b33..60c0c9ae91127 100644 --- a/packages/components/src/tools-panel/tools-panel/hook.ts +++ b/packages/components/src/tools-panel/tools-panel/hook.ts @@ -210,13 +210,17 @@ export function useToolsPanel( // separately to optional items and have different display states, // we need to update that when their value is customized. const flagItemCustomization = useCallback( - ( label: string, group: ToolsPanelMenuItemKey = 'default' ) => { + ( + value: boolean, + label: string, + group: ToolsPanelMenuItemKey = 'default' + ) => { setMenuItems( ( items ) => { const newState = { ...items, [ group ]: { ...items[ group ], - [ label ]: true, + [ label ]: value, }, }; return newState; diff --git a/packages/components/src/tools-panel/types.ts b/packages/components/src/tools-panel/types.ts index 9f4fc78bea46a..e8e2f950de9a3 100644 --- a/packages/components/src/tools-panel/types.ts +++ b/packages/components/src/tools-panel/types.ts @@ -176,6 +176,7 @@ export type ToolsPanelContext = { registerResetAllFilter: ( filter: ResetAllFilter ) => void; deregisterResetAllFilter: ( filter: ResetAllFilter ) => void; flagItemCustomization: ( + value: boolean, label: string, group?: ToolsPanelMenuItemKey ) => void;