@fluentui/react-tabs 1.0.0-beta.17 → 1.0.0-beta.173

package/lib-commonjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,qBAAmB;AAEnB,kDAAwB;AACxB,yEAA+C","sourcesContent":["import './version';\n\nexport * from './Pivot';\nexport * from '@fluentui/react-theme-provider';\n"]}
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":";;;AAAA,iDAAuB","sourcesContent":["export * from './Tabs';\n"]}

package/lib-commonjs/utilities/observeResize.d.ts

@@ -12,7 +12,7 @@
  *
  * @returns A function to clean up the observer/listener.
  */
-export declare const observeResize: (target: Element | Element[], onResize: (entries: readonly ResizeObserverEntry[] | undefined) => void) => () => void;
+export declare const observeResize: (target: Element | Element[], onResize: (entries: readonly ResizeObserverEntry[] | undefined) => void) => (() => void);
 /** Temporary type definition for ResizeObserverEntry. Can be removed when official types are available. */
 declare type ResizeObserverEntry = {
     readonly contentRect: DOMRectReadOnly;

package/lib-commonjs/utilities/observeResize.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.observeResize = void 0;
 var utilities_1 = require("@fluentui/utilities");
 /**
  * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.
@@ -15,7 +16,7 @@ var utilities_1 = require("@fluentui/utilities");
  *
  * @returns A function to clean up the observer/listener.
  */
-exports.observeResize = function (target, onResize) {
+var observeResize = function (target, onResize) {
     if (typeof ResizeObserver !== 'undefined') {
         var observer_1 = new ResizeObserver(onResize);
         if (Array.isArray(target)) {
@@ -45,4 +46,5 @@ exports.observeResize = function (target, onResize) {
         };
     }
 };
+exports.observeResize = observeResize;
 //# sourceMappingURL=observeResize.js.map

package/lib-commonjs/utilities/observeResize.js.map

@@ -1 +1 @@
-{"version":3,"file":"observeResize.js","sourceRoot":"../src/","sources":["utilities/observeResize.ts"],"names":[],"mappings":";;AAAA,iDAAgD;AAEhD;;;;;;;;;;;;;GAaG;AACU,QAAA,aAAa,GAAG,UAC3B,MAA2B,EAC3B,QAAuE;IAEvE,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;QACzC,IAAM,UAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACzB,MAAM,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,UAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAnB,CAAmB,CAAC,CAAC;SAC1C;aAAM;YACL,UAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;SAC1B;QAED,OAAO,cAAM,OAAA,UAAQ,CAAC,UAAU,EAAE,EAArB,CAAqB,CAAC;KACpC;SAAM;QACL,0DAA0D;QAC1D,IAAM,iBAAe,GAAG,cAAM,OAAA,QAAQ,CAAC,SAAS,CAAC,EAAnB,CAAmB,CAAC;QAElD,IAAM,KAAG,GAAG,qBAAS,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAClE,IAAI,CAAC,KAAG,EAAE;YACR,4DAA4D;YAC5D,OAAO;gBACL,sBAAsB;YACxB,CAAC,CAAC;SACH;QAED,mFAAmF;QACnF,IAAM,kBAAgB,GAAG,KAAG,CAAC,qBAAqB,CAAC,iBAAe,CAAC,CAAC;QACpE,KAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAe,EAAE,KAAK,CAAC,CAAC;QAEvD,OAAO;YACL,KAAG,CAAC,oBAAoB,CAAC,kBAAgB,CAAC,CAAC;YAC3C,KAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAe,EAAE,KAAK,CAAC,CAAC;QAC5D,CAAC,CAAC;KACH;AACH,CAAC,CAAC","sourcesContent":["import { getWindow } from '@fluentui/utilities';\n\n/**\n * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.\n *\n * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.\n * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.\n *\n * @param target - Either a single element, or array of elements to watch for size changes.\n * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.\n *    If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.\n *    Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,\n *    (e.g. clientWidth/clientHeight or getBoundingClientRect).\n *\n * @returns A function to clean up the observer/listener.\n */\nexport const observeResize = (\n  target: Element | Element[],\n  onResize: (entries: readonly ResizeObserverEntry[] | undefined) => void,\n): (() => void) => {\n  if (typeof ResizeObserver !== 'undefined') {\n    const observer = new ResizeObserver(onResize);\n\n    if (Array.isArray(target)) {\n      target.forEach(t => observer.observe(t));\n    } else {\n      observer.observe(target);\n    }\n\n    return () => observer.disconnect();\n  } else {\n    // Fallback for browsers that don't support ResizeObserver\n    const onResizeWrapper = () => onResize(undefined);\n\n    const win = getWindow(Array.isArray(target) ? target[0] : target);\n    if (!win) {\n      // Can't listen for resize if we can't get the window object\n      return () => {\n        // Nothing to clean up\n      };\n    }\n\n    // Listen for the first animation frame, which will happen after layout is complete\n    const animationFrameId = win.requestAnimationFrame(onResizeWrapper);\n    win.addEventListener('resize', onResizeWrapper, false);\n\n    return () => {\n      win.cancelAnimationFrame(animationFrameId);\n      win.removeEventListener('resize', onResizeWrapper, false);\n    };\n  }\n};\n\n/** Temporary type definition for ResizeObserver. Can be removed when official types are available. */\ntype ResizeObserver = {\n  new (callback: (entries: readonly ResizeObserverEntry[], observer: ResizeObserver) => void): ResizeObserver;\n  observe(target: Element, options?: { box: 'content-box' | 'border-box' }): void;\n  unobserve(target: Element): void;\n  disconnect(): void;\n};\n\n/** Temporary type definition for ResizeObserverEntry. Can be removed when official types are available. */\ntype ResizeObserverEntry = {\n  readonly contentRect: DOMRectReadOnly;\n  readonly target: Element;\n};\n\n/** Temporary definition for ResizeObserver. Can be removed when official types are available. */\ndeclare const ResizeObserver: ResizeObserver | undefined;\n"]}
+{"version":3,"file":"observeResize.js","sourceRoot":"../src/","sources":["utilities/observeResize.ts"],"names":[],"mappings":";;;AAAA,iDAAgD;AAEhD;;;;;;;;;;;;;GAaG;AACI,IAAM,aAAa,GAAG,UAC3B,MAA2B,EAC3B,QAAuE;IAEvE,IAAI,OAAO,cAAc,KAAK,WAAW,EAAE;QACzC,IAAM,UAAQ,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;QAE9C,IAAI,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,EAAE;YACzB,MAAM,CAAC,OAAO,CAAC,UAAA,CAAC,IAAI,OAAA,UAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,EAAnB,CAAmB,CAAC,CAAC;SAC1C;aAAM;YACL,UAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;SAC1B;QAED,OAAO,cAAM,OAAA,UAAQ,CAAC,UAAU,EAAE,EAArB,CAAqB,CAAC;KACpC;SAAM;QACL,0DAA0D;QAC1D,IAAM,iBAAe,GAAG,cAAM,OAAA,QAAQ,CAAC,SAAS,CAAC,EAAnB,CAAmB,CAAC;QAElD,IAAM,KAAG,GAAG,qBAAS,CAAC,KAAK,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC;QAClE,IAAI,CAAC,KAAG,EAAE;YACR,4DAA4D;YAC5D,OAAO;gBACL,sBAAsB;YACxB,CAAC,CAAC;SACH;QAED,mFAAmF;QACnF,IAAM,kBAAgB,GAAG,KAAG,CAAC,qBAAqB,CAAC,iBAAe,CAAC,CAAC;QACpE,KAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,iBAAe,EAAE,KAAK,CAAC,CAAC;QAEvD,OAAO;YACL,KAAG,CAAC,oBAAoB,CAAC,kBAAgB,CAAC,CAAC;YAC3C,KAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,iBAAe,EAAE,KAAK,CAAC,CAAC;QAC5D,CAAC,CAAC;KACH;AACH,CAAC,CAAC;AAnCW,QAAA,aAAa,iBAmCxB","sourcesContent":["import { getWindow } from '@fluentui/utilities';\n\n/**\n * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.\n *\n * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.\n * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.\n *\n * @param target - Either a single element, or array of elements to watch for size changes.\n * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.\n *    If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.\n *    Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,\n *    (e.g. clientWidth/clientHeight or getBoundingClientRect).\n *\n * @returns A function to clean up the observer/listener.\n */\nexport const observeResize = (\n  target: Element | Element[],\n  onResize: (entries: readonly ResizeObserverEntry[] | undefined) => void,\n): (() => void) => {\n  if (typeof ResizeObserver !== 'undefined') {\n    const observer = new ResizeObserver(onResize);\n\n    if (Array.isArray(target)) {\n      target.forEach(t => observer.observe(t));\n    } else {\n      observer.observe(target);\n    }\n\n    return () => observer.disconnect();\n  } else {\n    // Fallback for browsers that don't support ResizeObserver\n    const onResizeWrapper = () => onResize(undefined);\n\n    const win = getWindow(Array.isArray(target) ? target[0] : target);\n    if (!win) {\n      // Can't listen for resize if we can't get the window object\n      return () => {\n        // Nothing to clean up\n      };\n    }\n\n    // Listen for the first animation frame, which will happen after layout is complete\n    const animationFrameId = win.requestAnimationFrame(onResizeWrapper);\n    win.addEventListener('resize', onResizeWrapper, false);\n\n    return () => {\n      win.cancelAnimationFrame(animationFrameId);\n      win.removeEventListener('resize', onResizeWrapper, false);\n    };\n  }\n};\n\n/** Temporary type definition for ResizeObserver. Can be removed when official types are available. */\ntype ResizeObserver = {\n  new (callback: (entries: readonly ResizeObserverEntry[], observer: ResizeObserver) => void): ResizeObserver;\n  observe(target: Element, options?: { box: 'content-box' | 'border-box' }): void;\n  unobserve(target: Element): void;\n  disconnect(): void;\n};\n\n/** Temporary type definition for ResizeObserverEntry. Can be removed when official types are available. */\ntype ResizeObserverEntry = {\n  readonly contentRect: DOMRectReadOnly;\n  readonly target: Element;\n};\n\n/** Temporary definition for ResizeObserver. Can be removed when official types are available. */\ndeclare const ResizeObserver: ResizeObserver | undefined;\n"]}

package/lib-commonjs/utilities/useOverflow.d.ts

@@ -1,4 +1,4 @@
-import { RefCallback } from '@fluentui/react-hooks';
+import type { RefCallback } from '@fluentui/react-hooks';
 /**
  * Callback to notify the user that the items in the overflow have changed. This should ensure that the overflow menu
  * is visible, and contains all of the overflowing items.

package/lib-commonjs/utilities/useOverflow.js

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOverflow = void 0;
 var React = require("react");
 var react_hooks_1 = require("@fluentui/react-hooks");
 var utilities_1 = require("@fluentui/utilities");
@@ -22,7 +23,7 @@ var observeResize_1 = require("./observeResize");
  * </Container>
  * ```
  */
-exports.useOverflow = function (_a) {
+var useOverflow = function (_a) {
     var onOverflowItemsChanged = _a.onOverflowItemsChanged, rtl = _a.rtl, pinnedIndex = _a.pinnedIndex;
     var updateOverflowRef = React.useRef();
     var containerWidthRef = React.useRef();
@@ -43,6 +44,7 @@ exports.useOverflow = function (_a) {
         containerRef(menuButton.parentElement);
         return function () { return containerRef(null); };
     });
+    // eslint-disable-next-line no-restricted-properties
     React.useLayoutEffect(function () {
         var container = containerRef.current;
         var menuButton = menuButtonRef.current;
@@ -124,4 +126,5 @@ exports.useOverflow = function (_a) {
     });
     return { menuButtonRef: menuButtonRef };
 };
+exports.useOverflow = useOverflow;
 //# sourceMappingURL=useOverflow.js.map

package/lib-commonjs/utilities/useOverflow.js.map

@@ -1 +1 @@
-{"version":3,"file":"useOverflow.js","sourceRoot":"../src/","sources":["utilities/useOverflow.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useRefEffect, RefCallback } from '@fluentui/react-hooks';\nimport { getWindow } from '@fluentui/utilities';\nimport { observeResize } from './observeResize';\n\n/**\n * Callback to notify the user that the items in the overflow have changed. This should ensure that the overflow menu\n * is visible, and contains all of the overflowing items.\n *\n * @param overflowIndex - The index of the first item in the overflow, or items.length if nothing is overflowing.\n * @param items - The list of all items in the container, and whether that particular item is in the overflow\n */\nexport type OverflowItemsChangedCallback = (\n  overflowIndex: number,\n  items: { ele: HTMLElement; isOverflowing: boolean }[],\n) => void;\n\n/** Parameters for {@see useOverflow} */\nexport type OverflowParams = {\n  /** Callback to notify the user that the items in the overflow have changed. */\n  onOverflowItemsChanged: OverflowItemsChangedCallback;\n\n  /** True if the element containing overflowMenuButtonRef is in right-to-left order */\n  rtl: boolean;\n\n  /** Optional: Index of item that should never go into the overflow menu. */\n  pinnedIndex?: number;\n};\n\n/** Return value for {@see useOverflow} */\nexport type OverflowRefs = {\n  /** Set the overflow menu button's ref to this ref callback */\n  menuButtonRef: RefCallback<HTMLElement>;\n};\n\n/**\n * Track whether any items don't fit within their container, and move them to the overflow menu.\n * Items are moved into the overflow menu from back to front, excluding pinned items.\n *\n * The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it\n * must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:\n * ```ts\n * const overflow = useOverflow(...);\n * ```\n * ```jsx\n * <Container>\n *  <Item /> // Index 0\n *  <Item /> // Index 1\n *  ...\n *  <Button ref={overflow.setMenuButtonRef} /> // Can be any React.Component or HTMLElement\n * </Container>\n * ```\n */\nexport const useOverflow = ({ onOverflowItemsChanged, rtl, pinnedIndex }: OverflowParams): OverflowRefs => {\n  const updateOverflowRef = React.useRef<() => void>();\n  const containerWidthRef = React.useRef<number>();\n\n  // Attach a resize observer to the container\n  const containerRef = useRefEffect<HTMLElement>(container => {\n    const cleanupObserver = observeResize(container, entries => {\n      containerWidthRef.current = entries ? entries[0].contentRect.width : container.clientWidth;\n      if (updateOverflowRef.current) {\n        updateOverflowRef.current();\n      }\n    });\n\n    return () => {\n      cleanupObserver();\n      containerWidthRef.current = undefined;\n    };\n  });\n\n  const menuButtonRef = useRefEffect<HTMLElement>(menuButton => {\n    containerRef(menuButton.parentElement);\n    return () => containerRef(null);\n  });\n\n  React.useLayoutEffect(() => {\n    const container = containerRef.current;\n    const menuButton = menuButtonRef.current;\n    if (!container || !menuButton) {\n      return;\n    }\n\n    // items contains the container's children, excluding the overflow menu button itself\n    const items: HTMLElement[] = [];\n    for (let i = 0; i < container.children.length; i++) {\n      const item = container.children[i];\n      if (item instanceof HTMLElement && item !== menuButton) {\n        items.push(item);\n      }\n    }\n\n    // Keep track of the minimum width of the container to fit each child index.\n    // This cache is an integral part of the algorithm and not just a performance optimization: it allows us to\n    // recalculate the overflowIndex on subsequent resizes even if some items are already inside the overflow.\n    const minContainerWidth: number[] = [];\n    let extraWidth = 0; // The accumulated width of items that don't move into the overflow\n\n    updateOverflowRef.current = () => {\n      const containerWidth = containerWidthRef.current;\n      if (containerWidth === undefined) {\n        return;\n      }\n\n      // Iterate the items in reverse order until we find one that fits within the bounds of the container\n      for (let i = items.length - 1; i >= 0; i--) {\n        // Calculate the min container width for this item if we haven't done so yet\n        if (minContainerWidth[i] === undefined) {\n          const itemOffsetEnd = rtl ? containerWidth - items[i].offsetLeft : items[i].offsetLeft + items[i].offsetWidth;\n\n          // If the item after this one is pinned, reserve space for it\n          if (i + 1 < items.length && i + 1 === pinnedIndex) {\n            // Use distance between the end of the previous item and this one (rather than the\n            // pinned item's offsetWidth), to account for any margin between the items.\n            extraWidth = minContainerWidth[i + 1] - itemOffsetEnd;\n          }\n\n          // Reserve space for the menu button after the first item was added to the overflow\n          if (i === items.length - 2) {\n            extraWidth += menuButton.offsetWidth;\n          }\n\n          minContainerWidth[i] = itemOffsetEnd + extraWidth;\n        }\n\n        if (containerWidth > minContainerWidth[i]) {\n          setOverflowIndex(i + 1);\n          return;\n        }\n      }\n\n      // If we got here, nothing fits outside the overflow\n      setOverflowIndex(0);\n    };\n\n    let prevOverflowIndex = items.length;\n    const setOverflowIndex = (overflowIndex: number) => {\n      if (prevOverflowIndex !== overflowIndex) {\n        prevOverflowIndex = overflowIndex;\n        onOverflowItemsChanged(\n          overflowIndex,\n          items.map((ele, index) => ({\n            ele,\n            isOverflowing: index >= overflowIndex && index !== pinnedIndex,\n          })),\n        );\n      }\n    };\n\n    let cancelAnimationFrame: (() => void) | undefined = undefined;\n\n    // If the container width is already known from a previous render, update the overflow with its width.\n    // Do this in an animation frame to avoid forcing layout to happen early.\n    if (containerWidthRef.current !== undefined) {\n      const win = getWindow(container);\n      if (win) {\n        const animationFrameId = win.requestAnimationFrame(updateOverflowRef.current);\n        cancelAnimationFrame = () => win.cancelAnimationFrame(animationFrameId);\n      }\n    }\n\n    return () => {\n      if (cancelAnimationFrame) {\n        cancelAnimationFrame();\n      }\n\n      // On cleanup, need to remove all items from the overflow\n      // so they don't have stale properties on the next render\n      setOverflowIndex(items.length);\n      updateOverflowRef.current = undefined;\n    };\n  });\n\n  return { menuButtonRef };\n};\n"]}
+{"version":3,"file":"useOverflow.js","sourceRoot":"../src/","sources":["utilities/useOverflow.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useRefEffect } from '@fluentui/react-hooks';\nimport { getWindow } from '@fluentui/utilities';\nimport { observeResize } from './observeResize';\nimport type { RefCallback } from '@fluentui/react-hooks';\n\n/**\n * Callback to notify the user that the items in the overflow have changed. This should ensure that the overflow menu\n * is visible, and contains all of the overflowing items.\n *\n * @param overflowIndex - The index of the first item in the overflow, or items.length if nothing is overflowing.\n * @param items - The list of all items in the container, and whether that particular item is in the overflow\n */\nexport type OverflowItemsChangedCallback = (\n  overflowIndex: number,\n  items: { ele: HTMLElement; isOverflowing: boolean }[],\n) => void;\n\n/** Parameters for {@see useOverflow} */\nexport type OverflowParams = {\n  /** Callback to notify the user that the items in the overflow have changed. */\n  onOverflowItemsChanged: OverflowItemsChangedCallback;\n\n  /** True if the element containing overflowMenuButtonRef is in right-to-left order */\n  rtl: boolean;\n\n  /** Optional: Index of item that should never go into the overflow menu. */\n  pinnedIndex?: number;\n};\n\n/** Return value for {@see useOverflow} */\nexport type OverflowRefs = {\n  /** Set the overflow menu button's ref to this ref callback */\n  menuButtonRef: RefCallback<HTMLElement>;\n};\n\n/**\n * Track whether any items don't fit within their container, and move them to the overflow menu.\n * Items are moved into the overflow menu from back to front, excluding pinned items.\n *\n * The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it\n * must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:\n * ```ts\n * const overflow = useOverflow(...);\n * ```\n * ```jsx\n * <Container>\n *  <Item /> // Index 0\n *  <Item /> // Index 1\n *  ...\n *  <Button ref={overflow.setMenuButtonRef} /> // Can be any React.Component or HTMLElement\n * </Container>\n * ```\n */\nexport const useOverflow = ({ onOverflowItemsChanged, rtl, pinnedIndex }: OverflowParams): OverflowRefs => {\n  const updateOverflowRef = React.useRef<() => void>();\n  const containerWidthRef = React.useRef<number>();\n\n  // Attach a resize observer to the container\n  const containerRef = useRefEffect<HTMLElement>(container => {\n    const cleanupObserver = observeResize(container, entries => {\n      containerWidthRef.current = entries ? entries[0].contentRect.width : container.clientWidth;\n      if (updateOverflowRef.current) {\n        updateOverflowRef.current();\n      }\n    });\n\n    return () => {\n      cleanupObserver();\n      containerWidthRef.current = undefined;\n    };\n  });\n\n  const menuButtonRef = useRefEffect<HTMLElement>(menuButton => {\n    containerRef(menuButton.parentElement);\n    return () => containerRef(null);\n  });\n\n  // eslint-disable-next-line no-restricted-properties\n  React.useLayoutEffect(() => {\n    const container = containerRef.current;\n    const menuButton = menuButtonRef.current;\n    if (!container || !menuButton) {\n      return;\n    }\n\n    // items contains the container's children, excluding the overflow menu button itself\n    const items: HTMLElement[] = [];\n    for (let i = 0; i < container.children.length; i++) {\n      const item = container.children[i];\n      if (item instanceof HTMLElement && item !== menuButton) {\n        items.push(item);\n      }\n    }\n\n    // Keep track of the minimum width of the container to fit each child index.\n    // This cache is an integral part of the algorithm and not just a performance optimization: it allows us to\n    // recalculate the overflowIndex on subsequent resizes even if some items are already inside the overflow.\n    const minContainerWidth: number[] = [];\n    let extraWidth = 0; // The accumulated width of items that don't move into the overflow\n\n    updateOverflowRef.current = () => {\n      const containerWidth = containerWidthRef.current;\n      if (containerWidth === undefined) {\n        return;\n      }\n\n      // Iterate the items in reverse order until we find one that fits within the bounds of the container\n      for (let i = items.length - 1; i >= 0; i--) {\n        // Calculate the min container width for this item if we haven't done so yet\n        if (minContainerWidth[i] === undefined) {\n          const itemOffsetEnd = rtl ? containerWidth - items[i].offsetLeft : items[i].offsetLeft + items[i].offsetWidth;\n\n          // If the item after this one is pinned, reserve space for it\n          if (i + 1 < items.length && i + 1 === pinnedIndex) {\n            // Use distance between the end of the previous item and this one (rather than the\n            // pinned item's offsetWidth), to account for any margin between the items.\n            extraWidth = minContainerWidth[i + 1] - itemOffsetEnd;\n          }\n\n          // Reserve space for the menu button after the first item was added to the overflow\n          if (i === items.length - 2) {\n            extraWidth += menuButton.offsetWidth;\n          }\n\n          minContainerWidth[i] = itemOffsetEnd + extraWidth;\n        }\n\n        if (containerWidth > minContainerWidth[i]) {\n          setOverflowIndex(i + 1);\n          return;\n        }\n      }\n\n      // If we got here, nothing fits outside the overflow\n      setOverflowIndex(0);\n    };\n\n    let prevOverflowIndex = items.length;\n    const setOverflowIndex = (overflowIndex: number) => {\n      if (prevOverflowIndex !== overflowIndex) {\n        prevOverflowIndex = overflowIndex;\n        onOverflowItemsChanged(\n          overflowIndex,\n          items.map((ele, index) => ({\n            ele,\n            isOverflowing: index >= overflowIndex && index !== pinnedIndex,\n          })),\n        );\n      }\n    };\n\n    let cancelAnimationFrame: (() => void) | undefined = undefined;\n\n    // If the container width is already known from a previous render, update the overflow with its width.\n    // Do this in an animation frame to avoid forcing layout to happen early.\n    if (containerWidthRef.current !== undefined) {\n      const win = getWindow(container);\n      if (win) {\n        const animationFrameId = win.requestAnimationFrame(updateOverflowRef.current);\n        cancelAnimationFrame = () => win.cancelAnimationFrame(animationFrameId);\n      }\n    }\n\n    return () => {\n      if (cancelAnimationFrame) {\n        cancelAnimationFrame();\n      }\n\n      // On cleanup, need to remove all items from the overflow\n      // so they don't have stale properties on the next render\n      setOverflowIndex(items.length);\n      updateOverflowRef.current = undefined;\n    };\n  });\n\n  return { menuButtonRef };\n};\n"]}

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@fluentui/react-tabs",
-  "version": "1.0.0-beta.17",
+  "version": "1.0.0-beta.173",
   "description": "Fluent UI React Tabs component",
   "main": "lib-commonjs/index.js",
   "module": "lib/index.js",
   "typings": "lib/index.d.ts",
-  "sideEffects": [
-    "lib/version.js"
-  ],
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/microsoft/fluentui"
@@ -15,7 +13,6 @@
   "license": "MIT",
   "scripts": {
     "build": "just-scripts build",
-    "bundle": "just-scripts bundle",
     "clean": "just-scripts clean",
     "code-style": "just-scripts code-style",
     "just": "just-scripts",
@@ -23,39 +20,40 @@
     "start": "just-scripts dev:storybook",
     "start-test": "just-scripts jest-watch",
     "test": "just-scripts test",
-    "update-api": "just-scripts update-api",
     "update-snapshots": "just-scripts jest -u"
   },
   "devDependencies": {
-    "@fluentui/common-styles": "^1.0.0-beta.7",
-    "@fluentui/eslint-plugin": "^1.0.0-beta.0",
-    "@fluentui/react-conformance": "^1.0.0",
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/react-conformance": "*",
+    "@fluentui/scripts": "^1.0.0",
     "@types/enzyme": "3.10.3",
     "@types/enzyme-adapter-react-16": "1.0.3",
-    "@types/jest": "~24.9.0",
-    "@types/react": "16.8.25",
-    "@types/react-dom": "16.8.4",
+    "@types/react": "16.9.42",
+    "@types/react-dom": "16.9.10",
     "@types/react-test-renderer": "^16.0.0",
-    "@types/webpack-env": "1.15.1",
-    "@fluentui/scripts": "^1.0.0",
     "enzyme": "~3.10.0",
     "react": "16.8.6",
-    "react-app-polyfill": "~1.0.1",
     "react-dom": "16.8.6"
   },
   "dependencies": {
-    "@fluentui/react-internal": "^8.0.0-beta.18",
-    "@fluentui/react-theme-provider": "^1.0.0-beta.10",
-    "@fluentui/react-hooks": "^8.0.0-beta.6",
-    "@fluentui/set-version": "^8.0.0-beta.0",
-    "@fluentui/style-utilities": "^8.0.0-beta.7",
-    "@fluentui/utilities": "^8.0.0-beta.6",
-    "tslib": "^1.10.0"
+    "@fluentui/react": "^8.37.2",
+    "@fluentui/react-hooks": "^8.3.4",
+    "@fluentui/style-utilities": "^8.3.4",
+    "@fluentui/utilities": "^8.3.4",
+    "tslib": "^2.1.0"
   },
   "peerDependencies": {
-    "@types/react": ">=16.8.0 <17.0.0",
-    "@types/react-dom": ">=16.8.0 <17.0.0",
-    "react": ">=16.8.0 <17.0.0",
-    "react-dom": ">=16.8.0 <17.0.0"
+    "@types/react": ">=16.8.0 <18.0.0",
+    "@types/react-dom": ">=16.8.0 <18.0.0",
+    "react": ">=16.8.0 <18.0.0",
+    "react-dom": ">=16.8.0 <18.0.0"
+  },
+  "beachball": {
+    "tag": "beta",
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
   }
 }

package/src/{next/components → components}/Tabs/TabItem.types.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { IKeytipProps } from '@fluentui/react-internal';
-import { IButtonProps } from '@fluentui/react-internal/lib/compat/Button';
-import { IRefObject, IRenderFunction } from '@fluentui/utilities';
+import type { IKeytipProps } from '@fluentui/react';
+import type { IButtonProps } from '@fluentui/react/lib/Button';
+import type { IRefObject, IRenderFunction } from '@fluentui/utilities';
 
-/**
- * {@docCategory Tabs}
- */
 export interface TabItemProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    * Gets the component ref.

package/src/{next/components → components}/Tabs/Tabs.types.ts

@@ -1,11 +1,8 @@
 import * as React from 'react';
-import { IStyle, ITheme } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
 import { TabItem } from './TabItem';
+import type { IStyle, ITheme } from '@fluentui/style-utilities';
+import type { IStyleFunctionOrObject } from '@fluentui/utilities';
 
-/**
- * {@docCategory Tabs}
- */
 export interface TabsImperativeHandle {
   /**
    * Sets focus to the first tab.
@@ -13,9 +10,6 @@ export interface TabsImperativeHandle {
   focus(): void;
 }
 
-/**
- * {@docCategory Tabs}
- */
 export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, React.RefAttributes<HTMLDivElement> {
   /**
    * Optional callback to access the TabsImperativeHandle interface. Use this instead of ref for accessing
@@ -90,18 +84,12 @@ export interface TabsProps extends React.HTMLAttributes<HTMLDivElement>, React.R
   getTabId?: (itemKey: string, index: number) => string;
 }
 
-/**
- * {@docCategory Tabs}
- */
 export type TabsStyleProps = Required<Pick<TabsProps, 'theme'>> &
   Pick<TabsProps, 'className'> & {
     tabSize?: TabSizeType;
     tabFormat?: TabFormatType;
   };
 
-/**
- * {@docCategory Tabs}
- */
 export interface TabsStyles {
   /**
    * Style for the root element.
@@ -119,13 +107,11 @@ export interface TabsStyles {
 }
 
 /**
- * {@docCategory Tabs}
  * Display mode for the tabs
  */
 export type TabFormatType = 'links' | 'tabs';
 
 /**
- * {@docCategory Tabs}
  * Size of the tabs
  */
 export type TabSizeType = 'normal' | 'large';

package/lib/Pivot.d.ts

@@ -1 +0,0 @@
-export * from './components/Pivot/index';

package/lib/Pivot.js

@@ -1,2 +0,0 @@
-export * from './components/Pivot/index';
-//# sourceMappingURL=Pivot.js.map

package/lib/Pivot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pivot.js","sourceRoot":"../src/","sources":["Pivot.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC","sourcesContent":["export * from './components/Pivot/index';\n"]}

package/lib/components/Pivot/Pivot.base.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import { IPivotProps } from './index';
-export declare const PivotBase: React.FunctionComponent<IPivotProps>;

package/lib/components/Pivot/Pivot.base.js

@@ -1,183 +0,0 @@
-import { __assign, __rest } from "tslib";
-import * as React from 'react';
-import { useControllableValue, useId } from '@fluentui/react-hooks';
-import { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';
-import { DirectionalHint, FocusZone, FocusZoneDirection, Icon, } from '@fluentui/react-internal';
-import { CommandButton } from '@fluentui/react-internal/lib/compat/Button';
-import { PivotItem } from './index';
-import { useOverflow } from '../../utilities/useOverflow';
-var getClassNames = classNamesFunction();
-var COMPONENT_NAME = 'Pivot';
-var getTabId = function (props, pivotId, itemKey, index) {
-    if (props.getTabId) {
-        return props.getTabId(itemKey, index);
-    }
-    return pivotId + ("-Tab" + index);
-};
-// Gets the set of PivotLinks as array of IPivotItemProps
-// The set of Links is determined by child components of type PivotItem
-var getLinkItems = function (props, pivotId) {
-    var result = {
-        links: [],
-        keyToIndexMapping: {},
-        keyToTabIdMapping: {},
-    };
-    React.Children.forEach(React.Children.toArray(props.children), function (child, index) {
-        if (isPivotItem(child)) {
-            // eslint-disable-next-line deprecation/deprecation
-            var _a = child.props, linkText = _a.linkText, pivotItemProps = __rest(_a, ["linkText"]);
-            var itemKey = child.props.itemKey || index.toString();
-            result.links.push(__assign(__assign({ headerText: linkText }, pivotItemProps), { itemKey: itemKey }));
-            result.keyToIndexMapping[itemKey] = index;
-            result.keyToTabIdMapping[itemKey] = getTabId(props, pivotId, itemKey, index);
-        }
-        else if (child) {
-            warn('The children of a Pivot component must be of type PivotItem to be rendered.');
-        }
-    });
-    return result;
-};
-var isPivotItem = function (item) {
-    var _a, _b;
-    return ((_b = (_a = item) === null || _a === void 0 ? void 0 : _a.type) === null || _b === void 0 ? void 0 : _b.name) === PivotItem.name;
-};
-export var PivotBase = React.forwardRef(function (props, ref) {
-    var focusZoneRef = React.useRef(null);
-    var overflowMenuButtonComponentRef = React.useRef(null);
-    var pivotId = useId('Pivot');
-    var _a = useControllableValue(props.selectedKey, props.defaultSelectedKey), selectedKey = _a[0], setSelectedKey = _a[1];
-    var componentRef = props.componentRef, theme = props.theme, linkSize = props.linkSize, linkFormat = props.linkFormat, overflowBehavior = props.overflowBehavior;
-    var classNames;
-    var divProps = getNativeProps(props, divProperties);
-    var linkCollection = getLinkItems(props, pivotId);
-    React.useImperativeHandle(componentRef, function () { return ({
-        focus: function () {
-            var _a;
-            (_a = focusZoneRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        },
-    }); });
-    var renderLinkContent = function (link) {
-        if (!link) {
-            return null;
-        }
-        var itemCount = link.itemCount, itemIcon = link.itemIcon, headerText = link.headerText;
-        return (React.createElement("span", { className: classNames.linkContent },
-            itemIcon !== undefined && (React.createElement("span", { className: classNames.icon },
-                React.createElement(Icon, { iconName: itemIcon }))),
-            headerText !== undefined && React.createElement("span", { className: classNames.text },
-                " ",
-                link.headerText),
-            itemCount !== undefined && React.createElement("span", { className: classNames.count },
-                " (",
-                itemCount,
-                ")")));
-    };
-    var renderPivotLink = function (renderLinkCollection, link, renderPivotLinkSelectedKey, className) {
-        var itemKey = link.itemKey, headerButtonProps = link.headerButtonProps, onRenderItemLink = link.onRenderItemLink;
-        var tabId = renderLinkCollection.keyToTabIdMapping[itemKey];
-        var linkContent;
-        var isSelected = renderPivotLinkSelectedKey === itemKey;
-        if (onRenderItemLink) {
-            linkContent = onRenderItemLink(link, renderLinkContent);
-        }
-        else {
-            linkContent = renderLinkContent(link);
-        }
-        var contentString = link.headerText || '';
-        contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';
-        // Adding space supplementary for icon
-        contentString += link.itemIcon ? ' xx' : '';
-        return (React.createElement(CommandButton, __assign({}, headerButtonProps, { id: tabId, key: itemKey, className: css(className, isSelected && classNames.linkIsSelected), 
-            // eslint-disable-next-line react/jsx-no-bind
-            onClick: function (ev) { return onLinkClick(itemKey, ev); }, 
-            // eslint-disable-next-line react/jsx-no-bind
-            onKeyDown: function (ev) { return onKeyDown(itemKey, ev); }, "aria-label": link.ariaLabel, role: "tab", "aria-selected": isSelected, name: link.headerText, keytipProps: link.keytipProps, "data-content": contentString }), linkContent));
-    };
-    var onLinkClick = function (itemKey, ev) {
-        ev.preventDefault();
-        updateSelectedItem(itemKey, ev);
-    };
-    var onKeyDown = function (itemKey, ev) {
-        if (ev.which === KeyCodes.enter) {
-            ev.preventDefault();
-            updateSelectedItem(itemKey);
-        }
-    };
-    var updateSelectedItem = function (itemKey, ev) {
-        var _a;
-        setSelectedKey(itemKey);
-        linkCollection = getLinkItems(props, pivotId);
-        if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {
-            var selectedIndex = linkCollection.keyToIndexMapping[itemKey];
-            var item = React.Children.toArray(props.children)[selectedIndex];
-            if (isPivotItem(item)) {
-                props.onLinkClick(item, ev);
-            }
-        }
-        (_a = overflowMenuButtonComponentRef.current) === null || _a === void 0 ? void 0 : _a.dismissMenu();
-    };
-    var renderPivotItem = function (itemKey, isActive) {
-        if (props.headersOnly || !itemKey) {
-            return null;
-        }
-        var index = linkCollection.keyToIndexMapping[itemKey];
-        var selectedTabId = linkCollection.keyToTabIdMapping[itemKey];
-        return (React.createElement("div", { role: "tabpanel", hidden: !isActive, key: itemKey, "aria-hidden": !isActive, "aria-labelledby": selectedTabId, className: classNames.itemContainer }, React.Children.toArray(props.children)[index]));
-    };
-    var isKeyValid = function (itemKey) {
-        return itemKey !== undefined && itemKey !== null && linkCollection.keyToIndexMapping[itemKey] !== undefined;
-    };
-    var getSelectedKey = function () {
-        if (isKeyValid(selectedKey)) {
-            return selectedKey;
-        }
-        if (linkCollection.links.length) {
-            return linkCollection.links[0].itemKey;
-        }
-        return undefined;
-    };
-    classNames = getClassNames(props.styles, {
-        theme: theme,
-        linkSize: linkSize,
-        linkFormat: linkFormat,
-    });
-    var renderedSelectedKey = getSelectedKey();
-    var renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;
-    var items = linkCollection.links.map(function (l) {
-        return renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link);
-    });
-    // The overflow menu starts empty and items[] is updated as the overflow items change
-    var overflowMenuProps = React.useMemo(function () { return ({
-        items: [],
-        doNotLayer: true,
-        alignTargetEdge: true,
-        directionalHint: DirectionalHint.bottomRightEdge,
-    }); }, []);
-    var overflowMenuButtonRef = useOverflow({
-        onOverflowItemsChanged: function (overflowIndex, elements) {
-            // Set data-is-overflowing on each item
-            elements.forEach(function (_a) {
-                var ele = _a.ele, isOverflowing = _a.isOverflowing;
-                return (ele.dataset.isOverflowing = "" + isOverflowing);
-            });
-            // Update the menu items
-            overflowMenuProps.items = linkCollection.links.slice(overflowIndex).map(function (link, index) { return ({
-                key: link.itemKey || "" + (overflowIndex + index),
-                onRender: function () { return renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu); },
-            }); });
-        },
-        rtl: getRTL(theme),
-        pinnedIndex: renderedSelectedIndex,
-    }).menuButtonRef;
-    return (React.createElement("div", __assign({ role: "toolbar" }, divProps, { ref: ref }),
-        React.createElement(FocusZone, { componentRef: focusZoneRef, direction: FocusZoneDirection.horizontal, className: classNames.root, role: "tablist" },
-            items,
-            overflowBehavior === 'menu' && (React.createElement(CommandButton, { className: css(classNames.link, classNames.overflowMenuButton), elementRef: overflowMenuButtonRef, componentRef: overflowMenuButtonComponentRef, menuProps: overflowMenuProps, menuIconProps: { iconName: 'More', style: { color: 'inherit' } } }))),
-        renderedSelectedKey &&
-            linkCollection.links.map(function (link) {
-                return (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&
-                    renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey);
-            })));
-});
-PivotBase.displayName = COMPONENT_NAME;
-//# sourceMappingURL=Pivot.base.js.map

package/lib/components/Pivot/Pivot.base.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pivot.base.js","sourceRoot":"../src/","sources":["components/Pivot/Pivot.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useId } from '@fluentui/react-hooks';\nimport { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';\nimport {\n  DirectionalHint,\n  FocusZone,\n  FocusZoneDirection,\n  Icon,\n  IContextualMenuProps,\n  IFocusZone,\n} from '@fluentui/react-internal';\nimport { CommandButton, IButton } from '@fluentui/react-internal/lib/compat/Button';\nimport { IPivot, IPivotItemProps, IPivotProps, IPivotStyleProps, IPivotStyles, PivotItem } from './index';\nimport { useOverflow } from '../../utilities/useOverflow';\n\nconst getClassNames = classNamesFunction<IPivotStyleProps, IPivotStyles>();\n\nconst COMPONENT_NAME = 'Pivot';\n\ntype PivotLinkCollection = {\n  links: IPivotItemProps[];\n  keyToIndexMapping: { [key: string]: number };\n  keyToTabIdMapping: { [key: string]: string };\n};\n\nconst getTabId = (props: IPivotProps, pivotId: string, itemKey: string, index: number): string => {\n  if (props.getTabId) {\n    return props.getTabId(itemKey, index);\n  }\n  return pivotId + `-Tab${index}`;\n};\n\n// Gets the set of PivotLinks as array of IPivotItemProps\n// The set of Links is determined by child components of type PivotItem\nconst getLinkItems = (props: IPivotProps, pivotId: string): PivotLinkCollection => {\n  const result: PivotLinkCollection = {\n    links: [],\n    keyToIndexMapping: {},\n    keyToTabIdMapping: {},\n  };\n\n  React.Children.forEach(React.Children.toArray(props.children), (child: React.ReactNode, index: number) => {\n    if (isPivotItem(child)) {\n      // eslint-disable-next-line deprecation/deprecation\n      const { linkText, ...pivotItemProps } = child.props;\n      const itemKey = child.props.itemKey || index.toString();\n      result.links.push({\n        headerText: linkText,\n        ...pivotItemProps,\n        itemKey: itemKey,\n      });\n      result.keyToIndexMapping[itemKey] = index;\n      result.keyToTabIdMapping[itemKey] = getTabId(props, pivotId, itemKey, index);\n    } else if (child) {\n      warn('The children of a Pivot component must be of type PivotItem to be rendered.');\n    }\n  });\n  return result;\n};\n\nconst isPivotItem = (item: React.ReactNode): item is PivotItem => {\n  return ((item as React.ReactElement)?.type as React.ComponentType)?.name === PivotItem.name;\n};\n\nexport const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<HTMLDivElement, IPivotProps>(\n  (props, ref) => {\n    const focusZoneRef = React.useRef<IFocusZone>(null);\n    const overflowMenuButtonComponentRef = React.useRef<IButton>(null);\n    const pivotId: string = useId('Pivot');\n\n    const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);\n\n    const { componentRef, theme, linkSize, linkFormat, overflowBehavior } = props;\n\n    let classNames: { [key in keyof IPivotStyles]: string };\n    const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties);\n\n    let linkCollection = getLinkItems(props, pivotId);\n\n    React.useImperativeHandle(componentRef as React.RefObject<IPivot>, () => ({\n      focus: () => {\n        focusZoneRef.current?.focus();\n      },\n    }));\n\n    const renderLinkContent = (link?: IPivotItemProps): JSX.Element | null => {\n      if (!link) {\n        return null;\n      }\n\n      const { itemCount, itemIcon, headerText } = link;\n      return (\n        <span className={classNames.linkContent}>\n          {itemIcon !== undefined && (\n            <span className={classNames.icon}>\n              <Icon iconName={itemIcon} />\n            </span>\n          )}\n          {headerText !== undefined && <span className={classNames.text}> {link.headerText}</span>}\n          {itemCount !== undefined && <span className={classNames.count}> ({itemCount})</span>}\n        </span>\n      );\n    };\n\n    const renderPivotLink = (\n      renderLinkCollection: PivotLinkCollection,\n      link: IPivotItemProps,\n      renderPivotLinkSelectedKey: string | null | undefined,\n      className: string,\n    ): JSX.Element => {\n      const { itemKey, headerButtonProps, onRenderItemLink } = link;\n      const tabId = renderLinkCollection.keyToTabIdMapping[itemKey!];\n      let linkContent: JSX.Element | null;\n      const isSelected: boolean = renderPivotLinkSelectedKey === itemKey;\n\n      if (onRenderItemLink) {\n        linkContent = onRenderItemLink(link, renderLinkContent);\n      } else {\n        linkContent = renderLinkContent(link);\n      }\n\n      let contentString = link.headerText || '';\n      contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';\n      // Adding space supplementary for icon\n      contentString += link.itemIcon ? ' xx' : '';\n      return (\n        <CommandButton\n          {...headerButtonProps}\n          id={tabId}\n          key={itemKey}\n          className={css(className, isSelected && classNames.linkIsSelected)}\n          // eslint-disable-next-line react/jsx-no-bind\n          onClick={(ev: React.MouseEvent<HTMLElement>) => onLinkClick(itemKey!, ev)}\n          // eslint-disable-next-line react/jsx-no-bind\n          onKeyDown={(ev: React.KeyboardEvent<HTMLElement>) => onKeyDown(itemKey!, ev)}\n          aria-label={link.ariaLabel}\n          role=\"tab\"\n          aria-selected={isSelected}\n          name={link.headerText}\n          keytipProps={link.keytipProps}\n          data-content={contentString}\n        >\n          {linkContent}\n        </CommandButton>\n      );\n    };\n\n    const onLinkClick = (itemKey: string, ev: React.MouseEvent<HTMLElement>): void => {\n      ev.preventDefault();\n      updateSelectedItem(itemKey, ev);\n    };\n\n    const onKeyDown = (itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void => {\n      if (ev.which === KeyCodes.enter) {\n        ev.preventDefault();\n        updateSelectedItem(itemKey);\n      }\n    };\n\n    const updateSelectedItem = (itemKey: string, ev?: React.MouseEvent<HTMLElement>): void => {\n      setSelectedKey(itemKey);\n      linkCollection = getLinkItems(props, pivotId);\n      if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {\n        const selectedIndex = linkCollection.keyToIndexMapping[itemKey];\n        const item = React.Children.toArray(props.children)[selectedIndex];\n        if (isPivotItem(item)) {\n          props.onLinkClick(item, ev);\n        }\n      }\n\n      overflowMenuButtonComponentRef.current?.dismissMenu();\n    };\n\n    const renderPivotItem = (itemKey: string | undefined, isActive: boolean): JSX.Element | null => {\n      if (props.headersOnly || !itemKey) {\n        return null;\n      }\n\n      const index = linkCollection.keyToIndexMapping[itemKey];\n      const selectedTabId = linkCollection.keyToTabIdMapping[itemKey];\n      return (\n        <div\n          role=\"tabpanel\"\n          hidden={!isActive}\n          key={itemKey}\n          aria-hidden={!isActive}\n          aria-labelledby={selectedTabId}\n          className={classNames.itemContainer}\n        >\n          {React.Children.toArray(props.children)[index]}\n        </div>\n      );\n    };\n\n    const isKeyValid = (itemKey: string | null | undefined): boolean => {\n      return itemKey !== undefined && itemKey !== null && linkCollection.keyToIndexMapping[itemKey] !== undefined;\n    };\n\n    const getSelectedKey = () => {\n      if (isKeyValid(selectedKey)) {\n        return selectedKey;\n      }\n      if (linkCollection.links.length) {\n        return linkCollection.links[0].itemKey;\n      }\n      return undefined;\n    };\n\n    classNames = getClassNames(props.styles!, {\n      theme: theme!,\n      linkSize,\n      linkFormat,\n    });\n\n    const renderedSelectedKey = getSelectedKey();\n    const renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;\n\n    const items = linkCollection.links.map(l =>\n      renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link),\n    );\n\n    // The overflow menu starts empty and items[] is updated as the overflow items change\n    const overflowMenuProps: IContextualMenuProps = React.useMemo(\n      () => ({\n        items: [],\n        doNotLayer: true,\n        alignTargetEdge: true,\n        directionalHint: DirectionalHint.bottomRightEdge,\n      }),\n      [],\n    );\n\n    const { menuButtonRef: overflowMenuButtonRef } = useOverflow({\n      onOverflowItemsChanged: (overflowIndex, elements) => {\n        // Set data-is-overflowing on each item\n        elements.forEach(({ ele, isOverflowing }) => (ele.dataset.isOverflowing = `${isOverflowing}`));\n\n        // Update the menu items\n        overflowMenuProps.items = linkCollection.links.slice(overflowIndex).map((link, index) => ({\n          key: link.itemKey || `${overflowIndex + index}`,\n          onRender: () => renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu),\n        }));\n      },\n      rtl: getRTL(theme),\n      pinnedIndex: renderedSelectedIndex,\n    });\n\n    return (\n      <div role=\"toolbar\" {...divProps} ref={ref}>\n        <FocusZone\n          componentRef={focusZoneRef}\n          direction={FocusZoneDirection.horizontal}\n          className={classNames.root}\n          role=\"tablist\"\n        >\n          {items}\n          {overflowBehavior === 'menu' && (\n            <CommandButton\n              className={css(classNames.link, classNames.overflowMenuButton)}\n              elementRef={overflowMenuButtonRef}\n              componentRef={overflowMenuButtonComponentRef}\n              menuProps={overflowMenuProps}\n              menuIconProps={{ iconName: 'More', style: { color: 'inherit' } }}\n            />\n          )}\n        </FocusZone>\n        {renderedSelectedKey &&\n          linkCollection.links.map(\n            link =>\n              (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&\n              renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey),\n          )}\n      </div>\n    );\n  },\n);\nPivotBase.displayName = COMPONENT_NAME;\n"]}

package/lib/components/Pivot/Pivot.d.ts

@@ -1,8 +0,0 @@
-import * as React from 'react';
-import { IPivotProps } from './Pivot.types';
-/**
- * The Pivot control and related tabs pattern are used for navigating frequently accessed,
- * distinct content categories. Pivots allow for navigation between two or more content
- * views and relies on text headers to articulate the different sections of content.
- */
-export declare const Pivot: React.FunctionComponent<IPivotProps>;

package/lib/components/Pivot/Pivot.js

@@ -1,12 +0,0 @@
-import { styled } from '@fluentui/utilities';
-import { PivotBase } from './Pivot.base';
-import { getStyles } from './Pivot.styles';
-/**
- * The Pivot control and related tabs pattern are used for navigating frequently accessed,
- * distinct content categories. Pivots allow for navigation between two or more content
- * views and relies on text headers to articulate the different sections of content.
- */
-export var Pivot = styled(PivotBase, getStyles, undefined, {
-    scope: 'Pivot',
-});
-//# sourceMappingURL=Pivot.js.map

package/lib/components/Pivot/Pivot.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Pivot.js","sourceRoot":"../src/","sources":["components/Pivot/Pivot.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C;;;;GAIG;AACH,MAAM,CAAC,IAAM,KAAK,GAAyC,MAAM,CAC/D,SAAS,EACT,SAAS,EACT,SAAS,EACT;IACE,KAAK,EAAE,OAAO;CACf,CACF,CAAC","sourcesContent":["import * as React from 'react';\nimport { styled } from '@fluentui/utilities';\nimport { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types';\nimport { PivotBase } from './Pivot.base';\nimport { getStyles } from './Pivot.styles';\n\n/**\n * The Pivot control and related tabs pattern are used for navigating frequently accessed,\n * distinct content categories. Pivots allow for navigation between two or more content\n * views and relies on text headers to articulate the different sections of content.\n */\nexport const Pivot: React.FunctionComponent<IPivotProps> = styled<IPivotProps, IPivotStyleProps, IPivotStyles>(\n  PivotBase,\n  getStyles,\n  undefined,\n  {\n    scope: 'Pivot',\n  },\n);\n"]}

package/lib/components/Pivot/Pivot.styles.d.ts

@@ -1,2 +0,0 @@
-import { IPivotStyleProps, IPivotStyles } from './Pivot.types';
-export declare const getStyles: (props: IPivotStyleProps) => IPivotStyles;