@fluentui/react-tabs 9.4.27 → 9.4.29
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
CHANGED
|
@@ -1,12 +1,30 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-tabs
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Thu, 15 Aug 2024 08:18:59 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [9.4.29](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.29)
|
|
8
|
+
|
|
9
|
+
Thu, 15 Aug 2024 08:18:59 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.28..@fluentui/react-tabs_v9.4.29)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- Bump @fluentui/react-tabster to v9.22.4 ([PR #31885](https://github.com/microsoft/fluentui/pull/31885) by beachball)
|
|
15
|
+
|
|
16
|
+
## [9.4.28](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.28)
|
|
17
|
+
|
|
18
|
+
Tue, 06 Aug 2024 21:40:44 GMT
|
|
19
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.27..@fluentui/react-tabs_v9.4.28)
|
|
20
|
+
|
|
21
|
+
### Patches
|
|
22
|
+
|
|
23
|
+
- ignore ref for tab reserved space content slot ([PR #31775](https://github.com/microsoft/fluentui/pull/31775) by kirpadv@gmail.com)
|
|
24
|
+
|
|
7
25
|
## [9.4.27](https://github.com/microsoft/fluentui/tree/@fluentui/react-tabs_v9.4.27)
|
|
8
26
|
|
|
9
|
-
Tue, 23 Jul 2024 20:
|
|
27
|
+
Tue, 23 Jul 2024 20:13:14 GMT
|
|
10
28
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-tabs_v9.4.26..@fluentui/react-tabs_v9.4.27)
|
|
11
29
|
|
|
12
30
|
### Patches
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot } from '@fluentui/react-utilities';
|
|
2
|
+
import { getIntrinsicElementProps, mergeCallbacks, useEventCallback, useMergedRefs, slot, omit } from '@fluentui/react-utilities';
|
|
3
3
|
import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
4
4
|
/**
|
|
5
5
|
* Create the state required to render Tab.
|
|
@@ -54,6 +54,9 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
|
54
54
|
},
|
|
55
55
|
elementType: 'span'
|
|
56
56
|
});
|
|
57
|
+
const contentReservedSpace = content && typeof content === 'object' ? omit(content, [
|
|
58
|
+
'ref'
|
|
59
|
+
]) : content;
|
|
57
60
|
const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
|
|
58
61
|
return {
|
|
59
62
|
components: {
|
|
@@ -82,7 +85,7 @@ import { useTabListContext_unstable } from '../TabList/TabListContext';
|
|
|
82
85
|
icon: iconSlot,
|
|
83
86
|
iconOnly,
|
|
84
87
|
content: contentSlot,
|
|
85
|
-
contentReservedSpace: slot.optional(
|
|
88
|
+
contentReservedSpace: slot.optional(contentReservedSpace, {
|
|
86
89
|
renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
|
|
87
90
|
defaultProps: {
|
|
88
91
|
children: props.children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n ...props,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n }),\n { elementType: 'button' },\n ),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(
|
|
1
|
+
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const contentReservedSpace: typeof content =\n content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n ...props,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n }),\n { elementType: 'button' },\n ),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(contentReservedSpace, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"names":["React","getIntrinsicElementProps","mergeCallbacks","useEventCallback","useMergedRefs","slot","omit","useTabListContext_unstable","useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","useRef","onSelectCallback","event","onTabClick","onTabFocus","useEffect","iconSlot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","iconOnly","Boolean","components","root","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
|
@@ -57,6 +57,9 @@ const useTab_unstable = (props, ref)=>{
|
|
|
57
57
|
},
|
|
58
58
|
elementType: 'span'
|
|
59
59
|
});
|
|
60
|
+
const contentReservedSpace = content && typeof content === 'object' ? (0, _reactutilities.omit)(content, [
|
|
61
|
+
'ref'
|
|
62
|
+
]) : content;
|
|
60
63
|
const iconOnly = Boolean((iconSlot === null || iconSlot === void 0 ? void 0 : iconSlot.children) && !contentSlot.children);
|
|
61
64
|
return {
|
|
62
65
|
components: {
|
|
@@ -85,7 +88,7 @@ const useTab_unstable = (props, ref)=>{
|
|
|
85
88
|
icon: iconSlot,
|
|
86
89
|
iconOnly,
|
|
87
90
|
content: contentSlot,
|
|
88
|
-
contentReservedSpace: _reactutilities.slot.optional(
|
|
91
|
+
contentReservedSpace: _reactutilities.slot.optional(contentReservedSpace, {
|
|
89
92
|
renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,
|
|
90
93
|
defaultProps: {
|
|
91
94
|
children: props.children
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n ...props,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n }),\n { elementType: 'button' },\n ),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(
|
|
1
|
+
{"version":3,"sources":["useTab.ts"],"sourcesContent":["import * as React from 'react';\nimport {\n getIntrinsicElementProps,\n mergeCallbacks,\n useEventCallback,\n useMergedRefs,\n slot,\n omit,\n} from '@fluentui/react-utilities';\nimport type { TabProps, TabState } from './Tab.types';\nimport { useTabListContext_unstable } from '../TabList/TabListContext';\nimport { SelectTabEvent } from '../TabList/TabList.types';\n\n/**\n * Create the state required to render Tab.\n *\n * The returned state can be modified with hooks such as useTabStyles_unstable,\n * before being passed to renderTab_unstable.\n *\n * @param props - props from this instance of Tab\n * @param ref - reference to root HTMLElement of Tab\n */\nexport const useTab_unstable = (props: TabProps, ref: React.Ref<HTMLElement>): TabState => {\n const { content, disabled: tabDisabled = false, icon, onClick, onFocus, value } = props;\n\n const appearance = useTabListContext_unstable(ctx => ctx.appearance);\n const reserveSelectedTabSpace = useTabListContext_unstable(ctx => ctx.reserveSelectedTabSpace);\n const selectTabOnFocus = useTabListContext_unstable(ctx => ctx.selectTabOnFocus);\n const listDisabled = useTabListContext_unstable(ctx => ctx.disabled);\n const selected = useTabListContext_unstable(ctx => ctx.selectedValue === value);\n const onRegister = useTabListContext_unstable(ctx => ctx.onRegister);\n const onUnregister = useTabListContext_unstable(ctx => ctx.onUnregister);\n const onSelect = useTabListContext_unstable(ctx => ctx.onSelect);\n const size = useTabListContext_unstable(ctx => ctx.size);\n const vertical = useTabListContext_unstable(ctx => !!ctx.vertical);\n const disabled = listDisabled || tabDisabled;\n\n const innerRef = React.useRef<HTMLElement>(null);\n const onSelectCallback = (event: SelectTabEvent) => onSelect(event, { value });\n const onTabClick = useEventCallback(mergeCallbacks(onClick, onSelectCallback));\n const onTabFocus = useEventCallback(mergeCallbacks(onFocus, onSelectCallback));\n\n React.useEffect(() => {\n onRegister({\n value,\n ref: innerRef,\n });\n\n return () => {\n onUnregister({ value, ref: innerRef });\n };\n }, [onRegister, onUnregister, innerRef, value]);\n\n const iconSlot = slot.optional(icon, { elementType: 'span' });\n const contentSlot = slot.always(content, {\n defaultProps: { children: props.children },\n elementType: 'span',\n });\n const contentReservedSpace: typeof content =\n content && typeof content === 'object' ? omit(content, ['ref' as keyof typeof content]) : content;\n const iconOnly = Boolean(iconSlot?.children && !contentSlot.children);\n return {\n components: { root: 'button', icon: 'span', content: 'span', contentReservedSpace: 'span' },\n root: slot.always(\n getIntrinsicElementProps('button', {\n // FIXME:\n // `ref` is wrongly assigned to be `HTMLElement` instead of `HTMLButtonElement`\n // but since it would be a breaking change to fix it, we are casting ref to it's proper type\n ref: useMergedRefs(ref, innerRef) as React.Ref<HTMLButtonElement>,\n role: 'tab',\n type: 'button',\n // aria-selected undefined indicates it is not selectable\n // according to https://www.w3.org/TR/wai-aria-1.1/#aria-selected\n 'aria-selected': disabled ? undefined : (`${selected}` as 'true' | 'false'),\n ...props,\n disabled,\n onClick: onTabClick,\n onFocus: selectTabOnFocus ? onTabFocus : onFocus,\n }),\n { elementType: 'button' },\n ),\n icon: iconSlot,\n iconOnly,\n content: contentSlot,\n contentReservedSpace: slot.optional(contentReservedSpace, {\n renderByDefault: !selected && !iconOnly && reserveSelectedTabSpace,\n defaultProps: { children: props.children },\n elementType: 'span',\n }),\n appearance,\n disabled,\n selected,\n size,\n value,\n vertical,\n };\n};\n"],"names":["useTab_unstable","props","ref","content","disabled","tabDisabled","icon","onClick","onFocus","value","appearance","useTabListContext_unstable","ctx","reserveSelectedTabSpace","selectTabOnFocus","listDisabled","selected","selectedValue","onRegister","onUnregister","onSelect","size","vertical","innerRef","React","useRef","onSelectCallback","event","onTabClick","useEventCallback","mergeCallbacks","onTabFocus","useEffect","iconSlot","slot","optional","elementType","contentSlot","always","defaultProps","children","contentReservedSpace","omit","iconOnly","Boolean","components","root","getIntrinsicElementProps","useMergedRefs","role","type","undefined","renderByDefault"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-tabs",
|
|
3
|
-
"version": "9.4.
|
|
3
|
+
"version": "9.4.29",
|
|
4
4
|
"description": "Fluent UI React tabs components",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,7 +34,7 @@
|
|
|
34
34
|
"@fluentui/react-context-selector": "^9.1.65",
|
|
35
35
|
"@fluentui/react-jsx-runtime": "^9.0.42",
|
|
36
36
|
"@fluentui/react-shared-contexts": "^9.20.0",
|
|
37
|
-
"@fluentui/react-tabster": "^9.22.
|
|
37
|
+
"@fluentui/react-tabster": "^9.22.4",
|
|
38
38
|
"@fluentui/react-theme": "^9.1.19",
|
|
39
39
|
"@fluentui/react-utilities": "^9.18.13",
|
|
40
40
|
"@griffel/react": "^1.5.22",
|