@fluentui/react-divider 0.0.0-nightly-20220531-0421.1 → 0.0.0-nightly-20220609-0423.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.json +32 -5
- package/CHANGELOG.md +16 -5
- package/MIGRATION.md +21 -48
- package/README.md +25 -9
- package/Spec.md +2 -2
- package/lib/components/Divider/Divider.js.map +1 -1
- package/lib/components/Divider/renderDivider.js.map +1 -1
- package/lib/components/Divider/useDivider.js.map +1 -1
- package/lib/components/Divider/useDividerStyles.js.map +1 -1
- package/lib-commonjs/components/Divider/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/renderDivider.js.map +1 -1
- package/lib-commonjs/components/Divider/useDivider.js.map +1 -1
- package/lib-commonjs/components/Divider/useDividerStyles.js.map +1 -1
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +4 -4
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,30 @@
|
|
|
2
2
|
"name": "@fluentui/react-divider",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-divider_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Thu, 09 Jun 2022 04:36:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-divider_v0.0.0-nightly-20220609-0423.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220609-0423.1",
|
|
8
|
+
"comments": {
|
|
9
|
+
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
12
|
+
"package": "@fluentui/react-divider",
|
|
13
|
+
"commit": "79a3a86436a5194f83cdaf561cd04e24a9a07d78",
|
|
14
|
+
"comment": "README, spec and migration guide cleanup."
|
|
15
|
+
},
|
|
16
|
+
{
|
|
17
|
+
"author": "beachball",
|
|
18
|
+
"package": "@fluentui/react-divider",
|
|
19
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220609-0423.1",
|
|
20
|
+
"commit": "d228dfcdb97fdeaee11ee8d3836489e60b1defbe"
|
|
21
|
+
}
|
|
22
|
+
]
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
{
|
|
26
|
+
"date": "Tue, 31 May 2022 21:28:39 GMT",
|
|
27
|
+
"tag": "@fluentui/react-divider_v9.0.0-rc.11",
|
|
28
|
+
"version": "9.0.0-rc.11",
|
|
8
29
|
"comments": {
|
|
9
30
|
"prerelease": [
|
|
10
31
|
{
|
|
@@ -16,8 +37,14 @@
|
|
|
16
37
|
{
|
|
17
38
|
"author": "beachball",
|
|
18
39
|
"package": "@fluentui/react-divider",
|
|
19
|
-
"comment": "Bump @fluentui/react-
|
|
20
|
-
"commit": "
|
|
40
|
+
"comment": "Bump @fluentui/react-utilities to v9.0.0-rc.10",
|
|
41
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
42
|
+
},
|
|
43
|
+
{
|
|
44
|
+
"author": "beachball",
|
|
45
|
+
"package": "@fluentui/react-divider",
|
|
46
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8",
|
|
47
|
+
"commit": "335ebfcfd47005003901b5e319782bfe9ccd89fd"
|
|
21
48
|
}
|
|
22
49
|
]
|
|
23
50
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-divider
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 09 Jun 2022 04:36:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220609-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v0.0.0-nightly-20220609-0423.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.
|
|
9
|
+
Thu, 09 Jun 2022 04:36:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.11..@fluentui/react-divider_v0.0.0-nightly-20220609-0423.1)
|
|
11
|
+
|
|
12
|
+
### Changes
|
|
13
|
+
|
|
14
|
+
- README, spec and migration guide cleanup. ([PR #23439](https://github.com/microsoft/fluentui/pull/23439) by Humberto.Morimoto@microsoft.com)
|
|
15
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20220609-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/d228dfcdb97fdeaee11ee8d3836489e60b1defbe) by beachball)
|
|
16
|
+
|
|
17
|
+
## [9.0.0-rc.11](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.11)
|
|
18
|
+
|
|
19
|
+
Tue, 31 May 2022 21:28:39 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.0.0-rc.10..@fluentui/react-divider_v9.0.0-rc.11)
|
|
11
21
|
|
|
12
22
|
### Changes
|
|
13
23
|
|
|
14
24
|
- chore: Update Griffel to latest version ([PR #23275](https://github.com/microsoft/fluentui/pull/23275) by olfedias@microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-
|
|
25
|
+
- Bump @fluentui/react-utilities to v9.0.0-rc.10 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
26
|
+
- Bump @fluentui/react-conformance-griffel to v9.0.0-beta.8 ([PR #23325](https://github.com/microsoft/fluentui/pull/23325) by beachball)
|
|
16
27
|
|
|
17
28
|
## [9.0.0-rc.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.0.0-rc.10)
|
|
18
29
|
|
package/MIGRATION.md
CHANGED
|
@@ -1,60 +1,33 @@
|
|
|
1
1
|
# Divider Migration
|
|
2
2
|
|
|
3
|
-
## STATUS: WIP 🚧
|
|
4
|
-
|
|
5
|
-
This Migration guide is a work in progress and is not yet ready for use.
|
|
6
|
-
|
|
7
3
|
## Migration from v8
|
|
8
4
|
|
|
9
|
-
The
|
|
5
|
+
The v8 `Separator` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
|
|
10
6
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
7
|
+
- `content` => `children` of the `Divider`
|
|
8
|
+
- `styles` => NOT SUPPORTED - use new styling system via `FluentProvider`
|
|
9
|
+
- `theme` => NOT SUPPORTED
|
|
14
10
|
|
|
15
11
|
## Migration from v0
|
|
16
12
|
|
|
17
|
-
The v0 Divider
|
|
18
|
-
|
|
19
|
-
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.
|
|
13
|
+
The v0 `Divider` control supports a very similar set of props to the v9 `Divider` with a few differences that are outlined below:
|
|
20
14
|
|
|
21
|
-
|
|
15
|
+
- `content` => `children` of the `Divider`
|
|
16
|
+
- `fitted` => NOT SUPPORTED - use style customizations via `className` instead
|
|
17
|
+
- `important` => NOT SUPPORTED
|
|
22
18
|
|
|
23
19
|
## Property mapping
|
|
24
20
|
|
|
25
|
-
| v8 `Separator` | v0 `Divider` |
|
|
26
|
-
| -------------- | ------------ |
|
|
27
|
-
| alignContent
|
|
28
|
-
|
|
|
29
|
-
|
|
|
30
|
-
|
|
|
31
|
-
| - |
|
|
32
|
-
| - |
|
|
33
|
-
| - |
|
|
34
|
-
| - |
|
|
35
|
-
|
|
|
36
|
-
|
|
|
37
|
-
|
|
|
38
|
-
| - | - | appearance |
|
|
39
|
-
|
|
40
|
-
## Examples
|
|
41
|
-
|
|
42
|
-
```
|
|
43
|
-
<Divider content="My Content">
|
|
44
|
-
<Divider>My Content</Divider>
|
|
45
|
-
```
|
|
46
|
-
|
|
47
|
-
_Note:_ The property theme from the separator control has been removed
|
|
48
|
-
|
|
49
|
-
```
|
|
50
|
-
<Separator theme={myTheme}>
|
|
51
|
-
<Divider /> /* Handled by the theme provider */
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
_Note:_ The property styles from the separator control has been removed and now uses the inherent react style mechanics
|
|
55
|
-
|
|
56
|
-
```
|
|
57
|
-
<Separator styles={myStyles}>
|
|
58
|
-
<Divider style={{ direction:ltr }}/>
|
|
59
|
-
/* Handled by the theme provider / Tokens */
|
|
60
|
-
```
|
|
21
|
+
| v8 `Separator` | v0 `Divider` | v9 `Divider` |
|
|
22
|
+
| -------------- | ------------ | -------------- |
|
|
23
|
+
| `alignContent` | - | `alignContent` |
|
|
24
|
+
| - | - | `appearance` |
|
|
25
|
+
| - | `color` | |
|
|
26
|
+
| `content` | `content` | `children` |
|
|
27
|
+
| - | `fitted` | |
|
|
28
|
+
| - | `important` | |
|
|
29
|
+
| - | - | `inset` |
|
|
30
|
+
| - | `size` | |
|
|
31
|
+
| `styles` | - | |
|
|
32
|
+
| `theme` | - | |
|
|
33
|
+
| `vertical` | `vertical` | `vertical` |
|
package/README.md
CHANGED
|
@@ -1,23 +1,39 @@
|
|
|
1
1
|
# @fluentui/react-divider
|
|
2
2
|
|
|
3
|
-
**
|
|
3
|
+
**Divider components for [Fluent UI](https://aka.ms/fluentui-storybook)**
|
|
4
4
|
|
|
5
5
|
The Divider component represents a visual separator, that may contain content. A Divider can be vertical or horizontal.
|
|
6
6
|
|
|
7
|
-
## STATUS: WIP 🚧
|
|
8
|
-
|
|
9
|
-
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.
|
|
10
|
-
|
|
11
7
|
## Usage
|
|
12
8
|
|
|
13
9
|
To import Divider:
|
|
14
10
|
|
|
15
11
|
```js
|
|
16
|
-
import { Divider } from '@fluentui/react-
|
|
12
|
+
import { Divider } from '@fluentui/react-components';
|
|
17
13
|
```
|
|
18
14
|
|
|
19
|
-
|
|
15
|
+
### Examples
|
|
20
16
|
|
|
21
|
-
```
|
|
22
|
-
|
|
17
|
+
```jsx
|
|
18
|
+
<Divider />
|
|
19
|
+
<Divider>This is a divider</Divider>
|
|
20
|
+
<Divider alignContent="center">This is a divider</Divider>
|
|
21
|
+
<Divider appearance="subtle">This is a divider</Divider>
|
|
22
|
+
<Divider inset>This is a divider</Divider>
|
|
23
|
+
<Divider vertical>This is a divider</Divider>
|
|
23
24
|
```
|
|
25
|
+
|
|
26
|
+
See [Fluent UI Storybook](https://aka.ms/fluentui-storybook) for more detailed usage examples.
|
|
27
|
+
|
|
28
|
+
Alternatively, run Storybook locally with:
|
|
29
|
+
|
|
30
|
+
1. `yarn start`
|
|
31
|
+
2. Select `react-divider` from the list.
|
|
32
|
+
|
|
33
|
+
### Specification
|
|
34
|
+
|
|
35
|
+
See [SPEC.md](./SPEC.md).
|
|
36
|
+
|
|
37
|
+
### Migration Guide
|
|
38
|
+
|
|
39
|
+
If you're upgrading to Fluent UI v9 see [MIGRATION.md](./MIGRATION.md) for guidance on updating to the latest Divider implementation.
|
package/Spec.md
CHANGED
|
@@ -59,7 +59,7 @@ The `Divider` component has four appearance variants:
|
|
|
59
59
|
|
|
60
60
|
## API
|
|
61
61
|
|
|
62
|
-
|
|
62
|
+
See API at [Divider.types.tsx](./src/components/Divider/Divider.types.ts).
|
|
63
63
|
|
|
64
64
|
## HTML Structure
|
|
65
65
|
|
|
@@ -73,7 +73,7 @@ From [Divider.types.tsx](https://github.com/microsoft/fluentui/blob/master/packa
|
|
|
73
73
|
|
|
74
74
|
## Migration
|
|
75
75
|
|
|
76
|
-
[See MIGRATION.md](./
|
|
76
|
+
[See MIGRATION.md](./MIGRATION.md).
|
|
77
77
|
|
|
78
78
|
## Behaviors
|
|
79
79
|
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;EACxF,MAAM,KAAK,GAAG,mBAAmB,CAAC,KAAD,EAAQ,GAAR,CAAjC;EAEA,yBAAyB,CAAC,KAAD,CAAzB;EAEA,OAAO,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/"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,QAAQ,CAAe,KAAf,CAArC;EACA,oBACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,iBACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,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/"}
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
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;EACpG,MAAM;IAAE,YAAY,GAAG,QAAjB;IAA2B,UAAU,GAAG,SAAxC;IAAmD,KAAK,GAAG,KAA3D;IAAkE,QAAQ,GAAG,KAA7E;IAAoF;EAApF,IAAgG,KAAtG;EACA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAD,CAAvB;EAEA,OAAO;IACL;IACA,YAFK;IAGL,UAHK;IAIL,KAJK;IAKL,QALK;IAOL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE;IAFC,CARP;IAaL,IAAI,EAAE,qBAAqB,CAAC,KAAD,EAAQ,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,IAAI,EAAE,WAH2B;MAIjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;MAKjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;IALf,CAAR,CAbtB;IAoBL,OAAO,EAAE,gBAAgB,CAAC,OAAD,EAAU;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,EAAE,EAAE,SADQ;QAEZ,QAAQ,EAAE,KAAK,CAAC;MAFJ;IAFmB,CAAV;EApBpB,CAAP;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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"AAAA,SAAS,YAAT,EAAuB,UAAvB,kBAAqD,gBAArD;AACA,SAAS,MAAT,QAAuB,uBAAvB;AAIA,OAAO,MAAM,iBAAiB,GAAiC;
|
|
1
|
+
{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 1,\n position: 'relative',\n\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n\n ':before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n\n ':after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n },\n\n // Childless styles\n childless: {\n ':before': {\n marginBottom: 0,\n marginRight: 0,\n },\n\n ':after': {\n marginLeft: 0,\n marginTop: 0,\n },\n },\n\n // Alignment variations\n start: {\n ':after': {\n content: '\"\"',\n },\n },\n center: {\n ':before': {\n content: '\"\"',\n },\n ':after': {\n content: '\"\"',\n },\n },\n end: {\n ':before': {\n content: '\"\"',\n },\n },\n\n // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n },\n default: {\n color: tokens.colorNeutralForeground2,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n },\n subtle: {\n color: tokens.colorNeutralForeground2,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n },\n strong: {\n color: tokens.colorNeutralForeground2,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n});\n\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n\n ':before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n\n ':after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing,\n },\n\n // Alignment variations\n start: {\n ':before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n\n ':after': {\n marginLeft: contentSpacing,\n },\n },\n center: {\n ':before': {\n marginRight: contentSpacing,\n },\n ':after': {\n marginLeft: contentSpacing,\n },\n },\n end: {\n ':before': {\n marginRight: contentSpacing,\n },\n ':after': {\n content: '\"\"',\n marginLeft: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n },\n});\n\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n\n ':before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n\n ':after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing,\n },\n\n // With children styles\n withChildren: {\n minHeight: '84px',\n },\n\n // Alignment variations\n start: {\n ':before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n\n ':after': {\n marginTop: contentSpacing,\n },\n },\n center: {\n ':before': {\n marginBottom: contentSpacing,\n },\n ':after': {\n marginTop: contentSpacing,\n },\n },\n end: {\n ':before': {\n marginBottom: contentSpacing,\n },\n ':after': {\n content: '\"\"',\n marginTop: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n\n const { alignContent, appearance, inset, vertical } = state;\n\n state.root.className = mergeClasses(\n dividerClassNames.root,\n\n // Base styles\n baseStyles.base,\n baseStyles[alignContent],\n appearance && baseStyles[appearance],\n\n // Horizontal styles\n !vertical && horizontalStyles.base,\n !vertical && inset && horizontalStyles.inset,\n !vertical && horizontalStyles[alignContent],\n\n // Vertical styles\n vertical && verticalStyles.base,\n vertical && inset && verticalStyles.inset,\n vertical && verticalStyles[alignContent],\n vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n // Childless styles\n state.root.children === undefined && baseStyles.childless,\n\n // User provided class name\n state.root.className,\n );\n\n if (state.wrapper) {\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;
|
|
1
|
+
{"version":3,"sources":["components/Divider/Divider.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,eAAA,gBAAA,OAAA,CAAA,iBAAA,CAAA;;AACA,MAAA,YAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;AAIA;;AAEG;;;AACU,OAAA,CAAA,OAAA,gBAA6C,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAQ,GAAR,KAAe;EACxF,MAAM,KAAK,GAAG,YAAA,CAAA,mBAAA,CAAoB,KAApB,EAA2B,GAA3B,CAAd;EAEA,kBAAA,CAAA,yBAAA,CAA0B,KAA1B;EAEA,OAAO,eAAA,CAAA,sBAAA,CAAuB,KAAvB,CAAP;AACD,CANyD,CAA7C;AAQb,OAAA,CAAA,OAAA,CAAQ,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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["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,sBAAsB,GAAI,KAAD,IAAwB;
|
|
1
|
+
{"version":3,"sources":["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,sBAAsB,GAAI,KAAD,IAAwB;EAC5D,MAAM;IAAE,KAAF;IAAS;EAAT,IAAuB,iBAAA,CAAA,QAAA,CAAuB,KAAvB,CAA7B;EACA,OACE,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,IAAP,EAAW,EAAA,GAAK,SAAS,CAAC;EAAf,CAAX,EACG,SAAS,CAAC,IAAV,CAAe,QAAf,KAA4B,SAA5B,IACC,KAAA,CAAA,aAAA,CAAC,KAAK,CAAC,OAAP,EAAc,EAAA,GAAK,SAAS,CAAC;EAAf,CAAd,EAAuC,SAAS,CAAC,IAAV,CAAe,QAAtD,CAFJ,CADF;AAOD,CATM;;AAAM,OAAA,CAAA,sBAAA,GAAsB,sBAAtB","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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;
|
|
1
|
+
{"version":3,"sources":["components/Divider/useDivider.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;AAGA;;;;AAIG;;;AACI,MAAM,mBAAmB,GAAG,CAAC,KAAD,EAAsB,GAAtB,KAAmE;EACpG,MAAM;IAAE,YAAY,GAAG,QAAjB;IAA2B,UAAU,GAAG,SAAxC;IAAmD,KAAK,GAAG,KAA3D;IAAkE,QAAQ,GAAG,KAA7E;IAAoF;EAApF,IAAgG,KAAtG;EACA,MAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,UAAN,CAAlB;EAEA,OAAO;IACL;IACA,YAFK;IAGL,UAHK;IAIL,KAJK;IAKL,QALK;IAOL;IACA,UAAU,EAAE;MACV,IAAI,EAAE,KADI;MAEV,OAAO,EAAE;IAFC,CARP;IAaL,IAAI,EAAE,iBAAA,CAAA,qBAAA,CAAsB,KAAtB,EAA6B,EACjC,GAAG,KAD8B;MAEjC,GAFiC;MAGjC,IAAI,EAAE,WAH2B;MAIjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAJX;MAKjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B;IALf,CAA7B,CAbD;IAoBL,OAAO,EAAE,iBAAA,CAAA,gBAAA,CAAiB,OAAjB,EAA0B;MACjC,QAAQ,EAAE,IADuB;MAEjC,YAAY,EAAE;QACZ,EAAE,EAAE,SADQ;QAEZ,QAAQ,EAAE,KAAK,CAAC;MAFJ;IAFmB,CAA1B;EApBJ,CAAP;AA4BD,CAhCM;;AAAM,OAAA,CAAA,mBAAA,GAAmB,mBAAnB","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/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AACA,MAAA,aAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAIa,OAAA,CAAA,iBAAA,GAAkD;
|
|
1
|
+
{"version":3,"sources":["components/Divider/useDividerStyles.ts"],"names":[],"mappings":"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","sourcesContent":["import { mergeClasses, shorthands, makeStyles } from '@griffel/react';\nimport { tokens } from '@fluentui/react-theme';\nimport { DividerSlots, DividerState } from './Divider.types';\nimport type { SlotClassNames } from '@fluentui/react-utilities';\n\nexport const dividerClassNames: SlotClassNames<DividerSlots> = {\n root: 'fui-Divider',\n wrapper: 'fui-Divider__wrapper',\n};\n\nconst contentSpacing = '12px';\nconst insetSpacing = '12px';\nconst maxStartEndLength = '8px';\nconst minStartEndLength = '8px;';\n\nconst useBaseStyles = makeStyles({\n // Base styles\n base: {\n alignItems: 'center',\n boxSizing: 'border-box',\n display: 'flex',\n flexDirection: 'row',\n flexGrow: 1,\n position: 'relative',\n\n fontFamily: tokens.fontFamilyBase,\n fontSize: tokens.fontSizeBase200,\n fontWeight: tokens.fontWeightRegular,\n lineHeight: tokens.lineHeightBase200,\n textAlign: 'center',\n\n ':before': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n\n ':after': {\n boxSizing: 'border-box',\n display: 'flex',\n flexGrow: 1,\n },\n },\n\n // Childless styles\n childless: {\n ':before': {\n marginBottom: 0,\n marginRight: 0,\n },\n\n ':after': {\n marginLeft: 0,\n marginTop: 0,\n },\n },\n\n // Alignment variations\n start: {\n ':after': {\n content: '\"\"',\n },\n },\n center: {\n ':before': {\n content: '\"\"',\n },\n ':after': {\n content: '\"\"',\n },\n },\n end: {\n ':before': {\n content: '\"\"',\n },\n },\n\n // Appearance variations\n brand: {\n color: tokens.colorBrandForeground1,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorBrandStroke1),\n },\n },\n default: {\n color: tokens.colorNeutralForeground2,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke2),\n },\n },\n subtle: {\n color: tokens.colorNeutralForeground2,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke3),\n },\n },\n strong: {\n color: tokens.colorNeutralForeground2,\n\n ':before': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n\n ':after': {\n ...shorthands.borderColor(tokens.colorNeutralStroke1),\n },\n },\n});\n\nconst useHorizontalStyles = makeStyles({\n // Base styles\n base: {\n width: '100%',\n\n ':before': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n\n ':after': {\n borderTopStyle: 'solid',\n borderTopWidth: tokens.strokeWidthThin,\n minWidth: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n paddingLeft: insetSpacing,\n paddingRight: insetSpacing,\n },\n\n // Alignment variations\n start: {\n ':before': {\n content: '\"\"',\n marginRight: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n\n ':after': {\n marginLeft: contentSpacing,\n },\n },\n center: {\n ':before': {\n marginRight: contentSpacing,\n },\n ':after': {\n marginLeft: contentSpacing,\n },\n },\n end: {\n ':before': {\n marginRight: contentSpacing,\n },\n ':after': {\n content: '\"\"',\n marginLeft: contentSpacing,\n maxWidth: maxStartEndLength,\n },\n },\n});\n\nconst useVerticalStyles = makeStyles({\n // Base styles\n base: {\n flexDirection: 'column',\n minHeight: '20px',\n\n ':before': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n\n ':after': {\n borderRightStyle: 'solid',\n borderRightWidth: tokens.strokeWidthThin,\n minHeight: minStartEndLength,\n },\n },\n\n // Inset styles\n inset: {\n marginTop: insetSpacing,\n marginBottom: insetSpacing,\n },\n\n // With children styles\n withChildren: {\n minHeight: '84px',\n },\n\n // Alignment variations\n start: {\n ':before': {\n content: '\"\"',\n marginBottom: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n\n ':after': {\n marginTop: contentSpacing,\n },\n },\n center: {\n ':before': {\n marginBottom: contentSpacing,\n },\n ':after': {\n marginTop: contentSpacing,\n },\n },\n end: {\n ':before': {\n marginBottom: contentSpacing,\n },\n ':after': {\n content: '\"\"',\n marginTop: contentSpacing,\n maxHeight: maxStartEndLength,\n },\n },\n});\n\nexport const useDividerStyles_unstable = (state: DividerState): DividerState => {\n const baseStyles = useBaseStyles();\n const horizontalStyles = useHorizontalStyles();\n const verticalStyles = useVerticalStyles();\n\n const { alignContent, appearance, inset, vertical } = state;\n\n state.root.className = mergeClasses(\n dividerClassNames.root,\n\n // Base styles\n baseStyles.base,\n baseStyles[alignContent],\n appearance && baseStyles[appearance],\n\n // Horizontal styles\n !vertical && horizontalStyles.base,\n !vertical && inset && horizontalStyles.inset,\n !vertical && horizontalStyles[alignContent],\n\n // Vertical styles\n vertical && verticalStyles.base,\n vertical && inset && verticalStyles.inset,\n vertical && verticalStyles[alignContent],\n vertical && state.root.children !== undefined && verticalStyles.withChildren,\n\n // Childless styles\n state.root.children === undefined && baseStyles.childless,\n\n // User provided class name\n state.root.className,\n );\n\n if (state.wrapper) {\n state.wrapper.className = mergeClasses(dividerClassNames.wrapper, state.wrapper.className);\n }\n\n return state;\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,SAAA,gBAAA,OAAA,CAAA,WAAA,CAAA;;AACE,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,SAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,OAAA;EAAO;AAAP,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,mBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,iBAAA;EAAiB;AAAjB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,wBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,sBAAA;EAAsB;AAAtB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;AACA,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,qBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,SAAA,CAAA,mBAAA;EAAmB;AAAnB,CAAA","sourcesContent":["export {\n Divider,\n dividerClassNames,\n renderDivider_unstable,\n useDividerStyles_unstable,\n useDivider_unstable,\n} from './Divider';\nexport type { DividerProps, DividerSlots, DividerState } from './Divider';\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-divider",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220609-0423.1",
|
|
4
4
|
"description": "Fluent UI component to visually separate content.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -28,13 +28,13 @@
|
|
|
28
28
|
"devDependencies": {
|
|
29
29
|
"@fluentui/eslint-plugin": "*",
|
|
30
30
|
"@fluentui/react-conformance": "*",
|
|
31
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
31
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20220609-0423.0",
|
|
32
32
|
"@fluentui/scripts": "^1.0.0"
|
|
33
33
|
},
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@griffel/react": "1.1.0",
|
|
36
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-theme": "0.0.0-nightly-20220609-0423.0",
|
|
37
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20220609-0423.1",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|