feat(Stack): Add deprecated flag to render null when receiving a falsy value

change/@fluentui-react-d1e31a08-0447-430f-8c8a-7ecdbae1691f.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat(Stack): Add deprecated flag to render null when receiving a falsy value.",
+  "packageName": "@fluentui/react",
+  "email": "esteban.230@hotmail.com",
+  "dependentChangeType": "patch"
+}

packages/react/etc/react.api.md

@@ -8789,6 +8789,8 @@ export interface IStackItemTokens {
 export interface IStackProps extends ISlottableProps<IStackSlots>, IStyleableComponentProps<IStackProps, IStackTokens, IStackStyles>, React_2.HTMLAttributes<HTMLElement> {
     as?: React_2.ElementType<React_2.HTMLAttributes<HTMLElement>>;
     disableShrink?: boolean;
+    // @deprecated
+    doNotRenderFalsyValues?: boolean;
     enableScopedSelectors?: boolean;
     // @deprecated
     gap?: number | string;

packages/react/src/components/Stack/Stack.tsx

@@ -9,7 +9,15 @@ import type { IStackComponent, IStackProps, IStackSlots } from './Stack.types';
 import type { IStackItemProps } from './StackItem/StackItem.types';
 
 const StackView: IStackComponent['view'] = props => {
-  const { as: RootType = 'div', disableShrink = false, enableScopedSelectors = false, wrap, ...rest } = props;
+  const {
+    as: RootType = 'div',
+    disableShrink = false,
+    // eslint-disable-next-line deprecation/deprecation
+    doNotRenderFalsyValues = false,
+    enableScopedSelectors = false,
+    wrap,
+    ...rest
+  } = props;
 
   warnDeprecations('Stack', props, {
     gap: 'tokens.childrenGap',
@@ -18,7 +26,11 @@ const StackView: IStackComponent['view'] = props => {
     padding: 'tokens.padding',
   });
 
-  const stackChildren = _processStackChildren(props.children, { disableShrink, enableScopedSelectors });
+  const stackChildren = _processStackChildren(props.children, {
+    disableShrink,
+    enableScopedSelectors,
+    doNotRenderFalsyValues,
+  });
 
   const nativeProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(rest, htmlElementProperties);
 
@@ -40,18 +52,22 @@ const StackView: IStackComponent['view'] = props => {
 
 function _processStackChildren(
   children: React.ReactNode,
-  { disableShrink, enableScopedSelectors }: { disableShrink: boolean; enableScopedSelectors: boolean },
+  {
+    disableShrink,
+    enableScopedSelectors,
+    doNotRenderFalsyValues,
+  }: { disableShrink: boolean; enableScopedSelectors: boolean; doNotRenderFalsyValues: boolean },
 ): (React.ReactChild | React.ReactFragment | React.ReactPortal)[] {
   let childrenArray = React.Children.toArray(children);
 
   childrenArray = React.Children.map(childrenArray, child => {
     if (!child || !React.isValidElement(child)) {
-      return child;
+      return doNotRenderFalsyValues ? null : child;
     }
 
     if (child.type === React.Fragment) {
       return child.props.children
-        ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors })
+        ? _processStackChildren(child.props.children, { disableShrink, enableScopedSelectors, doNotRenderFalsyValues })
         : null;
     }
 

packages/react/src/components/Stack/Stack.types.ts

@@ -156,6 +156,16 @@ export interface IStackProps
    * @defaultvalue false
    */
   enableScopedSelectors?: boolean;
+
+  /**
+   * When receiving a falsy value, render null instead. Default behavior allows rendering falsy values so cases like
+   * this one can happen:
+   * ```tsx
+   * <Stack>0 1 2 3 4</Stack>
+   * ```
+   * @deprecated
+   */
+  doNotRenderFalsyValues?: boolean;
 }
 
 /**