Fixed condition to show separator correctly (#35409)

* Fixed condition to show separator correctly

Modified condition to toggle separator when current button is active and
showSeparator value is false. This condition will handle both undefined or
any random value which is not present in the toggle-group-control-option

* Added story and fixed getShowSeparator function

* toggle-group-control story fix lint issues

* reverted toggle-group-control-button isActive condition

packages/components/src/toggle-group-control/stories/index.js

@@ -13,6 +13,7 @@ import { useState } from '@wordpress/element';
  */
 import { ToggleGroupControl, ToggleGroupControlOption } from '../index';
 import { View } from '../../view';
+import Button from '../../button';
 
 export default {
  component: ToggleGroupControl,
@@ -81,3 +82,33 @@ export const _default = () => {
  </View>
  );
 };
+
+export const WithReset = () => {
+ const [ alignState, setAlignState ] = useState();
+ const alignOptions = aligns.map( ( key, index ) => (
+ <ToggleGroupControlOption
+ key={ key }
+ value={ key }
+ label={ text(
+ `${ KNOBS_GROUPS.ToggleGroupControlOption }: label`,
+ key,
+ `${ KNOBS_GROUPS.ToggleGroupControlOption }-${ index + 1 }`
+ ) }
+ />
+ ) );
+ return (
+ <View>
+ <ToggleGroupControl
+ onChange={ setAlignState }
+ value={ alignState }
+ label={ 'Toggle Group Control' }
+ hideLabelFromVision
+ >
+ { alignOptions }
+ </ToggleGroupControl>
+ <Button onClick={ () => setAlignState( undefined ) } isTertiary>
+ Reset
+ </Button>
+ </View>
+ );
+};

packages/components/src/toggle-group-control/toggle-group-control-option.tsx

@@ -23,22 +23,21 @@ function getShowSeparator(
  toggleGroupControlContext: ToggleGroupControlContextProps,
  index: number
 ) {
- const { currentId, items } = toggleGroupControlContext;
- const isLast = index === items.length - 1;
- const isActive = items[ index ]?.id === currentId;
- const isNextActive = items[ index + 1 ]?.id === currentId;
-
- let showSeparator = true;
-
+ const { currentId, items, state } = toggleGroupControlContext;
  if ( items.length < 3 ) {
- showSeparator = false;
+ return false;
  }
-
- if ( isActive || isNextActive || isLast ) {
- showSeparator = false;
+ const targetNodeExists =
+ items.find( ( { id } ) => id === currentId )?.ref?.current?.dataset
+ ?.value === state;
+ const isLast = index === items.length - 1;
+ // If no target node exists, don't show the separator after the last item.
+ if ( ! targetNodeExists ) {
+ return ! isLast;
  }
-
- return showSeparator;
+ const isActive = items[ index ]?.id === currentId;
+ const isNextActive = items[ index + 1 ]?.id === currentId;
+ return ! ( isActive || isNextActive || isLast );
 }
 
 function ToggleGroupControlOption(