feat(radio): ✨ make the selected radio in group always visible

Author: navin-moorthy

src/radio-group/RadioGroupProps.tsx

@@ -4,6 +4,7 @@ import { RadioState, RadioStateProps, useRadioState } from "ariakit";
 import { RadioUIProps } from "../radio/RadioProps";
 import { getComponentProps, RenderProp } from "../utils";
 
+import { getIndexOfActiveItem } from "./__utils";
 import {
   RadioGroupUIState,
   RadioGroupUIStateProps,
@@ -18,7 +19,6 @@ const componentMap = {
 };
 
 export const useRadioGroupProps = ({
-  withState = true,
   value,
   defaultValue,
   setValue,
@@ -44,9 +44,23 @@ export const useRadioGroupProps = ({
   ...restProps
 }: RadioGroupProps): RadioGroupPropsReturn => {
   const state = useRadioState({
-    defaultValue,
     value,
+    defaultValue,
     setValue,
+    virtualFocus,
+    orientation,
+    rtl,
+    focusLoop,
+    focusWrap,
+    focusShift,
+    moves,
+    setMoves,
+    includesBaseElement,
+    activeId,
+    defaultActiveId,
+    setActiveId,
+    items,
+    setItems,
   });
   const uiState = useRadioGroupUIState({
     size,
@@ -56,28 +70,17 @@ export const useRadioGroupProps = ({
   });
   const uiProps: RadioGroupUIProps = React.useMemo(
     () => ({
-      state: withState ? state : undefined,
+      state,
       ...uiState,
     }),
-    [state, uiState, withState],
+    [state, uiState],
   );
   const { componentProps, finalChildren } = getComponentProps(
     componentMap,
     children,
     uiProps,
   );
 
-  const visibleChildren: React.ReactNode =
-    uiProps.maxVisibleItems == null
-      ? (finalChildren as React.ReactNode)
-      : (finalChildren.slice(0, uiProps.maxVisibleItems) as React.ReactNode);
-
-  const moreChildren: React.ReactNode =
-    uiProps.maxVisibleItems == null ||
-    finalChildren.length <= uiProps.maxVisibleItems
-      ? null
-      : (finalChildren.slice(uiProps.maxVisibleItems) as React.ReactNode);
-
   const wrapperProps: RadioGroupWrapperProps = React.useMemo(
     () => ({
       ...uiProps,
@@ -87,14 +90,48 @@ export const useRadioGroupProps = ({
     [componentProps?.wrapperProps, restProps, uiProps],
   );
 
+  const [itemsInternal, setItemsInternal] = React.useState(finalChildren);
+
+  const visibleChildren =
+    uiProps.maxVisibleItems == null
+      ? itemsInternal
+      : itemsInternal.slice(0, uiProps.maxVisibleItems);
+
+  const moreChildren =
+    uiProps.maxVisibleItems == null ||
+    itemsInternal.length <= uiProps.maxVisibleItems
+      ? null
+      : itemsInternal.slice(uiProps.maxVisibleItems);
+
+  const onCollapseStart = React.useCallback(() => {
+    componentProps?.showMoreProps?.onCollapseStart?.();
+
+    const indexOfActiveItem = getIndexOfActiveItem(state.items, state.activeId);
+    if (maxVisibleItems != null && indexOfActiveItem >= maxVisibleItems) {
+      // Swap the radios to the end of the VisibleChildren
+      const activeChildren = itemsInternal[indexOfActiveItem];
+      itemsInternal[indexOfActiveItem] = itemsInternal[maxVisibleItems - 1];
+      itemsInternal[maxVisibleItems - 1] = activeChildren;
+
+      setItemsInternal(itemsInternal);
+    }
+  }, [
+    componentProps?.showMoreProps,
+    itemsInternal,
+    maxVisibleItems,
+    state.activeId,
+    state.items,
+  ]);
+
   const showMoreProps: RadioShowMoreProps = React.useMemo(
     () => ({
       ...uiProps,
       direction: uiProps.stack,
       ...componentProps?.showMoreProps,
+      onCollapseStart: onCollapseStart,
       children: moreChildren,
     }),
-    [componentProps?.showMoreProps, moreChildren, uiProps],
+    [componentProps?.showMoreProps, moreChildren, onCollapseStart, uiProps],
   );
   return {
     uiProps,
@@ -108,12 +145,11 @@ export const useRadioGroupProps = ({
 export type RadioGroupProps = RadioStateProps &
   Omit<RadioGroupWrapperProps, "state" | "size" | "children" | "defaultValue"> &
   RadioGroupUIStateProps & {
-    withState?: boolean;
     children?: RenderProp<RadioUIProps>;
   };
 
 export type RadioGroupUIProps = RadioGroupUIState & {
-  state?: RadioState;
+  state: RadioState;
 };
 
 export type RadioGroupPropsReturn = {

src/radio-group/RadioShowMore.tsx

@@ -39,14 +39,26 @@ export const RadioShowMore: React.FC<RadioShowMoreProps> = ({
   );
   const contentClassName = cx(theme.showMore.content[stack]);
 
+  const onExpandStart = () => {
+    contentProps?.onExpandStart?.();
+
+    setHasExpandStarted(true);
+  };
+
+  const onCollapseStart = () => {
+    contentProps?.onCollapseStart?.();
+
+    setHasExpandStarted(false);
+  };
+
   return (
     <>
       <ShowMoreContent
         className={contentClassName}
-        onExpandStart={() => setHasExpandStarted(true)}
-        onCollapseStart={() => setHasExpandStarted(false)}
         {...contentProps}
         children={finalChildren}
+        onExpandStart={onExpandStart}
+        onCollapseStart={onCollapseStart}
       />
       <ShowMoreButton
         variant="ghost"

src/radio-group/__utils.ts

@@ -1,3 +1,5 @@
+import { RadioState } from "ariakit";
+
 import { createContext } from "../utils";
 
 import { RadioGroupUIProps } from "./RadioGroupProps";
@@ -9,3 +11,10 @@ const [RadioGroupContextProvider, useRadioGroupContext] =
   });
 
 export { RadioGroupContextProvider, useRadioGroupContext };
+
+export const getIndexOfActiveItem = (
+  items: RadioState["items"],
+  activeId: RadioState["activeId"],
+) => {
+  return items.findIndex(item => item.id === activeId);
+};

src/radio-group/stories/RadioGroupBasic.stories.tsx

@@ -38,7 +38,6 @@ export default {
         "clickOnSpace",
         "isChecked",
         "stack",
-        "maxVisibleItems",
         "items",
         "setItems",
         "orientation",