@fluentui/react-tabs 9.3.4 → 9.3.6
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/.swcrc +30 -0
- package/CHANGELOG.json +79 -1
- package/CHANGELOG.md +28 -2
- package/lib/Tab.js.map +1 -1
- package/lib/TabList.js.map +1 -1
- package/lib/components/Tab/Tab.js.map +1 -1
- package/lib/components/Tab/Tab.types.js.map +1 -1
- package/lib/components/Tab/index.js.map +1 -1
- package/lib/components/Tab/renderTab.js +1 -7
- package/lib/components/Tab/renderTab.js.map +1 -1
- package/lib/components/Tab/useTab.js.map +1 -1
- package/lib/components/Tab/useTabAnimatedIndicator.js +4 -4
- package/lib/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib/components/Tab/useTabStyles.js +4 -6
- package/lib/components/Tab/useTabStyles.js.map +1 -1
- package/lib/components/TabList/TabList.js.map +1 -1
- package/lib/components/TabList/TabList.types.js +1 -1
- package/lib/components/TabList/TabList.types.js.map +1 -1
- package/lib/components/TabList/TabListContext.js +3 -6
- package/lib/components/TabList/TabListContext.js.map +1 -1
- package/lib/components/TabList/index.js.map +1 -1
- package/lib/components/TabList/renderTabList.js +1 -3
- package/lib/components/TabList/renderTabList.js.map +1 -1
- package/lib/components/TabList/useTabList.js.map +1 -1
- package/lib/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib/components/TabList/useTabListStyles.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib-commonjs/Tab.js +5 -4
- package/lib-commonjs/Tab.js.map +1 -1
- package/lib-commonjs/TabList.js +5 -4
- package/lib-commonjs/TabList.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.js +19 -20
- package/lib-commonjs/components/Tab/Tab.js.map +1 -1
- package/lib-commonjs/components/Tab/Tab.types.js +3 -2
- package/lib-commonjs/components/Tab/Tab.types.js.map +1 -1
- package/lib-commonjs/components/Tab/index.js +10 -9
- package/lib-commonjs/components/Tab/index.js.map +1 -1
- package/lib-commonjs/components/Tab/renderTab.js +16 -25
- package/lib-commonjs/components/Tab/renderTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTab.js +76 -82
- package/lib-commonjs/components/Tab/useTab.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js +133 -117
- package/lib-commonjs/components/Tab/useTabAnimatedIndicator.js.map +1 -1
- package/lib-commonjs/components/Tab/useTabStyles.js +751 -396
- package/lib-commonjs/components/Tab/useTabStyles.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.js +21 -22
- package/lib-commonjs/components/TabList/TabList.js.map +1 -1
- package/lib-commonjs/components/TabList/TabList.types.js +5 -2
- package/lib-commonjs/components/TabList/TabList.types.js.map +1 -1
- package/lib-commonjs/components/TabList/TabListContext.js +34 -28
- package/lib-commonjs/components/TabList/TabListContext.js.map +1 -1
- package/lib-commonjs/components/TabList/index.js +11 -10
- package/lib-commonjs/components/TabList/index.js.map +1 -1
- package/lib-commonjs/components/TabList/renderTabList.js +16 -21
- package/lib-commonjs/components/TabList/renderTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabList.js +73 -84
- package/lib-commonjs/components/TabList/useTabList.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListContextValues.js +23 -32
- package/lib-commonjs/components/TabList/useTabListContextValues.js.map +1 -1
- package/lib-commonjs/components/TabList/useTabListStyles.js +46 -36
- package/lib-commonjs/components/TabList/useTabListStyles.js.map +1 -1
- package/lib-commonjs/index.js +27 -84
- package/lib-commonjs/index.js.map +1 -1
- package/package.json +10 -9
- package/lib-amd/Tab.js +0 -6
- package/lib-amd/Tab.js.map +0 -1
- package/lib-amd/TabList.js +0 -6
- package/lib-amd/TabList.js.map +0 -1
- package/lib-amd/components/Tab/Tab.js +0 -17
- package/lib-amd/components/Tab/Tab.js.map +0 -1
- package/lib-amd/components/Tab/Tab.types.js +0 -5
- package/lib-amd/components/Tab/Tab.types.js.map +0 -1
- package/lib-amd/components/Tab/index.js +0 -11
- package/lib-amd/components/Tab/index.js.map +0 -1
- package/lib-amd/components/Tab/renderTab.js +0 -17
- package/lib-amd/components/Tab/renderTab.js.map +0 -1
- package/lib-amd/components/Tab/useTab.js +0 -63
- package/lib-amd/components/Tab/useTab.js.map +0 -1
- package/lib-amd/components/Tab/useTabAnimatedIndicator.js +0 -112
- package/lib-amd/components/Tab/useTabAnimatedIndicator.js.map +0 -1
- package/lib-amd/components/Tab/useTabStyles.js +0 -380
- package/lib-amd/components/Tab/useTabStyles.js.map +0 -1
- package/lib-amd/components/TabList/TabList.js +0 -18
- package/lib-amd/components/TabList/TabList.js.map +0 -1
- package/lib-amd/components/TabList/TabList.types.js +0 -5
- package/lib-amd/components/TabList/TabList.types.js.map +0 -1
- package/lib-amd/components/TabList/TabListContext.js +0 -37
- package/lib-amd/components/TabList/TabListContext.js.map +0 -1
- package/lib-amd/components/TabList/index.js +0 -12
- package/lib-amd/components/TabList/index.js.map +0 -1
- package/lib-amd/components/TabList/renderTabList.js +0 -15
- package/lib-amd/components/TabList/renderTabList.js.map +0 -1
- package/lib-amd/components/TabList/useTabList.js +0 -74
- package/lib-amd/components/TabList/useTabList.js.map +0 -1
- package/lib-amd/components/TabList/useTabListContextValues.js +0 -23
- package/lib-amd/components/TabList/useTabListContextValues.js.map +0 -1
- package/lib-amd/components/TabList/useTabListStyles.js +0 -39
- package/lib-amd/components/TabList/useTabListStyles.js.map +0 -1
- package/lib-amd/index.js +0 -19
- package/lib-amd/index.js.map +0 -1
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "@fluentui/react-context-selector"], function (require, exports, react_context_selector_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useTabListContext_unstable = exports.TabListProvider = exports.TabListContext = void 0;
|
|
5
|
-
var tabListContextDefaultValue = {
|
|
6
|
-
appearance: 'transparent',
|
|
7
|
-
reserveSelectedTabSpace: true,
|
|
8
|
-
disabled: false,
|
|
9
|
-
selectedValue: undefined,
|
|
10
|
-
onRegister: function () {
|
|
11
|
-
/* noop */
|
|
12
|
-
},
|
|
13
|
-
onUnregister: function () {
|
|
14
|
-
/* noop */
|
|
15
|
-
},
|
|
16
|
-
onSelect: function () {
|
|
17
|
-
/* noop */
|
|
18
|
-
},
|
|
19
|
-
getRegisteredTabs: function () {
|
|
20
|
-
return {
|
|
21
|
-
registeredTabs: {},
|
|
22
|
-
};
|
|
23
|
-
},
|
|
24
|
-
size: 'medium',
|
|
25
|
-
vertical: false,
|
|
26
|
-
};
|
|
27
|
-
exports.TabListContext = react_context_selector_1.createContext(undefined);
|
|
28
|
-
exports.TabListProvider = exports.TabListContext.Provider;
|
|
29
|
-
var useTabListContext_unstable = function (selector) {
|
|
30
|
-
return react_context_selector_1.useContextSelector(exports.TabListContext, function (ctx) {
|
|
31
|
-
if (ctx === void 0) { ctx = tabListContextDefaultValue; }
|
|
32
|
-
return selector(ctx);
|
|
33
|
-
});
|
|
34
|
-
};
|
|
35
|
-
exports.useTabListContext_unstable = useTabListContext_unstable;
|
|
36
|
-
});
|
|
37
|
-
//# sourceMappingURL=TabListContext.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"TabListContext.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/TabListContext.ts"],"names":[],"mappings":";;;;IAIA,IAAM,0BAA0B,GAAwB;QACtD,UAAU,EAAE,aAAa;QACzB,uBAAuB,EAAE,IAAI;QAC7B,QAAQ,EAAE,KAAK;QACf,aAAa,EAAE,SAAS;QACxB,UAAU,EAAE;YACV,UAAU;QACZ,CAAC;QACD,YAAY,EAAE;YACZ,UAAU;QACZ,CAAC;QACD,QAAQ,EAAE;YACR,UAAU;QACZ,CAAC;QACD,iBAAiB,EAAE;YACjB,OAAO;gBACL,cAAc,EAAE,EAAE;aACnB,CAAC;QACJ,CAAC;QACD,IAAI,EAAE,QAAQ;QACd,QAAQ,EAAE,KAAK;KAChB,CAAC;IAEW,QAAA,cAAc,GAAiC,sCAAa,CACvE,SAAS,CACsB,CAAC;IAErB,QAAA,eAAe,GAAG,sBAAc,CAAC,QAAQ,CAAC;IAChD,IAAM,0BAA0B,GAAG,UAAI,QAAiD;QAC7F,OAAA,2CAAkB,CAAC,sBAAc,EAAE,UAAC,GAAgC;YAAhC,oBAAA,EAAA,gCAAgC;YAAK,OAAA,QAAQ,CAAC,GAAG,CAAC;QAAb,CAAa,CAAC;IAAvF,CAAuF,CAAC;IAD7E,QAAA,0BAA0B,8BACmD","sourcesContent":["import { createContext, useContextSelector } from '@fluentui/react-context-selector';\nimport type { Context, ContextSelector } from '@fluentui/react-context-selector';\nimport { TabListContextValue } from './TabList.types';\n\nconst tabListContextDefaultValue: TabListContextValue = {\n appearance: 'transparent',\n reserveSelectedTabSpace: true,\n disabled: false,\n selectedValue: undefined,\n onRegister: () => {\n /* noop */\n },\n onUnregister: () => {\n /* noop */\n },\n onSelect: () => {\n /* noop */\n },\n getRegisteredTabs: () => {\n return {\n registeredTabs: {},\n };\n },\n size: 'medium',\n vertical: false,\n};\n\nexport const TabListContext: Context<TabListContextValue> = createContext<TabListContextValue | undefined>(\n undefined,\n) as Context<TabListContextValue>;\n\nexport const TabListProvider = TabListContext.Provider;\nexport const useTabListContext_unstable = <T>(selector: ContextSelector<TabListContextValue, T>): T =>\n useContextSelector(TabListContext, (ctx = tabListContextDefaultValue) => selector(ctx));\n"]}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "./TabList", "./TabList.types", "./TabListContext", "./renderTabList", "./useTabList", "./useTabListContextValues", "./useTabListStyles"], function (require, exports, tslib_1, TabList_1, TabList_types_1, TabListContext_1, renderTabList_1, useTabList_1, useTabListContextValues_1, useTabListStyles_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
tslib_1.__exportStar(TabList_1, exports);
|
|
5
|
-
tslib_1.__exportStar(TabList_types_1, exports);
|
|
6
|
-
tslib_1.__exportStar(TabListContext_1, exports);
|
|
7
|
-
tslib_1.__exportStar(renderTabList_1, exports);
|
|
8
|
-
tslib_1.__exportStar(useTabList_1, exports);
|
|
9
|
-
tslib_1.__exportStar(useTabListContextValues_1, exports);
|
|
10
|
-
tslib_1.__exportStar(useTabListStyles_1, exports);
|
|
11
|
-
});
|
|
12
|
-
//# sourceMappingURL=index.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/index.ts"],"names":[],"mappings":";;;IAAA,yCAA0B;IAC1B,+CAAgC;IAChC,gDAAiC;IACjC,+CAAgC;IAChC,4CAA6B;IAC7B,yDAA0C;IAC1C,kDAAmC","sourcesContent":["export * from './TabList';\nexport * from './TabList.types';\nexport * from './TabListContext';\nexport * from './renderTabList';\nexport * from './useTabList';\nexport * from './useTabListContextValues';\nexport * from './useTabListStyles';\n"]}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react-utilities", "./TabListContext"], function (require, exports, tslib_1, React, react_utilities_1, TabListContext_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.renderTabList_unstable = void 0;
|
|
5
|
-
/**
|
|
6
|
-
* Render the final JSX of TabList
|
|
7
|
-
*/
|
|
8
|
-
var renderTabList_unstable = function (state, contextValues) {
|
|
9
|
-
var _a = react_utilities_1.getSlots(state), slots = _a.slots, slotProps = _a.slotProps;
|
|
10
|
-
return (React.createElement(slots.root, tslib_1.__assign({}, slotProps.root),
|
|
11
|
-
React.createElement(TabListContext_1.TabListProvider, { value: contextValues.tabList }, state.root.children)));
|
|
12
|
-
};
|
|
13
|
-
exports.renderTabList_unstable = renderTabList_unstable;
|
|
14
|
-
});
|
|
15
|
-
//# sourceMappingURL=renderTabList.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"renderTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/renderTabList.tsx"],"names":[],"mappings":";;;;IAKA;;OAEG;IACI,IAAM,sBAAsB,GAAG,UAAC,KAAmB,EAAE,aAAmC;QACvF,IAAA,KAAuB,0BAAQ,CAAe,KAAK,CAAC,EAAlD,KAAK,WAAA,EAAE,SAAS,eAAkC,CAAC;QAE3D,OAAO,CACL,oBAAC,KAAK,CAAC,IAAI,uBAAK,SAAS,CAAC,IAAI;YAC5B,oBAAC,gCAAe,IAAC,KAAK,EAAE,aAAa,CAAC,OAAO,IAAG,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAmB,CAC3E,CACd,CAAC;IACJ,CAAC,CAAC;IARW,QAAA,sBAAsB,0BAQjC","sourcesContent":["import * as React from 'react';\nimport { getSlots } from '@fluentui/react-utilities';\nimport type { TabListState, TabListSlots, TabListContextValues } from './TabList.types';\nimport { TabListProvider } from './TabListContext';\n\n/**\n * Render the final JSX of TabList\n */\nexport const renderTabList_unstable = (state: TabListState, contextValues: TabListContextValues) => {\n const { slots, slotProps } = getSlots<TabListSlots>(state);\n\n return (\n <slots.root {...slotProps.root}>\n <TabListProvider value={contextValues.tabList}>{state.root.children}</TabListProvider>\n </slots.root>\n );\n};\n"]}
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "tslib", "react", "@fluentui/react-tabster", "@fluentui/react-utilities"], function (require, exports, tslib_1, React, react_tabster_1, react_utilities_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useTabList_unstable = void 0;
|
|
5
|
-
/**
|
|
6
|
-
* Create the state required to render TabList.
|
|
7
|
-
*
|
|
8
|
-
* The returned state can be modified with hooks such as useTabListStyles_unstable,
|
|
9
|
-
* before being passed to renderTabList_unstable.
|
|
10
|
-
*
|
|
11
|
-
* @param props - props from this instance of TabList
|
|
12
|
-
* @param ref - reference to root HTMLElement of TabList
|
|
13
|
-
*/
|
|
14
|
-
var useTabList_unstable = function (props, ref) {
|
|
15
|
-
var _a = props.appearance, appearance = _a === void 0 ? 'transparent' : _a, _b = props.reserveSelectedTabSpace, reserveSelectedTabSpace = _b === void 0 ? true : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, onTabSelect = props.onTabSelect, _d = props.size, size = _d === void 0 ? 'medium' : _d, _e = props.vertical, vertical = _e === void 0 ? false : _e;
|
|
16
|
-
var innerRef = React.useRef(null);
|
|
17
|
-
var focusAttributes = react_tabster_1.useArrowNavigationGroup({
|
|
18
|
-
circular: true,
|
|
19
|
-
axis: vertical ? 'vertical' : 'horizontal',
|
|
20
|
-
memorizeCurrent: true,
|
|
21
|
-
});
|
|
22
|
-
var _f = react_utilities_1.useControllableState({
|
|
23
|
-
state: props.selectedValue,
|
|
24
|
-
defaultState: props.defaultSelectedValue,
|
|
25
|
-
initialState: undefined,
|
|
26
|
-
}), selectedValue = _f[0], setSelectedValue = _f[1];
|
|
27
|
-
// considered usePrevious, but it is sensitive to re-renders
|
|
28
|
-
// this could cause the previous to move to current in the case where the tab list re-renders.
|
|
29
|
-
// these refs avoid getRegisteredTabs changing when selectedValue changes and causing
|
|
30
|
-
// renders for tabs that have not changed.
|
|
31
|
-
var currentSelectedValue = React.useRef(undefined);
|
|
32
|
-
var previousSelectedValue = React.useRef(undefined);
|
|
33
|
-
React.useEffect(function () {
|
|
34
|
-
previousSelectedValue.current = currentSelectedValue.current;
|
|
35
|
-
currentSelectedValue.current = selectedValue;
|
|
36
|
-
}, [selectedValue]);
|
|
37
|
-
var onSelect = react_utilities_1.useEventCallback(function (event, data) {
|
|
38
|
-
setSelectedValue(data.value);
|
|
39
|
-
onTabSelect === null || onTabSelect === void 0 ? void 0 : onTabSelect(event, data);
|
|
40
|
-
});
|
|
41
|
-
var registeredTabs = React.useRef({});
|
|
42
|
-
var onRegister = react_utilities_1.useEventCallback(function (data) {
|
|
43
|
-
registeredTabs.current[JSON.stringify(data.value)] = data;
|
|
44
|
-
});
|
|
45
|
-
var onUnregister = react_utilities_1.useEventCallback(function (data) {
|
|
46
|
-
delete registeredTabs.current[JSON.stringify(data.value)];
|
|
47
|
-
});
|
|
48
|
-
var getRegisteredTabs = React.useCallback(function () {
|
|
49
|
-
return {
|
|
50
|
-
selectedValue: currentSelectedValue.current,
|
|
51
|
-
previousSelectedValue: previousSelectedValue.current,
|
|
52
|
-
registeredTabs: registeredTabs.current,
|
|
53
|
-
};
|
|
54
|
-
}, []);
|
|
55
|
-
return {
|
|
56
|
-
components: {
|
|
57
|
-
root: 'div',
|
|
58
|
-
},
|
|
59
|
-
root: react_utilities_1.getNativeElementProps('div', tslib_1.__assign(tslib_1.__assign({ ref: react_utilities_1.useMergedRefs(ref, innerRef), role: 'tablist' }, focusAttributes), props)),
|
|
60
|
-
appearance: appearance,
|
|
61
|
-
reserveSelectedTabSpace: reserveSelectedTabSpace,
|
|
62
|
-
disabled: disabled,
|
|
63
|
-
selectedValue: selectedValue,
|
|
64
|
-
size: size,
|
|
65
|
-
vertical: vertical,
|
|
66
|
-
onRegister: onRegister,
|
|
67
|
-
onUnregister: onUnregister,
|
|
68
|
-
onSelect: onSelect,
|
|
69
|
-
getRegisteredTabs: getRegisteredTabs,
|
|
70
|
-
};
|
|
71
|
-
};
|
|
72
|
-
exports.useTabList_unstable = useTabList_unstable;
|
|
73
|
-
});
|
|
74
|
-
//# sourceMappingURL=useTabList.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTabList.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabList.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useArrowNavigationGroup } from '@fluentui/react-tabster';\nimport {\n getNativeElementProps,\n useControllableState,\n useEventCallback,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport type { TabRegisterData, SelectTabData, SelectTabEvent, TabListProps, TabListState } from './TabList.types';\nimport { TabValue } from '../Tab/Tab.types';\n\n/**\n * Create the state required to render TabList.\n *\n * The returned state can be modified with hooks such as useTabListStyles_unstable,\n * before being passed to renderTabList_unstable.\n *\n * @param props - props from this instance of TabList\n * @param ref - reference to root HTMLElement of TabList\n */\nexport const useTabList_unstable = (props: TabListProps, ref: React.Ref<HTMLElement>): TabListState => {\n const {\n appearance = 'transparent',\n reserveSelectedTabSpace = true,\n disabled = false,\n onTabSelect,\n size = 'medium',\n vertical = false,\n } = props;\n\n const innerRef = React.useRef<HTMLElement>(null);\n\n const focusAttributes = useArrowNavigationGroup({\n circular: true,\n axis: vertical ? 'vertical' : 'horizontal',\n memorizeCurrent: true,\n });\n\n const [selectedValue, setSelectedValue] = useControllableState({\n state: props.selectedValue,\n defaultState: props.defaultSelectedValue,\n initialState: undefined,\n });\n\n // considered usePrevious, but it is sensitive to re-renders\n // this could cause the previous to move to current in the case where the tab list re-renders.\n // these refs avoid getRegisteredTabs changing when selectedValue changes and causing\n // renders for tabs that have not changed.\n const currentSelectedValue = React.useRef<TabValue | undefined>(undefined);\n const previousSelectedValue = React.useRef<TabValue | undefined>(undefined);\n\n React.useEffect(() => {\n previousSelectedValue.current = currentSelectedValue.current;\n currentSelectedValue.current = selectedValue;\n }, [selectedValue]);\n\n const onSelect = useEventCallback((event: SelectTabEvent, data: SelectTabData) => {\n setSelectedValue(data.value);\n onTabSelect?.(event, data);\n });\n\n const registeredTabs = React.useRef<Record<string, TabRegisterData>>({});\n\n const onRegister = useEventCallback((data: TabRegisterData) => {\n registeredTabs.current[JSON.stringify(data.value)] = data;\n });\n\n const onUnregister = useEventCallback((data: TabRegisterData) => {\n delete registeredTabs.current[JSON.stringify(data.value)];\n });\n\n const getRegisteredTabs = React.useCallback(() => {\n return {\n selectedValue: currentSelectedValue.current,\n previousSelectedValue: previousSelectedValue.current,\n registeredTabs: registeredTabs.current,\n };\n }, []);\n\n return {\n components: {\n root: 'div',\n },\n root: getNativeElementProps('div', {\n ref: useMergedRefs(ref, innerRef),\n role: 'tablist',\n ...focusAttributes,\n ...props,\n }),\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue,\n size,\n vertical,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n };\n};\n"]}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
define(["require", "exports"], function (require, exports) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useTabListContextValues_unstable = void 0;
|
|
5
|
-
function useTabListContextValues_unstable(state) {
|
|
6
|
-
var appearance = state.appearance, reserveSelectedTabSpace = state.reserveSelectedTabSpace, disabled = state.disabled, selectedKey = state.selectedValue, onRegister = state.onRegister, onUnregister = state.onUnregister, onSelect = state.onSelect, getRegisteredTabs = state.getRegisteredTabs, size = state.size, vertical = state.vertical;
|
|
7
|
-
var tabList = {
|
|
8
|
-
appearance: appearance,
|
|
9
|
-
reserveSelectedTabSpace: reserveSelectedTabSpace,
|
|
10
|
-
disabled: disabled,
|
|
11
|
-
selectedValue: selectedKey,
|
|
12
|
-
onSelect: onSelect,
|
|
13
|
-
onRegister: onRegister,
|
|
14
|
-
onUnregister: onUnregister,
|
|
15
|
-
getRegisteredTabs: getRegisteredTabs,
|
|
16
|
-
size: size,
|
|
17
|
-
vertical: vertical,
|
|
18
|
-
};
|
|
19
|
-
return { tabList: tabList };
|
|
20
|
-
}
|
|
21
|
-
exports.useTabListContextValues_unstable = useTabListContextValues_unstable;
|
|
22
|
-
});
|
|
23
|
-
//# sourceMappingURL=useTabListContextValues.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTabListContextValues.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;IAEA,SAAgB,gCAAgC,CAAC,KAAmB;QAEhE,IAAA,UAAU,GAUR,KAAK,WAVG,EACV,uBAAuB,GASrB,KAAK,wBATgB,EACvB,QAAQ,GAQN,KAAK,SARC,EACO,WAAW,GAOxB,KAAK,cAPmB,EAC1B,UAAU,GAMR,KAAK,WANG,EACV,YAAY,GAKV,KAAK,aALK,EACZ,QAAQ,GAIN,KAAK,SAJC,EACR,iBAAiB,GAGf,KAAK,kBAHU,EACjB,IAAI,GAEF,KAAK,KAFH,EACJ,QAAQ,GACN,KAAK,SADC,CACA;QAEV,IAAM,OAAO,GAAwB;YACnC,UAAU,YAAA;YACV,uBAAuB,yBAAA;YACvB,QAAQ,UAAA;YACR,aAAa,EAAE,WAAW;YAC1B,QAAQ,UAAA;YACR,UAAU,YAAA;YACV,YAAY,cAAA;YACZ,iBAAiB,mBAAA;YACjB,IAAI,MAAA;YACJ,QAAQ,UAAA;SACT,CAAC;QAEF,OAAO,EAAE,OAAO,SAAA,EAAE,CAAC;IACrB,CAAC;IA5BD,4EA4BC","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues_unstable(state: TabListState): TabListContextValues {\n const {\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue: selectedKey,\n onRegister,\n onUnregister,\n onSelect,\n getRegisteredTabs,\n size,\n vertical,\n } = state;\n\n const tabList: TabListContextValue = {\n appearance,\n reserveSelectedTabSpace,\n disabled,\n selectedValue: selectedKey,\n onSelect,\n onRegister,\n onUnregister,\n getRegisteredTabs,\n size,\n vertical,\n };\n\n return { tabList };\n}\n"]}
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "@griffel/react"], function (require, exports, react_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useTabListStyles_unstable = exports.tabListClassNames = void 0;
|
|
5
|
-
exports.tabListClassNames = {
|
|
6
|
-
root: 'fui-TabList',
|
|
7
|
-
};
|
|
8
|
-
/**
|
|
9
|
-
* Styles for the root slot
|
|
10
|
-
*/
|
|
11
|
-
var useStyles = react_1.makeStyles({
|
|
12
|
-
root: {
|
|
13
|
-
display: 'flex',
|
|
14
|
-
flexDirection: 'row',
|
|
15
|
-
flexShrink: 0,
|
|
16
|
-
flexWrap: 'nowrap',
|
|
17
|
-
position: 'relative',
|
|
18
|
-
},
|
|
19
|
-
horizontal: {
|
|
20
|
-
alignItems: 'stretch',
|
|
21
|
-
flexDirection: 'row',
|
|
22
|
-
},
|
|
23
|
-
vertical: {
|
|
24
|
-
alignItems: 'stretch',
|
|
25
|
-
flexDirection: 'column',
|
|
26
|
-
},
|
|
27
|
-
});
|
|
28
|
-
/**
|
|
29
|
-
* Apply styling to the TabList slots based on the state
|
|
30
|
-
*/
|
|
31
|
-
var useTabListStyles_unstable = function (state) {
|
|
32
|
-
var vertical = state.vertical;
|
|
33
|
-
var styles = useStyles();
|
|
34
|
-
state.root.className = react_1.mergeClasses(exports.tabListClassNames.root, styles.root, vertical ? styles.vertical : styles.horizontal, state.root.className);
|
|
35
|
-
return state;
|
|
36
|
-
};
|
|
37
|
-
exports.useTabListStyles_unstable = useTabListStyles_unstable;
|
|
38
|
-
});
|
|
39
|
-
//# sourceMappingURL=useTabListStyles.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"useTabListStyles.js","sourceRoot":"","sources":["../../../../../../../../../packages/react-components/react-tabs/src/components/TabList/useTabListStyles.ts"],"names":[],"mappings":";;;;IAIa,QAAA,iBAAiB,GAAiC;QAC7D,IAAI,EAAE,aAAa;KACpB,CAAC;IAEF;;OAEG;IACH,IAAM,SAAS,GAAG,kBAAU,CAAC;QAC3B,IAAI,EAAE;YACJ,OAAO,EAAE,MAAM;YACf,aAAa,EAAE,KAAK;YACpB,UAAU,EAAE,CAAC;YACb,QAAQ,EAAE,QAAQ;YAClB,QAAQ,EAAE,UAAU;SACrB;QACD,UAAU,EAAE;YACV,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,KAAK;SACrB;QACD,QAAQ,EAAE;YACR,UAAU,EAAE,SAAS;YACrB,aAAa,EAAE,QAAQ;SACxB;KACF,CAAC,CAAC;IAEH;;OAEG;IACI,IAAM,yBAAyB,GAAG,UAAC,KAAmB;QACnD,IAAA,QAAQ,GAAK,KAAK,SAAV,CAAW;QAE3B,IAAM,MAAM,GAAG,SAAS,EAAE,CAAC;QAE3B,KAAK,CAAC,IAAI,CAAC,SAAS,GAAG,oBAAY,CACjC,yBAAiB,CAAC,IAAI,EACtB,MAAM,CAAC,IAAI,EACX,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,UAAU,EAC9C,KAAK,CAAC,IAAI,CAAC,SAAS,CACrB,CAAC;QAEF,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAbW,QAAA,yBAAyB,6BAapC","sourcesContent":["import { SlotClassNames } from '@fluentui/react-utilities';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { TabListSlots, TabListState } from './TabList.types';\n\nexport const tabListClassNames: SlotClassNames<TabListSlots> = {\n root: 'fui-TabList',\n};\n\n/**\n * Styles for the root slot\n */\nconst useStyles = makeStyles({\n root: {\n display: 'flex',\n flexDirection: 'row',\n flexShrink: 0,\n flexWrap: 'nowrap',\n position: 'relative',\n },\n horizontal: {\n alignItems: 'stretch',\n flexDirection: 'row',\n },\n vertical: {\n alignItems: 'stretch',\n flexDirection: 'column',\n },\n});\n\n/**\n * Apply styling to the TabList slots based on the state\n */\nexport const useTabListStyles_unstable = (state: TabListState): TabListState => {\n const { vertical } = state;\n\n const styles = useStyles();\n\n state.root.className = mergeClasses(\n tabListClassNames.root,\n styles.root,\n vertical ? styles.vertical : styles.horizontal,\n state.root.className,\n );\n\n return state;\n};\n"]}
|
package/lib-amd/index.js
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
define(["require", "exports", "./Tab", "./TabList"], function (require, exports, Tab_1, TabList_1) {
|
|
2
|
-
"use strict";
|
|
3
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
4
|
-
exports.useTabList_unstable = exports.useTabListStyles_unstable = exports.useTabListContextValues_unstable = exports.useTabListContext_unstable = exports.tabListClassNames = exports.TabListProvider = exports.TabList = exports.renderTabList_unstable = exports.useTab_unstable = exports.useTabStyles_unstable = exports.tabClassNames = exports.Tab = exports.renderTab_unstable = void 0;
|
|
5
|
-
Object.defineProperty(exports, "renderTab_unstable", { enumerable: true, get: function () { return Tab_1.renderTab_unstable; } });
|
|
6
|
-
Object.defineProperty(exports, "Tab", { enumerable: true, get: function () { return Tab_1.Tab; } });
|
|
7
|
-
Object.defineProperty(exports, "tabClassNames", { enumerable: true, get: function () { return Tab_1.tabClassNames; } });
|
|
8
|
-
Object.defineProperty(exports, "useTabStyles_unstable", { enumerable: true, get: function () { return Tab_1.useTabStyles_unstable; } });
|
|
9
|
-
Object.defineProperty(exports, "useTab_unstable", { enumerable: true, get: function () { return Tab_1.useTab_unstable; } });
|
|
10
|
-
Object.defineProperty(exports, "renderTabList_unstable", { enumerable: true, get: function () { return TabList_1.renderTabList_unstable; } });
|
|
11
|
-
Object.defineProperty(exports, "TabList", { enumerable: true, get: function () { return TabList_1.TabList; } });
|
|
12
|
-
Object.defineProperty(exports, "TabListProvider", { enumerable: true, get: function () { return TabList_1.TabListProvider; } });
|
|
13
|
-
Object.defineProperty(exports, "tabListClassNames", { enumerable: true, get: function () { return TabList_1.tabListClassNames; } });
|
|
14
|
-
Object.defineProperty(exports, "useTabListContext_unstable", { enumerable: true, get: function () { return TabList_1.useTabListContext_unstable; } });
|
|
15
|
-
Object.defineProperty(exports, "useTabListContextValues_unstable", { enumerable: true, get: function () { return TabList_1.useTabListContextValues_unstable; } });
|
|
16
|
-
Object.defineProperty(exports, "useTabListStyles_unstable", { enumerable: true, get: function () { return TabList_1.useTabListStyles_unstable; } });
|
|
17
|
-
Object.defineProperty(exports, "useTabList_unstable", { enumerable: true, get: function () { return TabList_1.useTabList_unstable; } });
|
|
18
|
-
});
|
|
19
|
-
//# sourceMappingURL=index.js.map
|
package/lib-amd/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-tabs/src/index.ts"],"names":[],"mappings":";;;;IACS,yGAAA,kBAAkB,OAAA;IAAE,0FAAA,GAAG,OAAA;IAAE,oGAAA,aAAa,OAAA;IAAE,4GAAA,qBAAqB,OAAA;IAAE,sGAAA,eAAe,OAAA;IAcrF,iHAAA,sBAAsB,OAAA;IACtB,kGAAA,OAAO,OAAA;IACP,0GAAA,eAAe,OAAA;IACf,4GAAA,iBAAiB,OAAA;IACjB,qHAAA,0BAA0B,OAAA;IAC1B,2HAAA,gCAAgC,OAAA;IAChC,oHAAA,yBAAyB,OAAA;IACzB,8GAAA,mBAAmB,OAAA","sourcesContent":["export type { TabProps, TabSlots, TabState, TabValue } from './Tab';\nexport { renderTab_unstable, Tab, tabClassNames, useTabStyles_unstable, useTab_unstable } from './Tab';\nexport type {\n TabRegisterData,\n RegisterTabEventHandler,\n SelectTabData,\n SelectTabEvent,\n SelectTabEventHandler,\n TabListContextValue,\n TabListContextValues,\n TabListProps,\n TabListSlots,\n TabListState,\n} from './TabList';\nexport {\n renderTabList_unstable,\n TabList,\n TabListProvider,\n tabListClassNames,\n useTabListContext_unstable,\n useTabListContextValues_unstable,\n useTabListStyles_unstable,\n useTabList_unstable,\n} from './TabList';\n"]}
|