@fluentui/react-divider 0.0.0-nightly-20220302-0405.1

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-divider
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED *AS IS*, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/MIGRATION.md

@@ -0,0 +1,60 @@
+# Divider Migration
+
+## STATUS: WIP 🚧
+
+This Migration guide is a work in progress and is not yet ready for use.
+
+## Migration from v8
+
+The existing `Separator` control supports the `content` property as well as children nodes. The `content` property has been removed and now only supports children.
+
+With the new converged capabilities, both the `styles` and `theme` properties are no longer supported.
+
+Properties that are still available are the `alignContent` and `vertical` with the same acceptable values that are currently defined.
+
+## Migration from v0
+
+The v0 Divider is close to the converged Divider. Again, as with the Separator control, the `content` property in the converged component is not supported.
+
+Also, from design discussion, the converged component does not support the `size` component as it is redundant as it can be replicated through using the `borderSize` property and if needed, update the `fontSize` property to match desired style.
+
+The `fitted` property also is not in use as by default the `Divider` can use the standard `margin` | `marginLeft` | `marginRight` | `marginTop` | `marginBottom` properties to adjust as needed. The default margin for the divider is 0.
+
+## Property mapping
+
+| v8 `Separator` | v0 `Divider` | Converged `Divider`   |
+| -------------- | ------------ | --------------------- |
+| alignContent   | -            | alignContent          |
+| vertical       | vertical     | vertical              |
+| theme          | -            | (tokens)              |
+| styles         | -            | (tokens)              |
+| -              | color        | color                 |
+| -              | size         | fontSize & borderSize |
+| -              | important    | important             |
+| -              | fitted       | margin properties     |
+| -              | -            | inset                 |
+| -              | -            | borderStyle           |
+| -              | -            | borderSize            |
+| -              | -            | appearance            |
+
+## Examples
+
+```
+<Divider content="My Content">
+<Divider>My Content</Divider>
+```
+
+_Note:_ The property theme from the separator control has been removed
+
+```
+<Separator theme={myTheme}>
+<Divider /> /* Handled by the theme provider */
+```
+
+_Note:_ The property styles from the separator control has been removed and now uses the inherent react style mechanics
+
+```
+<Separator styles={myStyles}>
+<Divider style={{ direction:ltr }}/>
+/* Handled by the theme provider / Tokens */
+```

package/README.md

@@ -0,0 +1,23 @@
+# @fluentui/react-divider
+
+**React Divider components for [Fluent UI](https://dev.microsoft.com/fluentui)**
+
+The Divider component represents a visual separator, that may contain content. A Divider can be vertical or horizontal.
+
+## STATUS: WIP 🚧
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.
+
+## Usage
+
+To import Divider:
+
+```js
+import { Divider } from '@fluentui/react-divider';
+```
+
+Once the Divider component graduates to a production release, the component will be available at:
+
+```js
+import { Divider } from '@fluentui/react-components';
+```

package/Spec.md

@@ -0,0 +1,90 @@
+# Divider Spec
+
+## Background
+
+A `Divider` is used to visually segment content into groups.
+
+## Prior Art
+
+[Github Epic Convergence Issue #16254](https://github.com/microsoft/fluentui/issues/16254)
+
+[Github Convergence Issue #15759](https://github.com/microsoft/fluentui/issues/15759)
+
+[Fluent UI Separator](https://developer.microsoft.com/en-us/fluentui#/controls/web/separator)
+
+[Open UI Component Matrix](https://open-ui.org/analysis/component-matrix)
+
+[Ant Design Divider](https://ant.design/components/divider/)
+
+[Fast Divider](https://explore.fast.design/components/fast-divider)
+
+[Semantic UI Divider](https://semantic-ui.com/elements/divider.html)
+
+## Comparison of v8 and v0
+
+- v8 - [Separator](https://developer.microsoft.com/en-us/fluentui#/controls/web/separator)
+- v0 - [Divider](https://fluentsite.z22.web.core.windows.net/0.52.1/components/divider/definition)
+
+## Sample Code
+
+Basic Examples:
+
+```tsx
+<Divider />
+<Divider vertical />
+<Divider>This is a divider with content</Divider>
+```
+
+## Variants
+
+### Layout
+
+The `Divider` component has two layout variants:
+
+- 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.
+
+### Inset
+
+A `Divider` with the `inset` prop adds padding to the beginning and end of the component.
+
+### Appearance
+
+The `Divider` component has four appearance variants:
+
+- 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)
+
+## HTML Structure
+
+```html
+<div>
+  <!-- ::before to handle the divider line independent of the divider having content or not -->
+  <div>Content</div>
+  <!-- ::after to handle the divider line that goes after the content if it has been provided. -->
+</div>
+```
+
+## Migration
+
+[See MIGRATION.md](./Migration.md)
+
+## Behaviors
+
+This component has no state.
+
+This component has no mouse, touch or keyboard interactions.
+
+Content, if provided, will self-determine its behaviors.
+
+## Accessibility
+
+- 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

@@ -0,0 +1,66 @@
+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';
+
+/**
+ * A divider visually segments content into groups.
+ */
+export declare const Divider: ForwardRefComponent<DividerProps>;
+
+export declare const dividerClassName = "fui-Divider";
+
+declare type DividerCommons = {
+    /**
+     * Determines the alignment of the content within the divider.
+     * @defaultvalue 'center'
+     */
+    alignContent: 'start' | 'center' | 'end';
+    /**
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
+     */
+    appearance?: 'brand' | '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 DividerProps = ComponentProps<Partial<DividerSlots>> & Partial<DividerCommons>;
+
+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> & DividerCommons;
+
+/**
+ * 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.d.ts

@@ -0,0 +1 @@
+export * from './components/Divider/index';

package/lib/Divider.js

@@ -0,0 +1,2 @@
+export * from './components/Divider/index';
+//# sourceMappingURL=Divider.js.map

package/lib/Divider.js.map

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,6 @@
+import type { ForwardRefComponent } from '@fluentui/react-utilities';
+import type { DividerProps } from './Divider.types';
+/**
+ * A divider visually segments content into groups.
+ */
+export declare const Divider: ForwardRefComponent<DividerProps>;

package/lib/components/Divider/Divider.js

@@ -0,0 +1,15 @@
+import * as React from 'react';
+import { renderDivider_unstable } from './renderDivider';
+import { useDivider_unstable } from './useDivider';
+import { useDividerStyles_unstable } from './useDividerStyles';
+/**
+ * A divider visually segments content into groups.
+ */
+
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,36 @@
+import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
+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'>;
+};
+declare type DividerCommons = {
+    /**
+     * Determines the alignment of the content within the divider.
+     * @defaultvalue 'center'
+     */
+    alignContent: 'start' | 'center' | 'end';
+    /**
+     * A divider can have one of the preset appearances.
+     * When not specified, the divider has its default appearance.
+     */
+    appearance?: 'brand' | '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 DividerProps = ComponentProps<Partial<DividerSlots>> & Partial<DividerCommons>;
+export declare type DividerState = ComponentState<DividerSlots> & DividerCommons;
+export {};

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

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

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

@@ -0,0 +1 @@
+{"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\ntype DividerCommons = {\n  /**\n   * Determines the alignment of the content within the divider.\n   * @defaultvalue '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  appearance?: 'brand' | 'strong' | 'subtle';\n\n  /**\n   * Adds padding to the beginning and end of the divider.\n   * @default false\n   */\n  inset: boolean;\n\n  /**\n   * A divider can be horizontal (default) or vertical.\n   * @default false\n   */\n  vertical: boolean;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & Partial<DividerCommons>;\n\nexport type DividerState = ComponentState<DividerSlots> & DividerCommons;\n"]}

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

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

package/lib/components/Divider/index.js

@@ -0,0 +1,6 @@
+export * from './Divider';
+export * from './Divider.types';
+export * from './renderDivider';
+export * from './useDivider';
+export * from './useDividerStyles';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,5 @@
+import { DividerState } from './Divider.types';
+/**
+ * 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;

package/lib/components/Divider/renderDivider.js

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { getSlots } from '@fluentui/react-utilities';
+/**
+ * Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
+ */
+
+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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { DividerProps, DividerState } from './Divider.types';
+/**
+ * Returns the props and state required to render the component
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
+ */
+export declare const useDivider_unstable: (props: DividerProps, ref: React.Ref<HTMLElement>) => DividerState;

package/lib/components/Divider/useDivider.js

@@ -0,0 +1,43 @@
+import { getNativeElementProps, resolveShorthand, useId } from '@fluentui/react-utilities';
+/**
+ * Returns the props and state required to render the component
+ * @param props - User-provided props to the Divider component.
+ * @param ref - User-provided ref to be passed to the Divider component.
+ */
+
+export const useDivider_unstable = (props, 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-orientation': vertical ? 'vertical' : 'horizontal',
+      '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

@@ -0,0 +1 @@
+{"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,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,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, 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/"}

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

@@ -0,0 +1,3 @@
+import { DividerState } from './Divider.types';
+export declare const dividerClassName = "fui-Divider";
+export declare const useDividerStyles_unstable: (state: DividerState) => DividerState;

package/lib/components/Divider/useDividerStyles.js

@@ -0,0 +1,179 @@
+import { mergeClasses, shorthands, __styles } from '@griffel/react';
+import { tokens } from '@fluentui/react-theme';
+export const dividerClassName = 'fui-Divider';
+const contentSpacing = '12px';
+const insetSpacing = '12px';
+const maxStartEndLength = '8px';
+const minStartEndLength = '8px;';
+
+const useBaseStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Bt984gj": "f122n59",
+    "B7ck84d": "f1ewtqcl",
+    "mc9l5x": "f22iagw",
+    "Beiy3e4": "f1063pyq",
+    "Bh6795r": "fqerorx",
+    "qhf8xq": "f10pi13n",
+    "Bahqtrf": "fk6fouc",
+    "Be2twd7": "fy9rknc",
+    "Bhrd7zp": "figsok6",
+    "Bg96gwp": "fwrc4pm",
+    "fsow6f": "f17mccla",
+    "sj55zd": "fkfq4zb",
+    "Bmqnesq": "f170vdtw",
+    "pmf9yy": "fkmkm9e",
+    "B438e65": "fbxxcv3",
+    "ijj6k": "f1vdjgj",
+    "I89eb": ["fz0g6r7", "f1h60vep"],
+    "Bp1vogq": "fn9f2qq",
+    "Bohd3ja": ["f1h60vep", "fz0g6r7"],
+    "oqd9ik": "ffdc0f3",
+    "Fdvyjd": "fsnc50s",
+    "keybh5": "fjrry2l",
+    "F7kzw7": "fii7hsz",
+    "B13j16c": ["fp9yzmz", "f1n0fcl2"],
+    "Bk8j60v": "f13jg1wd",
+    "Bpbi4o9": ["f1n0fcl2", "fp9yzmz"]
+  },
+  "childless": {
+    "z1nrnc": "fc3uzr1",
+    "vrnxjr": ["fhlqc5k", "flnsm0g"],
+    "Bsz71t5": ["f1957mjw", "fxrad5j"],
+    "Brd3o3m": "f1hmx8el"
+  },
+  "start": {
+    "Bs6t6z0": "fqc6z8f"
+  },
+  "center": {
+    "rurcny": "fuzzvh5",
+    "Bs6t6z0": "fqc6z8f"
+  },
+  "end": {
+    "rurcny": "fuzzvh5"
+  },
+  "brand": {
+    "sj55zd": "f16muhyy",
+    "ijj6k": "fob59v2",
+    "I89eb": ["f2pevzt", "fuyeql9"],
+    "Bp1vogq": "f14lh9hz",
+    "Bohd3ja": ["fuyeql9", "f2pevzt"],
+    "F7kzw7": "fd73d1p",
+    "B13j16c": ["f11ucet6", "f1yegzx5"],
+    "Bk8j60v": "f1tupb0d",
+    "Bpbi4o9": ["f1yegzx5", "f11ucet6"]
+  },
+  "subtle": {
+    "ijj6k": "f8mhi1x",
+    "I89eb": ["f18m2ouc", "fddukvx"],
+    "Bp1vogq": "f9zmk3m",
+    "Bohd3ja": ["fddukvx", "f18m2ouc"],
+    "F7kzw7": "fxli1ey",
+    "B13j16c": ["f1qvt1bb", "f5ob950"],
+    "Bk8j60v": "f1nn0kgk",
+    "Bpbi4o9": ["f5ob950", "f1qvt1bb"]
+  },
+  "strong": {
+    "ijj6k": "fkxqtrn",
+    "I89eb": ["f1yx8xct", "f2jll41"],
+    "Bp1vogq": "f1k9rjtw",
+    "Bohd3ja": ["f2jll41", "f1yx8xct"],
+    "F7kzw7": "f1i58boq",
+    "B13j16c": ["f4wmtn9", "f10n3jjp"],
+    "Bk8j60v": "ft17it6",
+    "Bpbi4o9": ["f10n3jjp", "f4wmtn9"]
+  }
+}, {
+  "d": [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f17mccla{text-align:center;}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f170vdtw:before{box-sizing:border-box;}", ".fkmkm9e:before{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fbxxcv3:before{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1vdjgj:before{border-top-color:var(--colorNeutralStroke2);}", ".fz0g6r7:before{border-right-color:var(--colorNeutralStroke2);}", ".f1h60vep:before{border-left-color:var(--colorNeutralStroke2);}", ".fn9f2qq:before{border-bottom-color:var(--colorNeutralStroke2);}", ".ffdc0f3:after{box-sizing:border-box;}", ".fsnc50s:after{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fjrry2l:after{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".fii7hsz:after{border-top-color:var(--colorNeutralStroke2);}", ".fp9yzmz:after{border-right-color:var(--colorNeutralStroke2);}", ".f1n0fcl2:after{border-left-color:var(--colorNeutralStroke2);}", ".f13jg1wd:after{border-bottom-color:var(--colorNeutralStroke2);}", ".fc3uzr1:before{margin-bottom:0;}", ".fhlqc5k:before{margin-right:0;}", ".flnsm0g:before{margin-left:0;}", ".f1957mjw:after{margin-left:0;}", ".fxrad5j:after{margin-right:0;}", ".f1hmx8el:after{margin-top:0;}", ".fqc6z8f:after{content:\"\";}", ".fuzzvh5:before{content:\"\";}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".fob59v2:before{border-top-color:var(--colorBrandStroke1);}", ".f2pevzt:before{border-right-color:var(--colorBrandStroke1);}", ".fuyeql9:before{border-left-color:var(--colorBrandStroke1);}", ".f14lh9hz:before{border-bottom-color:var(--colorBrandStroke1);}", ".fd73d1p:after{border-top-color:var(--colorBrandStroke1);}", ".f11ucet6:after{border-right-color:var(--colorBrandStroke1);}", ".f1yegzx5:after{border-left-color:var(--colorBrandStroke1);}", ".f1tupb0d:after{border-bottom-color:var(--colorBrandStroke1);}", ".f8mhi1x:before{border-top-color:var(--colorNeutralStroke3);}", ".f18m2ouc:before{border-right-color:var(--colorNeutralStroke3);}", ".fddukvx:before{border-left-color:var(--colorNeutralStroke3);}", ".f9zmk3m:before{border-bottom-color:var(--colorNeutralStroke3);}", ".fxli1ey:after{border-top-color:var(--colorNeutralStroke3);}", ".f1qvt1bb:after{border-right-color:var(--colorNeutralStroke3);}", ".f5ob950:after{border-left-color:var(--colorNeutralStroke3);}", ".f1nn0kgk:after{border-bottom-color:var(--colorNeutralStroke3);}", ".fkxqtrn:before{border-top-color:var(--colorNeutralStroke1);}", ".f1yx8xct:before{border-right-color:var(--colorNeutralStroke1);}", ".f2jll41:before{border-left-color:var(--colorNeutralStroke1);}", ".f1k9rjtw:before{border-bottom-color:var(--colorNeutralStroke1);}", ".f1i58boq:after{border-top-color:var(--colorNeutralStroke1);}", ".f4wmtn9:after{border-right-color:var(--colorNeutralStroke1);}", ".f10n3jjp:after{border-left-color:var(--colorNeutralStroke1);}", ".ft17it6:after{border-bottom-color:var(--colorNeutralStroke1);}"]
+});
+
+const useHorizontalStyles = /*#__PURE__*/__styles({
+  "base": {
+    "a9b677": "fly5x3f",
+    "Bdixowu": "f1bwkb58",
+    "dj0dih": "fn88edj",
+    "Bxms0xd": "f1lo4gz5",
+    "rskduk": "f1iq3fds",
+    "Bouo9z4": "f1oiuz89",
+    "Bcqngy1": "f108ofon"
+  },
+  "inset": {
+    "uwmqm3": ["fjlbh76", "f11qrl6u"],
+    "z189sj": ["f11qrl6u", "fjlbh76"]
+  },
+  "start": {
+    "rurcny": "fuzzvh5",
+    "vrnxjr": ["fncq426", "f12b5w6c"],
+    "B24asle": "f19fn84r",
+    "Bsz71t5": ["f1io6r2y", "fn6j208"]
+  },
+  "center": {
+    "vrnxjr": ["fncq426", "f12b5w6c"],
+    "Bsz71t5": ["f1io6r2y", "fn6j208"]
+  },
+  "end": {
+    "vrnxjr": ["fncq426", "f12b5w6c"],
+    "Bs6t6z0": "fqc6z8f",
+    "Bsz71t5": ["f1io6r2y", "fn6j208"],
+    "B79fe3b": "f3tzpys"
+  }
+}, {
+  "d": [".fly5x3f{width:100%;}", ".f1bwkb58:before{border-top-style:solid;}", ".fn88edj:before{border-top-width:var(--strokeWidthThin);}", ".f1lo4gz5:before{min-width:8px;}", ".f1iq3fds:after{border-top-style:solid;}", ".f1oiuz89:after{border-top-width:var(--strokeWidthThin);}", ".f108ofon:after{min-width:8px;}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".fuzzvh5:before{content:\"\";}", ".fncq426:before{margin-right:12px;}", ".f12b5w6c:before{margin-left:12px;}", ".f19fn84r:before{max-width:8px;}", ".f1io6r2y:after{margin-left:12px;}", ".fn6j208:after{margin-right:12px;}", ".fqc6z8f:after{content:\"\";}", ".f3tzpys:after{max-width:8px;}"]
+});
+
+const useVerticalStyles = /*#__PURE__*/__styles({
+  "base": {
+    "Beiy3e4": "f1vx9l62",
+    "sshi5w": "f16gbxbe",
+    "cqycoz": ["fiio4mc", "fc8z0qo"],
+    "D4ky5z": ["f54lnp5", "f5hao24"],
+    "Bxq2otu": "f11zhyjz",
+    "Dctjco": ["f1r2jemi", "f11olovk"],
+    "Bjz4wo8": ["f1o2ol1z", "f20720x"],
+    "B5p8dqe": "f14bbtgr"
+  },
+  "inset": {
+    "B6of3ja": "f1xdg43u",
+    "jrapky": "f1jlhsmd"
+  },
+  "withChildren": {
+    "sshi5w": "f1tjaq3g"
+  },
+  "start": {
+    "rurcny": "fuzzvh5",
+    "z1nrnc": "f1xy8239",
+    "B5kj21": "f1hheky8",
+    "Brd3o3m": "f1mz1b17"
+  },
+  "center": {
+    "z1nrnc": "f1xy8239",
+    "Brd3o3m": "f1mz1b17"
+  },
+  "end": {
+    "z1nrnc": "f1xy8239",
+    "Bs6t6z0": "fqc6z8f",
+    "Brd3o3m": "f1mz1b17",
+    "iiodbw": "fp342oa"
+  }
+}, {
+  "d": [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16gbxbe{min-height:20px;}", ".fiio4mc:before{border-right-style:solid;}", ".fc8z0qo:before{border-left-style:solid;}", ".f54lnp5:before{border-right-width:var(--strokeWidthThin);}", ".f5hao24:before{border-left-width:var(--strokeWidthThin);}", ".f11zhyjz:before{min-height:8px;}", ".f1r2jemi:after{border-right-style:solid;}", ".f11olovk:after{border-left-style:solid;}", ".f1o2ol1z:after{border-right-width:var(--strokeWidthThin);}", ".f20720x:after{border-left-width:var(--strokeWidthThin);}", ".f14bbtgr:after{min-height:8px;}", ".f1xdg43u{margin-top:12px;}", ".f1jlhsmd{margin-bottom:12px;}", ".f1tjaq3g{min-height:84px;}", ".fuzzvh5:before{content:\"\";}", ".f1xy8239:before{margin-bottom:12px;}", ".f1hheky8:before{max-height:8px;}", ".f1mz1b17:after{margin-top:12px;}", ".fqc6z8f:after{content:\"\";}", ".fp342oa:after{max-height:8px;}"]
+});
+
+export const useDividerStyles_unstable = state => {
+  const baseStyles = useBaseStyles();
+  const horizontalStyles = useHorizontalStyles();
+  const verticalStyles = useVerticalStyles();
+  const {
+    alignContent,
+    appearance,
+    inset,
+    vertical
+  } = state;
+  state.root.className = mergeClasses(dividerClassName, // Base styles
+  baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance], // Horizontal styles
+  !vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent], // Vertical styles
+  vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren, // Childless styles
+  state.root.children === undefined && baseStyles.childless, // User provided class name
+  state.root.className);
+  return state;
+};
+//# sourceMappingURL=useDividerStyles.js.map