feat(react-divider): add base hooks

change/@fluentui-react-divider-ae589058-df1f-4fef-bec7-06fb3b3c8f39.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "feat: add base hooks",
+  "packageName": "@fluentui/react-divider",
+  "email": "dmytrokirpa@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/react-divider/library/src/Divider.ts

@@ -1,8 +1,15 @@
-export type { DividerProps, DividerSlots, DividerState } from './components/Divider/index';
+export type {
+  DividerBaseProps,
+  DividerProps,
+  DividerSlots,
+  DividerBaseState,
+  DividerState,
+} from './components/Divider/index';
 export {
   Divider,
   dividerClassNames,
   renderDivider_unstable,
   useDividerStyles_unstable,
   useDivider_unstable,
+  useDividerBase_unstable,
 } from './components/Divider/index';

packages/react-components/react-divider/library/src/components/Divider/Divider.types.ts

@@ -43,5 +43,9 @@ export type DividerProps = ComponentProps<Partial<DividerSlots>> & {
   vertical?: boolean;
 };
 
+export type DividerBaseProps = Omit<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>;
+
 export type DividerState = ComponentState<DividerSlots> &
   Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;
+
+export type DividerBaseState = Omit<DividerState, 'alignContent' | 'appearance' | 'inset' | 'vertical'>;

packages/react-components/react-divider/library/src/components/Divider/index.ts

@@ -1,5 +1,6 @@
 export { Divider } from './Divider';
-export type { DividerProps, DividerSlots, DividerState } from './Divider.types';
+export type { DividerBaseProps, DividerProps, DividerSlots, DividerBaseState, DividerState } from './Divider.types';
 export { renderDivider_unstable } from './renderDivider';
 export { useDivider_unstable } from './useDivider';
+export { useDividerBase_unstable } from './useDividerBase';
 export { dividerClassNames, useDividerStyles_unstable } from './useDividerStyles.styles';

packages/react-components/react-divider/library/src/components/Divider/useDivider.ts

@@ -1,48 +1,28 @@
+'use client';
+
 import * as React from 'react';
-import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
 import type { DividerProps, DividerState } from './Divider.types';
+import { useDividerBase_unstable } from './useDividerBase';
 
 /**
  * Returns the props and state required to render the component
  * @param props - User-provided props to the Divider component.
  * @param ref - User-provided ref to be passed to the Divider component.
  */
 export const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {
-  const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, wrapper } = props;
-  const dividerId = useId('divider-');
+  const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, ...rest } = props;
+
+  const state = useDividerBase_unstable(rest, ref);
 
   return {
-    // Props passed at the top-level
     alignContent,
     appearance,
     inset,
     vertical,
-
-    // Slots definition
-    components: {
-      root: 'div',
-      wrapper: 'div',
+    ...state,
+    root: {
+      ...state.root,
+      'aria-orientation': vertical ? 'vertical' : 'horizontal',
     },
-
-    root: slot.always(
-      getIntrinsicElementProps('div', {
-        role: 'separator',
-        'aria-orientation': vertical ? 'vertical' : 'horizontal',
-        'aria-labelledby': props.children ? dividerId : undefined,
-        ...props,
-        // FIXME:
-        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
-        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
-        ref: ref as React.Ref<HTMLDivElement>,
-      } as const),
-      { elementType: 'div' },
-    ),
-    wrapper: slot.always(wrapper, {
-      defaultProps: {
-        id: dividerId,
-        children: props.children,
-      },
-      elementType: 'div',
-    }),
   };
 };

packages/react-components/react-divider/library/src/components/Divider/useDividerBase.ts

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { getIntrinsicElementProps, useId, slot } from '@fluentui/react-utilities';
+import type { DividerBaseProps, DividerBaseState } from './Divider.types';
+
+/**
+ * Returns the props and state required to render the component
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
+ */
+export const useDividerBase_unstable = (props: DividerBaseProps, ref: React.Ref<HTMLElement>): DividerBaseState => {
+  const { wrapper } = props;
+  const dividerId = useId('divider-');
+
+  return {
+    // Slots definition
+    components: {
+      root: 'div',
+      wrapper: 'div',
+    },
+    root: slot.always(
+      getIntrinsicElementProps('div', {
+        role: 'separator',
+        // 'aria-orientation': vertical ? 'vertical' : 'horizontal',
+        'aria-labelledby': props.children ? dividerId : undefined,
+        ...props,
+        // FIXME:
+        // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLDivElement`
+        // but since it would be a breaking change to fix it, we are casting ref to it's proper type
+        ref: ref as React.Ref<HTMLDivElement>,
+      } as const),
+      { elementType: 'div' },
+    ),
+    wrapper: slot.always(wrapper, {
+      defaultProps: {
+        id: dividerId,
+        children: props.children,
+      },
+      elementType: 'div',
+    }),
+  };
+};

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

@@ -6,3 +6,7 @@ export {
   useDivider_unstable,
 } from './Divider';
 export type { DividerProps, DividerSlots, DividerState } from './Divider';
+
+// Experimental APIs - will be uncommented in the experimental release branch
+// export { useDividerBase_unstable } from './Divider';
+// export type { DividerBaseProps, DividerBaseState } from './Divider';