@fluentui/react-divider 9.0.0-alpha.9 → 9.0.0-beta.4

package/Spec.md

@@ -2,8 +2,7 @@
 
 ## Background
 
-The divider control is intended to replace the Separator control currently exported. Its purpose is to visually separate content.
-The purpose of redoing the component is to add minor structural updates and new engineering practices and update the naming conventions in the API to match naming conventions indicated by OpenUI research.
+A `Divider` is used to visually segment content into groups.
 
 ## Prior Art
 
@@ -30,7 +29,7 @@ The purpose of redoing the component is to add minor structural updates and new
 
 Basic Examples:
 
-```html
+```tsx
 <Divider />
 <Divider vertical />
 <Divider>This is a divider with content</Divider>
@@ -38,149 +37,33 @@ Basic Examples:
 
 ## Variants
 
-The divider will have two main variants, rendering horizontally or vertically. The control is the same with the optional property `vertical` defining how it renders.
-
-Standard default horizontal
-
-```html
-<Divider />
-```
-
-Vertical
-
-```html
-<Divider vertical />
-```
-
-Color
+### Layout
 
-```html
-<Divider color="black" />
-```
-
-Content
-
-```html
-<Divider>My Content</Divider>
-```
+The `Divider` component has two layout variants:
 
-Icon
+- The default `Divider` is separates contents by rendering a horizontal line.
+- A `Divider` with the `vertical` prop set to true separates contents by rendering a vertical line.
 
-```html
-<Divider><Icon /></Divider>
-```
+### Inset
 
-Important
+A `Divider` with the `inset` prop adds padding to the beginning and end of the component.
 
-```html
-<Divider important>This is important!</Divider>
-```
+### Appearance
 
-Inset
+The `Divider` component has four appearance variants:
 
-```html
-<Divider inset />
-```
-
-Appearance
-
-```html
-<Divider apperance="subtle" />
-<Divider apperance="brand" />
-<Divider apperance="strong" />
-```
+- The default `Divider` is styled with the neutral foreground color from the theme.
+- appearance="brand": The `Divider` is styled with the brand color from the theme.
+- appearance="strong": The `Divider` is styled with a strong color that emphasizes the visual separation.
+- appearance="subtle": The `Divider` is styled with a subtle color to de-emphasize the visual separation.
 
 ## API
 
 From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packages/react-divider/src/components/Divider/Divider.types.ts)
 
-### Slots
-
-- root
-
-### Props
-
-```ts
-export interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
-  /**
-   * Determines the alignment of the content within the divider.
-   * @defaultvalue 'center'
-   */
-  alignContent?: 'start' | 'end' | 'center';
-
-  /**
-   * Predefined visual styles
-   * @defaultvalue 'default'
-   */
-  appearance?: 'default' | 'subtle' | 'brand' | 'strong';
-
-  /**
-   * A divider can have a overriding border color
-   */
-  color?: string;
-
-  /**
-   * A divider can be classified as important to emphasize its content
-   */
-  important?: boolean;
-
-  /**
-   * Adds a 12px padding to the begining and end of the divider
-   */
-  inset?: boolean;
-
-  /**
-   * A divider can be horizontal (default) or vertical
-   */
-  vertical?: boolean;
-
-  /**
-   * Overrides for border visuals
-   */
-  borderStyle?: string;
-  borderSize?: string | number;
-
-  /**
-   * Accessibility wrapper for content when presented.
-   * A shorthand prop can be a literal, object, or
-   * JSX. The `children` prop of the object can be a render function,
-   * taking in the original slot component and props.
-   */
-  wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;
-}
-```
-
-## Styling Tokens
-
-The current exposed tokens and default values are listed below:
-
-**Default**
-
-Font Color : tokens.alias.color.neutral.neutralForeground2
-
-Border Color: tokens.alias.color.neutral.neutralStroke2
-
-**Subtle**
-
-Font Color : tokens.alias.color.neutral.neutralForeground2
+## HTML Structure
 
-Border Color: tokens.alias.color.neutral.neutralStroke3
-
-**Brand**
-
-Font Color : tokens.alias.color.brand.brandBackgroundStatic
-
-Border Color: tokens.alias.color.brand.brandBackgroundStatic
-
-**Brand**
-
-Font Color : tokens.alias.color.neutral.neutralForeground2
-
-Border Color: tokens.alias.color.neutral.neutralStroke1
-
-## Structure
-
-```
+```html
 <div>
   <!-- ::before to handle the divider line independent of the divider having content or not -->
   <div>Content</div>
@@ -195,11 +78,13 @@ Border Color: tokens.alias.color.neutral.neutralStroke1
 ## Behaviors
 
 This component has no state.
-This control will have no interactions.
-This control will have no effect on screen readers.
 
-Content, if provided, will self determine it's behaviors.
+This component has no mouse, touch or keyboard interactions.
+
+Content, if provided, will self-determine its behaviors.
 
 ## Accessibility
 
-Since the divider is not a focusable element itself, this control doesn't require any accessibility roles or special behavior applied to it. The descendant content when wrapped from the divider must handle any required accessibility behaviors itself when appropriate.
+- The `Divider` component should be assigned a `role="separator"` by default.
+- The `Divider` component should be named by its content.
+- The `Divider` component should have no other accessibility concerns otherwise. The descendant content in the divider must handle any required accessibility behaviors itself when appropriate.

package/dist/react-divider.d.ts

@@ -1,80 +1,66 @@
-import { ComponentProps } from '@fluentui/react-utilities';
-import * as React from 'react';
-import { ShorthandProps } from '@fluentui/react-utilities';
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { IntrinsicShorthandProps } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
 
 /**
- * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
- * {@docCategory Divider}
+ * A divider visually segments content into groups.
  */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;
+export declare const Divider: ForwardRefComponent<DividerProps>;
 
-/**
- * {@docCategory Divider}
- */
-export declare interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+export declare const dividerClassName = "fui-Divider";
+
+export declare type DividerCommons = {
     /**
      * Determines the alignment of the content within the divider.
      * @defaultvalue 'center'
      */
-    alignContent?: 'start' | 'end' | 'center';
+    alignContent: 'start' | 'center' | 'end';
     /**
-     * Predefined visual styles
-     * @defaultvalue 'default'
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
      */
-    appearance?: 'default' | 'subtle' | 'brand' | 'strong';
+    appearance?: 'brand' | 'strong' | 'subtle';
     /**
-     * A divider can be classified as important to emphasize its content
+     * Adds padding to the beginning and end of the divider.
+     * @default false
      */
-    important?: boolean;
+    inset: boolean;
     /**
-     * Adds a 12px padding to the begining and end of the divider
-     */
-    inset?: boolean;
-    /**
-     * A divider can be horizontal (default) or vertical*/
-    vertical?: boolean;
-    /**
-     * Accessibility wrapper for content when presented.
-     * A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
+     * A divider can be horizontal (default) or vertical.
+     * @default false
      */
-    wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;
-}
+    vertical: boolean;
+};
 
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const dividerShorthandProps: readonly ["wrapper", "children"];
+export declare type DividerProps = ComponentProps<DividerSlots> & Partial<DividerCommons>;
 
-/**
- * {@docCategory Divider}
- */
-export declare interface DividerState extends DividerProps {
+export declare type DividerSlots = {
     /**
-     * Ref to the root slot
+     * Root of the component that renders as a `<div>` tag.
      */
-    ref: React.RefObject<HTMLElement>;
+    root: IntrinsicShorthandProps<'div'>;
     /**
-     * The Id created to expose accessability for readers
+     * Accessibility wrapper for content when presented.
      */
-    labelledById?: string;
-}
+    wrapper: IntrinsicShorthandProps<'div'>;
+};
+
+export declare type DividerState = ComponentState<DividerSlots> & DividerCommons;
 
 /**
- * Function that renders the final JSX of the component
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
  */
 export declare const renderDivider: (state: DividerState) => JSX.Element;
 
 /**
  * Returns the props and state required to render the component
- * @param props - Divider properties
- * @param ref - reference to root HTMLElement of Divider
- * @param defaultProps - default values for the properties of Divider
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
  */
-export declare const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>, defaultProps?: DividerProps | undefined) => DividerState;
+export declare const useDivider: (props: DividerProps, ref: React_2.Ref<HTMLElement>) => DividerState;
 
-/** Applies style classnames to slots */
-export declare const useDividerStyles: (s: DividerState) => DividerState;
+export declare const useDividerStyles: (state: DividerState) => DividerState;
 
 export { }

package/lib/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"../src/","sources":["Divider.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Divider/index';\n"]}
+{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../src/Divider.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/lib/common/isConformant.d.ts

@@ -1,2 +1,4 @@
 import { IsConformantOptions } from '@fluentui/react-conformance';
-export declare function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>): void;
+export declare function isConformant<TProps = {}>(testInfo: Omit<IsConformantOptions<TProps>, 'componentPath'> & {
+    componentPath?: string;
+}): void;

package/lib/common/isConformant.js

@@ -1,9 +1,11 @@
 import { isConformant as baseIsConformant } from '@fluentui/react-conformance';
+import makeStylesTests from '@fluentui/react-conformance-make-styles';
 export function isConformant(testInfo) {
-    var defaultOptions = {
-        asPropHandlesRef: true,
-        componentPath: module.parent.filename.replace('.test', ''),
-    };
-    baseIsConformant(defaultOptions, testInfo);
+  const defaultOptions = {
+    asPropHandlesRef: true,
+    componentPath: module.parent.filename.replace('.test', ''),
+    extraTests: makeStylesTests
+  };
+  baseIsConformant(defaultOptions, testInfo);
 }
 //# sourceMappingURL=isConformant.js.map

package/lib/common/isConformant.js.map

@@ -1 +1 @@
-{"version":3,"file":"isConformant.js","sourceRoot":"../src/","sources":["common/isConformant.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,IAAI,gBAAgB,EAAuB,MAAM,6BAA6B,CAAC;AAEpG,MAAM,UAAU,YAAY,CAAC,QAAoD;IAC/E,IAAM,cAAc,GAAG;QACrB,gBAAgB,EAAE,IAAI;QACtB,aAAa,EAAE,MAAO,CAAC,MAAO,CAAC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAE,CAAC;KAC7D,CAAC;IAEF,gBAAgB,CAAC,cAAc,EAAE,QAAQ,CAAC,CAAC;AAC7C,CAAC","sourcesContent":["import { isConformant as baseIsConformant, IsConformantOptions } from '@fluentui/react-conformance';\n\nexport function isConformant(testInfo: Omit<IsConformantOptions, 'componentPath'>) {\n  const defaultOptions = {\n    asPropHandlesRef: true,\n    componentPath: module!.parent!.filename.replace('.test', ''),\n  };\n\n  baseIsConformant(defaultOptions, testInfo);\n}\n"]}
+{"version":3,"sources":["../../src/common/isConformant.ts"],"names":[],"mappings":"AAAA,SAAS,YAAY,IAAI,gBAAzB,QAAkF,6BAAlF;AACA,OAAO,eAAP,MAA4B,yCAA5B;AAEA,OAAM,SAAU,YAAV,CACJ,QADI,EACqF;AAEzF,QAAM,cAAc,GAAyC;AAC3D,IAAA,gBAAgB,EAAE,IADyC;AAE3D,IAAA,aAAa,EAAE,MAAO,CAAC,MAAR,CAAgB,QAAhB,CAAyB,OAAzB,CAAiC,OAAjC,EAA0C,EAA1C,CAF4C;AAG3D,IAAA,UAAU,EAAE;AAH+C,GAA7D;AAMA,EAAA,gBAAgB,CAAC,cAAD,EAAiB,QAAjB,CAAhB;AACD","sourceRoot":""}

package/lib/components/Divider/Divider.d.ts

@@ -1,7 +1,6 @@
-import * as React from 'react';
-import { DividerProps } from './Divider.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DividerProps } from './Divider.types';
 /**
- * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
- * {@docCategory Divider}
+ * A divider visually segments content into groups.
  */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;
+export declare const Divider: ForwardRefComponent<DividerProps>;

package/lib/components/Divider/Divider.js

@@ -3,13 +3,13 @@ import { renderDivider } from './renderDivider';
 import { useDivider } from './useDivider';
 import { useDividerStyles } from './useDividerStyles';
 /**
- * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
- * {@docCategory Divider}
+ * A divider visually segments content into groups.
  */
-export var Divider = React.forwardRef(function (props, ref) {
-    var state = useDivider(props, ref);
-    useDividerStyles(state);
-    return renderDivider(state);
+
+export const Divider = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const state = useDivider(props, ref);
+  useDividerStyles(state);
+  return renderDivider(state);
 });
 Divider.displayName = 'Divider';
 //# sourceMappingURL=Divider.js.map

package/lib/components/Divider/Divider.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.js","sourceRoot":"../src/","sources":["components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAEtD;;;GAGG;AACH,MAAM,CAAC,IAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAA4B,UAAC,KAAK,EAAE,GAAG;IAC5E,IAAM,KAAK,GAAG,UAAU,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAErC,gBAAgB,CAAC,KAAK,CAAC,CAAC;IACxB,OAAO,aAAa,CAAC,KAAK,CAAC,CAAC;AAC9B,CAAC,CAAC,CAAC;AAEH,OAAO,CAAC,WAAW,GAAG,SAAS,CAAC","sourcesContent":["import * as React from 'react';\nimport { DividerProps } from './Divider.types';\nimport { renderDivider } from './renderDivider';\nimport { useDivider } from './useDivider';\nimport { useDividerStyles } from './useDividerStyles';\n\n/**\n * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.\n * {@docCategory Divider}\n */\nexport const Divider = React.forwardRef<HTMLElement, DividerProps>((props, ref) => {\n  const state = useDivider(props, ref);\n\n  useDividerStyles(state);\n  return renderDivider(state);\n});\n\nDivider.displayName = 'Divider';\n"]}
+{"version":3,"sources":["../../../src/components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,aAAT,QAA8B,iBAA9B;AACA,SAAS,UAAT,QAA2B,cAA3B;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,UAAU,CAAC,KAAD,EAAQ,GAAR,CAAxB;AAEA,EAAA,gBAAgB,CAAC,KAAD,CAAhB;AAEA,SAAO,aAAa,CAAC,KAAD,CAApB;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}

package/lib/components/Divider/Divider.types.d.ts

@@ -1,48 +1,35 @@
-import * as React from 'react';
-import { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';
-/**
- * {@docCategory Divider}
- */
-export interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type DividerSlots = {
     /**
-     * Determines the alignment of the content within the divider.
-     * @defaultvalue 'center'
+     * Root of the component that renders as a `<div>` tag.
      */
-    alignContent?: 'start' | 'end' | 'center';
+    root: IntrinsicShorthandProps<'div'>;
     /**
-     * Predefined visual styles
-     * @defaultvalue 'default'
-     */
-    appearance?: 'default' | 'subtle' | 'brand' | 'strong';
-    /**
-     * A divider can be classified as important to emphasize its content
+     * Accessibility wrapper for content when presented.
      */
-    important?: boolean;
+    wrapper: IntrinsicShorthandProps<'div'>;
+};
+export declare type DividerCommons = {
     /**
-     * Adds a 12px padding to the begining and end of the divider
+     * Determines the alignment of the content within the divider.
+     * @defaultvalue 'center'
      */
-    inset?: boolean;
+    alignContent: 'start' | 'center' | 'end';
     /**
-     * A divider can be horizontal (default) or vertical*/
-    vertical?: boolean;
-    /**
-     * Accessibility wrapper for content when presented.
-     * A shorthand prop can be a literal, object, or
-     * JSX. The `children` prop of the object can be a render function,
-     * taking in the original slot component and props.
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
      */
-    wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;
-}
-/**
- * {@docCategory Divider}
- */
-export interface DividerState extends DividerProps {
+    appearance?: 'brand' | 'strong' | 'subtle';
     /**
-     * Ref to the root slot
+     * Adds padding to the beginning and end of the divider.
+     * @default false
      */
-    ref: React.RefObject<HTMLElement>;
+    inset: boolean;
     /**
-     * The Id created to expose accessability for readers
+     * A divider can be horizontal (default) or vertical.
+     * @default false
      */
-    labelledById?: string;
-}
+    vertical: boolean;
+};
+export declare type DividerProps = ComponentProps<DividerSlots> & Partial<DividerCommons>;
+export declare type DividerState = ComponentState<DividerSlots> & DividerCommons;

package/lib/components/Divider/Divider.types.js

@@ -1 +1,2 @@
+export {};
 //# sourceMappingURL=Divider.types.js.map

package/lib/components/Divider/Divider.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"Divider.types.js","sourceRoot":"../src/","sources":["components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { ComponentProps, ShorthandProps } from '@fluentui/react-utilities';\n\n/**\n * {@docCategory Divider}\n */\nexport interface DividerProps extends ComponentProps, React.HTMLAttributes<HTMLElement> {\n  /**\n   * Determines the alignment of the content within the divider.\n   * @defaultvalue 'center'\n   */\n  alignContent?: 'start' | 'end' | 'center';\n\n  /**\n   * Predefined visual styles\n   * @defaultvalue 'default'\n   */\n  appearance?: 'default' | 'subtle' | 'brand' | 'strong';\n\n  /**\n   * A divider can be classified as important to emphasize its content\n   */\n  important?: boolean;\n\n  /**\n   * Adds a 12px padding to the begining and end of the divider\n   */\n  inset?: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical*/\n  vertical?: boolean;\n\n  /**\n   * Accessibility wrapper for content when presented.\n   * A shorthand prop can be a literal, object, or\n   * JSX. The `children` prop of the object can be a render function,\n   * taking in the original slot component and props.\n   */\n  wrapper?: ShorthandProps<React.HTMLAttributes<HTMLDivElement>>;\n}\n\n/**\n * {@docCategory Divider}\n */\nexport interface DividerState extends DividerProps {\n  /**\n   * Ref to the root slot\n   */\n  ref: React.RefObject<HTMLElement>;\n\n  /**\n   * The Id created to expose accessability for readers\n   */\n  labelledById?: string;\n}\n"]}
+{"version":3,"file":"Divider.types.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.types.ts"],"names":[],"mappings":""}

package/lib/components/Divider/index.js

@@ -1,4 +1,5 @@
 export * from './Divider';
+export * from './Divider.types';
 export * from './renderDivider';
 export * from './useDivider';
 export * from './useDividerStyles';

package/lib/components/Divider/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAE1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Divider/index.ts"],"names":[],"mappings":"AAAA,cAAc,WAAW,CAAC;AAC1B,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,oBAAoB,CAAC"}

package/lib/components/Divider/renderDivider.d.ts

@@ -1,5 +1,5 @@
 import { DividerState } from './Divider.types';
 /**
- * Function that renders the final JSX of the component
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
  */
 export declare const renderDivider: (state: DividerState) => JSX.Element;

package/lib/components/Divider/renderDivider.js

@@ -1,13 +1,14 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
-import { dividerShorthandProps } from './useDivider';
 /**
- * Function that renders the final JSX of the component
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
  */
-export var renderDivider = function (state) {
-    var _a = getSlots(state, dividerShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    var children = state.children;
-    return (React.createElement(slots.root, __assign({}, slotProps.root, { role: "separator" }), children !== undefined && React.createElement(slots.wrapper, __assign({}, slotProps.wrapper))));
+
+export const renderDivider = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state, ['root', 'wrapper']);
+  return /*#__PURE__*/React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children !== undefined && /*#__PURE__*/React.createElement(slots.wrapper, Object.assign({}, slotProps.wrapper), slotProps.root.children));
 };
 //# sourceMappingURL=renderDivider.js.map

package/lib/components/Divider/renderDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"renderDivider.js","sourceRoot":"../src/","sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAErD,OAAO,EAAE,qBAAqB,EAAE,MAAM,cAAc,CAAC;AAErD;;GAEG;AACH,MAAM,CAAC,IAAM,aAAa,GAAG,UAAC,KAAmB;IACzC,IAAA,2CAA6D,EAA3D,gBAAK,EAAE,wBAAoD,CAAC;IAC5D,IAAA,yBAAQ,CAAW;IAE3B,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,eAAK,SAAS,CAAC,IAAI,IAAE,IAAI,EAAC,WAAW,KAC7C,QAAQ,KAAK,SAAS,IAAI,oBAAC,KAAK,CAAC,OAAO,eAAK,SAAS,CAAC,OAAO,EAAI,CACxD,CACd,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerState } from './Divider.types';\nimport { dividerShorthandProps } from './useDivider';\n\n/**\n * Function that renders the final JSX of the component\n */\nexport const renderDivider = (state: DividerState) => {\n  const { slots, slotProps } = getSlots(state, dividerShorthandProps);\n  const { children } = state;\n\n  return (\n    <slots.root {...slotProps.root} role=\"separator\">\n      {children !== undefined && <slots.wrapper {...slotProps.wrapper} />}\n    </slots.root>\n  );\n};\n"]}
+{"version":3,"sources":["../../../src/components/Divider/renderDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,aAAa,GAAI,KAAD,IAAwB;AACnD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,EAAsB,CAAC,MAAD,EAAS,SAAT,CAAtB,CAArC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,MAAA,CAAA,MAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM","sourceRoot":""}

package/lib/components/Divider/useDivider.d.ts

@@ -1,13 +1,8 @@
 import * as React from 'react';
-import { DividerProps, DividerState } from './Divider.types';
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const dividerShorthandProps: readonly ["wrapper", "children"];
+import type { DividerProps, DividerState } from './Divider.types';
 /**
  * Returns the props and state required to render the component
- * @param props - Divider properties
- * @param ref - reference to root HTMLElement of Divider
- * @param defaultProps - default values for the properties of Divider
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
  */
-export declare const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>, defaultProps?: DividerProps | undefined) => DividerState;
+export declare const useDivider: (props: DividerProps, ref: React.Ref<HTMLElement>) => DividerState;

package/lib/components/Divider/useDivider.js

@@ -1,24 +1,42 @@
-import * as React from 'react';
-import { makeMergeProps, resolveShorthandProps, useId, useMergedRefs } from '@fluentui/react-utilities';
-/**
- * Consts listing which props are shorthand props.
- */
-export var dividerShorthandProps = ['wrapper', 'children'];
-var mergeProps = makeMergeProps({ deepMerge: dividerShorthandProps });
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
 /**
  * Returns the props and state required to render the component
- * @param props - Divider properties
- * @param ref - reference to root HTMLElement of Divider
- * @param defaultProps - default values for the properties of Divider
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
  */
-export var useDivider = function (props, ref, defaultProps) {
-    var dividerId = useId('divider-');
-    var state = mergeProps({
-        ref: useMergedRefs(ref, React.useRef(null)),
-        /* The Id created to expose accessibility for readers */
-        'aria-labelledby': props.children ? dividerId : undefined,
-        wrapper: { as: 'div', children: props.children, id: dividerId },
-    }, defaultProps && resolveShorthandProps(defaultProps, dividerShorthandProps), resolveShorthandProps(props, dividerShorthandProps));
-    return state;
+
+export const useDivider = (props, ref) => {
+  const {
+    alignContent = 'center',
+    appearance,
+    inset = false,
+    vertical = false,
+    wrapper
+  } = props;
+  const dividerId = useId('divider-');
+  return {
+    // Props passed at the top-level
+    alignContent,
+    appearance,
+    inset,
+    vertical,
+    // Slots definition
+    components: {
+      root: 'div',
+      wrapper: 'div'
+    },
+    root: getNativeElementProps('div', { ...props,
+      ref,
+      role: 'separator',
+      'aria-labelledby': props.children ? dividerId : undefined
+    }),
+    wrapper: resolveShorthand(wrapper, {
+      required: true,
+      defaultProps: {
+        id: dividerId,
+        children: props.children
+      }
+    })
+  };
 };
 //# sourceMappingURL=useDivider.js.map

package/lib/components/Divider/useDivider.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDivider.js","sourceRoot":"../src/","sources":["components/Divider/useDivider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,cAAc,EAAE,qBAAqB,EAAE,KAAK,EAAE,aAAa,EAAE,MAAM,2BAA2B,CAAC;AAGxG;;GAEG;AACH,MAAM,CAAC,IAAM,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;AAEtE,IAAM,UAAU,GAAG,cAAc,CAAe,EAAE,SAAS,EAAE,qBAAqB,EAAE,CAAC,CAAC;AAEtF;;;;;GAKG;AACH,MAAM,CAAC,IAAM,UAAU,GAAG,UACxB,KAAmB,EACnB,GAA2B,EAC3B,YAA2B;IAE3B,IAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,aAAa,CAAC,GAAG,EAAE,KAAK,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAC3C,wDAAwD;QACxD,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS;QACzD,OAAO,EAAE,EAAE,EAAE,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,EAAE,EAAE,EAAE,SAAS,EAAE;KAChE,EACD,YAAY,IAAI,qBAAqB,CAAC,YAAY,EAAE,qBAAqB,CAAC,EAC1E,qBAAqB,CAAC,KAAK,EAAE,qBAAqB,CAAC,CACpD,CAAC;IAEF,OAAO,KAAK,CAAC;AACf,CAAC,CAAC","sourcesContent":["import * as React from 'react';\nimport { makeMergeProps, resolveShorthandProps, useId, useMergedRefs } from '@fluentui/react-utilities';\nimport { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Consts listing which props are shorthand props.\n */\nexport const dividerShorthandProps = ['wrapper', 'children'] as const;\n\nconst mergeProps = makeMergeProps<DividerState>({ deepMerge: dividerShorthandProps });\n\n/**\n * Returns the props and state required to render the component\n * @param props - Divider properties\n * @param ref - reference to root HTMLElement of Divider\n * @param defaultProps - default values for the properties of Divider\n */\nexport const useDivider = (\n  props: DividerProps,\n  ref: React.Ref<HTMLElement>,\n  defaultProps?: DividerProps,\n): DividerState => {\n  const dividerId = useId('divider-');\n  const state = mergeProps(\n    {\n      ref: useMergedRefs(ref, React.useRef(null)),\n      /* The Id created to expose accessibility for readers */\n      'aria-labelledby': props.children ? dividerId : undefined,\n      wrapper: { as: 'div', children: props.children, id: dividerId },\n    },\n    defaultProps && resolveShorthandProps(defaultProps, dividerShorthandProps),\n    resolveShorthandProps(props, dividerShorthandProps),\n  );\n\n  return state;\n};\n"]}
+{"version":3,"sources":["../../../src/components/Divider/useDivider.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;AAIG;;AACH,OAAO,MAAM,UAAU,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AAC3F,QAAM;AAAE,IAAA,YAAY,GAAG,QAAjB;AAA2B,IAAA,UAA3B;AAAuC,IAAA,KAAK,GAAG,KAA/C;AAAsD,IAAA,QAAQ,GAAG,KAAjE;AAAwE,IAAA;AAAxE,MAAoF,KAA1F;AACA,QAAM,SAAS,GAAG,KAAK,CAAC,UAAD,CAAvB;AAEA,SAAO;AACL;AACA,IAAA,YAFK;AAGL,IAAA,UAHK;AAIL,IAAA,KAJK;AAKL,IAAA,QALK;AAOL;AACA,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE;AAFC,KARP;AAaL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,IAAI,EAAE,WAH2B;AAIjC,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AAJf,KAAR,CAbtB;AAmBL,IAAA,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,SADQ;AAEZ,QAAA,QAAQ,EAAE,KAAK,CAAC;AAFJ;AAFmB,KAAV;AAnBpB,GAAP;AA2BD,CA/BM","sourceRoot":""}