@fluentui/react-tabs 9.0.10 → 9.1.1

package/lib-commonjs/components/TabList/useTabList.js

@@ -24,6 +24,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
 const useTabList_unstable = (props, ref) => {
   const {
     appearance = 'transparent',
+    reserveSelectedTabSpace = true,
     disabled = false,
     onTabSelect,
     size = 'medium',
@@ -79,6 +80,7 @@ const useTabList_unstable = (props, ref) => {
       ...props
     }),
     appearance,
+    reserveSelectedTabSpace,
     disabled,
     selectedValue,
     size,

package/lib-commonjs/components/TabList/useTabList.js.map

@@ -1 +1 @@
-{"version":3,"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 { appearance = 'transparent', disabled = false, onTabSelect, size = 'medium', vertical = false } = 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    disabled,\n    selectedValue,\n    size,\n    vertical,\n    onRegister,\n    onUnregister,\n    onSelect,\n    getRegisteredTabs,\n  };\n};\n"],"sourceRoot":"../src/"}
+{"version":3,"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"],"sourceRoot":"../src/"}

package/lib-commonjs/components/TabList/useTabListContextValues.js

@@ -8,6 +8,7 @@ exports.useTabListContextValues = void 0;
 function useTabListContextValues(state) {
   const {
     appearance,
+    reserveSelectedTabSpace,
     disabled,
     selectedValue: selectedKey,
     onRegister,
@@ -19,6 +20,7 @@ function useTabListContextValues(state) {
   } = state;
   const tabList = {
     appearance,
+    reserveSelectedTabSpace,
     disabled,
     selectedValue: selectedKey,
     onSelect,

package/lib-commonjs/components/TabList/useTabListContextValues.js.map

@@ -1 +1 @@
-{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,uBAAhB,CAAwC,KAAxC,EAA2D;EACzD,MAAM;IACJ,UADI;IAEJ,QAFI;IAGJ,aAAa,EAAE,WAHX;IAIJ,UAJI;IAKJ,YALI;IAMJ,QANI;IAOJ,iBAPI;IAQJ,IARI;IASJ;EATI,IAUF,KAVJ;EAYA,MAAM,OAAO,GAAwB;IACnC,UADmC;IAEnC,QAFmC;IAGnC,aAAa,EAAE,WAHoB;IAInC,QAJmC;IAKnC,UALmC;IAMnC,YANmC;IAOnC,iBAPmC;IAQnC,IARmC;IASnC;EATmC,CAArC;EAYA,OAAO;IAAE;EAAF,CAAP;AACD;;AA1BD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(state: TabListState): TabListContextValues {\n  const {\n    appearance,\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    disabled,\n    selectedValue: selectedKey,\n    onSelect,\n    onRegister,\n    onUnregister,\n    getRegisteredTabs,\n    size,\n    vertical,\n  };\n\n  return { tabList };\n}\n"],"sourceRoot":"../src/"}
+{"version":3,"sources":["packages/react-components/react-tabs/src/components/TabList/useTabListContextValues.tsx"],"names":[],"mappings":";;;;;;;AAEA,SAAgB,uBAAhB,CAAwC,KAAxC,EAA2D;EACzD,MAAM;IACJ,UADI;IAEJ,uBAFI;IAGJ,QAHI;IAIJ,aAAa,EAAE,WAJX;IAKJ,UALI;IAMJ,YANI;IAOJ,QAPI;IAQJ,iBARI;IASJ,IATI;IAUJ;EAVI,IAWF,KAXJ;EAaA,MAAM,OAAO,GAAwB;IACnC,UADmC;IAEnC,uBAFmC;IAGnC,QAHmC;IAInC,aAAa,EAAE,WAJoB;IAKnC,QALmC;IAMnC,UANmC;IAOnC,YAPmC;IAQnC,iBARmC;IASnC,IATmC;IAUnC;EAVmC,CAArC;EAaA,OAAO;IAAE;EAAF,CAAP;AACD;;AA5BD,OAAA,CAAA,uBAAA,GAAA,uBAAA","sourcesContent":["import { TabListContextValue, TabListContextValues, TabListState } from './TabList.types';\n\nexport function useTabListContextValues(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"],"sourceRoot":"../src/"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "9.0.10",
+  "version": "9.1.1",
   "description": "Fluent UI React tabs components",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
@@ -26,14 +26,14 @@
   "devDependencies": {
     "@fluentui/eslint-plugin": "*",
     "@fluentui/react-conformance": "*",
-    "@fluentui/react-conformance-griffel": "9.0.0-beta.17",
+    "@fluentui/react-conformance-griffel": "9.0.0-beta.18",
     "@fluentui/scripts": "^1.0.0"
   },
   "dependencies": {
-    "@fluentui/react-context-selector": "^9.1.0",
-    "@fluentui/react-tabster": "^9.2.1",
-    "@fluentui/react-theme": "^9.1.1",
-    "@fluentui/react-utilities": "^9.2.0",
+    "@fluentui/react-context-selector": "^9.1.2",
+    "@fluentui/react-tabster": "^9.3.1",
+    "@fluentui/react-theme": "^9.1.2",
+    "@fluentui/react-utilities": "^9.2.2",
     "@griffel/react": "^1.4.2",
     "tslib": "^2.1.0"
   },