[pull] master from microsoft:master

change/@fluentui-react-headless-components-preview-c00fc5f6-dee8-494a-a4e9-61e4e74ae664.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: expose Dropdown invalid and clear button visibility data attributes",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "vgenaev@gmail.com",
+  "dependentChangeType": "patch"
+}

change/@fluentui-react-headless-components-preview-focusgroup-typings.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "feat: add development-time types for focusgroup attributes",
+  "packageName": "@fluentui/react-headless-components-preview",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-headless-components-preview/library/etc/dropdown.api.md

@@ -32,10 +32,14 @@ export type DropdownProps = Omit<DropdownBaseHookProps, 'inlinePopup' | 'mountNo
 
 // @public (undocumented)
 export type DropdownState = DropdownBaseHookState & {
-    button: {
+    button: DropdownBaseHookState['button'] & {
         'data-state'?: 'open' | 'closed';
         'data-disabled'?: string;
         'data-placeholder'?: string;
+        'data-invalid'?: string;
+    };
+    clearButton?: DropdownBaseHookState['clearButton'] & {
+        'data-visible'?: string;
     };
 };
 

packages/react-components/react-headless-components-preview/library/etc/menu.api.md

@@ -32,9 +32,9 @@ import { MenuItemSwitchProps } from '@fluentui/react-menu';
 import { MenuItemSwitchSlots } from '@fluentui/react-menu';
 import { MenuItemSwitchState } from '@fluentui/react-menu';
 import type { MenuListContextValues } from '@fluentui/react-menu';
-import type { MenuListProps as MenuListProps_2 } from '@fluentui/react-menu';
-import type { MenuListSlots } from '@fluentui/react-menu';
-import type { MenuListState as MenuListState_2 } from '@fluentui/react-menu';
+import { MenuListProps } from '@fluentui/react-menu';
+import { MenuListSlots } from '@fluentui/react-menu';
+import { MenuListState } from '@fluentui/react-menu';
 import { MenuOpenChangeData } from '@fluentui/react-menu';
 import { MenuOpenEvent } from '@fluentui/react-menu';
 import { MenuPopoverProps } from '@fluentui/react-menu';
@@ -148,7 +148,6 @@ export { MenuItemSlots }
 // @public (undocumented)
 export type MenuItemState = MenuItemState_2 & {
     root: {
-        focusgroupstart?: string;
         'data-disabled'?: string;
         'data-has-submenu'?: string;
         'data-submenu-open'?: string;
@@ -167,17 +166,11 @@ export { MenuItemSwitchState }
 // @public
 export const MenuList: ForwardRefComponent<MenuListProps>;
 
-// @public (undocumented)
-export type MenuListProps = MenuListProps_2;
+export { MenuListProps }
 
 export { MenuListSlots }
 
-// @public (undocumented)
-export type MenuListState = MenuListState_2 & {
-    root: {
-        focusgroup?: string;
-    };
-};
+export { MenuListState }
 
 export { MenuOpenChangeData }
 
@@ -234,7 +227,7 @@ export { renderMenuItemRadio }
 export { renderMenuItemSwitch }
 
 // @public (undocumented)
-export const renderMenuList: (state: MenuListState_2, contextValues: MenuListContextValues) => JSXElement;
+export const renderMenuList: (state: MenuListState, contextValues: MenuListContextValues) => JSXElement;
 
 // @public (undocumented)
 export const renderMenuPopover: (state: MenuPopoverState) => JSXElement;

packages/react-components/react-headless-components-preview/library/etc/nav.api.md

@@ -9,15 +9,13 @@ import type { ComponentState } from '@fluentui/react-utilities';
 import type { DividerBaseProps } from '@fluentui/react-divider';
 import { DividerBaseState } from '@fluentui/react-divider';
 import type { DividerSlots as DividerSlots_2 } from '@fluentui/react-divider';
-import { DrawerBodyState } from '@fluentui/react-drawer';
 import { DrawerFooterState } from '@fluentui/react-drawer';
 import { DrawerHeaderState } from '@fluentui/react-drawer';
 import type { EventHandler } from '@fluentui/react-utilities';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { InlineDrawerBaseProps } from '@fluentui/react-drawer';
 import { InlineDrawerSlots } from '@fluentui/react-drawer';
 import { JSXElement } from '@fluentui/react-utilities';
-import type { NavBaseState } from '@fluentui/react-nav';
 import { NavCategoryContextValues } from '@fluentui/react-nav';
 import { NavCategoryItemProvider } from '@fluentui/react-nav';
 import { NavCategoryProps } from '@fluentui/react-nav';
@@ -27,6 +25,7 @@ import { NavContextValue } from '@fluentui/react-nav';
 import { NavContextValues } from '@fluentui/react-nav';
 import { DrawerBodyProps as NavDrawerBodyProps } from '@fluentui/react-drawer';
 import { DrawerBodySlots as NavDrawerBodySlots } from '@fluentui/react-drawer';
+import { DrawerBodyState as NavDrawerBodyState } from '@fluentui/react-drawer';
 import { DrawerFooterProps as NavDrawerFooterProps } from '@fluentui/react-drawer';
 import { DrawerFooterSlots as NavDrawerFooterSlots } from '@fluentui/react-drawer';
 import { DrawerHeaderProps as NavDrawerHeaderProps } from '@fluentui/react-drawer';
@@ -39,6 +38,7 @@ import { NavItemValue } from '@fluentui/react-nav';
 import { NavBaseProps as NavProps } from '@fluentui/react-nav';
 import { NavProvider } from '@fluentui/react-nav';
 import { NavSlots } from '@fluentui/react-nav';
+import { NavBaseState as NavState } from '@fluentui/react-nav';
 import type { NavSubItemBaseState } from '@fluentui/react-nav';
 import { NavSubItemBaseProps as NavSubItemProps } from '@fluentui/react-nav';
 import { NavSubItemSlots } from '@fluentui/react-nav';
@@ -135,12 +135,7 @@ export { NavDrawerBodyProps }
 
 export { NavDrawerBodySlots }
 
-// @public (undocumented)
-export type NavDrawerBodyState = DrawerBodyState & {
-    root: DrawerBodyState['root'] & {
-        focusgroup?: string;
-    };
-};
+export { NavDrawerBodyState }
 
 // @public
 export const NavDrawerFooter: ForwardRefComponent<NavDrawerFooterProps>;
@@ -215,12 +210,7 @@ export type NavSectionHeaderState = ComponentState<NavSectionHeaderSlots>;
 
 export { NavSlots }
 
-// @public (undocumented)
-export type NavState = NavBaseState & {
-    root: NavBaseState['root'] & {
-        focusgroup?: string;
-    };
-};
+export { NavState }
 
 // @public
 export const NavSubItem: ForwardRefComponent<NavSubItemProps>;
@@ -271,7 +261,7 @@ export const renderNavDivider: (state: DividerBaseState) => JSXElement;
 export const renderNavDrawer: (state: NavDrawerState, contextValues: NavContextValues) => JSXElement;
 
 // @public
-export const renderNavDrawerBody: (state: DrawerBodyState) => JSXElement;
+export const renderNavDrawerBody: (state: NavDrawerBodyState) => JSXElement;
 
 // @public
 export const renderNavDrawerFooter: (state: DrawerFooterState) => JSXElement;

packages/react-components/react-headless-components-preview/library/etc/swatch-picker.api.md

@@ -108,7 +108,6 @@ export { SwatchPickerSlots }
 export type SwatchPickerState = SwatchPickerBaseState & {
     root: {
         'data-layout'?: SwatchPickerBaseState['layout'];
-        focusgroup?: string;
     };
 };
 

packages/react-components/react-headless-components-preview/library/etc/tab-list.api.md

@@ -36,7 +36,6 @@ export type TabListSlots = TabListSlots_2;
 // @public
 export type TabListState = TabListBaseState & {
     root: {
-        focusgroup?: string;
         'data-orientation'?: 'vertical' | 'horizontal';
     };
 };
@@ -49,7 +48,6 @@ export { TabSlots }
 // @public (undocumented)
 export type TabState = TabBaseState & {
     root: {
-        focusgroupstart?: string;
         'data-icon-only'?: string;
         'data-selected'?: string;
         'data-disabled'?: string;

packages/react-components/react-headless-components-preview/library/etc/tag-group.api.md

@@ -29,7 +29,6 @@ export { TagGroupSlots }
 // @public (undocumented)
 export type TagGroupState = TagGroupBaseState & {
     root: {
-        focusgroup?: string;
         'data-disabled'?: string;
         'data-dismissible'?: string;
     };

packages/react-components/react-headless-components-preview/library/etc/tag-picker.api.md

@@ -37,7 +37,7 @@ import { TagPickerControlInternalSlots } from '@fluentui/react-tag-picker';
 import { TagPickerControlProps } from '@fluentui/react-tag-picker';
 import { TagPickerControlSlots } from '@fluentui/react-tag-picker';
 import type { TagPickerGroupBaseState } from '@fluentui/react-tag-picker';
-import type { TagPickerGroupSlots } from '@fluentui/react-tag-picker';
+import type { TagPickerGroupSlots as TagPickerGroupSlots_2 } from '@fluentui/react-tag-picker';
 import type { TagPickerInputBaseState } from '@fluentui/react-tag-picker';
 import { TagPickerInputBaseProps as TagPickerInputProps } from '@fluentui/react-tag-picker';
 import { TagPickerInputSlots } from '@fluentui/react-tag-picker';
@@ -113,12 +113,12 @@ export const TagPickerGroup: ForwardRefComponent<TagPickerGroupProps>;
 // @public
 export type TagPickerGroupProps = ComponentProps<TagPickerGroupSlots> & Pick<TagGroupBaseProps, 'dismissible' | 'onDismiss'>;
 
-export { TagPickerGroupSlots }
+// @public (undocumented)
+export type TagPickerGroupSlots = TagPickerGroupSlots_2;
 
 // @public
 export type TagPickerGroupState = TagPickerGroupBaseState & {
     root: {
-        focusgroup?: string;
         'data-disabled'?: string;
     };
 };

packages/react-components/react-headless-components-preview/library/etc/toolbar.api.md

@@ -10,26 +10,26 @@ import { DividerBaseState } from '@fluentui/react-divider';
 import type { ForwardRefComponent } from '@fluentui/react-utilities';
 import { JSXElement } from '@fluentui/react-utilities';
 import type * as React_2 from 'react';
-import type { ToolbarBaseProps } from '@fluentui/react-toolbar';
 import { ToolbarBaseState } from '@fluentui/react-toolbar';
 import type { ToolbarButtonBaseProps } from '@fluentui/react-toolbar';
 import type { ToolbarButtonBaseState } from '@fluentui/react-toolbar';
 import { ToolbarContextValue } from '@fluentui/react-toolbar';
-import { ToolbarContextValues as ToolbarContextValues_2 } from '@fluentui/react-toolbar';
+import { ToolbarContextValues } from '@fluentui/react-toolbar';
 import type { ToolbarDividerBaseProps } from '@fluentui/react-toolbar';
 import type { ToolbarDividerBaseState } from '@fluentui/react-toolbar';
 import type { ToolbarGroupProps as ToolbarGroupProps_2 } from '@fluentui/react-toolbar';
 import { ToolbarGroupState as ToolbarGroupState_2 } from '@fluentui/react-toolbar';
+import { ToolbarBaseProps as ToolbarProps } from '@fluentui/react-toolbar';
 import type { ToolbarRadioButtonBaseProps } from '@fluentui/react-toolbar';
 import type { ToolbarRadioButtonBaseState } from '@fluentui/react-toolbar';
 import type { ToolbarRadioGroupProps as ToolbarRadioGroupProps_2 } from '@fluentui/react-toolbar';
 import type { ToolbarRadioGroupState as ToolbarRadioGroupState_2 } from '@fluentui/react-toolbar';
-import type { ToolbarSlots as ToolbarSlots_2 } from '@fluentui/react-toolbar';
+import { ToolbarSlots } from '@fluentui/react-toolbar';
 import type { ToolbarToggleButtonBaseProps } from '@fluentui/react-toolbar';
 import type { ToolbarToggleButtonBaseState } from '@fluentui/react-toolbar';
 
 // @public
-export const renderToolbar: (state: ToolbarBaseState, contextValues: ToolbarContextValues_2) => JSXElement;
+export const renderToolbar: (state: ToolbarBaseState, contextValues: ToolbarContextValues) => JSXElement;
 
 // @public
 export const renderToolbarButton: (state: ButtonBaseState) => JSXElement;
@@ -68,8 +68,7 @@ export type ToolbarButtonState = ToolbarButtonBaseState & {
     };
 };
 
-// @public (undocumented)
-export type ToolbarContextValues = ToolbarContextValues_2;
+export { ToolbarContextValues }
 
 // @public
 export const ToolbarDivider: ForwardRefComponent<ToolbarDividerProps>;
@@ -97,8 +96,7 @@ export type ToolbarGroupState = ToolbarGroupState_2 & {
     };
 };
 
-// @public (undocumented)
-export type ToolbarProps = ToolbarBaseProps;
+export { ToolbarProps }
 
 // @public
 export const ToolbarRadioButton: ForwardRefComponent<ToolbarRadioButtonProps>;
@@ -130,14 +128,12 @@ export type ToolbarRadioGroupState = ToolbarRadioGroupState_2 & {
     };
 };
 
-// @public (undocumented)
-export type ToolbarSlots = ToolbarSlots_2;
+export { ToolbarSlots }
 
 // @public (undocumented)
 export type ToolbarState = ToolbarBaseState & {
     root: {
         'data-vertical'?: string;
-        focusgroup?: string;
     };
 };
 

packages/react-components/react-headless-components-preview/library/src/components/Dropdown/Dropdown.types.ts

@@ -10,7 +10,7 @@ export type {
 export type DropdownProps = Omit<DropdownBaseHookProps, 'inlinePopup' | 'mountNode'>;
 
 export type DropdownState = DropdownBaseHookState & {
-  button: {
+  button: DropdownBaseHookState['button'] & {
     /**
      * Whether the dropdown is currently open.
      */
@@ -23,5 +23,18 @@ export type DropdownState = DropdownBaseHookState & {
      * Whether the trigger element is currently displaying a placeholder.
      */
     'data-placeholder'?: string;
+    /**
+     * Whether the trigger element is currently invalid.
+     */
+    'data-invalid'?: string;
+  };
+  /**
+   * The resolved clear button slot state.
+   */
+  clearButton?: DropdownBaseHookState['clearButton'] & {
+    /**
+     * Whether the clear button is currently visible.
+     */
+    'data-visible'?: string;
   };
 };

packages/react-components/react-headless-components-preview/library/src/components/Dropdown/index.ts

@@ -1,5 +1,5 @@
 export { Dropdown } from './Dropdown';
-export type { DropdownProps, DropdownState } from './Dropdown.types';
+export type { DropdownProps, DropdownState, DropdownSlots } from './Dropdown.types';
 export { renderDropdown } from './renderDropdown';
 export { useDropdown } from './useDropdown';
 export { useDropdownContextValues } from './useDropdownContextValues';

packages/react-components/react-headless-components-preview/library/src/components/Dropdown/useDropdown.ts

@@ -60,6 +60,7 @@ export const useDropdown = (props: DropdownProps, ref: React.Ref<HTMLButtonEleme
       'data-state': open ? 'open' : 'closed',
       'data-disabled': stringifyDataAttribute(trigger.disabled),
       'data-placeholder': stringifyDataAttribute(!baseState.value),
+      'data-invalid': stringifyDataAttribute(trigger['aria-invalid']),
     },
     listbox: open || hasFocus ? listbox : undefined,
     clearButton: slot.optional(mergedProps.clearButton, {
@@ -93,6 +94,7 @@ export const useDropdown = (props: DropdownProps, ref: React.Ref<HTMLButtonEleme
 
   if (state.clearButton) {
     state.clearButton.onClick = onClearButtonClick;
+    state.clearButton['data-visible'] = stringifyDataAttribute(showClearButton);
   }
 
   // Heads up! We don't support "clearable" in multiselect mode, so we should never display a slot

packages/react-components/react-headless-components-preview/library/src/components/Menu/MenuItem/MenuItem.types.ts

@@ -6,7 +6,6 @@ export type MenuItemProps = MenuItemBaseProps;
 
 export type MenuItemState = MenuItemBaseState & {
   root: {
-    focusgroupstart?: string;
     'data-disabled'?: string;
     'data-has-submenu'?: string;
     'data-submenu-open'?: string;

packages/react-components/react-headless-components-preview/library/src/components/Menu/MenuList/MenuList.types.ts

@@ -1,17 +1,7 @@
-import type {
-  MenuListProps as MenuListBaseProps,
+export type {
+  MenuListProps,
   MenuListSlots,
-  MenuListState as MenuListBaseState,
+  MenuListState,
   MenuCheckedValueChangeData,
   MenuCheckedValueChangeEvent,
 } from '@fluentui/react-menu';
-
-export type MenuListProps = MenuListBaseProps;
-
-export type MenuListState = MenuListBaseState & {
-  root: {
-    focusgroup?: string;
-  };
-};
-
-export type { MenuListSlots, MenuCheckedValueChangeData, MenuCheckedValueChangeEvent };

packages/react-components/react-headless-components-preview/library/src/components/Nav/Nav.types.ts

@@ -1,9 +1,7 @@
-import type { NavBaseState } from '@fluentui/react-nav';
-
-export type { NavSlots, NavBaseProps as NavProps, OnNavItemSelectData, NavItemValue } from '@fluentui/react-nav';
-
-export type NavState = NavBaseState & {
-  root: NavBaseState['root'] & {
-    focusgroup?: string;
-  };
-};
+export type {
+  NavSlots,
+  NavBaseProps as NavProps,
+  NavBaseState as NavState,
+  OnNavItemSelectData,
+  NavItemValue,
+} from '@fluentui/react-nav';

packages/react-components/react-headless-components-preview/library/src/components/Nav/NavDrawerBody/NavDrawerBody.types.ts

@@ -1,12 +1,5 @@
-import type { DrawerBodyState } from '../../Drawer/DrawerBody/DrawerBody.types';
-
 export type {
+  DrawerBodyState as NavDrawerBodyState,
   DrawerBodyProps as NavDrawerBodyProps,
   DrawerBodySlots as NavDrawerBodySlots,
 } from '../../Drawer/DrawerBody/DrawerBody.types';
-
-export type NavDrawerBodyState = DrawerBodyState & {
-  root: DrawerBodyState['root'] & {
-    focusgroup?: string;
-  };
-};

packages/react-components/react-headless-components-preview/library/src/components/SwatchPicker/SwatchPicker.types.ts

@@ -8,9 +8,5 @@ export type SwatchPickerState = SwatchPickerBaseState & {
      * Whether SwatchPicker is row or grid
      */
     'data-layout'?: SwatchPickerBaseState['layout'];
-    /**
-     * Arrow navigation mode for SwatchPicker
-     */
-    focusgroup?: string;
   };
 };