@fluentui/react-divider 9.0.0-alpha.9 → 9.0.0-nightly.46b9ea7036.0

package/Spec.md

@@ -70,12 +70,6 @@ Icon
 <Divider><Icon /></Divider>
 ```
 
-Important
-
-```html
-<Divider important>This is important!</Divider>
-```
-
 Inset
 
 ```html
@@ -101,53 +95,54 @@ From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packa
 ### 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>>;
-}
+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

package/dist/react-divider.d.ts

@@ -1,65 +1,51 @@
-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}
  */
-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 type DividerCommons = {
     /**
      * Determines the alignment of the content within the divider.
      * @defaultvalue 'center'
      */
-    alignContent?: 'start' | 'end' | 'center';
+    alignContent: 'start' | 'end' | 'center';
     /**
-     * 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
+     * A divider can be horizontal (default) or vertical
+     * @default false
      */
-    inset?: boolean;
-    /**
-     * A divider can be horizontal (default) or vertical*/
-    vertical?: boolean;
+    vertical: boolean;
+};
+
+export declare type DividerProps = ComponentProps<DividerSlots> & Partial<DividerCommons>;
+
+export declare type DividerSlots = {
+    root: IntrinsicShorthandProps<'div'>;
     /**
      * 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>>;
-}
-
-/**
- * Consts listing which props are shorthand props.
- */
-export declare const dividerShorthandProps: readonly ["wrapper", "children"];
+    wrapper: IntrinsicShorthandProps<'div'>;
+};
 
-/**
- * {@docCategory Divider}
- */
-export declare interface DividerState extends DividerProps {
-    /**
-     * Ref to the root slot
-     */
-    ref: React.RefObject<HTMLElement>;
-    /**
-     * The Id created to expose accessability for readers
-     */
-    labelledById?: string;
-}
+export declare type DividerState = ComponentState<DividerSlots> & DividerCommons;
 
 /**
  * Function that renders the final JSX of the component
@@ -70,11 +56,10 @@ 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
  */
-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);
+  var 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,MAAM,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 { DividerProps } from './Divider.types';
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
 /**
  * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
- * {@docCategory Divider}
  */
-export declare const Divider: React.ForwardRefExoticComponent<DividerProps & React.RefAttributes<HTMLElement>>;
+export declare const Divider: ForwardRefComponent<DividerProps>;

package/lib/components/Divider/Divider.js

@@ -4,12 +4,12 @@ import { useDivider } from './useDivider';
 import { useDividerStyles } from './useDividerStyles';
 /**
  * Define a styled Divider, using the `useDivider` and `useDividerStyles` hooks.
- * {@docCategory Divider}
  */
-export var Divider = React.forwardRef(function (props, ref) {
-    var state = useDivider(props, ref);
-    useDividerStyles(state);
-    return renderDivider(state);
+
+export var Divider = /*#__PURE__*/React.forwardRef(function (props, ref) {
+  var 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,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":""}

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> {
-    /**
-     * 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 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;
+import type { ComponentProps, ComponentState, IntrinsicShorthandProps } from '@fluentui/react-utilities';
+export declare type DividerSlots = {
+    root: IntrinsicShorthandProps<'div'>;
     /**
      * 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>>;
-}
-/**
- * {@docCategory Divider}
- */
-export interface DividerState extends DividerProps {
+    wrapper: IntrinsicShorthandProps<'div'>;
+};
+export declare type DividerCommons = {
+    /**
+     * Determines the alignment of the content within the divider.
+     * @defaultvalue 'center'
+     */
+    alignContent: 'start' | 'end' | 'center';
+    /**
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
+     */
+    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.js

@@ -1,13 +1,15 @@
 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
  */
+
 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))));
+  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));
 };
 //# 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,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":""}

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
  */
-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 { __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 defaultProps - default values for the properties of Divider
  */
-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 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-');
+  return {
+    alignContent: alignContent,
+    inset: inset,
+    vertical: vertical,
+    appearance: appearance,
+    components: {
+      root: 'div',
+      wrapper: 'div'
+    },
+    root: getNativeElementProps('div', __assign(__assign({}, props), {
+      ref: 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,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":""}

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

@@ -1,3 +1,3 @@
 import { DividerState } from './Divider.types';
 /** Applies style classnames to slots */
-export declare const useDividerStyles: (s: DividerState) => DividerState;
+export declare const useDividerStyles: (state: DividerState) => DividerState;