@fluentui/react-overflow 0.0.0-nightly-20220511-0419.1

package/lib/types.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import { OverflowContextValue } from './overflowContext';
+export interface UseOverflowContainerReturn<TElement extends HTMLElement> {
+    /**
+     * Ref to apply to the container that will overflow
+     */
+    containerRef: React.RefObject<TElement>;
+    /**
+     * Registers and overflow item
+     */
+    registerItem: OverflowContextValue['registerItem'];
+    /**
+     * Imperative function to trigger overflow update
+     */
+    updateOverflow: OverflowContextValue['updateOverflow'];
+}

package/lib/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement> {\n  /**\n   * Ref to apply to the container that will overflow\n   */\n  containerRef: React.RefObject<TElement>;\n  /**\n   * Registers and overflow item\n   */\n  registerItem: OverflowContextValue['registerItem'];\n  /**\n   * Imperative function to trigger overflow update\n   */\n  updateOverflow: OverflowContextValue['updateOverflow'];\n}\n"]}

package/lib/useIsOverflowGroupVisible.d.ts

@@ -0,0 +1,6 @@
+import { OverflowGroupState } from '@fluentui/priority-overflow';
+/**
+ * @param id - unique identifier for a group of overflow items
+ * @returns visibility state of the group
+ */
+export declare function useIsOverflowGroupVisible(id: string): OverflowGroupState;

package/lib/useIsOverflowGroupVisible.js

@@ -0,0 +1,10 @@
+import { useOverflowContext } from './overflowContext';
+/**
+ * @param id - unique identifier for a group of overflow items
+ * @returns visibility state of the group
+ */
+
+export function useIsOverflowGroupVisible(id) {
+  return useOverflowContext(ctx => ctx.groupVisibility[id]);
+}
+//# sourceMappingURL=useIsOverflowGroupVisible.js.map

package/lib/useIsOverflowGroupVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":"AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,yBAAV,CAAoC,EAApC,EAA8C;AAClD,SAAO,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAAR,CAAzB;AACD","sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n  return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"sourceRoot":"../src/"}

package/lib/useIsOverflowItemVisible.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @param id - unique identifier for the item used by the overflow manager
+ * @returns visibility state of an overflow item
+ */
+export declare function useIsOverflowItemVisible(id: string): boolean;

package/lib/useIsOverflowItemVisible.js

@@ -0,0 +1,10 @@
+import { useOverflowContext } from './overflowContext';
+/**
+ * @param id - unique identifier for the item used by the overflow manager
+ * @returns visibility state of an overflow item
+ */
+
+export function useIsOverflowItemVisible(id) {
+  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);
+}
+//# sourceMappingURL=useIsOverflowItemVisible.js.map

package/lib/useIsOverflowItemVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;AAGG;;AACH,OAAM,SAAU,wBAAV,CAAmC,EAAnC,EAA6C;AACjD,SAAO,CAAC,CAAC,kBAAkB,CAAC,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAAR,CAA3B;AACD","sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n  return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"sourceRoot":"../src/"}

package/lib/useOverflowContainer.d.ts

@@ -0,0 +1,10 @@
+import type { OnUpdateItemVisibility, OnUpdateOverflow, ObserveOptions } from '@fluentui/priority-overflow';
+import { UseOverflowContainerReturn } from './types';
+/**
+ *
+ * @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
+ */
+export declare const useOverflowContainer: <TElement extends HTMLElement>(update: OnUpdateOverflow, options: Omit<ObserveOptions, 'onUpdateOverflow'>) => UseOverflowContainerReturn<TElement>;
+export declare const updateVisibilityAttribute: OnUpdateItemVisibility;

package/lib/useOverflowContainer.js

@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { createOverflowManager } from '@fluentui/priority-overflow';
+import { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';
+/**
+ *
+ * @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
+ */
+
+export const useOverflowContainer = (update, options) => {
+  const {
+    overflowAxis,
+    overflowDirection,
+    padding,
+    minimumVisible,
+    onUpdateItemVisibility
+  } = options; // DOM ref to the overflow container element
+
+  const containerRef = React.useRef(null);
+  const updateOverflowItems = useEventCallback(update);
+  const [overflowManager] = React.useState(() => createOverflowManager());
+  useIsomorphicLayoutEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+
+    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 : () => undefined,
+      onUpdateOverflow: updateOverflowItems !== null && updateOverflowItems !== void 0 ? updateOverflowItems : () => undefined
+    });
+    return () => {
+      overflowManager.disconnect();
+    };
+  }, [updateOverflowItems, overflowManager, overflowDirection, overflowAxis, padding, minimumVisible, onUpdateItemVisibility]);
+  const registerItem = React.useCallback(item => {
+    overflowManager.addItem(item);
+    item.element.setAttribute(DATA_OVERFLOW_ITEM, '');
+    return () => {
+      item.element.removeAttribute(DATA_OVERFLOWING);
+      item.element.removeAttribute(DATA_OVERFLOW_ITEM);
+      overflowManager.removeItem(item.id);
+    };
+  }, [overflowManager]);
+  const updateOverflow = React.useCallback(() => {
+    overflowManager.update();
+  }, [overflowManager]);
+  return {
+    containerRef,
+    registerItem,
+    updateOverflow
+  };
+};
+export const updateVisibilityAttribute = ({
+  item,
+  visible
+}) => {
+  if (visible) {
+    item.element.removeAttribute(DATA_OVERFLOWING);
+  } else {
+    item.element.setAttribute(DATA_OVERFLOWING, '');
+  }
+};
+//# sourceMappingURL=useOverflowContainer.js.map

package/lib/useOverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\nimport type {\n  OnUpdateItemVisibility,\n  OnUpdateOverflow,\n  OverflowItemEntry,\n  OverflowManager,\n  ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';\n\n/**\n *\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  // DOM ref to the overflow container element\n  const containerRef = React.useRef<TElement>(null);\n  const updateOverflowItems = useEventCallback(update);\n  const [overflowManager] = React.useState<OverflowManager>(() => createOverflowManager());\n\n  useIsomorphicLayoutEffect(() => {\n    if (!containerRef.current) {\n      return;\n    }\n\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    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  return {\n    containerRef,\n    registerItem,\n    updateOverflow,\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"],"sourceRoot":"../src/"}

package/lib/useOverflowCount.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @returns Number of items that are overflowing
+ */
+export declare const useOverflowCount: () => number;

package/lib/useOverflowCount.js

@@ -0,0 +1,15 @@
+import { useOverflowContext } from './overflowContext';
+/**
+ * @returns Number of items that are overflowing
+ */
+
+export const useOverflowCount = () => useOverflowContext(v => {
+  return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {
+    if (!visible) {
+      acc++;
+    }
+
+    return acc;
+  }, 0);
+});
+//# sourceMappingURL=useOverflowCount.js.map

package/lib/useOverflowCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":"AAAA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;AAEG;;AACH,OAAO,MAAM,gBAAgB,GAAG,MAC9B,kBAAkB,CAAC,CAAC,IAAG;AACrB,SAAO,MAAM,CAAC,OAAP,CAAe,CAAC,CAAC,cAAjB,EAAiC,MAAjC,CAAwC,CAAC,GAAD,EAAM,CAAC,EAAD,EAAK,OAAL,CAAN,KAAuB;AACpE,QAAI,CAAC,OAAL,EAAc;AACZ,MAAA,GAAG;AACJ;;AAED,WAAO,GAAP;AACD,GANM,EAMJ,CANI,CAAP;AAOD,CARiB,CADb","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"],"sourceRoot":"../src/"}

package/lib/useOverflowItem.d.ts

@@ -0,0 +1,9 @@
+import * as React from 'react';
+/**
+ * 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
+ */
+export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string): React.RefObject<TElement>;

package/lib/useOverflowItem.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useOverflowContext } from './overflowContext';
+/**
+ * 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
+ */
+
+export function useOverflowItem(id, priority, groupId) {
+  const ref = React.useRef(null);
+  const registerItem = useOverflowContext(v => v.registerItem);
+  useIsomorphicLayoutEffect(() => {
+    if (ref.current) {
+      return registerItem({
+        element: ref.current,
+        id,
+        priority: priority !== null && priority !== void 0 ? priority : 0,
+        groupId
+      });
+    }
+  }, [id, priority, registerItem, groupId]);
+  return ref;
+}
+//# sourceMappingURL=useOverflowItem.js.map

package/lib/useOverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;AAMG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;AAC3G,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;AAEA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,QAAI,GAAG,CAAC,OAAR,EAAiB;AACf,aAAO,YAAY,CAAC;AAClB,QAAA,OAAO,EAAE,GAAG,CAAC,OADK;AAElB,QAAA,EAFkB;AAGlB,QAAA,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;AAIlB,QAAA;AAJkB,OAAD,CAAnB;AAMD;AACF,GATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;AAWA,SAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\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"],"sourceRoot":"../src/"}

package/lib/useOverflowMenu.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
+    ref: React.RefObject<TElement>;
+    overflowCount: number;
+    isOverflowing: boolean;
+};

package/lib/useOverflowMenu.js

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
+import { useOverflowContext } from './overflowContext';
+import { useOverflowCount } from './useOverflowCount';
+import { DATA_OVERFLOW_MENU } from './constants';
+export function useOverflowMenu(id) {
+  const elementId = useId('overflow-menu', id);
+  const overflowCount = useOverflowCount();
+  const registerItem = useOverflowContext(v => v.registerItem);
+  const updateOverflow = useOverflowContext(v => v.updateOverflow);
+  const ref = React.useRef(null);
+  const isOverflowing = overflowCount > 0;
+  useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+
+    if (element) {
+      const deregisterItem = registerItem({
+        element,
+        id: elementId,
+        priority: Infinity
+      });
+      element.setAttribute(DATA_OVERFLOW_MENU, '');
+      return () => {
+        deregisterItem();
+        element === null || element === void 0 ? void 0 : element.removeAttribute(DATA_OVERFLOW_MENU);
+      };
+    }
+  }, [registerItem, isOverflowing, elementId]);
+  useIsomorphicLayoutEffect(() => {
+    if (isOverflowing) {
+      updateOverflow();
+    }
+  }, [isOverflowing, updateOverflow, ref]);
+  return {
+    ref,
+    overflowCount,
+    isOverflowing
+  };
+}
+//# sourceMappingURL=useOverflowMenu.js.map

package/lib/useOverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,KAAT,EAAgB,yBAAhB,QAAiD,2BAAjD;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AACA,SAAS,gBAAT,QAAiC,oBAAjC;AACA,SAAS,kBAAT,QAAmC,aAAnC;AAEA,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAmE;AACvE,QAAM,SAAS,GAAG,KAAK,CAAC,eAAD,EAAkB,EAAlB,CAAvB;AACA,QAAM,aAAa,GAAG,gBAAgB,EAAtC;AACA,QAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;AACA,QAAM,cAAc,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,cAAR,CAAzC;AACA,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;AAEA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,UAAM,OAAO,GAAG,GAAG,CAAC,OAApB;;AACA,QAAI,OAAJ,EAAa;AACX,YAAM,cAAc,GAAG,YAAY,CAAC;AAClC,QAAA,OADkC;AAElC,QAAA,EAAE,EAAE,SAF8B;AAGlC,QAAA,QAAQ,EAAE;AAHwB,OAAD,CAAnC;AAKA,MAAA,OAAO,CAAC,YAAR,CAAqB,kBAArB,EAAyC,EAAzC;AAEA,aAAO,MAAK;AACV,QAAA,cAAc;AACd,QAAA,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAO,KAAA,CAAP,GAAA,OAAO,CAAE,eAAT,CAAyB,kBAAzB,CAAA;AACD,OAHD;AAID;AACF,GAfwB,EAetB,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfsB,CAAzB;AAiBA,EAAA,yBAAyB,CAAC,MAAK;AAC7B,QAAI,aAAJ,EAAmB;AACjB,MAAA,cAAc;AACf;AACF,GAJwB,EAItB,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJsB,CAAzB;AAMA,SAAO;AAAE,IAAA,GAAF;AAAO,IAAA,aAAP;AAAsB,IAAA;AAAtB,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\nimport { DATA_OVERFLOW_MENU } from './constants';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(id?: string) {\n  const elementId = useId('overflow-menu', id);\n  const overflowCount = useOverflowCount();\n  const registerItem = useOverflowContext(v => v.registerItem);\n  const updateOverflow = useOverflowContext(v => v.updateOverflow);\n  const ref = React.useRef<TElement>(null);\n  const isOverflowing = overflowCount > 0;\n\n  useIsomorphicLayoutEffect(() => {\n    const element = ref.current;\n    if (element) {\n      const deregisterItem = registerItem({\n        element,\n        id: elementId,\n        priority: Infinity,\n      });\n      element.setAttribute(DATA_OVERFLOW_MENU, '');\n\n      return () => {\n        deregisterItem();\n        element?.removeAttribute(DATA_OVERFLOW_MENU);\n      };\n    }\n  }, [registerItem, isOverflowing, elementId]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (isOverflowing) {\n      updateOverflow();\n    }\n  }, [isOverflowing, updateOverflow, ref]);\n\n  return { ref, overflowCount, isOverflowing };\n}\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/Overflow.d.ts

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import type { ObserveOptions } from '@fluentui/priority-overflow';
+/**
+ * Overflow Props
+ */
+export declare type OverflowProps = Partial<Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>> & {
+    children: React.ReactElement;
+};
+/**
+ * Provides an OverflowContext for OverflowItem descendants.
+ */
+export declare const Overflow: React.ForwardRefExoticComponent<Partial<Pick<ObserveOptions, "padding" | "overflowDirection" | "overflowAxis" | "minimumVisible">> & {
+    children: React.ReactElement;
+} & React.RefAttributes<unknown>>;

package/lib-commonjs/components/Overflow.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Overflow = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_1 = /*#__PURE__*/require("@griffel/react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const overflowContext_1 = /*#__PURE__*/require("../overflowContext");
+
+const useOverflowContainer_1 = /*#__PURE__*/require("../useOverflowContainer");
+
+const constants_1 = /*#__PURE__*/require("../constants");
+
+const useStyles = /*#__PURE__*/react_1.__styles({
+  "overflowMenu": {
+    "Brvla84": "fyfkpbf"
+  },
+  "overflowingItems": {
+    "Hevnzl": "ftz08xh"
+  }
+}, {
+  "d": [".fyfkpbf [data-overflow-menu]{-webkit-flex-shrink:0;-ms-flex-negative:0;flex-shrink:0;}", ".ftz08xh>[data-overflowing]{display:none;}"]
+});
+/**
+ * Provides an OverflowContext for OverflowItem descendants.
+ */
+
+
+exports.Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const styles = useStyles();
+  const {
+    children,
+    minimumVisible,
+    overflowAxis = 'horizontal',
+    overflowDirection,
+    padding
+  } = props;
+  const [hasOverflow, setHasOverflow] = React.useState(false);
+  const [itemVisibility, setItemVisibility] = React.useState({});
+  const [groupVisibility, setGroupVisibility] = React.useState({}); // useOverflowContainer wraps this method in a useEventCallback.
+  // TODO: Do we need a useEventCallback here too?
+
+  const update = data => {
+    setHasOverflow(() => data.invisibleItems.length > 0);
+    setItemVisibility(() => {
+      const newState = {};
+      data.visibleItems.forEach(x => newState[x.id] = true);
+      data.invisibleItems.forEach(x => newState[x.id] = false);
+      return newState;
+    });
+    setGroupVisibility(data.groupVisibility);
+  };
+
+  const {
+    containerRef,
+    registerItem,
+    updateOverflow
+  } = useOverflowContainer_1.useOverflowContainer(update, {
+    overflowDirection,
+    overflowAxis,
+    padding,
+    minimumVisible,
+    onUpdateItemVisibility: useOverflowContainer_1.updateVisibilityAttribute
+  });
+  const clonedChild = react_utilities_1.applyTriggerPropsToChildren(children, {
+    ref: react_utilities_1.useMergedRefs(containerRef, ref),
+    className: react_1.mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
+  });
+  return React.createElement(overflowContext_1.OverflowContext.Provider, {
+    value: {
+      itemVisibility,
+      groupVisibility,
+      hasOverflow,
+      registerItem,
+      updateOverflow
+    }
+  }, clonedChild);
+});
+//# sourceMappingURL=Overflow.js.map

package/lib-commonjs/components/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,OAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,iBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,sBAAA,gBAAA,OAAA,CAAA,yBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,cAAA,CAAA;;AAEA,MAAM,SAAS,gBAAG,OAAA,SAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACU,OAAA,CAAA,QAAA,gBAAW,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAAuB,GAAvB,KAA8B;AACrE,QAAM,MAAM,GAAG,SAAS,EAAxB;AAEA,QAAM;AAAE,IAAA,QAAF;AAAY,IAAA,cAAZ;AAA4B,IAAA,YAAY,GAAG,YAA3C;AAAyD,IAAA,iBAAzD;AAA4E,IAAA;AAA5E,MAAwF,KAA9F;AAEA,QAAM,CAAC,WAAD,EAAc,cAAd,IAAgC,KAAK,CAAC,QAAN,CAAe,KAAf,CAAtC;AACA,QAAM,CAAC,cAAD,EAAiB,iBAAjB,IAAsC,KAAK,CAAC,QAAN,CAAwC,EAAxC,CAA5C;AACA,QAAM,CAAC,eAAD,EAAkB,kBAAlB,IAAwC,KAAK,CAAC,QAAN,CAAmD,EAAnD,CAA9C,CAPqE,CASrE;AACA;;AACA,QAAM,MAAM,GAAqB,IAAI,IAAG;AACtC,IAAA,cAAc,CAAC,MAAM,IAAI,CAAC,cAAL,CAAoB,MAApB,GAA6B,CAApC,CAAd;AACA,IAAA,iBAAiB,CAAC,MAAK;AACrB,YAAM,QAAQ,GAA4B,EAA1C;AACA,MAAA,IAAI,CAAC,YAAL,CAAkB,OAAlB,CAA0B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,IAAjD;AACA,MAAA,IAAI,CAAC,cAAL,CAAoB,OAApB,CAA4B,CAAC,IAAK,QAAQ,CAAC,CAAC,CAAC,EAAH,CAAR,GAAiB,KAAnD;AACA,aAAO,QAAP;AACD,KALgB,CAAjB;AAMA,IAAA,kBAAkB,CAAC,IAAI,CAAC,eAAN,CAAlB;AACD,GATD;;AAWA,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,YAAhB;AAA8B,IAAA;AAA9B,MAAiD,sBAAA,CAAA,oBAAA,CAAqB,MAArB,EAA6B;AAClF,IAAA,iBADkF;AAElF,IAAA,YAFkF;AAGlF,IAAA,OAHkF;AAIlF,IAAA,cAJkF;AAKlF,IAAA,sBAAsB,EAAE,sBAAA,CAAA;AAL0D,GAA7B,CAAvD;AAQA,QAAM,WAAW,GAAG,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;AACxD,IAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B,CADmD;AAExD,IAAA,SAAS,EAAE,OAAA,CAAA,YAAA,CAAa,MAAM,CAAC,YAApB,EAAkC,MAAM,CAAC,gBAAzC,EAA2D,QAAQ,CAAC,KAAT,CAAe,SAA1E;AAF6C,GAAtC,CAApB;AAKA,SACE,KAAA,CAAA,aAAA,CAAC,iBAAA,CAAA,eAAA,CAAgB,QAAjB,EAAyB;AACvB,IAAA,KAAK,EAAE;AACL,MAAA,cADK;AAEL,MAAA,eAFK;AAGL,MAAA,WAHK;AAIL,MAAA,YAJK;AAKL,MAAA;AALK;AADgB,GAAzB,EASG,WATH,CADF;AAaD,CAhDuB,CAAX","sourcesContent":["import * as React from 'react';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\n\nconst useStyles = makeStyles({\n  overflowMenu: {\n    [`& [${DATA_OVERFLOW_MENU}]`]: {\n      flexShrink: 0,\n    },\n  },\n\n  overflowingItems: {\n    [`& > [${DATA_OVERFLOWING}]`]: {\n      display: 'none',\n    },\n  },\n});\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n  Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n  children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n  const styles = useStyles();\n\n  const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n  const [hasOverflow, setHasOverflow] = React.useState(false);\n  const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n  const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n  // useOverflowContainer wraps this method in a useEventCallback.\n  // TODO: Do we need a useEventCallback here too?\n  const update: OnUpdateOverflow = data => {\n    setHasOverflow(() => data.invisibleItems.length > 0);\n    setItemVisibility(() => {\n      const newState: Record<string, boolean> = {};\n      data.visibleItems.forEach(x => (newState[x.id] = true));\n      data.invisibleItems.forEach(x => (newState[x.id] = false));\n      return newState;\n    });\n    setGroupVisibility(data.groupVisibility);\n  };\n\n  const { containerRef, registerItem, updateOverflow } = useOverflowContainer(update, {\n    overflowDirection,\n    overflowAxis,\n    padding,\n    minimumVisible,\n    onUpdateItemVisibility: updateVisibilityAttribute,\n  });\n\n  const clonedChild = applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n  });\n\n  return (\n    <OverflowContext.Provider\n      value={{\n        itemVisibility,\n        groupVisibility,\n        hasOverflow,\n        registerItem,\n        updateOverflow,\n      }}\n    >\n      {clonedChild}\n    </OverflowContext.Provider>\n  );\n});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/OverflowItem/OverflowItem.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { OverflowItemProps } from './OverflowItem.types';
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ */
+export declare const OverflowItem: React.ForwardRefExoticComponent<OverflowItemProps & React.RefAttributes<unknown>>;

package/lib-commonjs/components/OverflowItem/OverflowItem.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowItem = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const useOverflowItem_1 = /*#__PURE__*/require("../../useOverflowItem");
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ */
+
+
+exports.OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    id,
+    groupId,
+    priority,
+    children
+  } = props;
+  const containerRef = useOverflowItem_1.useOverflowItem(id, priority, groupId);
+  return react_utilities_1.applyTriggerPropsToChildren(children, {
+    ref: react_utilities_1.useMergedRefs(containerRef, ref)
+  });
+});
+//# sourceMappingURL=OverflowItem.js.map

package/lib-commonjs/components/OverflowItem/OverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;AAGA;;;AAGG;;;AACU,OAAA,CAAA,YAAA,gBAAe,KAAK,CAAC,UAAN,CAAiB,CAAC,KAAD,EAA2B,GAA3B,KAAkC;AAC7E,QAAM;AAAE,IAAA,EAAF;AAAM,IAAA,OAAN;AAAe,IAAA,QAAf;AAAyB,IAAA;AAAzB,MAAsC,KAA5C;AAEA,QAAM,YAAY,GAAG,iBAAA,CAAA,eAAA,CAAgB,EAAhB,EAAoB,QAApB,EAA8B,OAA9B,CAArB;AACA,SAAO,iBAAA,CAAA,2BAAA,CAA4B,QAA5B,EAAsC;AAC3C,IAAA,GAAG,EAAE,iBAAA,CAAA,aAAA,CAAc,YAAd,EAA4B,GAA5B;AADsC,GAAtC,CAAP;AAGD,CAP2B,CAAf","sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n  const { id, groupId, priority, children } = props;\n\n  const containerRef = useOverflowItem(id, priority, groupId);\n  return applyTriggerPropsToChildren(children, {\n    ref: useMergedRefs(containerRef, ref),\n  });\n});\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/OverflowItem/OverflowItem.types.d.ts

@@ -0,0 +1,22 @@
+import * as React from 'react';
+/**
+ * OverflowItemProps
+ */
+export declare type OverflowItemProps = {
+    /**
+     * The unique identifier for the item used by the overflow manager.
+     */
+    id: string;
+    /**
+     * Assigns the item to a group, group visibility can be watched.
+     */
+    groupId?: string;
+    /**
+     * A higher priority means the item overflows later.
+     */
+    priority?: number;
+    /**
+     * The single child that has overflow item behavior attached.
+     */
+    children: React.ReactElement;
+};

package/lib-commonjs/components/OverflowItem/OverflowItem.types.js

@@ -0,0 +1,6 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+//# sourceMappingURL=OverflowItem.types.js.map

package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","sourceRoot":"../src/"}

package/lib-commonjs/components/OverflowItem/index.d.ts

@@ -0,0 +1,2 @@
+export type { OverflowItemProps } from './OverflowItem.types';
+export { OverflowItem } from './OverflowItem';

package/lib-commonjs/components/OverflowItem/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowItem = void 0;
+
+var OverflowItem_1 = /*#__PURE__*/require("./OverflowItem");
+
+Object.defineProperty(exports, "OverflowItem", {
+  enumerable: true,
+  get: function () {
+    return OverflowItem_1.OverflowItem;
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/components/OverflowItem/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/OverflowItem/index.ts"],"names":[],"mappings":";;;;;;;AACA,IAAA,cAAA,gBAAA,OAAA,CAAA,gBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;AAAA,EAAA,UAAA,EAAA,IAAA;AAAA,EAAA,GAAA,EAAA,YAAA;AAAA,WAAA,cAAA,CAAA,YAAA;AAAY;AAAZ,CAAA","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const DATA_OVERFLOWING = "data-overflowing";
+export declare const DATA_OVERFLOW_ITEM = "data-overflow-item";
+export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";

package/lib-commonjs/constants.js

@@ -0,0 +1,10 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = void 0;
+exports.DATA_OVERFLOWING = 'data-overflowing';
+exports.DATA_OVERFLOW_ITEM = 'data-overflow-item';
+exports.DATA_OVERFLOW_MENU = 'data-overflow-menu';
+//# sourceMappingURL=constants.js.map

package/lib-commonjs/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["constants.ts"],"names":[],"mappings":";;;;;;AAAa,OAAA,CAAA,gBAAA,GAAmB,kBAAnB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB;AACA,OAAA,CAAA,kBAAA,GAAqB,oBAArB","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/index.d.ts

@@ -0,0 +1,12 @@
+export { Overflow } from './components/Overflow';
+export type { OverflowProps } from './components/Overflow';
+export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
+export type { UseOverflowContainerReturn } from './types';
+export { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';
+export { useIsOverflowItemVisible } from './useIsOverflowItemVisible';
+export { updateVisibilityAttribute, useOverflowContainer } from './useOverflowContainer';
+export { useOverflowCount } from './useOverflowCount';
+export { useOverflowItem } from './useOverflowItem';
+export { useOverflowMenu } from './useOverflowMenu';
+export type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';
+export { OverflowItem } from './components/OverflowItem/OverflowItem';