@fluentui/react-divider 9.1.4 → 9.1.6
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 +39 -1
- package/CHANGELOG.md +20 -2
- package/lib/Divider.js.map +1 -1
- package/lib/components/Divider/Divider.js.map +1 -1
- package/lib/components/Divider/Divider.types.js.map +1 -1
- package/lib/components/Divider/index.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/index.js.map +1 -1
- package/lib-amd/Divider.js +6 -0
- package/lib-amd/Divider.js.map +1 -0
- package/lib-amd/components/Divider/Divider.js +15 -0
- package/lib-amd/components/Divider/Divider.js.map +1 -0
- package/lib-amd/components/Divider/Divider.types.js +5 -0
- package/lib-amd/components/Divider/Divider.types.js.map +1 -0
- package/lib-amd/components/Divider/index.js +10 -0
- package/lib-amd/components/Divider/index.js.map +1 -0
- package/lib-amd/components/Divider/renderDivider.js +14 -0
- package/lib-amd/components/Divider/renderDivider.js.map +1 -0
- package/lib-amd/components/Divider/useDivider.js +36 -0
- package/lib-amd/components/Divider/useDivider.js.map +1 -0
- package/lib-amd/components/Divider/useDividerStyles.js +218 -0
- package/lib-amd/components/Divider/useDividerStyles.js.map +1 -0
- package/lib-amd/index.js +11 -0
- package/lib-amd/index.js.map +1 -0
- package/lib-commonjs/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/index.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 +5 -6
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,45 @@
|
|
2
2
|
"name": "@fluentui/react-divider",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Mon, 05 Dec 2022 18:25:37 GMT",
|
6
|
+
"tag": "@fluentui/react-divider_v9.1.6",
|
7
|
+
"version": "9.1.6",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "beachball",
|
12
|
+
"package": "@fluentui/react-divider",
|
13
|
+
"comment": "Bump @fluentui/react-theme to v9.1.3",
|
14
|
+
"commit": "4c29542a51bf068e171690cc8e59c14489883912"
|
15
|
+
}
|
16
|
+
]
|
17
|
+
}
|
18
|
+
},
|
19
|
+
{
|
20
|
+
"date": "Thu, 17 Nov 2022 23:05:39 GMT",
|
21
|
+
"tag": "@fluentui/react-divider_v9.1.5",
|
22
|
+
"version": "9.1.5",
|
23
|
+
"comments": {
|
24
|
+
"none": [
|
25
|
+
{
|
26
|
+
"author": "martinhochel@microsoft.com",
|
27
|
+
"package": "@fluentui/react-divider",
|
28
|
+
"commit": "ea768501802d65d63ddc63fff3816fb6b5008ae4",
|
29
|
+
"comment": "chore: update package scaffold"
|
30
|
+
}
|
31
|
+
],
|
32
|
+
"patch": [
|
33
|
+
{
|
34
|
+
"author": "beachball",
|
35
|
+
"package": "@fluentui/react-divider",
|
36
|
+
"comment": "Bump @fluentui/react-utilities to v9.2.2",
|
37
|
+
"commit": "94e156be5d3b5790d82dccf08c32672733fb9335"
|
38
|
+
}
|
39
|
+
]
|
40
|
+
}
|
41
|
+
},
|
42
|
+
{
|
43
|
+
"date": "Fri, 11 Nov 2022 14:58:03 GMT",
|
6
44
|
"tag": "@fluentui/react-divider_v9.1.4",
|
7
45
|
"version": "9.1.4",
|
8
46
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,30 @@
|
|
1
1
|
# Change Log - @fluentui/react-divider
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Mon, 05 Dec 2022 18:25:37 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.1.6](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.1.6)
|
8
|
+
|
9
|
+
Mon, 05 Dec 2022 18:25:37 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.1.5..@fluentui/react-divider_v9.1.6)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-theme to v9.1.3 ([PR #25798](https://github.com/microsoft/fluentui/pull/25798) by beachball)
|
15
|
+
|
16
|
+
## [9.1.5](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.1.5)
|
17
|
+
|
18
|
+
Thu, 17 Nov 2022 23:05:39 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.1.4..@fluentui/react-divider_v9.1.5)
|
20
|
+
|
21
|
+
### Patches
|
22
|
+
|
23
|
+
- Bump @fluentui/react-utilities to v9.2.2 ([PR #25683](https://github.com/microsoft/fluentui/pull/25683) by beachball)
|
24
|
+
|
7
25
|
## [9.1.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.1.4)
|
8
26
|
|
9
|
-
Fri, 11 Nov 2022 14:
|
27
|
+
Fri, 11 Nov 2022 14:58:03 GMT
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.1.3..@fluentui/react-divider_v9.1.4)
|
11
29
|
|
12
30
|
### Patches
|
package/lib/Divider.js.map
CHANGED
@@ -1 +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"]}
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"../src/","sources":["packages/react-components/react-divider/src/Divider.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC","sourcesContent":["export * from './components/Divider/index';\n"]}
|
@@ -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;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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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,"file":"Divider.types.js","sourceRoot":"../src/","sources":["components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: Slot<'div'>;\n\n /**\n * Accessibility wrapper for content when presented.\n */\n wrapper: Slot<'div'>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"]}
|
1
|
+
{"version":3,"file":"Divider.types.js","sourceRoot":"../src/","sources":["packages/react-components/react-divider/src/components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: Slot<'div'>;\n\n /**\n * Accessibility wrapper for content when presented.\n */\n wrapper: Slot<'div'>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"]}
|
@@ -1 +1 @@
|
|
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"]}
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["packages/react-components/react-divider/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","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}
|
@@ -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;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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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;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;MACjC,IAAI,EAAE,WAD2B;MAEjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAFX;MAGjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B,SAHf;MAIjC,GAAG,KAJ8B;MAKjC;IALiC,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 role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n ref,\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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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;MACjC,IAAI,EAAE,WAD2B;MAEjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAFX;MAGjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B,SAHf;MAIjC,GAAG,KAJ8B;MAKjC;IALiC,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 role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n ref,\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":"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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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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/"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP","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/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/index.ts"],"names":[],"mappings":"AAAA,SACE,OADF,EAEE,iBAFF,EAGE,sBAHF,EAIE,yBAJF,EAKE,mBALF,QAMO,WANP","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/"}
|
@@ -0,0 +1,6 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./components/Divider/index"], function (require, exports, tslib_1, index_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(index_1, exports);
|
5
|
+
});
|
6
|
+
//# sourceMappingURL=Divider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-divider/src/Divider.ts"],"names":[],"mappings":";;;IAAA,uCAA2C","sourcesContent":["export * from './components/Divider/index';\n"]}
|
@@ -0,0 +1,15 @@
|
|
1
|
+
define(["require", "exports", "react", "./renderDivider", "./useDivider", "./useDividerStyles"], function (require, exports, React, renderDivider_1, useDivider_1, useDividerStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.Divider = void 0;
|
5
|
+
/**
|
6
|
+
* A divider visually segments content into groups.
|
7
|
+
*/
|
8
|
+
exports.Divider = React.forwardRef(function (props, ref) {
|
9
|
+
var state = useDivider_1.useDivider_unstable(props, ref);
|
10
|
+
useDividerStyles_1.useDividerStyles_unstable(state);
|
11
|
+
return renderDivider_1.renderDivider_unstable(state);
|
12
|
+
});
|
13
|
+
exports.Divider.displayName = 'Divider';
|
14
|
+
});
|
15
|
+
//# sourceMappingURL=Divider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/Divider.tsx"],"names":[],"mappings":";;;;IAOA;;OAEG;IACU,QAAA,OAAO,GAAsC,KAAK,CAAC,UAAU,CAAC,UAAC,KAAK,EAAE,GAAG;QACpF,IAAM,KAAK,GAAG,gCAAmB,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;QAE9C,4CAAyB,CAAC,KAAK,CAAC,CAAC;QAEjC,OAAO,sCAAsB,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC,CAAC,CAAC;IAEH,eAAO,CAAC,WAAW,GAAG,SAAS,CAAC","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"]}
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"Divider.types.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/Divider.types.ts"],"names":[],"mappings":"","sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type DividerSlots = {\n /**\n * Root of the component that renders as a `<div>` tag.\n */\n root: Slot<'div'>;\n\n /**\n * Accessibility wrapper for content when presented.\n */\n wrapper: Slot<'div'>;\n};\n\nexport type DividerProps = ComponentProps<Partial<DividerSlots>> & {\n /**\n * Determines the alignment of the content within the divider.\n *\n * @default 'center'\n */\n alignContent?: 'start' | 'center' | 'end';\n\n /**\n * A divider can have one of the preset appearances.\n * When not specified, the divider has its default appearance.\n *\n * @default 'default'\n */\n appearance?: 'brand' | 'default' | 'strong' | 'subtle';\n\n /**\n * Adds padding to the beginning and end of the divider.\n *\n * @default false\n */\n inset?: boolean;\n\n /**\n * A divider can be horizontal (default) or vertical.\n *\n * @default false\n */\n vertical?: boolean;\n};\n\nexport type DividerState = ComponentState<DividerSlots> &\n Required<Pick<DividerProps, 'alignContent' | 'appearance' | 'inset' | 'vertical'>>;\n"]}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
define(["require", "exports", "tslib", "./Divider", "./Divider.types", "./renderDivider", "./useDivider", "./useDividerStyles"], function (require, exports, tslib_1, Divider_1, Divider_types_1, renderDivider_1, useDivider_1, useDividerStyles_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
tslib_1.__exportStar(Divider_1, exports);
|
5
|
+
tslib_1.__exportStar(Divider_types_1, exports);
|
6
|
+
tslib_1.__exportStar(renderDivider_1, exports);
|
7
|
+
tslib_1.__exportStar(useDivider_1, exports);
|
8
|
+
tslib_1.__exportStar(useDividerStyles_1, exports);
|
9
|
+
});
|
10
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,+CAAgC;IAChC,4CAA6B;IAC7B,kDAAmC","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"]}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_utilities_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.renderDivider_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
|
7
|
+
*/
|
8
|
+
var renderDivider_unstable = function (state) {
|
9
|
+
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
10
|
+
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root), slotProps.root.children !== undefined && (React.createElement(slots.wrapper, tslib_1.__assign({}, slotProps.wrapper), slotProps.root.children))));
|
11
|
+
};
|
12
|
+
exports.renderDivider_unstable = renderDivider_unstable;
|
13
|
+
});
|
14
|
+
//# sourceMappingURL=renderDivider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"renderDivider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/renderDivider.tsx"],"names":[],"mappings":";;;;IAIA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB;QAClD,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAC3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI,GAC3B,SAAS,CAAC,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,CACxC,oBAAC,KAAK,CAAC,OAAO,uBAAK,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAiB,CAChF,CACU,CACd,CAAC;IACJ,CAAC,CAAC;IATW,QAAA,sBAAsB,0BASjC","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"]}
|
@@ -0,0 +1,36 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@fluentui/react-utilities"], function (require, exports, tslib_1, react_utilities_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useDivider_unstable = void 0;
|
5
|
+
/**
|
6
|
+
* Returns the props and state required to render the component
|
7
|
+
* @param props - User-provided props to the Divider component.
|
8
|
+
* @param ref - User-provided ref to be passed to the Divider component.
|
9
|
+
*/
|
10
|
+
var useDivider_unstable = function (props, ref) {
|
11
|
+
var _a = props.alignContent, alignContent = _a === void 0 ? 'center' : _a, _b = props.appearance, appearance = _b === void 0 ? 'default' : _b, _c = props.inset, inset = _c === void 0 ? false : _c, _d = props.vertical, vertical = _d === void 0 ? false : _d, wrapper = props.wrapper;
|
12
|
+
var dividerId = react_utilities_1.useId('divider-');
|
13
|
+
return {
|
14
|
+
// Props passed at the top-level
|
15
|
+
alignContent: alignContent,
|
16
|
+
appearance: appearance,
|
17
|
+
inset: inset,
|
18
|
+
vertical: vertical,
|
19
|
+
// Slots definition
|
20
|
+
components: {
|
21
|
+
root: 'div',
|
22
|
+
wrapper: 'div',
|
23
|
+
},
|
24
|
+
root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ role: 'separator', 'aria-orientation': vertical ? 'vertical' : 'horizontal', 'aria-labelledby': props.children ? dividerId : undefined }, props), { ref: ref })),
|
25
|
+
wrapper: react_utilities_1.resolveShorthand(wrapper, {
|
26
|
+
required: true,
|
27
|
+
defaultProps: {
|
28
|
+
id: dividerId,
|
29
|
+
children: props.children,
|
30
|
+
},
|
31
|
+
}),
|
32
|
+
};
|
33
|
+
};
|
34
|
+
exports.useDivider_unstable = useDivider_unstable;
|
35
|
+
});
|
36
|
+
//# sourceMappingURL=useDivider.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useDivider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/useDivider.ts"],"names":[],"mappings":";;;;IAIA;;;;OAIG;IACI,IAAM,mBAAmB,GAAG,UAAC,KAAmB,EAAE,GAA2B;QAC1E,IAAA,KAA8F,KAAK,aAA5E,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EAAE,KAAqE,KAAK,WAApD,EAAtB,UAAU,mBAAG,SAAS,KAAA,EAAE,KAA6C,KAAK,MAArC,EAAb,KAAK,mBAAG,KAAK,KAAA,EAAE,KAA8B,KAAK,SAAnB,EAAhB,QAAQ,mBAAG,KAAK,KAAA,EAAE,OAAO,GAAK,KAAK,QAAV,CAAW;QAC5G,IAAM,SAAS,GAAG,uBAAK,CAAC,UAAU,CAAC,CAAC;QAEpC,OAAO;YACL,gCAAgC;YAChC,YAAY,cAAA;YACZ,UAAU,YAAA;YACV,KAAK,OAAA;YACL,QAAQ,UAAA;YAER,mBAAmB;YACnB,UAAU,EAAE;gBACV,IAAI,EAAE,KAAK;gBACX,OAAO,EAAE,KAAK;aACf;YAED,IAAI,EAAE,uCAAqB,CAAC,KAAK,sCAC/B,IAAI,EAAE,WAAW,EACjB,kBAAkB,EAAE,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,YAAY,EACxD,iBAAiB,EAAE,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,SAAS,IACtD,KAAK,KACR,GAAG,KAAA,IACH;YACF,OAAO,EAAE,kCAAgB,CAAC,OAAO,EAAE;gBACjC,QAAQ,EAAE,IAAI;gBACd,YAAY,EAAE;oBACZ,EAAE,EAAE,SAAS;oBACb,QAAQ,EAAE,KAAK,CAAC,QAAQ;iBACzB;aACF,CAAC;SACH,CAAC;IACJ,CAAC,CAAC;IAhCW,QAAA,mBAAmB,uBAgC9B","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 role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n ref,\n }),\n wrapper: resolveShorthand(wrapper, {\n required: true,\n defaultProps: {\n id: dividerId,\n children: props.children,\n },\n }),\n };\n};\n"]}
|
@@ -0,0 +1,218 @@
|
|
1
|
+
define(["require", "exports", "tslib", "@griffel/react", "@fluentui/react-theme"], function (require, exports, tslib_1, react_1, react_theme_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useDividerStyles_unstable = exports.dividerClassNames = void 0;
|
5
|
+
exports.dividerClassNames = {
|
6
|
+
root: 'fui-Divider',
|
7
|
+
wrapper: 'fui-Divider__wrapper',
|
8
|
+
};
|
9
|
+
var contentSpacing = '12px';
|
10
|
+
var insetSpacing = '12px';
|
11
|
+
var maxStartEndLength = '8px';
|
12
|
+
var minStartEndLength = '8px;';
|
13
|
+
var useBaseStyles = react_1.makeStyles({
|
14
|
+
// Base styles
|
15
|
+
base: {
|
16
|
+
alignItems: 'center',
|
17
|
+
boxSizing: 'border-box',
|
18
|
+
display: 'flex',
|
19
|
+
flexDirection: 'row',
|
20
|
+
flexGrow: 1,
|
21
|
+
position: 'relative',
|
22
|
+
fontFamily: react_theme_1.tokens.fontFamilyBase,
|
23
|
+
fontSize: react_theme_1.tokens.fontSizeBase200,
|
24
|
+
fontWeight: react_theme_1.tokens.fontWeightRegular,
|
25
|
+
lineHeight: react_theme_1.tokens.lineHeightBase200,
|
26
|
+
textAlign: 'center',
|
27
|
+
'::before': {
|
28
|
+
boxSizing: 'border-box',
|
29
|
+
display: 'flex',
|
30
|
+
flexGrow: 1,
|
31
|
+
},
|
32
|
+
'::after': {
|
33
|
+
boxSizing: 'border-box',
|
34
|
+
display: 'flex',
|
35
|
+
flexGrow: 1,
|
36
|
+
},
|
37
|
+
},
|
38
|
+
// Childless styles
|
39
|
+
childless: {
|
40
|
+
'::before': {
|
41
|
+
marginBottom: 0,
|
42
|
+
marginRight: 0,
|
43
|
+
},
|
44
|
+
'::after': {
|
45
|
+
marginLeft: 0,
|
46
|
+
marginTop: 0,
|
47
|
+
},
|
48
|
+
},
|
49
|
+
// Alignment variations
|
50
|
+
start: {
|
51
|
+
'::after': {
|
52
|
+
content: '""',
|
53
|
+
},
|
54
|
+
},
|
55
|
+
center: {
|
56
|
+
'::before': {
|
57
|
+
content: '""',
|
58
|
+
},
|
59
|
+
'::after': {
|
60
|
+
content: '""',
|
61
|
+
},
|
62
|
+
},
|
63
|
+
end: {
|
64
|
+
'::before': {
|
65
|
+
content: '""',
|
66
|
+
},
|
67
|
+
},
|
68
|
+
// Appearance variations
|
69
|
+
brand: {
|
70
|
+
color: react_theme_1.tokens.colorBrandForeground1,
|
71
|
+
'::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorBrandStroke1)),
|
72
|
+
'::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorBrandStroke1)),
|
73
|
+
},
|
74
|
+
default: {
|
75
|
+
color: react_theme_1.tokens.colorNeutralForeground2,
|
76
|
+
'::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke2)),
|
77
|
+
'::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke2)),
|
78
|
+
},
|
79
|
+
subtle: {
|
80
|
+
color: react_theme_1.tokens.colorNeutralForeground2,
|
81
|
+
'::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke3)),
|
82
|
+
'::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke3)),
|
83
|
+
},
|
84
|
+
strong: {
|
85
|
+
color: react_theme_1.tokens.colorNeutralForeground2,
|
86
|
+
'::before': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1)),
|
87
|
+
'::after': tslib_1.__assign({}, react_1.shorthands.borderColor(react_theme_1.tokens.colorNeutralStroke1)),
|
88
|
+
},
|
89
|
+
});
|
90
|
+
var useHorizontalStyles = react_1.makeStyles({
|
91
|
+
// Base styles
|
92
|
+
base: {
|
93
|
+
width: '100%',
|
94
|
+
'::before': {
|
95
|
+
borderTopStyle: 'solid',
|
96
|
+
borderTopWidth: react_theme_1.tokens.strokeWidthThin,
|
97
|
+
minWidth: minStartEndLength,
|
98
|
+
},
|
99
|
+
'::after': {
|
100
|
+
borderTopStyle: 'solid',
|
101
|
+
borderTopWidth: react_theme_1.tokens.strokeWidthThin,
|
102
|
+
minWidth: minStartEndLength,
|
103
|
+
},
|
104
|
+
},
|
105
|
+
// Inset styles
|
106
|
+
inset: {
|
107
|
+
paddingLeft: insetSpacing,
|
108
|
+
paddingRight: insetSpacing,
|
109
|
+
},
|
110
|
+
// Alignment variations
|
111
|
+
start: {
|
112
|
+
'::before': {
|
113
|
+
content: '""',
|
114
|
+
marginRight: contentSpacing,
|
115
|
+
maxWidth: maxStartEndLength,
|
116
|
+
},
|
117
|
+
'::after': {
|
118
|
+
marginLeft: contentSpacing,
|
119
|
+
},
|
120
|
+
},
|
121
|
+
center: {
|
122
|
+
'::before': {
|
123
|
+
marginRight: contentSpacing,
|
124
|
+
},
|
125
|
+
'::after': {
|
126
|
+
marginLeft: contentSpacing,
|
127
|
+
},
|
128
|
+
},
|
129
|
+
end: {
|
130
|
+
'::before': {
|
131
|
+
marginRight: contentSpacing,
|
132
|
+
},
|
133
|
+
'::after': {
|
134
|
+
content: '""',
|
135
|
+
marginLeft: contentSpacing,
|
136
|
+
maxWidth: maxStartEndLength,
|
137
|
+
},
|
138
|
+
},
|
139
|
+
});
|
140
|
+
var useVerticalStyles = react_1.makeStyles({
|
141
|
+
// Base styles
|
142
|
+
base: {
|
143
|
+
flexDirection: 'column',
|
144
|
+
minHeight: '20px',
|
145
|
+
'::before': {
|
146
|
+
borderRightStyle: 'solid',
|
147
|
+
borderRightWidth: react_theme_1.tokens.strokeWidthThin,
|
148
|
+
minHeight: minStartEndLength,
|
149
|
+
},
|
150
|
+
'::after': {
|
151
|
+
borderRightStyle: 'solid',
|
152
|
+
borderRightWidth: react_theme_1.tokens.strokeWidthThin,
|
153
|
+
minHeight: minStartEndLength,
|
154
|
+
},
|
155
|
+
},
|
156
|
+
// Inset styles
|
157
|
+
inset: {
|
158
|
+
marginTop: insetSpacing,
|
159
|
+
marginBottom: insetSpacing,
|
160
|
+
},
|
161
|
+
// With children styles
|
162
|
+
withChildren: {
|
163
|
+
minHeight: '84px',
|
164
|
+
},
|
165
|
+
// Alignment variations
|
166
|
+
start: {
|
167
|
+
'::before': {
|
168
|
+
content: '""',
|
169
|
+
marginBottom: contentSpacing,
|
170
|
+
maxHeight: maxStartEndLength,
|
171
|
+
},
|
172
|
+
'::after': {
|
173
|
+
marginTop: contentSpacing,
|
174
|
+
},
|
175
|
+
},
|
176
|
+
center: {
|
177
|
+
'::before': {
|
178
|
+
marginBottom: contentSpacing,
|
179
|
+
},
|
180
|
+
'::after': {
|
181
|
+
marginTop: contentSpacing,
|
182
|
+
},
|
183
|
+
},
|
184
|
+
end: {
|
185
|
+
'::before': {
|
186
|
+
marginBottom: contentSpacing,
|
187
|
+
},
|
188
|
+
'::after': {
|
189
|
+
content: '""',
|
190
|
+
marginTop: contentSpacing,
|
191
|
+
maxHeight: maxStartEndLength,
|
192
|
+
},
|
193
|
+
},
|
194
|
+
});
|
195
|
+
var useDividerStyles_unstable = function (state) {
|
196
|
+
var baseStyles = useBaseStyles();
|
197
|
+
var horizontalStyles = useHorizontalStyles();
|
198
|
+
var verticalStyles = useVerticalStyles();
|
199
|
+
var alignContent = state.alignContent, appearance = state.appearance, inset = state.inset, vertical = state.vertical;
|
200
|
+
state.root.className = react_1.mergeClasses(exports.dividerClassNames.root,
|
201
|
+
// Base styles
|
202
|
+
baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance],
|
203
|
+
// Horizontal styles
|
204
|
+
!vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent],
|
205
|
+
// Vertical styles
|
206
|
+
vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren,
|
207
|
+
// Childless styles
|
208
|
+
state.root.children === undefined && baseStyles.childless,
|
209
|
+
// User provided class name
|
210
|
+
state.root.className);
|
211
|
+
if (state.wrapper) {
|
212
|
+
state.wrapper.className = react_1.mergeClasses(exports.dividerClassNames.wrapper, state.wrapper.className);
|
213
|
+
}
|
214
|
+
return state;
|
215
|
+
};
|
216
|
+
exports.useDividerStyles_unstable = useDividerStyles_unstable;
|
217
|
+
});
|
218
|
+
//# sourceMappingURL=useDividerStyles.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"useDividerStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/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"]}
|
package/lib-amd/index.js
ADDED
@@ -0,0 +1,11 @@
|
|
1
|
+
define(["require", "exports", "./Divider"], function (require, exports, Divider_1) {
|
2
|
+
"use strict";
|
3
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
4
|
+
exports.useDivider_unstable = exports.useDividerStyles_unstable = exports.renderDivider_unstable = exports.dividerClassNames = exports.Divider = void 0;
|
5
|
+
Object.defineProperty(exports, "Divider", { enumerable: true, get: function () { return Divider_1.Divider; } });
|
6
|
+
Object.defineProperty(exports, "dividerClassNames", { enumerable: true, get: function () { return Divider_1.dividerClassNames; } });
|
7
|
+
Object.defineProperty(exports, "renderDivider_unstable", { enumerable: true, get: function () { return Divider_1.renderDivider_unstable; } });
|
8
|
+
Object.defineProperty(exports, "useDividerStyles_unstable", { enumerable: true, get: function () { return Divider_1.useDividerStyles_unstable; } });
|
9
|
+
Object.defineProperty(exports, "useDivider_unstable", { enumerable: true, get: function () { return Divider_1.useDivider_unstable; } });
|
10
|
+
});
|
11
|
+
//# sourceMappingURL=index.js.map
|
@@ -0,0 +1 @@
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-divider/src/index.ts"],"names":[],"mappings":";;;;IACE,kGAAA,OAAO,OAAA;IACP,4GAAA,iBAAiB,OAAA;IACjB,iHAAA,sBAAsB,OAAA;IACtB,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","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"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["Divider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Divider/index';\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/Divider.ts"],"names":[],"mappings":";;;;;;;;AAAA,OAAA,CAAA,YAAA,CAAA,OAAA,CAAA,4BAAA,CAAA,EAAA,OAAA","sourcesContent":["export * from './components/Divider/index';\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;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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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/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","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"],"sourceRoot":"../src/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-divider/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","sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\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;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
|
+
{"version":3,"sources":["packages/react-components/react-divider/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,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;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;MACjC,IAAI,EAAE,WAD2B;MAEjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAFX;MAGjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B,SAHf;MAIjC,GAAG,KAJ8B;MAKjC;IALiC,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 role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n ref,\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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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;MACjC,IAAI,EAAE,WAD2B;MAEjC,oBAAoB,QAAQ,GAAG,UAAH,GAAgB,YAFX;MAGjC,mBAAmB,KAAK,CAAC,QAAN,GAAiB,SAAjB,GAA6B,SAHf;MAIjC,GAAG,KAJ8B;MAKjC;IALiC,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 role: 'separator',\n 'aria-orientation': vertical ? 'vertical' : 'horizontal',\n 'aria-labelledby': props.children ? dividerId : undefined,\n ...props,\n ref,\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":"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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
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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;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/"}
|
1
|
+
{"version":3,"sources":["packages/react-components/react-divider/src/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": "9.1.
|
3
|
+
"version": "9.1.6",
|
4
4
|
"description": "Fluent UI component to visually separate content.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -20,10 +20,9 @@
|
|
20
20
|
"lint": "just-scripts lint",
|
21
21
|
"start": "yarn storybook",
|
22
22
|
"test": "jest --passWithNoTests",
|
23
|
-
"docs": "api-extractor run --config=config/api-extractor.local.json --local",
|
24
|
-
"build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/types/packages/react-components/react-divider/src && yarn docs",
|
25
23
|
"storybook": "start-storybook",
|
26
|
-
"type-check": "tsc -b tsconfig.json"
|
24
|
+
"type-check": "tsc -b tsconfig.json",
|
25
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
27
26
|
},
|
28
27
|
"devDependencies": {
|
29
28
|
"@fluentui/eslint-plugin": "*",
|
@@ -33,8 +32,8 @@
|
|
33
32
|
},
|
34
33
|
"dependencies": {
|
35
34
|
"@griffel/react": "^1.4.2",
|
36
|
-
"@fluentui/react-theme": "^9.1.
|
37
|
-
"@fluentui/react-utilities": "^9.2.
|
35
|
+
"@fluentui/react-theme": "^9.1.3",
|
36
|
+
"@fluentui/react-utilities": "^9.2.2",
|
38
37
|
"tslib": "^2.1.0"
|
39
38
|
},
|
40
39
|
"peerDependencies": {
|