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

package/lib-commonjs/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-commonjs/components/Divider/Divider.types.js

@@ -1,3 +1,6 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
 //# sourceMappingURL=Divider.types.js.map

package/lib-commonjs/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,"sources":[],"names":[],"mappings":"","sourceRoot":""}

package/lib-commonjs/components/Divider/index.js

@@ -1,8 +1,18 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+const tslib_1 = /*#__PURE__*/require("tslib");
+
 tslib_1.__exportStar(require("./Divider"), exports);
+
+tslib_1.__exportStar(require("./Divider.types"), exports);
+
 tslib_1.__exportStar(require("./renderDivider"), exports);
+
 tslib_1.__exportStar(require("./useDivider"), exports);
+
 tslib_1.__exportStar(require("./useDividerStyles"), exports);
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/Divider/index.ts"],"names":[],"mappings":";;;AAAA,oDAA0B;AAE1B,0DAAgC;AAChC,uDAA6B;AAC7B,6DAAmC","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}
+{"version":3,"sources":["../../../src/components/Divider/index.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,WAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,iBAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,cAAA,CAAA,EAAA,OAAA;;AACA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,oBAAA,CAAA,EAAA,OAAA","sourceRoot":""}

package/lib-commonjs/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-commonjs/components/Divider/renderDivider.js

@@ -1,15 +1,25 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var tslib_1 = require("tslib");
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-var useDivider_1 = require("./useDivider");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.renderDivider = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@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.
  */
-exports.renderDivider = function (state) {
-    var _a = react_utilities_1.getSlots(state, useDivider_1.dividerShorthandProps), slots = _a.slots, slotProps = _a.slotProps;
-    var children = state.children;
-    return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root, { role: "separator" }), children !== undefined && React.createElement(slots.wrapper, tslib_1.__assign({}, slotProps.wrapper))));
+
+
+const renderDivider = state => {
+  const {
+    slots,
+    slotProps
+  } = react_utilities_1.getSlots(state, ['root', 'wrapper']);
+  return React.createElement(slots.root, Object.assign({}, slotProps.root), slotProps.root.children !== undefined && React.createElement(slots.wrapper, Object.assign({}, slotProps.wrapper), slotProps.root.children));
 };
+
+exports.renderDivider = renderDivider;
 //# sourceMappingURL=renderDivider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"renderDivider.js","sourceRoot":"../src/","sources":["components/Divider/renderDivider.tsx"],"names":[],"mappings":";;;AAAA,6BAA+B;AAC/B,6DAAqD;AAErD,2CAAqD;AAErD;;GAEG;AACU,QAAA,aAAa,GAAG,UAAC,KAAmB;IACzC,IAAA,0EAA6D,EAA3D,gBAAK,EAAE,wBAAoD,CAAC;IAC5D,IAAA,yBAAQ,CAAW;IAE3B,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,IAAE,IAAI,EAAC,WAAW,KAC7C,QAAQ,KAAK,SAAS,IAAI,oBAAC,KAAK,CAAC,OAAO,uBAAK,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,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;AAEG;;;AACI,MAAM,aAAa,GAAI,KAAD,IAAwB;AACnD,QAAM;AAAE,IAAA,KAAF;AAAS,IAAA;AAAT,MAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,EAA8B,CAAC,MAAD,EAAS,SAAT,CAA9B,CAA7B;AACA,SACE,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,IACC,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;;AAAM,OAAA,CAAA,aAAA,GAAa,aAAb","sourceRoot":""}

package/lib-commonjs/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-commonjs/components/Divider/useDivider.js

@@ -1,26 +1,52 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-var React = require("react");
-var react_utilities_1 = require("@fluentui/react-utilities");
-/**
- * Consts listing which props are shorthand props.
- */
-exports.dividerShorthandProps = ['wrapper', 'children'];
-var mergeProps = react_utilities_1.makeMergeProps({ deepMerge: exports.dividerShorthandProps });
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDivider = void 0;
+
+const react_utilities_1 = /*#__PURE__*/require("@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.
  */
-exports.useDivider = function (props, ref, defaultProps) {
-    var dividerId = react_utilities_1.useId('divider-');
-    var state = mergeProps({
-        ref: react_utilities_1.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 && react_utilities_1.resolveShorthandProps(defaultProps, exports.dividerShorthandProps), react_utilities_1.resolveShorthandProps(props, exports.dividerShorthandProps));
-    return state;
+
+
+const useDivider = (props, ref) => {
+  const {
+    alignContent = 'center',
+    appearance,
+    inset = false,
+    vertical = false,
+    wrapper
+  } = props;
+  const dividerId = react_utilities_1.useId('divider-');
+  return {
+    // Props passed at the top-level
+    alignContent,
+    appearance,
+    inset,
+    vertical,
+    // Slots definition
+    components: {
+      root: 'div',
+      wrapper: 'div'
+    },
+    root: react_utilities_1.getNativeElementProps('div', { ...props,
+      ref,
+      role: 'separator',
+      'aria-labelledby': props.children ? dividerId : undefined
+    }),
+    wrapper: react_utilities_1.resolveShorthand(wrapper, {
+      required: true,
+      defaultProps: {
+        id: dividerId,
+        children: props.children
+      }
+    })
+  };
 };
+
+exports.useDivider = useDivider;
 //# sourceMappingURL=useDivider.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"useDivider.js","sourceRoot":"../src/","sources":["components/Divider/useDivider.ts"],"names":[],"mappings":";;AAAA,6BAA+B;AAC/B,6DAAwG;AAGxG;;GAEG;AACU,QAAA,qBAAqB,GAAG,CAAC,SAAS,EAAE,UAAU,CAAU,CAAC;AAEtE,IAAM,UAAU,GAAG,gCAAc,CAAe,EAAE,SAAS,EAAE,6BAAqB,EAAE,CAAC,CAAC;AAEtF;;;;;GAKG;AACU,QAAA,UAAU,GAAG,UACxB,KAAmB,EACnB,GAA2B,EAC3B,YAA2B;IAE3B,IAAM,SAAS,GAAG,uBAAK,CAAC,UAAU,CAAC,CAAC;IACpC,IAAM,KAAK,GAAG,UAAU,CACtB;QACE,GAAG,EAAE,+BAAa,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,uCAAqB,CAAC,YAAY,EAAE,6BAAqB,CAAC,EAC1E,uCAAqB,CAAC,KAAK,EAAE,6BAAqB,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,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,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,iBAAA,CAAA,KAAA,CAAM,UAAN,CAAlB;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,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;AAEjC,MAAA,GAFiC;AAGjC,MAAA,IAAI,EAAE,WAH2B;AAIjC,yBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;AAJf,KAA7B,CAbD;AAmBL,IAAA,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAjB,EAA0B;AACjC,MAAA,QAAQ,EAAE,IADuB;AAEjC,MAAA,YAAY,EAAE;AACZ,QAAA,EAAE,EAAE,SADQ;AAEZ,QAAA,QAAQ,EAAE,KAAK,CAAC;AAFJ;AAFmB,KAA1B;AAnBJ,GAAP;AA2BD,CA/BM;;AAAM,OAAA,CAAA,UAAA,GAAU,UAAV","sourceRoot":""}

package/lib-commonjs/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 dividerClassName = "fui-Divider";
+export declare const useDividerStyles: (state: DividerState) => DividerState;