@fluentui/react-overflow 9.0.11 → 9.0.13

package/lib-amd/useOverflowContainer.js

@@ -1,84 +0,0 @@
-define(["require", "exports", "react", "@fluentui/priority-overflow", "@fluentui/react-utilities", "./constants"], function (require, exports, React, priority_overflow_1, react_utilities_1, constants_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
-    /**
-     * @internal
-     * @param update - Callback when overflow state changes
-     * @param options - Options to configure the overflow container
-     * @returns - ref to attach to an intrinsic HTML element and imperative functions
-     */
-    var useOverflowContainer = function (update, options) {
-        var overflowAxis = options.overflowAxis, overflowDirection = options.overflowDirection, padding = options.padding, minimumVisible = options.minimumVisible, onUpdateItemVisibility = options.onUpdateItemVisibility;
-        // DOM ref to the overflow container element
-        var containerRef = React.useRef(null);
-        var updateOverflowItems = react_utilities_1.useEventCallback(update);
-        var overflowManager = React.useState(function () {
-            return react_utilities_1.canUseDOM() ? priority_overflow_1.createOverflowManager() : null;
-        })[0];
-        react_utilities_1.useIsomorphicLayoutEffect(function () {
-            if (!containerRef.current) {
-                return;
-            }
-            if (overflowManager) {
-                overflowManager.observe(containerRef.current, {
-                    overflowDirection: overflowDirection !== null && overflowDirection !== void 0 ? overflowDirection : 'end',
-                    overflowAxis: overflowAxis !== null && overflowAxis !== void 0 ? overflowAxis : 'horizontal',
-                    padding: padding !== null && padding !== void 0 ? padding : 10,
-                    minimumVisible: minimumVisible !== null && minimumVisible !== void 0 ? minimumVisible : 0,
-                    onUpdateItemVisibility: onUpdateItemVisibility !== null && onUpdateItemVisibility !== void 0 ? onUpdateItemVisibility : (function () { return undefined; }),
-                    onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : (function () { return undefined; }),
-                });
-                return function () {
-                    overflowManager.disconnect();
-                };
-            }
-        }, [
-            updateOverflowItems,
-            overflowManager,
-            overflowDirection,
-            overflowAxis,
-            padding,
-            minimumVisible,
-            onUpdateItemVisibility,
-        ]);
-        var registerItem = React.useCallback(function (item) {
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
-            item.element.setAttribute(constants_1.DATA_OVERFLOW_ITEM, '');
-            return function () {
-                item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
-                item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
-                overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
-            };
-        }, [overflowManager]);
-        var updateOverflow = React.useCallback(function () {
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
-        }, [overflowManager]);
-        var registerOverflowMenu = React.useCallback(function (el) {
-            overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
-            el.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
-            return function () {
-                overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
-                el.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
-            };
-        }, [overflowManager]);
-        return {
-            containerRef: containerRef,
-            registerItem: registerItem,
-            updateOverflow: updateOverflow,
-            registerOverflowMenu: registerOverflowMenu,
-        };
-    };
-    exports.useOverflowContainer = useOverflowContainer;
-    var updateVisibilityAttribute = function (_a) {
-        var item = _a.item, visible = _a.visible;
-        if (visible) {
-            item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
-        }
-        else {
-            item.element.setAttribute(constants_1.DATA_OVERFLOWING, '');
-        }
-    };
-    exports.updateVisibilityAttribute = updateVisibilityAttribute;
-});
-//# sourceMappingURL=useOverflowContainer.js.map

package/lib-amd/useOverflowContainer.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverflowContainer.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n  update: OnUpdateOverflow,\n  options: Omit<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n  const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n  const updateOverflowItems = useEventCallback(update);\n\n  const [overflowManager] = React.useState<OverflowManager | null>(() =>\n    canUseDOM() ? createOverflowManager() : null,\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\n    if (overflowManager) {\n      overflowManager.observe(containerRef.current, {\n        overflowDirection: overflowDirection ?? 'end',\n        overflowAxis: overflowAxis ?? 'horizontal',\n        padding: padding ?? 10,\n        minimumVisible: minimumVisible ?? 0,\n        onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n        onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n      });\n\n      return () => {\n        overflowManager.disconnect();\n      };\n    }\n  }, [\n    updateOverflowItems,\n    overflowManager,\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility,\n  ]);\n\n  const registerItem = React.useCallback(\n    (item: OverflowItemEntry) => {\n      overflowManager?.addItem(item);\n      item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n      return () => {\n        item.element.removeAttribute(DATA_OVERFLOWING);\n        item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n        overflowManager?.removeItem(item.id);\n      };\n    },\n    [overflowManager],\n  );\n\n  const updateOverflow = React.useCallback(() => {\n    overflowManager?.update();\n  }, [overflowManager]);\n\n  const registerOverflowMenu = React.useCallback(\n    (el: HTMLElement) => {\n      overflowManager?.addOverflowMenu(el);\n      el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        overflowManager?.removeOverflowMenu();\n        el.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    },\n    [overflowManager],\n  );\n\n  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\n    registerOverflowMenu,\n  };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n  if (visible) {\n    item.element.removeAttribute(DATA_OVERFLOWING);\n  } else {\n    item.element.setAttribute(DATA_OVERFLOWING, '');\n  }\n};\n"]}

package/lib-amd/useOverflowCount.js

@@ -1,21 +0,0 @@
-define(["require", "exports", "./overflowContext"], function (require, exports, overflowContext_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useOverflowCount = void 0;
-    /**
-     * @returns Number of items that are overflowing
-     */
-    var useOverflowCount = function () {
-        return overflowContext_1.useOverflowContext(function (v) {
-            return Object.entries(v.itemVisibility).reduce(function (acc, _a) {
-                var id = _a[0], visible = _a[1];
-                if (!visible) {
-                    acc++;
-                }
-                return acc;
-            }, 0);
-        });
-    };
-    exports.useOverflowCount = useOverflowCount;
-});
-//# sourceMappingURL=useOverflowCount.js.map

package/lib-amd/useOverflowCount.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverflowCount.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowCount.ts"],"names":[],"mappings":";;;;IAEA;;OAEG;IACI,IAAM,gBAAgB,GAAG;QAC9B,OAAA,oCAAkB,CAAC,UAAA,CAAC;YAClB,OAAO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,MAAM,CAAC,UAAC,GAAG,EAAE,EAAa;oBAAZ,EAAE,QAAA,EAAE,OAAO,QAAA;gBAC/D,IAAI,CAAC,OAAO,EAAE;oBACZ,GAAG,EAAE,CAAC;iBACP;gBAED,OAAO,GAAG,CAAC;YACb,CAAC,EAAE,CAAC,CAAC,CAAC;QACR,CAAC,CAAC;IARF,CAQE,CAAC;IATQ,QAAA,gBAAgB,oBASxB","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n  useOverflowContext(v => {\n    return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n      if (!visible) {\n        acc++;\n      }\n\n      return acc;\n    }, 0);\n  });\n"]}

package/lib-amd/useOverflowItem.js

@@ -1,30 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-utilities", "./overflowContext"], function (require, exports, React, react_utilities_1, overflowContext_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useOverflowItem = void 0;
-    /**
-     * @internal
-     * Registers an overflow item
-     * @param id - unique identifier for the item used by the overflow manager
-     * @param priority - higher priority means the item overflows later
-     * @param groupId - assigns the item to a group, group visibility can be watched
-     * @returns ref to assign to an intrinsic HTML element
-     */
-    function useOverflowItem(id, priority, groupId) {
-        var ref = React.useRef(null);
-        var registerItem = overflowContext_1.useOverflowContext(function (v) { return v.registerItem; });
-        react_utilities_1.useIsomorphicLayoutEffect(function () {
-            if (ref.current) {
-                return registerItem({
-                    element: ref.current,
-                    id: id,
-                    priority: priority !== null && priority !== void 0 ? priority : 0,
-                    groupId: groupId,
-                });
-            }
-        }, [id, priority, registerItem, groupId]);
-        return ref;
-    }
-    exports.useOverflowItem = useOverflowItem;
-});
-//# sourceMappingURL=useOverflowItem.js.map

package/lib-amd/useOverflowItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverflowItem.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowItem.ts"],"names":[],"mappings":";;;;IAIA;;;;;;;OAOG;IACH,SAAgB,eAAe,CAA+B,EAAU,EAAE,QAAiB,EAAE,OAAgB;QAC3G,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QACzC,IAAM,YAAY,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,YAAY,EAAd,CAAc,CAAC,CAAC;QAE7D,2CAAyB,CAAC;YACxB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,OAAO,YAAY,CAAC;oBAClB,OAAO,EAAE,GAAG,CAAC,OAAO;oBACpB,EAAE,IAAA;oBACF,QAAQ,EAAE,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,CAAC;oBACvB,OAAO,SAAA;iBACR,CAAC,CAAC;aACJ;QACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,CAAC,CAAC,CAAC;QAE1C,OAAO,GAAG,CAAC;IACb,CAAC;IAhBD,0CAgBC","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n  const ref = React.useRef<TElement>(null);\n  const registerItem = useOverflowContext(v => v.registerItem);\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerItem({\n        element: ref.current,\n        id,\n        priority: priority ?? 0,\n        groupId,\n      });\n    }\n  }, [id, priority, registerItem, groupId]);\n\n  return ref;\n}\n"]}

package/lib-amd/useOverflowMenu.js

@@ -1,26 +0,0 @@
-define(["require", "exports", "react", "@fluentui/react-utilities", "./overflowContext", "./useOverflowCount"], function (require, exports, React, react_utilities_1, overflowContext_1, useOverflowCount_1) {
-    "use strict";
-    Object.defineProperty(exports, "__esModule", { value: true });
-    exports.useOverflowMenu = void 0;
-    function useOverflowMenu(id) {
-        var elementId = react_utilities_1.useId('overflow-menu', id);
-        var overflowCount = useOverflowCount_1.useOverflowCount();
-        var registerOverflowMenu = overflowContext_1.useOverflowContext(function (v) { return v.registerOverflowMenu; });
-        var updateOverflow = overflowContext_1.useOverflowContext(function (v) { return v.updateOverflow; });
-        var ref = React.useRef(null);
-        var isOverflowing = overflowCount > 0;
-        react_utilities_1.useIsomorphicLayoutEffect(function () {
-            if (ref.current) {
-                return registerOverflowMenu(ref.current);
-            }
-        }, [registerOverflowMenu, isOverflowing, elementId]);
-        react_utilities_1.useIsomorphicLayoutEffect(function () {
-            if (isOverflowing) {
-                updateOverflow();
-            }
-        }, [isOverflowing, updateOverflow, ref]);
-        return { ref: ref, overflowCount: overflowCount, isOverflowing: isOverflowing };
-    }
-    exports.useOverflowMenu = useOverflowMenu;
-});
-//# sourceMappingURL=useOverflowMenu.js.map

package/lib-amd/useOverflowMenu.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useOverflowMenu.js","sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowMenu.ts"],"names":[],"mappings":";;;;IAKA,SAAgB,eAAe,CAA+B,EAAW;QACvE,IAAM,SAAS,GAAG,uBAAK,CAAC,eAAe,EAAE,EAAE,CAAC,CAAC;QAC7C,IAAM,aAAa,GAAG,mCAAgB,EAAE,CAAC;QACzC,IAAM,oBAAoB,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,oBAAoB,EAAtB,CAAsB,CAAC,CAAC;QAC7E,IAAM,cAAc,GAAG,oCAAkB,CAAC,UAAA,CAAC,IAAI,OAAA,CAAC,CAAC,cAAc,EAAhB,CAAgB,CAAC,CAAC;QACjE,IAAM,GAAG,GAAG,KAAK,CAAC,MAAM,CAAW,IAAI,CAAC,CAAC;QACzC,IAAM,aAAa,GAAG,aAAa,GAAG,CAAC,CAAC;QAExC,2CAAyB,CAAC;YACxB,IAAI,GAAG,CAAC,OAAO,EAAE;gBACf,OAAO,oBAAoB,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;aAC1C;QACH,CAAC,EAAE,CAAC,oBAAoB,EAAE,aAAa,EAAE,SAAS,CAAC,CAAC,CAAC;QAErD,2CAAyB,CAAC;YACxB,IAAI,aAAa,EAAE;gBACjB,cAAc,EAAE,CAAC;aAClB;QACH,CAAC,EAAE,CAAC,aAAa,EAAE,cAAc,EAAE,GAAG,CAAC,CAAC,CAAC;QAEzC,OAAO,EAAE,GAAG,KAAA,EAAE,aAAa,eAAA,EAAE,aAAa,eAAA,EAAE,CAAC;IAC/C,CAAC;IArBD,0CAqBC","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    if (ref.current) {\n      return registerOverflowMenu(ref.current);\n    }\n  }, [registerOverflowMenu, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"]}