@fluentui/react-divider 9.0.0-nightly.d730088d7f.0 → 9.0.0-rc.10

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,144 +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" />
-```
+The `Divider` component has two layout variants:
 
-Content
+- 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>My Content</Divider>
-```
+### Inset
 
-Icon
+A `Divider` with the `inset` prop adds padding to the beginning and end of the component.
 
-```html
-<Divider><Icon /></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 type DividerProps = 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
-
-Border Color: tokens.alias.color.neutral.neutralStroke3
+## HTML Structure
 
-**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>
@@ -190,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/index.d.ts

@@ -0,0 +1,70 @@
+import type { ComponentProps } from '@fluentui/react-utilities';
+import type { ComponentState } from '@fluentui/react-utilities';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import * as React_2 from 'react';
+import type { Slot } from '@fluentui/react-utilities';
+import type { SlotClassNames } from '@fluentui/react-utilities';
+
+/**
+ * A divider visually segments content into groups.
+ */
+export declare const Divider: ForwardRefComponent<DividerProps>;
+
+export declare const dividerClassNames: SlotClassNames<DividerSlots>;
+
+export declare type DividerProps = ComponentProps<Partial<DividerSlots>> & {
+    /**
+     * Determines the alignment of the content within the divider.
+     *
+     * @default 'center'
+     */
+    alignContent?: 'start' | 'center' | 'end';
+    /**
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
+     *
+     * @default 'default'
+     */
+    appearance?: 'brand' | 'default' | 'strong' | 'subtle';
+    /**
+     * Adds padding to the beginning and end of the divider.
+     *
+     * @default false
+     */
+    inset?: boolean;
+    /**
+     * A divider can be horizontal (default) or vertical.
+     *
+     * @default false
+     */
+    vertical?: boolean;
+};
+
+export declare type DividerSlots = {
+    /**
+     * Root of the component that renders as a `<div>` tag.
+     */
+    root: Slot<'div'>;
+    /**
+     * Accessibility wrapper for content when presented.
+     */
+    wrapper: Slot<'div'>;
+};
+
+export declare type DividerState = ComponentState<DividerSlots> & Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;
+
+/**
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
+ */
+export declare const renderDivider_unstable: (state: DividerState) => JSX.Element;
+
+/**
+ * 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 declare const useDivider_unstable: (props: DividerProps, ref: React_2.Ref<HTMLElement>) => DividerState;
+
+export declare const useDividerStyles_unstable: (state: DividerState) => DividerState;
+
+export { }

package/lib/Divider.js.map

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

package/lib/components/Divider/Divider.js

@@ -1,15 +1,15 @@
 import * as React from 'react';
-import { renderDivider } from './renderDivider';
-import { useDivider } from './useDivider';
-import { useDividerStyles } from './useDividerStyles';
+import { renderDivider_unstable } from './renderDivider';
+import { useDivider_unstable } from './useDivider';
+import { useDividerStyles_unstable } from './useDividerStyles';
 /**
- * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
+ * A divider visually segments content into groups.
  */
 
-export var Divider = /*#__PURE__*/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_unstable(props, ref);
+  useDividerStyles_unstable(state);
+  return renderDivider_unstable(state);
 });
 Divider.displayName = 'Divider';
 //# sourceMappingURL=Divider.js.map

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

@@ -1 +1 @@
-{"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,IAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,UAAC,KAAD,EAAQ,GAAR,EAAW;AACpF,MAAM,KAAK,GAAG,UAAU,CAAC,KAAD,EAAQ,GAAR,CAAxB;AAEA,EAAA,gBAAgB,CAAC,KAAD,CAAhB;AACA,SAAO,aAAa,CAAC,KAAD,CAApB;AACD,CALyD,CAAnD;AAOP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourceRoot":""}
+{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,sBAAT,QAAuC,iBAAvC;AACA,SAAS,mBAAT,QAAoC,cAApC;AACA,SAAS,yBAAT,QAA0C,oBAA1C;AAIA;;AAEG;;AACH,OAAO,MAAM,OAAO,gBAAsC,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;AACxF,QAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;AAEA,EAAA,yBAAyB,CAAC,KAAD,CAAzB;AAEA,SAAO,sBAAsB,CAAC,KAAD,CAA7B;AACD,CANyD,CAAnD;AAQP,OAAO,CAAC,WAAR,GAAsB,SAAtB","sourcesContent":["import * as React from 'react';\nimport { renderDivider_unstable } from './renderDivider';\nimport { useDivider_unstable } from './useDivider';\nimport { useDividerStyles_unstable } from './useDividerStyles';\nimport type { ForwardRefComponent } from '@fluentui/react-utilities';\nimport type { DividerProps } from './Divider.types';\n\n/**\n * A divider visually segments content into groups.\n */\nexport const Divider: ForwardRefComponent<DividerProps> = React.forwardRef((props, ref) => {\n  const state = useDivider_unstable(props, ref);\n\n  useDividerStyles_unstable(state);\n\n  return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"sourceRoot":"../src/"}

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

@@ -1 +1 @@
-{"version":3,"file":"Divider.types.js","sourceRoot":"","sources":["../../../src/components/Divider/Divider.types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"Divider.types.js","sourceRoot":"../src/","sources":["components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n  /**\n   * Root of the component that renders as a `<div>` tag.\n   */\n  root: Slot<'div'>;\n\n  /**\n   * Accessibility wrapper for content when presented.\n   */\n  wrapper: Slot<'div'>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n  /**\n   * Determines the alignment of the content within the divider.\n   *\n   * @default 'center'\n   */\n  alignContent?: 'start' | 'center' | 'end';\n\n  /**\n   * A divider can have one of the preset appearances.\n   * When not specified, the divider has its default appearance.\n   *\n   * @default 'default'\n   */\n  appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n  /**\n   * Adds padding to the beginning and end of the divider.\n   *\n   * @default false\n   */\n  inset?: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical.\n   *\n   * @default false\n   */\n  vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n  Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"]}

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["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","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}

package/lib/components/Divider/renderDivider.js

@@ -1,15 +1,16 @@
-import { __assign } from "tslib";
 import * as React from 'react';
 import { getSlots } from '@fluentui/react-utilities';
 /**
- * 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, ['root', 'wrapper']),
-      slots = _a.slots,
-      slotProps = _a.slotProps;
-
-  return /*#__PURE__*/React.createElement(slots.root, __assign({}, slotProps.root), slotProps.root.children !== undefined && /*#__PURE__*/React.createElement(slots.wrapper, __assign({}, slotProps.wrapper), slotProps.root.children));
+export const renderDivider_unstable = state => {
+  const {
+    slots,
+    slotProps
+  } = getSlots(state);
+  return /*#__PURE__*/React.createElement(slots.root, { ...slotProps.root
+  }, slotProps.root.children !== undefined && /*#__PURE__*/React.createElement(slots.wrapper, { ...slotProps.wrapper
+  }, slotProps.root.children));
 };
 //# sourceMappingURL=renderDivider.js.map

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

@@ -1 +1 @@
-{"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,IAAM,aAAa,GAAG,UAAC,KAAD,EAAoB;AACzC,MAAA,EAAA,GAAuB,QAAQ,CAAe,KAAf,EAAsB,CAAC,MAAD,EAAS,SAAT,CAAtB,CAA/B;AAAA,MAAE,KAAK,GAAA,EAAA,CAAA,KAAP;AAAA,MAAS,SAAS,GAAA,EAAA,CAAA,SAAlB;;AACN,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,IAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,QAAA,CAAA,EAAA,EAAK,SAAS,CAAC,OAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM","sourceRoot":""}
+{"version":3,"sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,QAAT,QAAyB,2BAAzB;AAGA;;AAEG;;AACH,OAAO,MAAM,sBAAsB,GAAI,KAAD,IAAwB;AAC5D,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,QAAQ,CAAe,KAAf,CAArC;AACA,sBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;AAAf,GAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;AAAf,GAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport { DividerSlots, DividerState } from './Divider.types';\n\n/**\n * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.\n */\nexport const renderDivider_unstable = (state: DividerState) => {\n  const { slots, slotProps } = getSlots<DividerSlots>(state);\n  return (\n    <slots.root {...slotProps.root}>\n      {slotProps.root.children !== undefined && (\n        <slots.wrapper {...slotProps.wrapper}>{slotProps.root.children}</slots.wrapper>\n      )}\n    </slots.root>\n  );\n};\n"],"sourceRoot":"../src/"}

package/lib/components/Divider/useDivider.js

@@ -1,35 +1,36 @@
-import { __assign } from "tslib";
 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 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) {
-  var _a = props.alignContent,
-      alignContent = _a === void 0 ? 'center' : _a,
-      _b = props.inset,
-      inset = _b === void 0 ? false : _b,
-      _c = props.vertical,
-      vertical = _c === void 0 ? false : _c,
-      appearance = props.appearance,
-      wrapper = props.wrapper;
-  var dividerId = useId('divider-');
+export const useDivider_unstable = (props, ref) => {
+  const {
+    alignContent = 'center',
+    appearance = 'default',
+    inset = false,
+    vertical = false,
+    wrapper
+  } = props;
+  const dividerId = useId('divider-');
   return {
-    alignContent: alignContent,
-    inset: inset,
-    vertical: vertical,
-    appearance: appearance,
+    // Props passed at the top-level
+    alignContent,
+    appearance,
+    inset,
+    vertical,
+    // Slots definition
     components: {
       root: 'div',
       wrapper: 'div'
     },
-    root: getNativeElementProps('div', __assign(__assign({}, props), {
-      ref: ref,
+    root: getNativeElementProps('div', { ...props,
+      ref,
       role: 'separator',
+      'aria-orientation': vertical ? 'vertical' : 'horizontal',
       'aria-labelledby': props.children ? dividerId : undefined
-    })),
+    }),
     wrapper: resolveShorthand(wrapper, {
       required: true,
       defaultProps: {

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

@@ -1 +1 @@
-{"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,IAAM,UAAU,GAAG,UAAC,KAAD,EAAsB,GAAtB,EAAiD;AACjE,MAAA,EAAA,GAAkF,KAAK,CAAhE,YAAvB;AAAA,MAAA,YAAY,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,QAAH,GAAW,EAAvB;AAAA,MAAyB,EAAA,GAAyD,KAAK,CAAjD,KAAtC;AAAA,MAAyB,KAAK,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAtC;AAAA,MAAwC,EAAA,GAA0C,KAAK,CAA/B,QAAxD;AAAA,MAAwC,QAAQ,GAAA,EAAA,KAAA,KAAA,CAAA,GAAG,KAAH,GAAQ,EAAxD;AAAA,MAA0D,UAAU,GAAc,KAAK,CAAnB,UAApE;AAAA,MAAsE,OAAO,GAAK,KAAK,CAAV,OAA7E;AACR,MAAM,SAAS,GAAG,KAAK,CAAC,UAAD,CAAvB;AAEA,SAAO;AACL,IAAA,YAAY,EAAA,YADP;AAEL,IAAA,KAAK,EAAA,KAFA;AAGL,IAAA,QAAQ,EAAA,QAHH;AAIL,IAAA,UAAU,EAAA,UAJL;AAKL,IAAA,UAAU,EAAE;AACV,MAAA,IAAI,EAAE,KADI;AAEV,MAAA,OAAO,EAAE;AAFC,KALP;AASL,IAAA,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAM,QAAA,CAAA,QAAA,CAAA,EAAA,EAC5B,KAD4B,CAAA,EACvB;AACR,MAAA,GAAG,EAAA,GADK;AAER,MAAA,IAAI,EAAE,WAFE;AAGR,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AAHxC,KADuB,CAAN,CATtB;AAeL,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;AAfpB,GAAP;AAuBD,CA3BM","sourceRoot":""}
+{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":"AACA,SAAS,qBAAT,EAAgC,gBAAhC,EAAkD,KAAlD,QAA+D,2BAA/D;AAGA;;;;AAIG;;AACH,OAAO,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;AACpG,QAAM;AAAE,IAAA,YAAY,GAAG,QAAjB;AAA2B,IAAA,UAAU,GAAG,SAAxC;AAAmD,IAAA,KAAK,GAAG,KAA3D;AAAkE,IAAA,QAAQ,GAAG,KAA7E;AAAoF,IAAA;AAApF,MAAgG,KAAtG;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,0BAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;AAKjC,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AALf,KAAR,CAbtB;AAoBL,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;AApBpB,GAAP;AA4BD,CAhCM","sourcesContent":["import * as React from 'react';\nimport { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';\nimport type { DividerProps, DividerState } from './Divider.types';\n\n/**\n * Returns the props and state required to render the component\n * @param props - User-provided props to the Divider component.\n * @param ref - User-provided ref to be passed to the Divider component.\n */\nexport const useDivider_unstable = (props: DividerProps, ref: React.Ref<HTMLElement>): DividerState => {\n  const { alignContent = 'center', appearance = 'default', inset = false, vertical = false, wrapper } = props;\n  const dividerId = useId('divider-');\n\n  return {\n    // Props passed at the top-level\n    alignContent,\n    appearance,\n    inset,\n    vertical,\n\n    // Slots definition\n    components: {\n      root: 'div',\n      wrapper: 'div',\n    },\n\n    root: getNativeElementProps('div', {\n      ...props,\n      ref,\n      role: 'separator',\n      'aria-orientation': vertical ? 'vertical' : 'horizontal',\n      'aria-labelledby': props.children ? dividerId : undefined,\n    }),\n    wrapper: resolveShorthand(wrapper, {\n      required: true,\n      defaultProps: {\n        id: dividerId,\n        children: props.children,\n      },\n    }),\n  };\n};\n"],"sourceRoot":"../src/"}