@fluentui/react-divider 9.1.16 → 9.2.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 +43 -1
- package/CHANGELOG.md +22 -2
- package/lib/components/Divider/Divider.js +5 -0
- 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/index.js.map +1 -1
- package/lib-amd/components/Divider/Divider.js +3 -1
- package/lib-amd/components/Divider/Divider.js.map +1 -1
- package/lib-commonjs/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/Divider.js +5 -0
- package/lib-commonjs/components/Divider/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/Divider.types.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 +3 -2
package/CHANGELOG.json
CHANGED
@@ -2,7 +2,49 @@
|
|
2
2
|
"name": "@fluentui/react-divider",
|
3
3
|
"entries": [
|
4
4
|
{
|
5
|
-
"date": "
|
5
|
+
"date": "Fri, 10 Mar 2023 07:11:11 GMT",
|
6
|
+
"tag": "@fluentui/react-divider_v9.2.1",
|
7
|
+
"version": "9.2.1",
|
8
|
+
"comments": {
|
9
|
+
"patch": [
|
10
|
+
{
|
11
|
+
"author": "beachball",
|
12
|
+
"package": "@fluentui/react-divider",
|
13
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.2",
|
14
|
+
"commit": "3cefc38eed17e3f37cd38fca9099cc9d700cd584"
|
15
|
+
}
|
16
|
+
]
|
17
|
+
}
|
18
|
+
},
|
19
|
+
{
|
20
|
+
"date": "Wed, 08 Mar 2023 17:42:32 GMT",
|
21
|
+
"tag": "@fluentui/react-divider_v9.2.0",
|
22
|
+
"version": "9.2.0",
|
23
|
+
"comments": {
|
24
|
+
"minor": [
|
25
|
+
{
|
26
|
+
"author": "gcox@microsoft.com",
|
27
|
+
"package": "@fluentui/react-divider",
|
28
|
+
"commit": "b81f53f998e9485bd7ce9937dc8beec875034989",
|
29
|
+
"comment": "feat: Adding calls to custom style hooks derived from context."
|
30
|
+
},
|
31
|
+
{
|
32
|
+
"author": "beachball",
|
33
|
+
"package": "@fluentui/react-divider",
|
34
|
+
"comment": "Bump @fluentui/react-shared-contexts to v9.3.0",
|
35
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
36
|
+
},
|
37
|
+
{
|
38
|
+
"author": "beachball",
|
39
|
+
"package": "@fluentui/react-divider",
|
40
|
+
"comment": "Bump @fluentui/react-utilities to v9.6.1",
|
41
|
+
"commit": "e0d11faf97f6466f4cd23ed18266cf1e80094f56"
|
42
|
+
}
|
43
|
+
]
|
44
|
+
}
|
45
|
+
},
|
46
|
+
{
|
47
|
+
"date": "Wed, 15 Feb 2023 11:44:52 GMT",
|
6
48
|
"tag": "@fluentui/react-divider_v9.1.16",
|
7
49
|
"version": "9.1.16",
|
8
50
|
"comments": {
|
package/CHANGELOG.md
CHANGED
@@ -1,12 +1,32 @@
|
|
1
1
|
# Change Log - @fluentui/react-divider
|
2
2
|
|
3
|
-
This log was last generated on
|
3
|
+
This log was last generated on Fri, 10 Mar 2023 07:11:11 GMT and should not be manually modified.
|
4
4
|
|
5
5
|
<!-- Start content -->
|
6
6
|
|
7
|
+
## [9.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.2.1)
|
8
|
+
|
9
|
+
Fri, 10 Mar 2023 07:11:11 GMT
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.2.0..@fluentui/react-divider_v9.2.1)
|
11
|
+
|
12
|
+
### Patches
|
13
|
+
|
14
|
+
- Bump @fluentui/react-utilities to v9.6.2 ([PR #27157](https://github.com/microsoft/fluentui/pull/27157) by beachball)
|
15
|
+
|
16
|
+
## [9.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.2.0)
|
17
|
+
|
18
|
+
Wed, 08 Mar 2023 17:42:32 GMT
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.1.16..@fluentui/react-divider_v9.2.0)
|
20
|
+
|
21
|
+
### Minor changes
|
22
|
+
|
23
|
+
- feat: Adding calls to custom style hooks derived from context. ([PR #27064](https://github.com/microsoft/fluentui/pull/27064) by gcox@microsoft.com)
|
24
|
+
- Bump @fluentui/react-shared-contexts to v9.3.0 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
25
|
+
- Bump @fluentui/react-utilities to v9.6.1 ([PR #27127](https://github.com/microsoft/fluentui/pull/27127) by beachball)
|
26
|
+
|
7
27
|
## [9.1.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-divider_v9.1.16)
|
8
28
|
|
9
|
-
Wed, 15 Feb 2023 11:
|
29
|
+
Wed, 15 Feb 2023 11:44:52 GMT
|
10
30
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-divider_v9.1.15..@fluentui/react-divider_v9.1.16)
|
11
31
|
|
12
32
|
### Patches
|
@@ -2,12 +2,17 @@ import * as React from 'react';
|
|
2
2
|
import { renderDivider_unstable } from './renderDivider';
|
3
3
|
import { useDivider_unstable } from './useDivider';
|
4
4
|
import { useDividerStyles_unstable } from './useDividerStyles';
|
5
|
+
import { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';
|
5
6
|
/**
|
6
7
|
* A divider visually segments content into groups.
|
7
8
|
*/
|
8
9
|
export const Divider = /*#__PURE__*/React.forwardRef((props, ref) => {
|
9
10
|
const state = useDivider_unstable(props, ref);
|
10
11
|
useDividerStyles_unstable(state);
|
12
|
+
const {
|
13
|
+
useDividerStyles_unstable: useCustomStyles
|
14
|
+
} = useCustomStyleHooks_unstable();
|
15
|
+
useCustomStyles(state);
|
11
16
|
return renderDivider_unstable(state);
|
12
17
|
});
|
13
18
|
Divider.displayName = 'Divider';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React","renderDivider_unstable","useDivider_unstable","useDividerStyles_unstable","useCustomStyleHooks_unstable","Divider","forwardRef","props","ref","state","useCustomStyles","displayName"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/Divider.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 const { useDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,sBAAsB,QAAQ,iBAAiB;AACxD,SAASC,mBAAmB,QAAQ,cAAc;AAClD,SAASC,yBAAyB,QAAQ,oBAAoB;AAG9D,SAASC,4BAA4B,QAAQ,iCAAiC;AAE9E;;;AAGA,OAAO,MAAMC,OAAO,gBAAsCL,KAAK,CAACM,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGP,mBAAmB,CAACK,KAAK,EAAEC,GAAG,CAAC;EAE7CL,yBAAyB,CAACM,KAAK,CAAC;EAEhC,MAAM;IAAEN,yBAAyB,EAAEO;EAAe,CAAE,GAAGN,4BAA4B,EAAE;EACrFM,eAAe,CAACD,KAAK,CAAC;EAEtB,OAAOR,sBAAsB,CAACQ,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFJ,OAAO,CAACM,WAAW,GAAG,SAAS"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React","getSlots","renderDivider_unstable","state","slots","slotProps","createElement","root","children","undefined","wrapper"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/renderDivider.tsx"],"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"],"mappings":"AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,SAASC,QAAQ,QAAQ,2BAA2B;AAGpD;;;AAGA,OAAO,MAAMC,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,QAAQ,CAAeE,KAAK,CAAC;EAC1D,oBACEH,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACG,IAAI;IAAA,GAAKF,SAAS,CAACE;EAAI,GAC3BF,SAAS,CAACE,IAAI,CAACC,QAAQ,KAAKC,SAAS,iBACpCT,KAAA,CAAAM,aAAA,CAACF,KAAK,CAACM,OAAO;IAAA,GAAKL,SAAS,CAACK;EAAO,GAAGL,SAAS,CAACE,IAAI,CAACC,QAAQ,CAC/D,CACU;AAEjB,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["getNativeElementProps","resolveShorthand","useId","useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","components","root","role","children","undefined","required","defaultProps","id"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/useDivider.ts"],"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"],"mappings":"AACA,SAASA,qBAAqB,EAAEC,gBAAgB,EAAEC,KAAK,QAAQ,2BAA2B;AAG1F;;;;;AAKA,OAAO,MAAMC,mBAAmB,GAAGA,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG,MAAM;IAAEC,YAAY,GAAG,QAAQ;IAAEC,UAAU,GAAG,SAAS;IAAEC,KAAK,GAAG,KAAK;IAAEC,QAAQ,GAAG,KAAK;IAAEC;EAAO,CAAE,GAAGN,KAAK;EAC3G,MAAMO,SAAS,GAAGT,KAAK,CAAC,UAAU,CAAC;EAEnC,OAAO;IACL;IACAI,YAAY;IACZC,UAAU;IACVC,KAAK;IACLC,QAAQ;IAER;IACAG,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXH,OAAO,EAAE;KACV;IAEDG,IAAI,EAAEb,qBAAqB,CAAC,KAAK,EAAE;MACjCc,IAAI,EAAE,WAAW;MACjB,kBAAkB,EAAEL,QAAQ,GAAG,UAAU,GAAG,YAAY;MACxD,iBAAiB,EAAEL,KAAK,CAACW,QAAQ,GAAGJ,SAAS,GAAGK,SAAS;MACzD,GAAGZ,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAET,gBAAgB,CAACS,OAAO,EAAE;MACjCO,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,EAAE,EAAER,SAAS;QACbI,QAAQ,EAAEX,KAAK,CAACW;;KAEnB;GACF;AACH,CAAC"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":"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","names":["mergeClasses","shorthands","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","useHorizontalStyles","useVerticalStyles","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","inset","vertical","className","base","children","undefined","withChildren","childless"],"sourceRoot":"../src/","sources":["packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts"],"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"]}
|
1
|
+
{"version":3,"names":["mergeClasses","shorthands","__styles","tokens","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","base","Bt984gj","B7ck84d","mc9l5x","Beiy3e4","Bh6795r","qhf8xq","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","fsow6f","Bcvre1j","Br0sdwz","Bn78ew0","li1rpt","ap17g6","B771hl4","childless","susq4k","Bicfajf","jwcpgy","B4rk6o","start","Bsft5z2","center","Ftih45","end","brand","sj55zd","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","B0n5ga8","s924m2","B1q35kw","Gp14am","subtle","strong","d","useHorizontalStyles","a9b677","Bdkvgpv","B0qfbqy","pbipgd","Bm2nyyq","xrcqlc","i5u598","inset","uwmqm3","z189sj","Bxwl2t9","Iy66sp","useVerticalStyles","sshi5w","m598lv","B4f6apu","zkzzav","Barhvk9","Ihftqj","Bde111x","B6of3ja","jrapky","withChildren","Bbdr6tz","gn64ia","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","children","undefined"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts"],"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"],"mappings":"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"}
|
package/lib/index.js.map
CHANGED
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"sources":["../src/packages/react-components/react-divider/src/index.ts"],"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"],"mappings":"AAAA,SACEA,OAAO,EACPC,iBAAiB,EACjBC,sBAAsB,EACtBC,yBAAyB,EACzBC,mBAAmB,QACd,WAAW"}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
define(["require", "exports", "react", "./renderDivider", "./useDivider", "./useDividerStyles"], function (require, exports, React, renderDivider_1, useDivider_1, useDividerStyles_1) {
|
1
|
+
define(["require", "exports", "react", "./renderDivider", "./useDivider", "./useDividerStyles", "@fluentui/react-shared-contexts"], function (require, exports, React, renderDivider_1, useDivider_1, useDividerStyles_1, react_shared_contexts_1) {
|
2
2
|
"use strict";
|
3
3
|
Object.defineProperty(exports, "__esModule", { value: true });
|
4
4
|
exports.Divider = void 0;
|
@@ -8,6 +8,8 @@ define(["require", "exports", "react", "./renderDivider", "./useDivider", "./use
|
|
8
8
|
exports.Divider = React.forwardRef(function (props, ref) {
|
9
9
|
var state = useDivider_1.useDivider_unstable(props, ref);
|
10
10
|
useDividerStyles_1.useDividerStyles_unstable(state);
|
11
|
+
var useCustomStyles = react_shared_contexts_1.useCustomStyleHooks_unstable().useDividerStyles_unstable;
|
12
|
+
useCustomStyles(state);
|
11
13
|
return renderDivider_1.renderDivider_unstable(state);
|
12
14
|
});
|
13
15
|
exports.Divider.displayName = 'Divider';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/Divider.tsx"],"names":[],"mappings":";;;;
|
1
|
+
{"version":3,"file":"Divider.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-divider/src/components/Divider/Divider.tsx"],"names":[],"mappings":";;;;IAQA;;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;QAEzB,IAA2B,eAAe,GAAK,oDAA4B,EAAE,0BAAnC,CAAoC;QACtF,eAAe,CAAC,KAAK,CAAC,CAAC;QAEvB,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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 const { useDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-divider/src/Divider.ts"],"sourcesContent":["export * from './components/Divider/index';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,gCAAAC,OAAA"}
|
@@ -8,12 +8,17 @@ const React = /*#__PURE__*/require("react");
|
|
8
8
|
const renderDivider_1 = /*#__PURE__*/require("./renderDivider");
|
9
9
|
const useDivider_1 = /*#__PURE__*/require("./useDivider");
|
10
10
|
const useDividerStyles_1 = /*#__PURE__*/require("./useDividerStyles");
|
11
|
+
const react_shared_contexts_1 = /*#__PURE__*/require("@fluentui/react-shared-contexts");
|
11
12
|
/**
|
12
13
|
* A divider visually segments content into groups.
|
13
14
|
*/
|
14
15
|
exports.Divider = /*#__PURE__*/React.forwardRef((props, ref) => {
|
15
16
|
const state = useDivider_1.useDivider_unstable(props, ref);
|
16
17
|
useDividerStyles_1.useDividerStyles_unstable(state);
|
18
|
+
const {
|
19
|
+
useDividerStyles_unstable: useCustomStyles
|
20
|
+
} = react_shared_contexts_1.useCustomStyleHooks_unstable();
|
21
|
+
useCustomStyles(state);
|
17
22
|
return renderDivider_1.renderDivider_unstable(state);
|
18
23
|
});
|
19
24
|
exports.Divider.displayName = 'Divider';
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React","require","renderDivider_1","useDivider_1","useDividerStyles_1","react_shared_contexts_1","exports","Divider","forwardRef","props","ref","state","useDivider_unstable","useDividerStyles_unstable","useCustomStyles","useCustomStyleHooks_unstable","renderDivider_unstable","displayName"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/Divider.tsx"],"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';\nimport { useCustomStyleHooks_unstable } from '@fluentui/react-shared-contexts';\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 const { useDividerStyles_unstable: useCustomStyles } = useCustomStyleHooks_unstable();\n useCustomStyles(state);\n\n return renderDivider_unstable(state);\n});\n\nDivider.displayName = 'Divider';\n"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,eAAA,gBAAAD,OAAA;AACA,MAAAE,YAAA,gBAAAF,OAAA;AACA,MAAAG,kBAAA,gBAAAH,OAAA;AAGA,MAAAI,uBAAA,gBAAAJ,OAAA;AAEA;;;AAGaK,OAAA,CAAAC,OAAO,gBAAsCP,KAAK,CAACQ,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGR,YAAA,CAAAS,mBAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE7CN,kBAAA,CAAAS,yBAAyB,CAACF,KAAK,CAAC;EAEhC,MAAM;IAAEE,yBAAyB,EAAEC;EAAe,CAAE,GAAGT,uBAAA,CAAAU,4BAA4B,EAAE;EACrFD,eAAe,CAACH,KAAK,CAAC;EAEtB,OAAOT,eAAA,CAAAc,sBAAsB,CAACL,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFL,OAAA,CAAAC,OAAO,CAACU,WAAW,GAAG,SAAS"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":[],"sources":["../src/packages/react-components/react-divider/src/components/Divider/Divider.types.ts"],"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"],"mappings":""}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["tslib_1","__exportStar","require","exports"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/index.ts"],"sourcesContent":["export * from './Divider';\nexport * from './Divider.types';\nexport * from './renderDivider';\nexport * from './useDivider';\nexport * from './useDividerStyles';\n"],"mappings":";;;;;;AAAAA,OAAA,CAAAC,YAAA,CAAAC,OAAA,eAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,qBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,kBAAAC,OAAA;AACAH,OAAA,CAAAC,YAAA,CAAAC,OAAA,wBAAAC,OAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["React","require","react_utilities_1","renderDivider_unstable","state","slots","slotProps","getSlots","createElement","root","children","undefined","wrapper","exports"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/renderDivider.tsx"],"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"],"mappings":";;;;;;AAAA,MAAAA,KAAA,gBAAAC,OAAA;AACA,MAAAC,iBAAA,gBAAAD,OAAA;AAGA;;;AAGO,MAAME,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGJ,iBAAA,CAAAK,QAAQ,CAAeH,KAAK,CAAC;EAC1D,OACEJ,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BH,SAAS,CAACG,IAAI,CAACC,QAAQ,KAAKC,SAAS,IACpCX,KAAA,CAAAQ,aAAA,CAACH,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,GAAGN,SAAS,CAACG,IAAI,CAACC,QAAQ,CAC/D,CACU;AAEjB,CAAC;AATYG,OAAA,CAAAV,sBAAsB,GAAAA,sBAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["react_utilities_1","require","useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","useId","components","root","getNativeElementProps","role","children","undefined","resolveShorthand","required","defaultProps","id","exports"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/useDivider.ts"],"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"],"mappings":";;;;;;AACA,MAAAA,iBAAA,gBAAAC,OAAA;AAGA;;;;;AAKO,MAAMC,mBAAmB,GAAGA,CAACC,KAAmB,EAAEC,GAA2B,KAAkB;EACpG,MAAM;IAAEC,YAAY,GAAG,QAAQ;IAAEC,UAAU,GAAG,SAAS;IAAEC,KAAK,GAAG,KAAK;IAAEC,QAAQ,GAAG,KAAK;IAAEC;EAAO,CAAE,GAAGN,KAAK;EAC3G,MAAMO,SAAS,GAAGV,iBAAA,CAAAW,KAAK,CAAC,UAAU,CAAC;EAEnC,OAAO;IACL;IACAN,YAAY;IACZC,UAAU;IACVC,KAAK;IACLC,QAAQ;IAER;IACAI,UAAU,EAAE;MACVC,IAAI,EAAE,KAAK;MACXJ,OAAO,EAAE;KACV;IAEDI,IAAI,EAAEb,iBAAA,CAAAc,qBAAqB,CAAC,KAAK,EAAE;MACjCC,IAAI,EAAE,WAAW;MACjB,kBAAkB,EAAEP,QAAQ,GAAG,UAAU,GAAG,YAAY;MACxD,iBAAiB,EAAEL,KAAK,CAACa,QAAQ,GAAGN,SAAS,GAAGO,SAAS;MACzD,GAAGd,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAET,iBAAA,CAAAkB,gBAAgB,CAACT,OAAO,EAAE;MACjCU,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,EAAE,EAAEX,SAAS;QACbM,QAAQ,EAAEb,KAAK,CAACa;;KAEnB;GACF;AACH,CAAC;AAhCYM,OAAA,CAAApB,mBAAmB,GAAAA,mBAAA"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"mappings":";;;;;;AAAA;AACA;AAIaA,yBAAiB,GAAiC;EAC7DC,IAAI,EAAE,aAAa;EACnBC,OAAO,EAAE;CACV;AAED,MAAMC,cAAc,GAAG,MAAM;AAC7B,MAAMC,YAAY,GAAG,MAAM;AAC3B,MAAMC,iBAAiB,GAAG,KAAK;AAC/B,MAAMC,iBAAiB,GAAG,MAAM;AAEhC,MAAMC,aAAa,gBAAGC,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA2G9B;AAEF,MAAMC,mBAAmB,gBAAGD,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EAsDpC;AAEF,MAAME,iBAAiB,gBAAGF,gBAAU;EAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;EAAA;EAAA;IAAA;IAAA;IAAA;IAAA;EAAA;AAAA;EAAA;AAAA,EA4DlC;AAEK,MAAMG,yBAAyB,GAAIC,KAAmB,IAAkB;EAC7E,MAAMC,UAAU,GAAGN,aAAa,EAAE;EAClC,MAAMO,gBAAgB,GAAGL,mBAAmB,EAAE;EAC9C,MAAMM,cAAc,GAAGL,iBAAiB,EAAE;EAE1C,MAAM;IAAEM,YAAY;IAAEC,UAAU;IAAEC,KAAK;IAAEC;EAAQ,CAAE,GAAGP,KAAK;EAE3DA,KAAK,CAACX,IAAI,CAACmB,SAAS,GAAGZ,oBAAY,CACjCR,yBAAiB,CAACC,IAAI;EAEtB;EACAY,UAAU,CAACQ,IAAI,EACfR,UAAU,CAACG,YAAY,CAAC,EACxBC,UAAU,IAAIJ,UAAU,CAACI,UAAU,CAAC;EAEpC;EACA,CAACE,QAAQ,IAAIL,gBAAgB,CAACO,IAAI,EAClC,CAACF,QAAQ,IAAID,KAAK,IAAIJ,gBAAgB,CAACI,KAAK,EAC5C,CAACC,QAAQ,IAAIL,gBAAgB,CAACE,YAAY,CAAC;EAE3C;EACAG,QAAQ,IAAIJ,cAAc,CAACM,IAAI,EAC/BF,QAAQ,IAAID,KAAK,IAAIH,cAAc,CAACG,KAAK,EACzCC,QAAQ,IAAIJ,cAAc,CAACC,YAAY,CAAC,EACxCG,QAAQ,IAAIP,KAAK,CAACX,IAAI,CAACqB,QAAQ,KAAKC,SAAS,IAAIR,cAAc,CAACS,YAAY;EAE5E;EACAZ,KAAK,CAACX,IAAI,CAACqB,QAAQ,KAAKC,SAAS,IAAIV,UAAU,CAACY,SAAS;EAEzD;EACAb,KAAK,CAACX,IAAI,CAACmB,SAAS,CACrB;EAED,IAAIR,KAAK,CAACV,OAAO,EAAE;IACjBU,KAAK,CAACV,OAAO,CAACkB,SAAS,GAAGZ,oBAAY,CAACR,yBAAiB,CAACE,OAAO,EAAEU,KAAK,CAACV,OAAO,CAACkB,SAAS,CAAC;;EAG5F,OAAOR,KAAK;AACd,CAAC;AAtCYZ,iCAAyB","names":["exports","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","react_1","useHorizontalStyles","useVerticalStyles","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","inset","vertical","className","base","children","undefined","withChildren","childless"],"sourceRoot":"../src/","sources":["packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts"],"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"]}
|
1
|
+
{"version":3,"names":["react_1","require","react_theme_1","exports","dividerClassNames","root","wrapper","contentSpacing","insetSpacing","maxStartEndLength","minStartEndLength","useBaseStyles","__styles","base","Bt984gj","B7ck84d","mc9l5x","Beiy3e4","Bh6795r","qhf8xq","Bahqtrf","Be2twd7","Bhrd7zp","Bg96gwp","fsow6f","Bcvre1j","Br0sdwz","Bn78ew0","li1rpt","ap17g6","B771hl4","childless","susq4k","Bicfajf","jwcpgy","B4rk6o","start","Bsft5z2","center","Ftih45","end","brand","sj55zd","Bq4z7u6","Bk5zm6e","Bqjgrrk","Bm6vgfq","B0n5ga8","s924m2","B1q35kw","Gp14am","subtle","strong","d","useHorizontalStyles","a9b677","Bdkvgpv","B0qfbqy","pbipgd","Bm2nyyq","xrcqlc","i5u598","inset","uwmqm3","z189sj","Bxwl2t9","Iy66sp","useVerticalStyles","sshi5w","m598lv","B4f6apu","zkzzav","Barhvk9","Ihftqj","Bde111x","B6of3ja","jrapky","withChildren","Bbdr6tz","gn64ia","useDividerStyles_unstable","state","baseStyles","horizontalStyles","verticalStyles","alignContent","appearance","vertical","className","mergeClasses","children","undefined"],"sources":["../src/packages/react-components/react-divider/src/components/Divider/useDividerStyles.ts"],"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"],"mappings":"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"}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"names":["Divider_1","require","Object","defineProperty","exports","enumerable","get","Divider","dividerClassNames","renderDivider_unstable","useDividerStyles_unstable","useDivider_unstable"],"sources":["../src/packages/react-components/react-divider/src/index.ts"],"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"],"mappings":";;;;;;AAAA,IAAAA,SAAA,gBAAAC,OAAA;AACEC,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAO,OAAO;EAAA;AAAA;AACPL,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAQ,iBAAiB;EAAA;AAAA;AACjBN,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAS,sBAAsB;EAAA;AAAA;AACtBP,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAU,yBAAyB;EAAA;AAAA;AACzBR,MAAA,CAAAC,cAAA,CAAAC,OAAA;EAAAC,UAAA;EAAAC,GAAA,WAAAA,CAAA;IAAA,OAAAN,SAAA,CAAAW,mBAAmB;EAAA;AAAA"}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-divider",
|
3
|
-
"version": "9.1
|
3
|
+
"version": "9.2.1",
|
4
4
|
"description": "Fluent UI component to visually separate content.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -33,8 +33,9 @@
|
|
33
33
|
},
|
34
34
|
"dependencies": {
|
35
35
|
"@griffel/react": "^1.5.2",
|
36
|
+
"@fluentui/react-shared-contexts": "^9.3.0",
|
36
37
|
"@fluentui/react-theme": "^9.1.5",
|
37
|
-
"@fluentui/react-utilities": "^9.6.
|
38
|
+
"@fluentui/react-utilities": "^9.6.2",
|
38
39
|
"tslib": "^2.1.0"
|
39
40
|
},
|
40
41
|
"peerDependencies": {
|