@fluentui/react-button 9.10.0 → 9.10.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.md +11 -2
- package/dist/index.d.ts +4 -0
- package/lib/components/MenuButton/useMenuButton.js +12 -5
- package/lib/components/MenuButton/useMenuButton.js.map +1 -1
- package/lib-commonjs/components/MenuButton/useMenuButton.js +8 -5
- package/lib-commonjs/components/MenuButton/useMenuButton.js.map +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-button
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Mon, 29 Jun 2026 15:14:11 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.10.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.10.1)
|
|
8
|
+
|
|
9
|
+
Mon, 29 Jun 2026 15:14:11 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.10.0..@fluentui/react-button_v9.10.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: do not expose default icon in base hook ([PR #36345](https://github.com/microsoft/fluentui/pull/36345) by vgenaev@gmail.com)
|
|
15
|
+
|
|
7
16
|
## [9.10.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-button_v9.10.0)
|
|
8
17
|
|
|
9
|
-
Wed, 24 Jun 2026 11:
|
|
18
|
+
Wed, 24 Jun 2026 11:10:07 GMT
|
|
10
19
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-button_v9.9.2..@fluentui/react-button_v9.10.0)
|
|
11
20
|
|
|
12
21
|
### Minor changes
|
package/dist/index.d.ts
CHANGED
|
@@ -288,6 +288,10 @@ export declare const useMenuButton_unstable: (props: MenuButtonProps, ref: React
|
|
|
288
288
|
/**
|
|
289
289
|
* Base hook for MenuButton.
|
|
290
290
|
*
|
|
291
|
+
* The `menuIcon` slot ships no icon of its own and only renders when a consumer
|
|
292
|
+
* provides one, so headless consumers can supply their own visuals. The styled
|
|
293
|
+
* `useMenuButton_unstable` adds the default chevron on top of this.
|
|
294
|
+
*
|
|
291
295
|
* @param props - User provided props to the MenuButton component.
|
|
292
296
|
* @param ref - User provided ref to be passed to the MenuButton component.
|
|
293
297
|
*/
|
|
@@ -7,6 +7,10 @@ import { useButtonBase_unstable } from '../Button/index';
|
|
|
7
7
|
/**
|
|
8
8
|
* Base hook for MenuButton.
|
|
9
9
|
*
|
|
10
|
+
* The `menuIcon` slot ships no icon of its own and only renders when a consumer
|
|
11
|
+
* provides one, so headless consumers can supply their own visuals. The styled
|
|
12
|
+
* `useMenuButton_unstable` adds the default chevron on top of this.
|
|
13
|
+
*
|
|
10
14
|
* @param props - User provided props to the MenuButton component.
|
|
11
15
|
* @param ref - User provided ref to be passed to the MenuButton component.
|
|
12
16
|
*/ export const useMenuButtonBase_unstable = (props, ref)=>{
|
|
@@ -27,10 +31,6 @@ import { useButtonBase_unstable } from '../Button/index';
|
|
|
27
31
|
'aria-expanded': props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false
|
|
28
32
|
},
|
|
29
33
|
menuIcon: slot.optional(menuIcon, {
|
|
30
|
-
defaultProps: {
|
|
31
|
-
children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
|
|
32
|
-
},
|
|
33
|
-
renderByDefault: true,
|
|
34
34
|
elementType: 'span'
|
|
35
35
|
})
|
|
36
36
|
};
|
|
@@ -43,10 +43,17 @@ import { useButtonBase_unstable } from '../Button/index';
|
|
|
43
43
|
* @param ref - User provided ref to be passed to the MenuButton component.
|
|
44
44
|
*/ export const useMenuButton_unstable = (props, ref)=>{
|
|
45
45
|
const { size: contextSize } = useButtonContext();
|
|
46
|
-
const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
|
|
46
|
+
const { appearance = 'secondary', menuIcon, shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
|
|
47
47
|
const baseState = useMenuButtonBase_unstable(baseProps, ref);
|
|
48
48
|
return {
|
|
49
49
|
...baseState,
|
|
50
|
+
menuIcon: slot.optional(menuIcon, {
|
|
51
|
+
defaultProps: {
|
|
52
|
+
children: /*#__PURE__*/ React.createElement(ChevronDownRegular, null)
|
|
53
|
+
},
|
|
54
|
+
renderByDefault: true,
|
|
55
|
+
elementType: 'span'
|
|
56
|
+
}),
|
|
50
57
|
appearance,
|
|
51
58
|
shape,
|
|
52
59
|
size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n props: MenuButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n const { menuIcon, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return {\n ...buttonState,\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...buttonState.components,\n menuIcon: 'span',\n },\n\n root: {\n ...buttonState.root,\n // force aria-expanded to be a boolean, not a string\n 'aria-expanded': props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : false,\n },\n\n menuIcon: slot.optional(menuIcon, {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * The `menuIcon` slot ships no icon of its own and only renders when a consumer\n * provides one, so headless consumers can supply their own visuals. The styled\n * `useMenuButton_unstable` adds the default chevron on top of this.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n props: MenuButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n const { menuIcon, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return {\n ...buttonState,\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...buttonState.components,\n menuIcon: 'span',\n },\n\n root: {\n ...buttonState.root,\n // force aria-expanded to be a boolean, not a string\n 'aria-expanded': props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : false,\n },\n\n menuIcon: slot.optional(menuIcon, {\n elementType: 'span',\n }),\n };\n};\n\n/**\n * Given user props, returns the final state for a MenuButton by adding the\n * `appearance`/`size`/`shape` styling props on top of the base state.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton_unstable = (\n props: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', menuIcon, shape = 'rounded', size = contextSize ?? 'medium', ...baseProps } = props;\n const baseState = useMenuButtonBase_unstable(baseProps, ref);\n\n return {\n ...baseState,\n menuIcon: slot.optional(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n appearance,\n shape,\n size,\n };\n};\n"],"names":["React","ChevronDownRegular","slot","useButtonContext","useButtonBase_unstable","useMenuButtonBase_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","elementType","useMenuButton_unstable","size","contextSize","appearance","shape","baseProps","baseState","defaultProps","renderByDefault"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,kBAAkB,QAAQ,wBAAwB;AAC3D,SAASC,IAAI,QAAQ,4BAA4B;AACjD,SAASC,gBAAgB,QAAQ,+BAA+B;AAChE,SAASC,sBAAsB,QAAQ,kBAAkB;AAGzD;;;;;;;;;CASC,GACD,OAAO,MAAMC,6BAA6B,CACxCC,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,cAAcN,uBAAuBK,aAAaF;IAExD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCS,aAAa;QACf;IACF;AACF,EAAE;AAEF;;;;;;CAMC,GACD,OAAO,MAAMC,yBAAyB,CACpCZ,OACAC;IAEA,MAAM,EAAEY,MAAMC,WAAW,EAAE,GAAGjB;IAC9B,MAAM,EAAEkB,aAAa,WAAW,EAAEb,QAAQ,EAAEc,QAAQ,SAAS,EAAEH,OAAOC,wBAAAA,yBAAAA,cAAe,QAAQ,EAAE,GAAGG,WAAW,GAAGjB;IAChH,MAAMkB,YAAYnB,2BAA2BkB,WAAWhB;IAExD,OAAO;QACL,GAAGiB,SAAS;QACZhB,UAAUN,KAAKc,QAAQ,CAACR,UAAU;YAChCiB,cAAc;gBACZZ,wBAAU,oBAACZ;YACb;YACAyB,iBAAiB;YACjBT,aAAa;QACf;QACAI;QACAC;QACAH;IACF;AACF,EAAE"}
|
|
@@ -41,20 +41,23 @@ const useMenuButtonBase_unstable = (props, ref)=>{
|
|
|
41
41
|
'aria-expanded': props['aria-expanded'] ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true : false
|
|
42
42
|
},
|
|
43
43
|
menuIcon: _reactutilities.slot.optional(menuIcon, {
|
|
44
|
-
defaultProps: {
|
|
45
|
-
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
|
|
46
|
-
},
|
|
47
|
-
renderByDefault: true,
|
|
48
44
|
elementType: 'span'
|
|
49
45
|
})
|
|
50
46
|
};
|
|
51
47
|
};
|
|
52
48
|
const useMenuButton_unstable = (props, ref)=>{
|
|
53
49
|
const { size: contextSize } = (0, _ButtonContext.useButtonContext)();
|
|
54
|
-
const { appearance = 'secondary', shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
|
|
50
|
+
const { appearance = 'secondary', menuIcon, shape = 'rounded', size = contextSize !== null && contextSize !== void 0 ? contextSize : 'medium', ...baseProps } = props;
|
|
55
51
|
const baseState = useMenuButtonBase_unstable(baseProps, ref);
|
|
56
52
|
return {
|
|
57
53
|
...baseState,
|
|
54
|
+
menuIcon: _reactutilities.slot.optional(menuIcon, {
|
|
55
|
+
defaultProps: {
|
|
56
|
+
children: /*#__PURE__*/ _react.createElement(_reacticons.ChevronDownRegular, null)
|
|
57
|
+
},
|
|
58
|
+
renderByDefault: true,
|
|
59
|
+
elementType: 'span'
|
|
60
|
+
}),
|
|
58
61
|
appearance,
|
|
59
62
|
shape,
|
|
60
63
|
size
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n props: MenuButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n const { menuIcon, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return {\n ...buttonState,\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...buttonState.components,\n menuIcon: 'span',\n },\n\n root: {\n ...buttonState.root,\n // force aria-expanded to be a boolean, not a string\n 'aria-expanded': props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : false,\n },\n\n menuIcon: slot.optional(menuIcon, {\n
|
|
1
|
+
{"version":3,"sources":["../src/components/MenuButton/useMenuButton.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { ChevronDownRegular } from '@fluentui/react-icons';\nimport { slot } from '@fluentui/react-utilities';\nimport { useButtonContext } from '../../contexts/ButtonContext';\nimport { useButtonBase_unstable } from '../Button/index';\nimport type { MenuButtonBaseProps, MenuButtonBaseState, MenuButtonProps, MenuButtonState } from './MenuButton.types';\n\n/**\n * Base hook for MenuButton.\n *\n * The `menuIcon` slot ships no icon of its own and only renders when a consumer\n * provides one, so headless consumers can supply their own visuals. The styled\n * `useMenuButton_unstable` adds the default chevron on top of this.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButtonBase_unstable = (\n props: MenuButtonBaseProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonBaseState => {\n const { menuIcon, ...buttonProps } = props;\n const buttonState = useButtonBase_unstable(buttonProps, ref);\n\n return {\n ...buttonState,\n iconOnly: Boolean(!props.children),\n\n // Slots definition\n components: {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n ...buttonState.components,\n menuIcon: 'span',\n },\n\n root: {\n ...buttonState.root,\n // force aria-expanded to be a boolean, not a string\n 'aria-expanded': props['aria-expanded']\n ? props['aria-expanded'] === 'true' || props['aria-expanded'] === true\n : false,\n },\n\n menuIcon: slot.optional(menuIcon, {\n elementType: 'span',\n }),\n };\n};\n\n/**\n * Given user props, returns the final state for a MenuButton by adding the\n * `appearance`/`size`/`shape` styling props on top of the base state.\n *\n * @param props - User provided props to the MenuButton component.\n * @param ref - User provided ref to be passed to the MenuButton component.\n */\nexport const useMenuButton_unstable = (\n props: MenuButtonProps,\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n): MenuButtonState => {\n const { size: contextSize } = useButtonContext();\n const { appearance = 'secondary', menuIcon, shape = 'rounded', size = contextSize ?? 'medium', ...baseProps } = props;\n const baseState = useMenuButtonBase_unstable(baseProps, ref);\n\n return {\n ...baseState,\n menuIcon: slot.optional(menuIcon, {\n defaultProps: {\n children: <ChevronDownRegular />,\n },\n renderByDefault: true,\n elementType: 'span',\n }),\n appearance,\n shape,\n size,\n };\n};\n"],"names":["React","ChevronDownRegular","slot","useButtonContext","useButtonBase_unstable","useMenuButtonBase_unstable","props","ref","menuIcon","buttonProps","buttonState","iconOnly","Boolean","children","components","root","optional","elementType","useMenuButton_unstable","size","contextSize","appearance","shape","baseProps","baseState","defaultProps","renderByDefault"],"mappings":"AAAA;;;;;;;;;;;;IAmBaK,0BAAAA;;;0BAuCAa;eAAAA;;;;iEAxDU,QAAQ;4BACI,wBAAwB;gCACtC,4BAA4B;+BAChB,+BAA+B;uBACzB,kBAAkB;AAalD,mCAAmC,CACxCZ,OACAC;IAEA,MAAM,EAAEC,QAAQ,EAAE,GAAGC,aAAa,GAAGH;IACrC,MAAMI,kBAAcN,6BAAAA,EAAuBK,aAAaF;IAExD,OAAO;QACL,GAAGG,WAAW;QACdC,UAAUC,QAAQ,CAACN,MAAMO,QAAQ;QAEjC,mBAAmB;QACnBC,YAAY;YACV,4DAA4D;YAC5D,GAAGJ,YAAYI,UAAU;YACzBN,UAAU;QACZ;QAEAO,MAAM;YACJ,GAAGL,YAAYK,IAAI;YACnB,oDAAoD;YACpD,iBAAiBT,KAAK,CAAC,gBAAgB,GACnCA,KAAK,CAAC,gBAAgB,KAAK,UAAUA,KAAK,CAAC,gBAAgB,KAAK,OAChE;QACN;QAEAE,UAAUN,oBAAAA,CAAKc,QAAQ,CAACR,UAAU;YAChCS,aAAa;QACf;IACF;AACF,EAAE;AASK,+BAA+B,CACpCX,OACAC;IAEA,MAAM,EAAEY,MAAMC,WAAW,EAAE,OAAGjB,+BAAAA;IAC9B,MAAM,EAAEkB,aAAa,WAAW,EAAEb,QAAQ,EAAEc,QAAQ,SAAS,EAAEH,OAAOC,gBAAAA,QAAAA,gBAAAA,KAAAA,IAAAA,cAAe,QAAQ,EAAE,GAAGG,WAAW,GAAGjB;IAChH,MAAMkB,YAAYnB,2BAA2BkB,WAAWhB;IAExD,OAAO;QACL,GAAGiB,SAAS;QACZhB,UAAUN,oBAAAA,CAAKc,QAAQ,CAACR,UAAU;YAChCiB,cAAc;gBACZZ,UAAAA,WAAAA,GAAU,OAAA,aAAA,CAACZ,8BAAAA,EAAAA;YACb;YACAyB,iBAAiB;YACjBT,aAAa;QACf;QACAI;QACAC;QACAH;IACF;AACF,EAAE"}
|