@fluentui/react-breadcrumb 9.0.14 → 9.0.16
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.md +36 -6
- package/dist/index.d.ts +1 -1
- package/lib/components/BreadcrumbDivider/BreadcrumbDivider.types.js.map +1 -1
- package/lib/components/BreadcrumbDivider/useBreadcrumbDivider.js +7 -25
- package/lib/components/BreadcrumbDivider/useBreadcrumbDivider.js.map +1 -1
- package/lib/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.js +17 -6
- package/lib/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.js.map +1 -1
- package/lib-commonjs/components/BreadcrumbDivider/useBreadcrumbDivider.js +6 -24
- package/lib-commonjs/components/BreadcrumbDivider/useBreadcrumbDivider.js.map +1 -1
- package/lib-commonjs/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.js +18 -5
- package/lib-commonjs/components/BreadcrumbDivider/useBreadcrumbDividerStyles.styles.js.map +1 -1
- package/package.json +10 -9
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,50 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-breadcrumb
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 28 Feb 2024 02:28:41 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.0.16](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb_v9.0.16)
|
|
8
|
+
|
|
9
|
+
Wed, 28 Feb 2024 02:28:41 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-breadcrumb_v9.0.15..@fluentui/react-breadcrumb_v9.0.16)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-aria to v9.9.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
15
|
+
- Bump @fluentui/react-button to v9.3.70 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
16
|
+
- Bump @fluentui/react-link to v9.2.12 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
17
|
+
- Bump @fluentui/react-shared-contexts to v9.14.1 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v9.19.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
19
|
+
- Bump @fluentui/react-utilities to v9.18.2 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
20
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.31 ([PR #30639](https://github.com/microsoft/fluentui/pull/30639) by beachball)
|
|
21
|
+
|
|
22
|
+
## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb_v9.0.15)
|
|
23
|
+
|
|
24
|
+
Tue, 20 Feb 2024 14:22:17 GMT
|
|
25
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-breadcrumb_v9.0.14..@fluentui/react-breadcrumb_v9.0.15)
|
|
26
|
+
|
|
27
|
+
### Patches
|
|
28
|
+
|
|
29
|
+
- fix: moved sized icons to styling ([PR #30551](https://github.com/microsoft/fluentui/pull/30551) by vkozlova@microsoft.com)
|
|
30
|
+
- Bump @fluentui/react-aria to v9.9.0 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
|
31
|
+
- Bump @fluentui/react-button to v9.3.69 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
|
32
|
+
- Bump @fluentui/react-link to v9.2.11 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
|
33
|
+
- Bump @fluentui/react-tabster to v9.19.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
|
34
|
+
- Bump @fluentui/react-utilities to v9.18.1 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
|
35
|
+
- Bump @fluentui/react-jsx-runtime to v9.0.30 ([PR #30543](https://github.com/microsoft/fluentui/pull/30543) by beachball)
|
|
36
|
+
|
|
7
37
|
## [9.0.14](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb_v9.0.14)
|
|
8
38
|
|
|
9
|
-
Tue, 06 Feb 2024 17:
|
|
39
|
+
Tue, 06 Feb 2024 17:55:21 GMT
|
|
10
40
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-breadcrumb_v9.0.13..@fluentui/react-breadcrumb_v9.0.14)
|
|
11
41
|
|
|
12
42
|
### Patches
|
|
13
43
|
|
|
14
|
-
- Bump @fluentui/react-aria to v9.8.2 ([PR #
|
|
15
|
-
- Bump @fluentui/react-button to v9.3.68 ([PR #
|
|
16
|
-
- Bump @fluentui/react-link to v9.2.10 ([PR #
|
|
17
|
-
- Bump @fluentui/react-tabster to v9.19.0 ([PR #
|
|
44
|
+
- Bump @fluentui/react-aria to v9.8.2 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
|
|
45
|
+
- Bump @fluentui/react-button to v9.3.68 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
|
|
46
|
+
- Bump @fluentui/react-link to v9.2.10 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
|
|
47
|
+
- Bump @fluentui/react-tabster to v9.19.0 ([PR #30392](https://github.com/microsoft/fluentui/pull/30392) by beachball)
|
|
18
48
|
|
|
19
49
|
## [9.0.13](https://github.com/microsoft/fluentui/tree/@fluentui/react-breadcrumb_v9.0.13)
|
|
20
50
|
|
package/dist/index.d.ts
CHANGED
|
@@ -70,7 +70,7 @@ export declare type BreadcrumbDividerSlots = {
|
|
|
70
70
|
/**
|
|
71
71
|
* State used in rendering BreadcrumbDivider
|
|
72
72
|
*/
|
|
73
|
-
export declare type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;
|
|
73
|
+
export declare type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots> & Pick<BreadcrumbProps, 'size'>;
|
|
74
74
|
|
|
75
75
|
/**
|
|
76
76
|
* BreadcrumbItem component is a wrapper for BreadcrumbLink and BreadcrumbButton.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["BreadcrumbDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\n\nexport type BreadcrumbDividerSlots = {\n root: Slot<'li'>;\n};\n\n/**\n * BreadcrumbDivider Props\n */\nexport type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};\n\n/**\n * State used in rendering BreadcrumbDivider\n */\nexport type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots>;\n"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["BreadcrumbDivider.types.ts"],"sourcesContent":["import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbProps } from '../Breadcrumb/Breadcrumb.types';\n\nexport type BreadcrumbDividerSlots = {\n root: Slot<'li'>;\n};\n\n/**\n * BreadcrumbDivider Props\n */\nexport type BreadcrumbDividerProps = ComponentProps<BreadcrumbDividerSlots> & {};\n\n/**\n * State used in rendering BreadcrumbDivider\n */\nexport type BreadcrumbDividerState = ComponentState<BreadcrumbDividerSlots> & Pick<BreadcrumbProps, 'size'>;\n"],"names":[],"mappings":"AAAA,WAe4G"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';
|
|
3
|
-
import {
|
|
3
|
+
import { ChevronRightRegular, ChevronLeftRegular } from '@fluentui/react-icons';
|
|
4
4
|
import { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';
|
|
5
5
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
6
6
|
/**
|
|
@@ -14,7 +14,7 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
14
14
|
*/ export const useBreadcrumbDivider_unstable = (props, ref)=>{
|
|
15
15
|
const { size } = useBreadcrumbContext_unstable();
|
|
16
16
|
const { dir } = useFluent();
|
|
17
|
-
const icon = getDividerIcon(
|
|
17
|
+
const icon = getDividerIcon(dir);
|
|
18
18
|
return {
|
|
19
19
|
components: {
|
|
20
20
|
root: 'li'
|
|
@@ -26,32 +26,14 @@ import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts
|
|
|
26
26
|
...props
|
|
27
27
|
}), {
|
|
28
28
|
elementType: 'li'
|
|
29
|
-
})
|
|
29
|
+
}),
|
|
30
|
+
size
|
|
30
31
|
};
|
|
31
32
|
};
|
|
32
|
-
const dividerIcons = {
|
|
33
|
-
rtl: {
|
|
34
|
-
small: /*#__PURE__*/ React.createElement(ChevronLeft12Regular, null),
|
|
35
|
-
medium: /*#__PURE__*/ React.createElement(ChevronLeft16Regular, null),
|
|
36
|
-
large: /*#__PURE__*/ React.createElement(ChevronLeft20Regular, null)
|
|
37
|
-
},
|
|
38
|
-
ltr: {
|
|
39
|
-
small: /*#__PURE__*/ React.createElement(ChevronRight12Regular, null),
|
|
40
|
-
medium: /*#__PURE__*/ React.createElement(ChevronRight16Regular, null),
|
|
41
|
-
large: /*#__PURE__*/ React.createElement(ChevronRight20Regular, null)
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
33
|
/**
|
|
45
34
|
* Get icon of the divider
|
|
46
35
|
*
|
|
47
|
-
* @param
|
|
48
|
-
*/ function getDividerIcon(
|
|
49
|
-
|
|
50
|
-
if (size === 'small') {
|
|
51
|
-
return dividerIcon.small;
|
|
52
|
-
}
|
|
53
|
-
if (size === 'large') {
|
|
54
|
-
return dividerIcon.large;
|
|
55
|
-
}
|
|
56
|
-
return dividerIcon.medium;
|
|
36
|
+
* @param dir - RTL or LTR
|
|
37
|
+
*/ function getDividerIcon(dir) {
|
|
38
|
+
return dir === 'rtl' ? /*#__PURE__*/ React.createElement(ChevronLeftRegular, null) : /*#__PURE__*/ React.createElement(ChevronRightRegular, null);
|
|
57
39
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useBreadcrumbDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';\nimport {
|
|
1
|
+
{"version":3,"sources":["useBreadcrumbDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport type { BreadcrumbDividerProps, BreadcrumbDividerState } from './BreadcrumbDivider.types';\nimport { ChevronRightRegular, ChevronLeftRegular } from '@fluentui/react-icons';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n\n/**\n * Create the state required to render BreadcrumbDivider.\n *\n * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,\n * before being passed to renderBreadcrumbDivider_unstable.\n *\n * @param props - props from this instance of BreadcrumbDivider\n * @param ref - reference to root HTMLElement of BreadcrumbDivider\n */\nexport const useBreadcrumbDivider_unstable = (\n props: BreadcrumbDividerProps,\n ref: React.Ref<HTMLLIElement>,\n): BreadcrumbDividerState => {\n const { size } = useBreadcrumbContext_unstable();\n const { dir } = useFluent();\n const icon = getDividerIcon(dir);\n\n return {\n components: {\n root: 'li',\n },\n root: slot.always(\n getIntrinsicElementProps('li', {\n ref,\n 'aria-hidden': true,\n children: icon,\n ...props,\n }),\n { elementType: 'li' },\n ),\n size,\n };\n};\n\n/**\n * Get icon of the divider\n *\n * @param dir - RTL or LTR\n */\nfunction getDividerIcon(dir: string) {\n return dir === 'rtl' ? <ChevronLeftRegular /> : <ChevronRightRegular />;\n}\n"],"names":["React","getIntrinsicElementProps","slot","ChevronRightRegular","ChevronLeftRegular","useBreadcrumbContext_unstable","useFluent_unstable","useFluent","useBreadcrumbDivider_unstable","props","ref","size","dir","icon","getDividerIcon","components","root","always","children","elementType"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,wBAAwB,EAAEC,IAAI,QAAQ,4BAA4B;AAE3E,SAASC,mBAAmB,EAAEC,kBAAkB,QAAQ,wBAAwB;AAChF,SAASC,6BAA6B,QAAQ,kCAAkC;AAChF,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAElF;;;;;;;;CAQC,GACD,OAAO,MAAMC,gCAAgC,CAC3CC,OACAC;IAEA,MAAM,EAAEC,IAAI,EAAE,GAAGN;IACjB,MAAM,EAAEO,GAAG,EAAE,GAAGL;IAChB,MAAMM,OAAOC,eAAeF;IAE5B,OAAO;QACLG,YAAY;YACVC,MAAM;QACR;QACAA,MAAMd,KAAKe,MAAM,CACfhB,yBAAyB,MAAM;YAC7BS;YACA,eAAe;YACfQ,UAAUL;YACV,GAAGJ,KAAK;QACV,IACA;YAAEU,aAAa;QAAK;QAEtBR;IACF;AACF,EAAE;AAEF;;;;CAIC,GACD,SAASG,eAAeF,GAAW;IACjC,OAAOA,QAAQ,sBAAQ,oBAACR,0CAAwB,oBAACD;AACnD"}
|
|
@@ -1,23 +1,34 @@
|
|
|
1
|
-
import { __styles, mergeClasses } from '@griffel/react';
|
|
1
|
+
import { __styles, __resetStyles, mergeClasses } from '@griffel/react';
|
|
2
2
|
export const breadcrumbDividerClassNames = {
|
|
3
3
|
root: 'fui-BreadcrumbDivider'
|
|
4
4
|
};
|
|
5
5
|
/**
|
|
6
6
|
* Styles for the root slot
|
|
7
7
|
*/
|
|
8
|
-
const useStyles = /*#__PURE__*/
|
|
9
|
-
|
|
10
|
-
|
|
8
|
+
const useStyles = /*#__PURE__*/__resetStyles("rk008qs", null, [".rk008qs{display:flex;}"]);
|
|
9
|
+
const useIconStyles = /*#__PURE__*/__styles({
|
|
10
|
+
small: {
|
|
11
|
+
Be2twd7: "f1ugzwwg"
|
|
12
|
+
},
|
|
13
|
+
medium: {
|
|
14
|
+
Be2twd7: "f4ybsrx"
|
|
15
|
+
},
|
|
16
|
+
large: {
|
|
17
|
+
Be2twd7: "fe5j1ua"
|
|
11
18
|
}
|
|
12
19
|
}, {
|
|
13
|
-
d: [".
|
|
20
|
+
d: [".f1ugzwwg{font-size:12px;}", ".f4ybsrx{font-size:16px;}", ".fe5j1ua{font-size:20px;}"]
|
|
14
21
|
});
|
|
15
22
|
/**
|
|
16
23
|
* Apply styling to the BreadcrumbDivider slots based on the state
|
|
17
24
|
*/
|
|
18
25
|
export const useBreadcrumbDividerStyles_unstable = state => {
|
|
19
26
|
const styles = useStyles();
|
|
20
|
-
|
|
27
|
+
const iconStyles = useIconStyles();
|
|
28
|
+
const {
|
|
29
|
+
size = 'medium'
|
|
30
|
+
} = state;
|
|
31
|
+
state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles, iconStyles[size], state.root.className);
|
|
21
32
|
return state;
|
|
22
33
|
};
|
|
23
34
|
//# sourceMappingURL=useBreadcrumbDividerStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["__styles","mergeClasses","breadcrumbDividerClassNames","root","useStyles","
|
|
1
|
+
{"version":3,"names":["__styles","__resetStyles","mergeClasses","breadcrumbDividerClassNames","root","useStyles","useIconStyles","small","Be2twd7","medium","large","d","useBreadcrumbDividerStyles_unstable","state","styles","iconStyles","size","className"],"sources":["useBreadcrumbDividerStyles.styles.js"],"sourcesContent":["import { makeStyles, makeResetStyles, mergeClasses } from '@griffel/react';\nexport const breadcrumbDividerClassNames = {\n root: 'fui-BreadcrumbDivider'\n};\n/**\n * Styles for the root slot\n */ const useStyles = makeResetStyles({\n display: 'flex'\n});\nconst useIconStyles = makeStyles({\n small: {\n fontSize: '12px'\n },\n medium: {\n fontSize: '16px'\n },\n large: {\n fontSize: '20px'\n }\n});\n/**\n * Apply styling to the BreadcrumbDivider slots based on the state\n */ export const useBreadcrumbDividerStyles_unstable = (state)=>{\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const { size = 'medium' } = state;\n state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles, iconStyles[size], state.root.className);\n return state;\n};\n"],"mappings":"AAAA,SAAAA,QAAA,EAAAC,aAAA,EAAsCC,YAAY,QAAQ,gBAAgB;AAC1E,OAAO,MAAMC,2BAA2B,GAAG;EACvCC,IAAI,EAAE;AACV,CAAC;AACD;AACA;AACA;AAAI,MAAMC,SAAS,gBAAGJ,aAAA,6CAErB,CAAC;AACF,MAAMK,aAAa,gBAAGN,QAAA;EAAAO,KAAA;IAAAC,OAAA;EAAA;EAAAC,MAAA;IAAAD,OAAA;EAAA;EAAAE,KAAA;IAAAF,OAAA;EAAA;AAAA;EAAAG,CAAA;AAAA,CAUrB,CAAC;AACF;AACA;AACA;AAAI,OAAO,MAAMC,mCAAmC,GAAIC,KAAK,IAAG;EAC5D,MAAMC,MAAM,GAAGT,SAAS,CAAC,CAAC;EAC1B,MAAMU,UAAU,GAAGT,aAAa,CAAC,CAAC;EAClC,MAAM;IAAEU,IAAI,GAAG;EAAS,CAAC,GAAGH,KAAK;EACjCA,KAAK,CAACT,IAAI,CAACa,SAAS,GAAGf,YAAY,CAACC,2BAA2B,CAACC,IAAI,EAAEU,MAAM,EAAEC,UAAU,CAACC,IAAI,CAAC,EAAEH,KAAK,CAACT,IAAI,CAACa,SAAS,CAAC;EACrH,OAAOJ,KAAK;AAChB,CAAC"}
|
|
@@ -17,7 +17,7 @@ const _reactsharedcontexts = require("@fluentui/react-shared-contexts");
|
|
|
17
17
|
const useBreadcrumbDivider_unstable = (props, ref)=>{
|
|
18
18
|
const { size } = (0, _BreadcrumbContext.useBreadcrumbContext_unstable)();
|
|
19
19
|
const { dir } = (0, _reactsharedcontexts.useFluent_unstable)();
|
|
20
|
-
const icon = getDividerIcon(
|
|
20
|
+
const icon = getDividerIcon(dir);
|
|
21
21
|
return {
|
|
22
22
|
components: {
|
|
23
23
|
root: 'li'
|
|
@@ -29,32 +29,14 @@ const useBreadcrumbDivider_unstable = (props, ref)=>{
|
|
|
29
29
|
...props
|
|
30
30
|
}), {
|
|
31
31
|
elementType: 'li'
|
|
32
|
-
})
|
|
32
|
+
}),
|
|
33
|
+
size
|
|
33
34
|
};
|
|
34
35
|
};
|
|
35
|
-
const dividerIcons = {
|
|
36
|
-
rtl: {
|
|
37
|
-
small: /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeft12Regular, null),
|
|
38
|
-
medium: /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeft16Regular, null),
|
|
39
|
-
large: /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeft20Regular, null)
|
|
40
|
-
},
|
|
41
|
-
ltr: {
|
|
42
|
-
small: /*#__PURE__*/ _react.createElement(_reacticons.ChevronRight12Regular, null),
|
|
43
|
-
medium: /*#__PURE__*/ _react.createElement(_reacticons.ChevronRight16Regular, null),
|
|
44
|
-
large: /*#__PURE__*/ _react.createElement(_reacticons.ChevronRight20Regular, null)
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
36
|
/**
|
|
48
37
|
* Get icon of the divider
|
|
49
38
|
*
|
|
50
|
-
* @param
|
|
51
|
-
*/ function getDividerIcon(
|
|
52
|
-
|
|
53
|
-
if (size === 'small') {
|
|
54
|
-
return dividerIcon.small;
|
|
55
|
-
}
|
|
56
|
-
if (size === 'large') {
|
|
57
|
-
return dividerIcon.large;
|
|
58
|
-
}
|
|
59
|
-
return dividerIcon.medium;
|
|
39
|
+
* @param dir - RTL or LTR
|
|
40
|
+
*/ function getDividerIcon(dir) {
|
|
41
|
+
return dir === 'rtl' ? /*#__PURE__*/ _react.createElement(_reacticons.ChevronLeftRegular, null) : /*#__PURE__*/ _react.createElement(_reacticons.ChevronRightRegular, null);
|
|
60
42
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useBreadcrumbDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport {
|
|
1
|
+
{"version":3,"sources":["useBreadcrumbDivider.js"],"sourcesContent":["import * as React from 'react';\nimport { getIntrinsicElementProps, slot } from '@fluentui/react-utilities';\nimport { ChevronRightRegular, ChevronLeftRegular } from '@fluentui/react-icons';\nimport { useBreadcrumbContext_unstable } from '../Breadcrumb/BreadcrumbContext';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\n/**\n * Create the state required to render BreadcrumbDivider.\n *\n * The returned state can be modified with hooks such as useBreadcrumbDividerStyles_unstable,\n * before being passed to renderBreadcrumbDivider_unstable.\n *\n * @param props - props from this instance of BreadcrumbDivider\n * @param ref - reference to root HTMLElement of BreadcrumbDivider\n */ export const useBreadcrumbDivider_unstable = (props, ref)=>{\n const { size } = useBreadcrumbContext_unstable();\n const { dir } = useFluent();\n const icon = getDividerIcon(dir);\n return {\n components: {\n root: 'li'\n },\n root: slot.always(getIntrinsicElementProps('li', {\n ref,\n 'aria-hidden': true,\n children: icon,\n ...props\n }), {\n elementType: 'li'\n }),\n size\n };\n};\n/**\n * Get icon of the divider\n *\n * @param dir - RTL or LTR\n */ function getDividerIcon(dir) {\n return dir === 'rtl' ? /*#__PURE__*/ React.createElement(ChevronLeftRegular, null) : /*#__PURE__*/ React.createElement(ChevronRightRegular, null);\n}\n"],"names":["useBreadcrumbDivider_unstable","props","ref","size","useBreadcrumbContext_unstable","dir","useFluent","icon","getDividerIcon","components","root","slot","always","getIntrinsicElementProps","children","elementType","React","createElement","ChevronLeftRegular","ChevronRightRegular"],"mappings":";;;;+BAaiBA;;;eAAAA;;;;iEAbM;gCACwB;4BACS;mCACV;qCACE;AASrC,MAAMA,gCAAgC,CAACC,OAAOC;IACrD,MAAM,EAAEC,IAAI,EAAE,GAAGC,IAAAA,gDAA6B;IAC9C,MAAM,EAAEC,GAAG,EAAE,GAAGC,IAAAA,uCAAS;IACzB,MAAMC,OAAOC,eAAeH;IAC5B,OAAO;QACHI,YAAY;YACRC,MAAM;QACV;QACAA,MAAMC,oBAAI,CAACC,MAAM,CAACC,IAAAA,wCAAwB,EAAC,MAAM;YAC7CX;YACA,eAAe;YACfY,UAAUP;YACV,GAAGN,KAAK;QACZ,IAAI;YACAc,aAAa;QACjB;QACAZ;IACJ;AACJ;AACA;;;;CAIC,GAAG,SAASK,eAAeH,GAAG;IAC3B,OAAOA,QAAQ,QAAQ,WAAW,GAAGW,OAAMC,aAAa,CAACC,8BAAkB,EAAE,QAAQ,WAAW,GAAGF,OAAMC,aAAa,CAACE,+BAAmB,EAAE;AAChJ"}
|
|
@@ -22,17 +22,30 @@ const breadcrumbDividerClassNames = {
|
|
|
22
22
|
};
|
|
23
23
|
/**
|
|
24
24
|
* Styles for the root slot
|
|
25
|
-
*/ const useStyles = /*#__PURE__*/ (0, _react.
|
|
26
|
-
|
|
27
|
-
|
|
25
|
+
*/ const useStyles = /*#__PURE__*/ (0, _react.__resetStyles)("rk008qs", null, [
|
|
26
|
+
".rk008qs{display:flex;}"
|
|
27
|
+
]);
|
|
28
|
+
const useIconStyles = /*#__PURE__*/ (0, _react.__styles)({
|
|
29
|
+
small: {
|
|
30
|
+
Be2twd7: "f1ugzwwg"
|
|
31
|
+
},
|
|
32
|
+
medium: {
|
|
33
|
+
Be2twd7: "f4ybsrx"
|
|
34
|
+
},
|
|
35
|
+
large: {
|
|
36
|
+
Be2twd7: "fe5j1ua"
|
|
28
37
|
}
|
|
29
38
|
}, {
|
|
30
39
|
d: [
|
|
31
|
-
".
|
|
40
|
+
".f1ugzwwg{font-size:12px;}",
|
|
41
|
+
".f4ybsrx{font-size:16px;}",
|
|
42
|
+
".fe5j1ua{font-size:20px;}"
|
|
32
43
|
]
|
|
33
44
|
});
|
|
34
45
|
const useBreadcrumbDividerStyles_unstable = (state)=>{
|
|
35
46
|
const styles = useStyles();
|
|
36
|
-
|
|
47
|
+
const iconStyles = useIconStyles();
|
|
48
|
+
const { size = 'medium' } = state;
|
|
49
|
+
state.root.className = (0, _react.mergeClasses)(breadcrumbDividerClassNames.root, styles, iconStyles[size], state.root.className);
|
|
37
50
|
return state;
|
|
38
51
|
}; //# sourceMappingURL=useBreadcrumbDividerStyles.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useBreadcrumbDividerStyles.styles.js"],"sourcesContent":["import { __styles, mergeClasses } from '@griffel/react';\nexport const breadcrumbDividerClassNames = {\n root: 'fui-BreadcrumbDivider'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__styles({\n
|
|
1
|
+
{"version":3,"sources":["useBreadcrumbDividerStyles.styles.js"],"sourcesContent":["import { __styles, __resetStyles, mergeClasses } from '@griffel/react';\nexport const breadcrumbDividerClassNames = {\n root: 'fui-BreadcrumbDivider'\n};\n/**\n * Styles for the root slot\n */\nconst useStyles = /*#__PURE__*/__resetStyles(\"rk008qs\", null, [\".rk008qs{display:flex;}\"]);\nconst useIconStyles = /*#__PURE__*/__styles({\n small: {\n Be2twd7: \"f1ugzwwg\"\n },\n medium: {\n Be2twd7: \"f4ybsrx\"\n },\n large: {\n Be2twd7: \"fe5j1ua\"\n }\n}, {\n d: [\".f1ugzwwg{font-size:12px;}\", \".f4ybsrx{font-size:16px;}\", \".fe5j1ua{font-size:20px;}\"]\n});\n/**\n * Apply styling to the BreadcrumbDivider slots based on the state\n */\nexport const useBreadcrumbDividerStyles_unstable = state => {\n const styles = useStyles();\n const iconStyles = useIconStyles();\n const {\n size = 'medium'\n } = state;\n state.root.className = mergeClasses(breadcrumbDividerClassNames.root, styles, iconStyles[size], state.root.className);\n return state;\n};\n//# sourceMappingURL=useBreadcrumbDividerStyles.styles.js.map"],"names":["breadcrumbDividerClassNames","useBreadcrumbDividerStyles_unstable","root","useStyles","__resetStyles","useIconStyles","__styles","small","Be2twd7","medium","large","d","state","styles","iconStyles","size","className","mergeClasses"],"mappings":";;;;;;;;;;;IACaA,2BAA2B;eAA3BA;;IAuBAC,mCAAmC;eAAnCA;;;uBAxByC;AAC/C,MAAMD,8BAA8B;IACzCE,MAAM;AACR;AACA;;CAEC,GACD,MAAMC,YAAY,WAAW,GAAEC,IAAAA,oBAAa,EAAC,WAAW,MAAM;IAAC;CAA0B;AACzF,MAAMC,gBAAgB,WAAW,GAAEC,IAAAA,eAAQ,EAAC;IAC1CC,OAAO;QACLC,SAAS;IACX;IACAC,QAAQ;QACND,SAAS;IACX;IACAE,OAAO;QACLF,SAAS;IACX;AACF,GAAG;IACDG,GAAG;QAAC;QAA8B;QAA6B;KAA4B;AAC7F;AAIO,MAAMV,sCAAsCW,CAAAA;IACjD,MAAMC,SAASV;IACf,MAAMW,aAAaT;IACnB,MAAM,EACJU,OAAO,QAAQ,EAChB,GAAGH;IACJA,MAAMV,IAAI,CAACc,SAAS,GAAGC,IAAAA,mBAAY,EAACjB,4BAA4BE,IAAI,EAAEW,QAAQC,UAAU,CAACC,KAAK,EAAEH,MAAMV,IAAI,CAACc,SAAS;IACpH,OAAOJ;AACT,GACA,6DAA6D"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-breadcrumb",
|
|
3
|
-
"version": "9.0.
|
|
3
|
+
"version": "9.0.16",
|
|
4
4
|
"description": "Breadcrumb component for Fluent UI React.",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
"generate-api": "just-scripts generate-api",
|
|
25
25
|
"storybook": "start-storybook",
|
|
26
26
|
"start": "yarn storybook",
|
|
27
|
-
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\""
|
|
27
|
+
"test-ssr": "test-ssr \"./stories/**/*.stories.tsx\"",
|
|
28
|
+
"bundle-size": "monosize measure"
|
|
28
29
|
},
|
|
29
30
|
"devDependencies": {
|
|
30
31
|
"@fluentui/eslint-plugin": "*",
|
|
@@ -35,15 +36,15 @@
|
|
|
35
36
|
"@fluentui/scripts-tasks": "*"
|
|
36
37
|
},
|
|
37
38
|
"dependencies": {
|
|
38
|
-
"@fluentui/react-aria": "^9.
|
|
39
|
-
"@fluentui/react-button": "^9.3.
|
|
39
|
+
"@fluentui/react-aria": "^9.9.1",
|
|
40
|
+
"@fluentui/react-button": "^9.3.70",
|
|
40
41
|
"@fluentui/react-icons": "^2.0.224",
|
|
41
|
-
"@fluentui/react-link": "^9.2.
|
|
42
|
-
"@fluentui/react-shared-contexts": "^9.14.
|
|
43
|
-
"@fluentui/react-tabster": "^9.19.
|
|
42
|
+
"@fluentui/react-link": "^9.2.12",
|
|
43
|
+
"@fluentui/react-shared-contexts": "^9.14.1",
|
|
44
|
+
"@fluentui/react-tabster": "^9.19.2",
|
|
44
45
|
"@fluentui/react-theme": "^9.1.16",
|
|
45
|
-
"@fluentui/react-utilities": "^9.18.
|
|
46
|
-
"@fluentui/react-jsx-runtime": "^9.0.
|
|
46
|
+
"@fluentui/react-utilities": "^9.18.2",
|
|
47
|
+
"@fluentui/react-jsx-runtime": "^9.0.31",
|
|
47
48
|
"@griffel/react": "^1.5.14",
|
|
48
49
|
"@swc/helpers": "^0.5.1"
|
|
49
50
|
},
|