@fluentui/react-tabs 1.0.0-beta.99 → 9.0.0-beta.10

package/lib-commonjs/utilities/useOverflow.js

@@ -1,130 +0,0 @@
-"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");
-var observeResize_1 = require("./observeResize");
-/**
- * Track whether any items don't fit within their container, and move them to the overflow menu.
- * Items are moved into the overflow menu from back to front, excluding pinned items.
- *
- * The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it
- * must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:
- * ```ts
- * const overflow = useOverflow(...);
- * ```
- * ```jsx
- * <Container>
- *  <Item /> // Index 0
- *  <Item /> // Index 1
- *  ...
- *  <Button ref={overflow.setMenuButtonRef} /> // Can be any React.Component or HTMLElement
- * </Container>
- * ```
- */
-var useOverflow = function (_a) {
-    var onOverflowItemsChanged = _a.onOverflowItemsChanged, rtl = _a.rtl, pinnedIndex = _a.pinnedIndex;
-    var updateOverflowRef = React.useRef();
-    var containerWidthRef = React.useRef();
-    // Attach a resize observer to the container
-    var containerRef = react_hooks_1.useRefEffect(function (container) {
-        var cleanupObserver = observeResize_1.observeResize(container, function (entries) {
-            containerWidthRef.current = entries ? entries[0].contentRect.width : container.clientWidth;
-            if (updateOverflowRef.current) {
-                updateOverflowRef.current();
-            }
-        });
-        return function () {
-            cleanupObserver();
-            containerWidthRef.current = undefined;
-        };
-    });
-    var menuButtonRef = react_hooks_1.useRefEffect(function (menuButton) {
-        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;
-        if (!container || !menuButton) {
-            return;
-        }
-        // items contains the container's children, excluding the overflow menu button itself
-        var items = [];
-        for (var i = 0; i < container.children.length; i++) {
-            var item = container.children[i];
-            if (item instanceof HTMLElement && item !== menuButton) {
-                items.push(item);
-            }
-        }
-        // Keep track of the minimum width of the container to fit each child index.
-        // This cache is an integral part of the algorithm and not just a performance optimization: it allows us to
-        // recalculate the overflowIndex on subsequent resizes even if some items are already inside the overflow.
-        var minContainerWidth = [];
-        var extraWidth = 0; // The accumulated width of items that don't move into the overflow
-        updateOverflowRef.current = function () {
-            var containerWidth = containerWidthRef.current;
-            if (containerWidth === undefined) {
-                return;
-            }
-            // Iterate the items in reverse order until we find one that fits within the bounds of the container
-            for (var i = items.length - 1; i >= 0; i--) {
-                // Calculate the min container width for this item if we haven't done so yet
-                if (minContainerWidth[i] === undefined) {
-                    var itemOffsetEnd = rtl ? containerWidth - items[i].offsetLeft : items[i].offsetLeft + items[i].offsetWidth;
-                    // If the item after this one is pinned, reserve space for it
-                    if (i + 1 < items.length && i + 1 === pinnedIndex) {
-                        // Use distance between the end of the previous item and this one (rather than the
-                        // pinned item's offsetWidth), to account for any margin between the items.
-                        extraWidth = minContainerWidth[i + 1] - itemOffsetEnd;
-                    }
-                    // Reserve space for the menu button after the first item was added to the overflow
-                    if (i === items.length - 2) {
-                        extraWidth += menuButton.offsetWidth;
-                    }
-                    minContainerWidth[i] = itemOffsetEnd + extraWidth;
-                }
-                if (containerWidth > minContainerWidth[i]) {
-                    setOverflowIndex(i + 1);
-                    return;
-                }
-            }
-            // If we got here, nothing fits outside the overflow
-            setOverflowIndex(0);
-        };
-        var prevOverflowIndex = items.length;
-        var setOverflowIndex = function (overflowIndex) {
-            if (prevOverflowIndex !== overflowIndex) {
-                prevOverflowIndex = overflowIndex;
-                onOverflowItemsChanged(overflowIndex, items.map(function (ele, index) { return ({
-                    ele: ele,
-                    isOverflowing: index >= overflowIndex && index !== pinnedIndex,
-                }); }));
-            }
-        };
-        var cancelAnimationFrame = undefined;
-        // If the container width is already known from a previous render, update the overflow with its width.
-        // Do this in an animation frame to avoid forcing layout to happen early.
-        if (containerWidthRef.current !== undefined) {
-            var win_1 = utilities_1.getWindow(container);
-            if (win_1) {
-                var animationFrameId_1 = win_1.requestAnimationFrame(updateOverflowRef.current);
-                cancelAnimationFrame = function () { return win_1.cancelAnimationFrame(animationFrameId_1); };
-            }
-        }
-        return function () {
-            if (cancelAnimationFrame) {
-                cancelAnimationFrame();
-            }
-            // On cleanup, need to remove all items from the overflow
-            // so they don't have stale properties on the next render
-            setOverflowIndex(items.length);
-            updateOverflowRef.current = undefined;
-        };
-    });
-    return { menuButtonRef: menuButtonRef };
-};
-exports.useOverflow = useOverflow;
-//# sourceMappingURL=useOverflow.js.map

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

@@ -1 +0,0 @@
-{"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  // 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/src/components/Tabs/TabItem.types.ts

@@ -1,69 +0,0 @@
-import * as React from 'react';
-import { IKeytipProps } from '@fluentui/react';
-import { IButtonProps } from '@fluentui/react/lib/Button';
-import { IRefObject, IRenderFunction } from '@fluentui/utilities';
-
-/**
- * {@docCategory Tabs}
- */
-export interface TabItemProps extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Gets the component ref.
-   */
-  componentRef?: IRefObject<{}>;
-
-  /**
-   * The text displayed of each tab.
-   */
-  headerText?: string;
-
-  /**
-   * Props for the header command button. This provides a way to pass in native props, such as data-* and aria-*,
-   * for each tab element.
-   */
-  headerButtonProps?: IButtonProps | { [key: string]: string | number | boolean };
-
-  /**
-   * An required key to uniquely identify a tab item.
-   *
-   * Note: The 'key' from react props cannot be used inside component.
-   */
-  itemKey?: string;
-
-  /**
-   * The aria label of each tab which will read by screen reader instead of headerText.
-   *
-   * Note that unless you have compelling requirements you should not override aria-label.
-   */
-  ariaLabel?: string;
-
-  /**
-   * Defines an optional item count displayed in parentheses just after the `headerText`.
-   *
-   * Examples: completed (4), Unread (99+)
-   */
-  itemCount?: number | string;
-
-  /**
-   * An optional icon to show next to the tab.
-   */
-  itemIcon?: string;
-
-  /**
-   * Optional custom renderer for the tab
-   */
-  onRenderTab?: IRenderFunction<TabItemProps>;
-
-  /**
-   * Optional keytip for this TabItem
-   */
-  keytipProps?: IKeytipProps;
-
-  /**
-   * Defines whether to always render the tab item (regardless of whether it is selected or not).
-   * Useful if you're rendering content that is expensive to mount.
-   *
-   * @defaultvalue false
-   */
-  alwaysRender?: boolean;
-}

package/src/components/Tabs/Tabs.types.ts

@@ -1,131 +0,0 @@
-import * as React from 'react';
-import { IStyle, ITheme } from '@fluentui/style-utilities';
-import { IStyleFunctionOrObject } from '@fluentui/utilities';
-import { TabItem } from './TabItem';
-
-/**
- * {@docCategory Tabs}
- */
-export interface TabsImperativeHandle {
-  /**
-   * Sets focus to the first tab.
-   */
-  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
-   * the public methods and properties of the component.
-   */
-  componentRef?: React.RefObject<TabsImperativeHandle>;
-
-  /**
-   * Call to provide customized styling that will layer on top of the variant rules.
-   */
-  styles?: IStyleFunctionOrObject<TabsStyleProps, TabsStyles>;
-
-  /**
-   * Theme provided by High-Order Component.
-   */
-  theme?: ITheme;
-
-  /**
-   * Additional css class to apply to the Tabs
-   * @defaultvalue undefined
-   */
-  className?: string;
-
-  /**
-   * Default selected TabItem key. Only provide this if the Tabs is an uncontrolled component;
-   * otherwise, use the `selectedKey` property.
-   */
-  defaultSelectedKey?: string;
-
-  /**
-   * Key of the selected tab item. Updating this will override the selected tab state.
-   * Only provide this if the Tabs is a controlled component where you are maintaining the
-   * current state; otherwise, use `defaultSelectedKey`.
-   */
-  selectedKey?: string | null;
-
-  /**
-   * Callback for when the selected tab item is changed.
-   */
-  onTabClick?: (item?: TabItem, ev?: React.MouseEvent<HTMLElement>) => void;
-
-  /**
-   * Tab size (normal, large)
-   */
-  tabSize?: TabSizeType;
-
-  /**
-   * Tab format (links, tabs)
-   */
-  tabFormat?: TabFormatType;
-
-  /**
-   * Overflow behavior when there is not enough room to display all of the tabs
-   * * none: Tabs will overflow the container and may not be visible
-   * * menu: Display an overflow menu that contains the tabs that don't fit
-   *
-   * @default none
-   */
-  overflowBehavior?: 'none' | 'menu';
-
-  /**
-   * Whether to skip rendering the tabpanel with the content of the selected tab.
-   * Use this prop if you plan to separately render the tab content
-   * and don't want to leave an empty tabpanel in the page that may confuse Screen Readers.
-   */
-  headersOnly?: boolean;
-
-  /**
-   * Callback to customize how IDs are generated for each tab header.
-   * Useful if you're rendering content outside and need to connect aria-labelledby.
-   */
-  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.
-   */
-  root: IStyle;
-  tab: IStyle;
-  tabIsSelected: IStyle;
-  tabContent: IStyle;
-  text: IStyle;
-  count: IStyle;
-  icon: IStyle;
-  tabInMenu: IStyle;
-  overflowMenuButton: IStyle;
-  itemContainer?: IStyle;
-}
-
-/**
- * {@docCategory Tabs}
- * Display mode for the tabs
- */
-export type TabFormatType = 'links' | 'tabs';
-
-/**
- * {@docCategory Tabs}
- * Size of the tabs
- */
-export type TabSizeType = 'normal' | 'large';