feat(react-accordion): expose base hooks and types for Accordion components (#35897)

Author: dmytrokirpa

change/@fluentui-react-accordion-b5a838d8-2830-4b99-b5e1-c53db3493a91.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: expose base hooks and types for Accordion components",
+  "packageName": "@fluentui/react-accordion",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-accordion/library/etc/react-accordion.api.md

@@ -21,6 +21,12 @@ import type { SlotClassNames } from '@fluentui/react-utilities';
 // @public
 export const Accordion: ForwardRefComponent<AccordionProps> & (<TItem>(props: AccordionProps<TItem>) => JSXElement);
 
+// @public (undocumented)
+export type AccordionBaseProps<Value = AccordionItemValue> = Omit<AccordionProps<Value>, 'navigation'>;
+
+// @public (undocumented)
+export type AccordionBaseState<Value = AccordionItemValue> = Omit<AccordionState<Value>, 'navigation'>;
+
 // @public (undocumented)
 export const accordionClassNames: SlotClassNames<AccordionSlots>;
 
@@ -41,6 +47,12 @@ export type AccordionContextValues = {
 // @public
 export const AccordionHeader: ForwardRefComponent<AccordionHeaderProps>;
 
+// @public (undocumented)
+export type AccordionHeaderBaseProps = Omit<AccordionHeaderProps, 'inline' | 'size'>;
+
+// @public (undocumented)
+export type AccordionHeaderBaseState = Omit<AccordionHeaderState, 'inline' | 'size'>;
+
 // @public (undocumented)
 export const accordionHeaderClassNames: SlotClassNames<AccordionHeaderSlots>;
 
@@ -129,6 +141,12 @@ export type AccordionItemValue = unknown;
 // @public
 export const AccordionPanel: ForwardRefComponent<AccordionPanelProps>;
 
+// @public (undocumented)
+export type AccordionPanelBaseProps = ComponentProps<Omit<AccordionPanelSlots, 'collapseMotion'>>;
+
+// @public (undocumented)
+export type AccordionPanelBaseState = ComponentState<Omit<AccordionPanelSlots, 'collapseMotion'>> & Pick<AccordionPanelState, 'open'>;
+
 // @public (undocumented)
 export const accordionPanelClassNames: SlotClassNames<Omit<AccordionPanelSlots, 'collapseMotion'>>;
 
@@ -180,10 +198,10 @@ export type AccordionToggleEvent<E = HTMLElement> = React_2.MouseEvent<E> | Reac
 export type AccordionToggleEventHandler<Value = AccordionItemValue> = (event: AccordionToggleEvent, data: AccordionToggleData<Value>) => void;
 
 // @public
-export const renderAccordion_unstable: (state: AccordionState, contextValues: AccordionContextValues) => JSXElement;
+export const renderAccordion_unstable: (state: AccordionBaseState, contextValues: AccordionContextValues) => JSXElement;
 
 // @public
-export const renderAccordionHeader_unstable: (state: AccordionHeaderState, contextValues: AccordionHeaderContextValues) => JSXElement;
+export const renderAccordionHeader_unstable: (state: AccordionHeaderBaseState, contextValues: AccordionHeaderContextValues) => JSXElement;
 
 // @public
 export const renderAccordionItem_unstable: (state: AccordionItemState, contextValues: AccordionItemContextValues) => JSXElement;
@@ -194,6 +212,9 @@ export const renderAccordionPanel_unstable: (state: AccordionPanelState) => JSXE
 // @public
 export const useAccordion_unstable: <Value = unknown>(props: AccordionProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionState<Value>;
 
+// @public
+export const useAccordionBase_unstable: <Value = unknown>(props: AccordionBaseProps<Value>, ref: React_2.Ref<HTMLElement>) => AccordionBaseState<Value>;
+
 // @public (undocumented)
 export const useAccordionContext_unstable: <T>(selector: ContextSelector<AccordionContextValue, T>) => T;
 
@@ -203,6 +224,9 @@ export function useAccordionContextValues_unstable(state: AccordionState): Accor
 // @public
 export const useAccordionHeader_unstable: (props: AccordionHeaderProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderState;
 
+// @public
+export const useAccordionHeaderBase_unstable: (props: AccordionHeaderBaseProps, ref: React_2.Ref<HTMLElement>) => AccordionHeaderBaseState;
+
 // @public (undocumented)
 export const useAccordionHeaderContext_unstable: () => AccordionHeaderContextValue;
 
@@ -227,6 +251,9 @@ export const useAccordionItemStyles_unstable: (state: AccordionItemState) => Acc
 // @public
 export const useAccordionPanel_unstable: (props: AccordionPanelProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelState;
 
+// @public
+export const useAccordionPanelBase_unstable: (props: AccordionPanelBaseProps, ref: React_2.Ref<HTMLElement>) => AccordionPanelBaseState;
+
 // @public
 export const useAccordionPanelStyles_unstable: (state: AccordionPanelState) => AccordionPanelState;
 

packages/react-components/react-accordion/library/src/AccordionHeader.ts

@@ -5,6 +5,8 @@ export type {
   AccordionHeaderSize,
   AccordionHeaderSlots,
   AccordionHeaderState,
+  AccordionHeaderBaseState,
+  AccordionHeaderBaseProps,
 } from './components/AccordionHeader/index';
 export {
   AccordionHeader,

packages/react-components/react-accordion/library/src/components/Accordion/renderAccordion.tsx

@@ -4,13 +4,16 @@
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
 
-import type { AccordionState, AccordionSlots, AccordionContextValues } from './Accordion.types';
+import type { AccordionBaseState, AccordionSlots, AccordionContextValues } from './Accordion.types';
 import { AccordionProvider } from '../../contexts/accordion';
 
 /**
  * Function that renders the final JSX of the component
  */
-export const renderAccordion_unstable = (state: AccordionState, contextValues: AccordionContextValues): JSXElement => {
+export const renderAccordion_unstable = (
+  state: AccordionBaseState,
+  contextValues: AccordionContextValues,
+): JSXElement => {
   assertSlots<AccordionSlots>(state);
 
   return (

packages/react-components/react-accordion/library/src/components/Accordion/useAccordion.test.tsx

@@ -144,7 +144,7 @@ describe('useAccordionBase', () => {
       state.root.className,
     );
 
-    const contextValues = useAccordionHeaderContextValues_unstable(state);
+    const contextValues = useAccordionHeaderContextValues_unstable(state as AccordionHeaderState);
     return renderAccordionHeader_unstable(state as AccordionHeaderState, contextValues);
   });
 

packages/react-components/react-accordion/library/src/components/AccordionHeader/AccordionHeader.types.ts

@@ -45,6 +45,10 @@ export type AccordionHeaderProps = ComponentProps<Partial<AccordionHeaderSlots>>
   size?: AccordionHeaderSize;
 };
 
+export type AccordionHeaderBaseProps = Omit<AccordionHeaderProps, 'inline' | 'size'>;
+
 export type AccordionHeaderState = ComponentState<AccordionHeaderSlots> &
   Required<Pick<AccordionHeaderProps, 'inline'>> &
   AccordionHeaderContextValue;
+
+export type AccordionHeaderBaseState = Omit<AccordionHeaderState, 'inline' | 'size'>;

packages/react-components/react-accordion/library/src/components/AccordionHeader/index.ts

@@ -6,6 +6,8 @@ export type {
   AccordionHeaderSize,
   AccordionHeaderSlots,
   AccordionHeaderState,
+  AccordionHeaderBaseState,
+  AccordionHeaderBaseProps,
 } from './AccordionHeader.types';
 export { renderAccordionHeader_unstable } from './renderAccordionHeader';
 export { useAccordionHeader_unstable, useAccordionHeaderBase_unstable } from './useAccordionHeader';

packages/react-components/react-accordion/library/src/components/AccordionHeader/renderAccordionHeader.tsx

@@ -3,14 +3,18 @@
 
 import { assertSlots } from '@fluentui/react-utilities';
 import type { JSXElement } from '@fluentui/react-utilities';
-import type { AccordionHeaderState, AccordionHeaderSlots, AccordionHeaderContextValues } from './AccordionHeader.types';
+import type {
+  AccordionHeaderBaseState,
+  AccordionHeaderSlots,
+  AccordionHeaderContextValues,
+} from './AccordionHeader.types';
 import { AccordionHeaderProvider } from '../../contexts/accordionHeader';
 
 /**
  * Function that renders the final JSX of the component
  */
 export const renderAccordionHeader_unstable = (
-  state: AccordionHeaderState,
+  state: AccordionHeaderBaseState,
   contextValues: AccordionHeaderContextValues,
 ): JSXElement => {
   assertSlots<AccordionHeaderSlots>(state);

packages/react-components/react-accordion/library/src/components/AccordionHeader/useAccordionHeader.tsx

@@ -3,7 +3,12 @@
 import * as React from 'react';
 import { useEventCallback, slot, isResolvedShorthand } from '@fluentui/react-utilities';
 import { useARIAButtonProps } from '@fluentui/react-aria';
-import type { AccordionHeaderProps, AccordionHeaderState } from './AccordionHeader.types';
+import type {
+  AccordionHeaderBaseProps,
+  AccordionHeaderBaseState,
+  AccordionHeaderProps,
+  AccordionHeaderState,
+} from './AccordionHeader.types';
 import { useAccordionContext_unstable } from '../../contexts/accordion';
 import { ChevronRightRegular } from '@fluentui/react-icons';
 import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
@@ -20,7 +25,8 @@ export const useAccordionHeader_unstable = (
   props: AccordionHeaderProps,
   ref: React.Ref<HTMLElement>,
 ): AccordionHeaderState => {
-  const state = useAccordionHeaderBase_unstable(props, ref);
+  const { inline = false, size = 'medium', ...baseProps } = props;
+  const state = useAccordionHeaderBase_unstable(baseProps, ref);
   const { dir } = useFluent();
 
   // Calculate how to rotate the expand icon [>] (ChevronRightRegular)
@@ -44,7 +50,7 @@ export const useAccordionHeader_unstable = (
     );
   }
 
-  return state;
+  return { ...state, inline, size };
 };
 
 /**
@@ -54,10 +60,10 @@ export const useAccordionHeader_unstable = (
  * @param ref - reference to root HTMLElement of AccordionHeader
  */
 export const useAccordionHeaderBase_unstable = (
-  props: AccordionHeaderProps,
+  props: AccordionHeaderBaseProps,
   ref: React.Ref<HTMLElement>,
-): AccordionHeaderState => {
-  const { icon, button, expandIcon, inline = false, size = 'medium', expandIconPosition = 'start', ...rest } = props;
+): AccordionHeaderBaseState => {
+  const { icon, button, expandIcon, expandIconPosition = 'start', ...rest } = props;
   const { value, disabled, open } = useAccordionItemContext_unstable();
   const requestToggle = useAccordionContext_unstable(ctx => ctx.requestToggle);
 
@@ -89,8 +95,6 @@ export const useAccordionHeaderBase_unstable = (
   return {
     disabled,
     open,
-    size,
-    inline,
     expandIconPosition,
     components: {
       root: 'div',

packages/react-components/react-accordion/library/src/index.ts

@@ -5,6 +5,7 @@ export {
   useAccordionContextValues_unstable,
   useAccordionStyles_unstable,
   useAccordion_unstable,
+  useAccordionBase_unstable,
 } from './Accordion';
 export type {
   AccordionContextValues,
@@ -15,6 +16,8 @@ export type {
   AccordionToggleData,
   AccordionToggleEvent,
   AccordionToggleEventHandler,
+  AccordionBaseState,
+  AccordionBaseProps,
 } from './Accordion';
 export {
   AccordionItem,
@@ -38,6 +41,7 @@ export {
   useAccordionHeaderContextValues_unstable,
   useAccordionHeaderStyles_unstable,
   useAccordionHeader_unstable,
+  useAccordionHeaderBase_unstable,
 } from './AccordionHeader';
 export type {
   AccordionHeaderContextValues,
@@ -46,15 +50,24 @@ export type {
   AccordionHeaderSize,
   AccordionHeaderSlots,
   AccordionHeaderState,
+  AccordionHeaderBaseState,
+  AccordionHeaderBaseProps,
 } from './AccordionHeader';
 export {
   AccordionPanel,
   accordionPanelClassNames,
   renderAccordionPanel_unstable,
   useAccordionPanelStyles_unstable,
   useAccordionPanel_unstable,
+  useAccordionPanelBase_unstable,
+} from './AccordionPanel';
+export type {
+  AccordionPanelProps,
+  AccordionPanelSlots,
+  AccordionPanelState,
+  AccordionPanelBaseState,
+  AccordionPanelBaseProps,
 } from './AccordionPanel';
-export type { AccordionPanelProps, AccordionPanelSlots, AccordionPanelState } from './AccordionPanel';
 
 export { AccordionProvider, useAccordionContext_unstable } from './contexts/accordion';
 
@@ -67,10 +80,3 @@ export type { AccordionItemContextValue } from './contexts/accordionItem';
 export { AccordionHeaderProvider, useAccordionHeaderContext_unstable } from './contexts/accordionHeader';
 
 export type { AccordionHeaderContextValue } from './contexts/accordionHeader';
-
-// Experimental APIs
-// export type { AccordionBaseState, AccordionBaseProps } from './Accordion';
-// export { useAccordionBase_unstable } from './Accordion';
-// export { useAccordionHeaderBase_unstable } from './AccordionHeader';
-// export type { AccordionPanelBaseState, AccordionPanelBaseProps } from './AccordionPanel';
-// export { useAccordionPanelBase_unstable } from './AccordionPanel';