@fluentui/react-divider 9.1.8 → 9.1.9
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 +42 -1
- package/CHANGELOG.md +13 -2
- package/lib/components/Divider/Divider.js +0 -1
- package/lib/components/Divider/Divider.js.map +1 -1
- package/lib/components/Divider/renderDivider.js +4 -3
- package/lib/components/Divider/renderDivider.js.map +1 -1
- package/lib/components/Divider/useDivider.js +0 -1
- package/lib/components/Divider/useDivider.js.map +1 -1
- package/lib/components/Divider/useDividerStyles.js +149 -150
- package/lib/components/Divider/useDividerStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Divider.js +0 -2
- package/lib-commonjs/Divider.js.map +1 -1
- package/lib-commonjs/components/Divider/Divider.js +0 -6
- 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 +0 -6
- package/lib-commonjs/components/Divider/index.js.map +1 -1
- package/lib-commonjs/components/Divider/renderDivider.js +4 -7
- package/lib-commonjs/components/Divider/renderDivider.js.map +1 -1
- package/lib-commonjs/components/Divider/useDivider.js +0 -4
- package/lib-commonjs/components/Divider/useDivider.js.map +1 -1
- package/lib-commonjs/components/Divider/useDividerStyles.js +149 -154
- package/lib-commonjs/components/Divider/useDividerStyles.js.map +1 -1
- package/lib-commonjs/index.js +0 -2
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +5 -5
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAIA;;;AAGaA,eAAO,gBAAsCC,KAAK,CAACC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAI;EACxF,MAAMC,KAAK,GAAGC,gCAAmB,CAACH,KAAK,EAAEC,GAAG,CAAC;EAE7CG,4CAAyB,CAACF,KAAK,CAAC;EAEhC,OAAOG,sCAAsB,CAACH,KAAK,CAAC;AACtC,CAAC,CAAC;AAEFL,eAAO,CAACS,WAAW,GAAG,SAAS","names":["exports","React","forwardRef","props","ref","state","useDivider_1","useDividerStyles_1","renderDivider_1","displayName"],"sourceRoot":"../src/","sources":["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';\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"]}
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"","names":[],"sourceRoot":"../src/","sources":[],"sourcesContent":[]}
|
@@ -3,16 +3,10 @@
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
4
4
|
value: true
|
5
5
|
});
|
6
|
-
|
7
6
|
const tslib_1 = /*#__PURE__*/require("tslib");
|
8
|
-
|
9
7
|
tslib_1.__exportStar(require("./Divider"), exports);
|
10
|
-
|
11
8
|
tslib_1.__exportStar(require("./Divider.types"), exports);
|
12
|
-
|
13
9
|
tslib_1.__exportStar(require("./renderDivider"), exports);
|
14
|
-
|
15
10
|
tslib_1.__exportStar(require("./useDivider"), exports);
|
16
|
-
|
17
11
|
tslib_1.__exportStar(require("./useDividerStyles"), exports);
|
18
12
|
//# sourceMappingURL=index.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["packages/react-components/react-divider/src/components/Divider/index.ts"],"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAAA;AACAA;AACAA;AACAA;AACAA","names":["tslib_1"],"sourceRoot":"../src/","sources":["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"]}
|
@@ -4,24 +4,21 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.renderDivider_unstable = void 0;
|
7
|
-
|
8
7
|
const React = /*#__PURE__*/require("react");
|
9
|
-
|
10
8
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
11
9
|
/**
|
12
10
|
* Renders a Divider component by passing the slot props (defined in `state`) to the appropriate slots.
|
13
11
|
*/
|
14
|
-
|
15
|
-
|
16
12
|
const renderDivider_unstable = state => {
|
17
13
|
const {
|
18
14
|
slots,
|
19
15
|
slotProps
|
20
16
|
} = react_utilities_1.getSlots(state);
|
21
|
-
return React.createElement(slots.root, {
|
22
|
-
|
17
|
+
return React.createElement(slots.root, {
|
18
|
+
...slotProps.root
|
19
|
+
}, slotProps.root.children !== undefined && React.createElement(slots.wrapper, {
|
20
|
+
...slotProps.wrapper
|
23
21
|
}, slotProps.root.children));
|
24
22
|
};
|
25
|
-
|
26
23
|
exports.renderDivider_unstable = renderDivider_unstable;
|
27
24
|
//# sourceMappingURL=renderDivider.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AAGA;;;AAGO,MAAMA,sBAAsB,GAAIC,KAAmB,IAAI;EAC5D,MAAM;IAAEC,KAAK;IAAEC;EAAS,CAAE,GAAGC,0BAAQ,CAAeH,KAAK,CAAC;EAC1D,OACEI,oBAACH,KAAK,CAACI,IAAI;IAAA,GAAKH,SAAS,CAACG;EAAI,GAC3BH,SAAS,CAACG,IAAI,CAACC,QAAQ,KAAKC,SAAS,IACpCH,oBAACH,KAAK,CAACO,OAAO;IAAA,GAAKN,SAAS,CAACM;EAAO,GAAGN,SAAS,CAACG,IAAI,CAACC,QAAQ,CAC/D,CACU;AAEjB,CAAC;AATYG,8BAAsB","names":["renderDivider_unstable","state","slots","slotProps","react_utilities_1","React","root","children","undefined","wrapper","exports"],"sourceRoot":"../src/","sources":["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"]}
|
@@ -4,15 +4,12 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useDivider_unstable = void 0;
|
7
|
-
|
8
7
|
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
8
|
/**
|
10
9
|
* Returns the props and state required to render the component
|
11
10
|
* @param props - User-provided props to the Divider component.
|
12
11
|
* @param ref - User-provided ref to be passed to the Divider component.
|
13
12
|
*/
|
14
|
-
|
15
|
-
|
16
13
|
const useDivider_unstable = (props, ref) => {
|
17
14
|
const {
|
18
15
|
alignContent = 'center',
|
@@ -49,6 +46,5 @@ const useDivider_unstable = (props, ref) => {
|
|
49
46
|
})
|
50
47
|
};
|
51
48
|
};
|
52
|
-
|
53
49
|
exports.useDivider_unstable = useDivider_unstable;
|
54
50
|
//# sourceMappingURL=useDivider.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AACA;AAGA;;;;;AAKO,MAAMA,mBAAmB,GAAG,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,GAAGC,uBAAK,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,EAAEF,uCAAqB,CAAC,KAAK,EAAE;MACjCG,IAAI,EAAE,WAAW;MACjB,kBAAkB,EAAEN,QAAQ,GAAG,UAAU,GAAG,YAAY;MACxD,iBAAiB,EAAEL,KAAK,CAACY,QAAQ,GAAGL,SAAS,GAAGM,SAAS;MACzD,GAAGb,KAAK;MACRC;KACD,CAAC;IACFK,OAAO,EAAEE,kCAAgB,CAACF,OAAO,EAAE;MACjCQ,QAAQ,EAAE,IAAI;MACdC,YAAY,EAAE;QACZC,EAAE,EAAET,SAAS;QACbK,QAAQ,EAAEZ,KAAK,CAACY;;KAEnB;GACF;AACH,CAAC;AAhCYK,2BAAmB","names":["useDivider_unstable","props","ref","alignContent","appearance","inset","vertical","wrapper","dividerId","react_utilities_1","components","root","role","children","undefined","required","defaultProps","id","exports"],"sourceRoot":"../src/","sources":["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"]}
|
@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useDividerStyles_unstable = exports.dividerClassNames = void 0;
|
7
|
-
|
8
7
|
const react_1 = /*#__PURE__*/require("@griffel/react");
|
9
|
-
|
10
8
|
const react_theme_1 = /*#__PURE__*/require("@fluentui/react-theme");
|
11
|
-
|
12
9
|
exports.dividerClassNames = {
|
13
10
|
root: 'fui-Divider',
|
14
11
|
wrapper: 'fui-Divider__wrapper'
|
@@ -17,163 +14,159 @@ const contentSpacing = '12px';
|
|
17
14
|
const insetSpacing = '12px';
|
18
15
|
const maxStartEndLength = '8px';
|
19
16
|
const minStartEndLength = '8px;';
|
20
|
-
|
21
17
|
const useBaseStyles = /*#__PURE__*/react_1.__styles({
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
},
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
},
|
47
|
-
|
48
|
-
|
49
|
-
},
|
50
|
-
|
51
|
-
|
52
|
-
|
53
|
-
},
|
54
|
-
|
55
|
-
|
56
|
-
},
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
18
|
+
base: {
|
19
|
+
Bt984gj: "f122n59",
|
20
|
+
B7ck84d: "f1ewtqcl",
|
21
|
+
mc9l5x: "f22iagw",
|
22
|
+
Beiy3e4: "f1063pyq",
|
23
|
+
Bh6795r: "fqerorx",
|
24
|
+
qhf8xq: "f10pi13n",
|
25
|
+
Bahqtrf: "fk6fouc",
|
26
|
+
Be2twd7: "fy9rknc",
|
27
|
+
Bhrd7zp: "figsok6",
|
28
|
+
Bg96gwp: "fwrc4pm",
|
29
|
+
fsow6f: "f17mccla",
|
30
|
+
Bcvre1j: "fyl8oag",
|
31
|
+
Br0sdwz: "f16vkdww",
|
32
|
+
Bn78ew0: "fhsnbul",
|
33
|
+
li1rpt: "f1gw3sf2",
|
34
|
+
ap17g6: "f1ly5f7u",
|
35
|
+
B771hl4: "f1s3tz6t"
|
36
|
+
},
|
37
|
+
childless: {
|
38
|
+
susq4k: "f1kyqvp9",
|
39
|
+
Bicfajf: ["fzynn9s", "f1z0ukd1"],
|
40
|
+
jwcpgy: ["fekrn8e", "ftdg338"],
|
41
|
+
B4rk6o: "fesgyo"
|
42
|
+
},
|
43
|
+
start: {
|
44
|
+
Bsft5z2: "f13zj6fq"
|
45
|
+
},
|
46
|
+
center: {
|
47
|
+
Ftih45: "f1wl9k8s",
|
48
|
+
Bsft5z2: "f13zj6fq"
|
49
|
+
},
|
50
|
+
end: {
|
51
|
+
Ftih45: "f1wl9k8s"
|
52
|
+
},
|
53
|
+
brand: {
|
54
|
+
sj55zd: "f16muhyy",
|
55
|
+
Bq4z7u6: "fcbuu2a",
|
56
|
+
Bk5zm6e: ["f1wdw2dr", "f1ttio3w"],
|
57
|
+
Bqjgrrk: "f1582fpk",
|
58
|
+
Bm6vgfq: ["f1ttio3w", "f1wdw2dr"],
|
59
|
+
B0n5ga8: "f1ahrvm8",
|
60
|
+
s924m2: ["f1cd3wbc", "f17hbk9y"],
|
61
|
+
B1q35kw: "fvrapl0",
|
62
|
+
Gp14am: ["f17hbk9y", "f1cd3wbc"]
|
67
63
|
},
|
68
64
|
"default": {
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
},
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
},
|
90
|
-
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
|
65
|
+
sj55zd: "fkfq4zb",
|
66
|
+
Bq4z7u6: "f1vccso1",
|
67
|
+
Bk5zm6e: ["f1geml7w", "fjml6kk"],
|
68
|
+
Bqjgrrk: "f1r7kh1m",
|
69
|
+
Bm6vgfq: ["fjml6kk", "f1geml7w"],
|
70
|
+
B0n5ga8: "f16j7guv",
|
71
|
+
s924m2: ["fx01ahm", "fj1a37q"],
|
72
|
+
B1q35kw: "fl8d8yv",
|
73
|
+
Gp14am: ["fj1a37q", "fx01ahm"]
|
74
|
+
},
|
75
|
+
subtle: {
|
76
|
+
sj55zd: "fkfq4zb",
|
77
|
+
Bq4z7u6: "f5g06un",
|
78
|
+
Bk5zm6e: ["f13sxdku", "f1n015lb"],
|
79
|
+
Bqjgrrk: "f1x6bl8t",
|
80
|
+
Bm6vgfq: ["f1n015lb", "f13sxdku"],
|
81
|
+
B0n5ga8: "fvod1wy",
|
82
|
+
s924m2: ["fwslg65", "flk0e17"],
|
83
|
+
B1q35kw: "f103fvts",
|
84
|
+
Gp14am: ["flk0e17", "fwslg65"]
|
85
|
+
},
|
86
|
+
strong: {
|
87
|
+
sj55zd: "fkfq4zb",
|
88
|
+
Bq4z7u6: "f10tv6oz",
|
89
|
+
Bk5zm6e: ["f16xp3sf", "f1seuxxq"],
|
90
|
+
Bqjgrrk: "fwrmqbx",
|
91
|
+
Bm6vgfq: ["f1seuxxq", "f16xp3sf"],
|
92
|
+
B0n5ga8: "ft83z1f",
|
93
|
+
s924m2: ["f1g4150c", "f192dr6e"],
|
94
|
+
B1q35kw: "f1qnawh6",
|
95
|
+
Gp14am: ["f192dr6e", "f1g4150c"]
|
100
96
|
}
|
101
97
|
}, {
|
102
|
-
|
98
|
+
d: [".f122n59{-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;}", ".f1ewtqcl{box-sizing:border-box;}", ".f22iagw{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1063pyq{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;}", ".fqerorx{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f10pi13n{position:relative;}", ".fk6fouc{font-family:var(--fontFamilyBase);}", ".fy9rknc{font-size:var(--fontSizeBase200);}", ".figsok6{font-weight:var(--fontWeightRegular);}", ".fwrc4pm{line-height:var(--lineHeightBase200);}", ".f17mccla{text-align:center;}", ".fyl8oag::before{box-sizing:border-box;}", ".f16vkdww::before{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".fhsnbul::before{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1gw3sf2::after{box-sizing:border-box;}", ".f1ly5f7u::after{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}", ".f1s3tz6t::after{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}", ".f1kyqvp9::before{margin-bottom:0;}", ".fzynn9s::before{margin-right:0;}", ".f1z0ukd1::before{margin-left:0;}", ".fekrn8e::after{margin-left:0;}", ".ftdg338::after{margin-right:0;}", ".fesgyo::after{margin-top:0;}", ".f13zj6fq::after{content:\"\";}", ".f1wl9k8s::before{content:\"\";}", ".f16muhyy{color:var(--colorBrandForeground1);}", ".fcbuu2a::before{border-top-color:var(--colorBrandStroke1);}", ".f1wdw2dr::before{border-right-color:var(--colorBrandStroke1);}", ".f1ttio3w::before{border-left-color:var(--colorBrandStroke1);}", ".f1582fpk::before{border-bottom-color:var(--colorBrandStroke1);}", ".f1ahrvm8::after{border-top-color:var(--colorBrandStroke1);}", ".f1cd3wbc::after{border-right-color:var(--colorBrandStroke1);}", ".f17hbk9y::after{border-left-color:var(--colorBrandStroke1);}", ".fvrapl0::after{border-bottom-color:var(--colorBrandStroke1);}", ".fkfq4zb{color:var(--colorNeutralForeground2);}", ".f1vccso1::before{border-top-color:var(--colorNeutralStroke2);}", ".f1geml7w::before{border-right-color:var(--colorNeutralStroke2);}", ".fjml6kk::before{border-left-color:var(--colorNeutralStroke2);}", ".f1r7kh1m::before{border-bottom-color:var(--colorNeutralStroke2);}", ".f16j7guv::after{border-top-color:var(--colorNeutralStroke2);}", ".fx01ahm::after{border-right-color:var(--colorNeutralStroke2);}", ".fj1a37q::after{border-left-color:var(--colorNeutralStroke2);}", ".fl8d8yv::after{border-bottom-color:var(--colorNeutralStroke2);}", ".f5g06un::before{border-top-color:var(--colorNeutralStroke3);}", ".f13sxdku::before{border-right-color:var(--colorNeutralStroke3);}", ".f1n015lb::before{border-left-color:var(--colorNeutralStroke3);}", ".f1x6bl8t::before{border-bottom-color:var(--colorNeutralStroke3);}", ".fvod1wy::after{border-top-color:var(--colorNeutralStroke3);}", ".fwslg65::after{border-right-color:var(--colorNeutralStroke3);}", ".flk0e17::after{border-left-color:var(--colorNeutralStroke3);}", ".f103fvts::after{border-bottom-color:var(--colorNeutralStroke3);}", ".f10tv6oz::before{border-top-color:var(--colorNeutralStroke1);}", ".f16xp3sf::before{border-right-color:var(--colorNeutralStroke1);}", ".f1seuxxq::before{border-left-color:var(--colorNeutralStroke1);}", ".fwrmqbx::before{border-bottom-color:var(--colorNeutralStroke1);}", ".ft83z1f::after{border-top-color:var(--colorNeutralStroke1);}", ".f1g4150c::after{border-right-color:var(--colorNeutralStroke1);}", ".f192dr6e::after{border-left-color:var(--colorNeutralStroke1);}", ".f1qnawh6::after{border-bottom-color:var(--colorNeutralStroke1);}"]
|
103
99
|
});
|
104
|
-
|
105
100
|
const useHorizontalStyles = /*#__PURE__*/react_1.__styles({
|
106
|
-
|
107
|
-
|
108
|
-
|
109
|
-
|
110
|
-
|
111
|
-
|
112
|
-
|
113
|
-
|
114
|
-
},
|
115
|
-
|
116
|
-
|
117
|
-
|
118
|
-
},
|
119
|
-
|
120
|
-
|
121
|
-
|
122
|
-
|
123
|
-
|
124
|
-
},
|
125
|
-
|
126
|
-
|
127
|
-
|
128
|
-
},
|
129
|
-
|
130
|
-
|
131
|
-
|
132
|
-
|
133
|
-
|
101
|
+
base: {
|
102
|
+
a9b677: "fly5x3f",
|
103
|
+
Bdkvgpv: "f163fonl",
|
104
|
+
B0qfbqy: "f51yk4v",
|
105
|
+
pbipgd: "f13rof3u",
|
106
|
+
Bm2nyyq: "f8rth92",
|
107
|
+
xrcqlc: "f6czdpx",
|
108
|
+
i5u598: "f1iyka9k"
|
109
|
+
},
|
110
|
+
inset: {
|
111
|
+
uwmqm3: ["fjlbh76", "f11qrl6u"],
|
112
|
+
z189sj: ["f11qrl6u", "fjlbh76"]
|
113
|
+
},
|
114
|
+
start: {
|
115
|
+
Ftih45: "f1wl9k8s",
|
116
|
+
Bicfajf: ["f1ojjlep", "fk1kexq"],
|
117
|
+
Bxwl2t9: "f1he2m4d",
|
118
|
+
jwcpgy: ["f12w1bnb", "f1558wlj"]
|
119
|
+
},
|
120
|
+
center: {
|
121
|
+
Bicfajf: ["f1ojjlep", "fk1kexq"],
|
122
|
+
jwcpgy: ["f12w1bnb", "f1558wlj"]
|
123
|
+
},
|
124
|
+
end: {
|
125
|
+
Bicfajf: ["f1ojjlep", "fk1kexq"],
|
126
|
+
Bsft5z2: "f13zj6fq",
|
127
|
+
jwcpgy: ["f12w1bnb", "f1558wlj"],
|
128
|
+
Iy66sp: "f1ayce8x"
|
134
129
|
}
|
135
130
|
}, {
|
136
|
-
|
131
|
+
d: [".fly5x3f{width:100%;}", ".f163fonl::before{border-top-style:solid;}", ".f51yk4v::before{border-top-width:var(--strokeWidthThin);}", ".f13rof3u::before{min-width:8px;}", ".f8rth92::after{border-top-style:solid;}", ".f6czdpx::after{border-top-width:var(--strokeWidthThin);}", ".f1iyka9k::after{min-width:8px;}", ".fjlbh76{padding-left:12px;}", ".f11qrl6u{padding-right:12px;}", ".f1wl9k8s::before{content:\"\";}", ".f1ojjlep::before{margin-right:12px;}", ".fk1kexq::before{margin-left:12px;}", ".f1he2m4d::before{max-width:8px;}", ".f12w1bnb::after{margin-left:12px;}", ".f1558wlj::after{margin-right:12px;}", ".f13zj6fq::after{content:\"\";}", ".f1ayce8x::after{max-width:8px;}"]
|
137
132
|
});
|
138
|
-
|
139
133
|
const useVerticalStyles = /*#__PURE__*/react_1.__styles({
|
140
|
-
|
141
|
-
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
|
146
|
-
|
147
|
-
|
148
|
-
|
149
|
-
},
|
150
|
-
|
151
|
-
|
152
|
-
|
153
|
-
},
|
154
|
-
|
155
|
-
|
156
|
-
},
|
157
|
-
|
158
|
-
|
159
|
-
|
160
|
-
|
161
|
-
|
162
|
-
},
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
},
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
|
134
|
+
base: {
|
135
|
+
Beiy3e4: "f1vx9l62",
|
136
|
+
sshi5w: "f16gbxbe",
|
137
|
+
m598lv: ["f1yq6w5o", "f1jpmc5p"],
|
138
|
+
B4f6apu: ["f9sc749", "f1x8pvcy"],
|
139
|
+
zkzzav: "fhkwbjy",
|
140
|
+
Barhvk9: ["flthirb", "ftkbnf5"],
|
141
|
+
Ihftqj: ["f13hvwk3", "f1en4csx"],
|
142
|
+
Bde111x: "f19onpk6"
|
143
|
+
},
|
144
|
+
inset: {
|
145
|
+
B6of3ja: "f1xdg43u",
|
146
|
+
jrapky: "f1jlhsmd"
|
147
|
+
},
|
148
|
+
withChildren: {
|
149
|
+
sshi5w: "f1tjaq3g"
|
150
|
+
},
|
151
|
+
start: {
|
152
|
+
Ftih45: "f1wl9k8s",
|
153
|
+
susq4k: "fg2pwug",
|
154
|
+
Bbdr6tz: "fkjtzyi",
|
155
|
+
B4rk6o: "f8vk40g"
|
156
|
+
},
|
157
|
+
center: {
|
158
|
+
susq4k: "fg2pwug",
|
159
|
+
B4rk6o: "f8vk40g"
|
160
|
+
},
|
161
|
+
end: {
|
162
|
+
susq4k: "fg2pwug",
|
163
|
+
Bsft5z2: "f13zj6fq",
|
164
|
+
B4rk6o: "f8vk40g",
|
165
|
+
gn64ia: "fqg5mu5"
|
172
166
|
}
|
173
167
|
}, {
|
174
|
-
|
168
|
+
d: [".f1vx9l62{-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;}", ".f16gbxbe{min-height:20px;}", ".f1yq6w5o::before{border-right-style:solid;}", ".f1jpmc5p::before{border-left-style:solid;}", ".f9sc749::before{border-right-width:var(--strokeWidthThin);}", ".f1x8pvcy::before{border-left-width:var(--strokeWidthThin);}", ".fhkwbjy::before{min-height:8px;}", ".flthirb::after{border-right-style:solid;}", ".ftkbnf5::after{border-left-style:solid;}", ".f13hvwk3::after{border-right-width:var(--strokeWidthThin);}", ".f1en4csx::after{border-left-width:var(--strokeWidthThin);}", ".f19onpk6::after{min-height:8px;}", ".f1xdg43u{margin-top:12px;}", ".f1jlhsmd{margin-bottom:12px;}", ".f1tjaq3g{min-height:84px;}", ".f1wl9k8s::before{content:\"\";}", ".fg2pwug::before{margin-bottom:12px;}", ".fkjtzyi::before{max-height:8px;}", ".f8vk40g::after{margin-top:12px;}", ".f13zj6fq::after{content:\"\";}", ".fqg5mu5::after{max-height:8px;}"]
|
175
169
|
});
|
176
|
-
|
177
170
|
const useDividerStyles_unstable = state => {
|
178
171
|
const baseStyles = useBaseStyles();
|
179
172
|
const horizontalStyles = useHorizontalStyles();
|
@@ -184,19 +177,21 @@ const useDividerStyles_unstable = state => {
|
|
184
177
|
inset,
|
185
178
|
vertical
|
186
179
|
} = state;
|
187
|
-
state.root.className = react_1.mergeClasses(exports.dividerClassNames.root,
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
180
|
+
state.root.className = react_1.mergeClasses(exports.dividerClassNames.root,
|
181
|
+
// Base styles
|
182
|
+
baseStyles.base, baseStyles[alignContent], appearance && baseStyles[appearance],
|
183
|
+
// Horizontal styles
|
184
|
+
!vertical && horizontalStyles.base, !vertical && inset && horizontalStyles.inset, !vertical && horizontalStyles[alignContent],
|
185
|
+
// Vertical styles
|
186
|
+
vertical && verticalStyles.base, vertical && inset && verticalStyles.inset, vertical && verticalStyles[alignContent], vertical && state.root.children !== undefined && verticalStyles.withChildren,
|
187
|
+
// Childless styles
|
188
|
+
state.root.children === undefined && baseStyles.childless,
|
189
|
+
// User provided class name
|
192
190
|
state.root.className);
|
193
|
-
|
194
191
|
if (state.wrapper) {
|
195
192
|
state.wrapper.className = react_1.mergeClasses(exports.dividerClassNames.wrapper, state.wrapper.className);
|
196
193
|
}
|
197
|
-
|
198
194
|
return state;
|
199
195
|
};
|
200
|
-
|
201
196
|
exports.useDividerStyles_unstable = useDividerStyles_unstable;
|
202
197
|
//# sourceMappingURL=useDividerStyles.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":"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","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"]}
|
package/lib-commonjs/index.js
CHANGED
@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
5
5
|
});
|
6
6
|
exports.useDivider_unstable = exports.useDividerStyles_unstable = exports.renderDivider_unstable = exports.dividerClassNames = exports.Divider = void 0;
|
7
|
-
|
8
7
|
var Divider_1 = /*#__PURE__*/require("./Divider");
|
9
|
-
|
10
8
|
Object.defineProperty(exports, "Divider", {
|
11
9
|
enumerable: true,
|
12
10
|
get: function () {
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACEA;EAAAC;EAAAC;IAAA,wBAAO;EAAA;AAAA;AACPF;EAAAC;EAAAC;IAAA,kCAAiB;EAAA;AAAA;AACjBF;EAAAC;EAAAC;IAAA,uCAAsB;EAAA;AAAA;AACtBF;EAAAC;EAAAC;IAAA,0CAAyB;EAAA;AAAA;AACzBF;EAAAC;EAAAC;IAAA,oCAAmB;EAAA;AAAA","names":["Object","enumerable","get"],"sourceRoot":"../src/","sources":["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"]}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@fluentui/react-divider",
|
3
|
-
"version": "9.1.
|
3
|
+
"version": "9.1.9",
|
4
4
|
"description": "Fluent UI component to visually separate content.",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -27,13 +27,13 @@
|
|
27
27
|
"devDependencies": {
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
29
29
|
"@fluentui/react-conformance": "*",
|
30
|
-
"@fluentui/react-conformance-griffel": "9.0.0-beta.
|
31
|
-
"@fluentui/scripts": "
|
30
|
+
"@fluentui/react-conformance-griffel": "9.0.0-beta.19",
|
31
|
+
"@fluentui/scripts": "*"
|
32
32
|
},
|
33
33
|
"dependencies": {
|
34
|
-
"@griffel/react": "^1.
|
34
|
+
"@griffel/react": "^1.5.2",
|
35
35
|
"@fluentui/react-theme": "^9.1.5",
|
36
|
-
"@fluentui/react-utilities": "^9.3.
|
36
|
+
"@fluentui/react-utilities": "^9.3.1",
|
37
37
|
"tslib": "^2.1.0"
|
38
38
|
},
|
39
39
|
"peerDependencies": {
|