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

package/lib-commonjs/index.js

@@ -0,0 +1,106 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OverflowItem = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.updateVisibilityAttribute = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
+
+var Overflow_1 = /*#__PURE__*/require("./components/Overflow");
+
+Object.defineProperty(exports, "Overflow", {
+  enumerable: true,
+  get: function () {
+    return Overflow_1.Overflow;
+  }
+});
+
+var constants_1 = /*#__PURE__*/require("./constants");
+
+Object.defineProperty(exports, "DATA_OVERFLOWING", {
+  enumerable: true,
+  get: function () {
+    return constants_1.DATA_OVERFLOWING;
+  }
+});
+Object.defineProperty(exports, "DATA_OVERFLOW_ITEM", {
+  enumerable: true,
+  get: function () {
+    return constants_1.DATA_OVERFLOW_ITEM;
+  }
+});
+Object.defineProperty(exports, "DATA_OVERFLOW_MENU", {
+  enumerable: true,
+  get: function () {
+    return constants_1.DATA_OVERFLOW_MENU;
+  }
+});
+
+var useIsOverflowGroupVisible_1 = /*#__PURE__*/require("./useIsOverflowGroupVisible");
+
+Object.defineProperty(exports, "useIsOverflowGroupVisible", {
+  enumerable: true,
+  get: function () {
+    return useIsOverflowGroupVisible_1.useIsOverflowGroupVisible;
+  }
+});
+
+var useIsOverflowItemVisible_1 = /*#__PURE__*/require("./useIsOverflowItemVisible");
+
+Object.defineProperty(exports, "useIsOverflowItemVisible", {
+  enumerable: true,
+  get: function () {
+    return useIsOverflowItemVisible_1.useIsOverflowItemVisible;
+  }
+});
+
+var useOverflowContainer_1 = /*#__PURE__*/require("./useOverflowContainer");
+
+Object.defineProperty(exports, "updateVisibilityAttribute", {
+  enumerable: true,
+  get: function () {
+    return useOverflowContainer_1.updateVisibilityAttribute;
+  }
+});
+Object.defineProperty(exports, "useOverflowContainer", {
+  enumerable: true,
+  get: function () {
+    return useOverflowContainer_1.useOverflowContainer;
+  }
+});
+
+var useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
+
+Object.defineProperty(exports, "useOverflowCount", {
+  enumerable: true,
+  get: function () {
+    return useOverflowCount_1.useOverflowCount;
+  }
+});
+
+var useOverflowItem_1 = /*#__PURE__*/require("./useOverflowItem");
+
+Object.defineProperty(exports, "useOverflowItem", {
+  enumerable: true,
+  get: function () {
+    return useOverflowItem_1.useOverflowItem;
+  }
+});
+
+var useOverflowMenu_1 = /*#__PURE__*/require("./useOverflowMenu");
+
+Object.defineProperty(exports, "useOverflowMenu", {
+  enumerable: true,
+  get: function () {
+    return useOverflowMenu_1.useOverflowMenu;
+  }
+});
+
+var OverflowItem_1 = /*#__PURE__*/require("./components/OverflowItem/OverflowItem");
+
+Object.defineProperty(exports, "OverflowItem", {
+  enumerable: true,
+  get: function () {
+    return OverflowItem_1.OverflowItem;
+  }
+});
+//# sourceMappingURL=index.js.map

package/lib-commonjs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["index.ts"],"names":[],"mappings":"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","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { updateVisibilityAttribute, useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"sourceRoot":"../src/"}

package/lib-commonjs/overflowContext.d.ts

@@ -0,0 +1,11 @@
+import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';
+import { ContextSelector } from '@fluentui/react-context-selector';
+export interface OverflowContextValue {
+    itemVisibility: Record<string, boolean>;
+    groupVisibility: Record<string, OverflowGroupState>;
+    hasOverflow: boolean;
+    registerItem: (item: OverflowItemEntry) => () => void;
+    updateOverflow: (padding?: number) => void;
+}
+export declare const OverflowContext: import("@fluentui/react-context-selector").Context<OverflowContextValue>;
+export declare const useOverflowContext: <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) => SelectedValue;

package/lib-commonjs/overflowContext.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverflowContext = exports.OverflowContext = void 0;
+
+const react_context_selector_1 = /*#__PURE__*/require("@fluentui/react-context-selector");
+
+exports.OverflowContext = /*#__PURE__*/react_context_selector_1.createContext({
+  itemVisibility: {},
+  groupVisibility: {},
+  hasOverflow: false,
+  registerItem: () => () => null,
+  updateOverflow: () => null
+});
+
+const useOverflowContext = selector => react_context_selector_1.useContextSelector(exports.OverflowContext, selector);
+
+exports.useOverflowContext = useOverflowContext;
+//# sourceMappingURL=overflowContext.js.map

package/lib-commonjs/overflowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,wBAAA,gBAAA,OAAA,CAAA,kCAAA,CAAA;;AAUa,OAAA,CAAA,eAAA,gBAAkB,wBAAA,CAAA,aAAA,CAAoC;AACjE,EAAA,cAAc,EAAE,EADiD;AAEjE,EAAA,eAAe,EAAE,EAFgD;AAGjE,EAAA,WAAW,EAAE,KAHoD;AAIjE,EAAA,YAAY,EAAE,MAAM,MAAM,IAJuC;AAKjE,EAAA,cAAc,EAAE,MAAM;AAL2C,CAApC,CAAlB;;AAQN,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,wBAAA,CAAA,kBAAA,CAAmB,OAAA,CAAA,eAAnB,EAAoC,QAApC,CADK;;AAAM,OAAA,CAAA,kBAAA,GAAkB,kBAAlB","sourcesContent":["import type { OverflowGroupState, OverflowItemEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector } from '@fluentui/react-context-selector';\n\nexport interface OverflowContextValue {\n  itemVisibility: Record<string, boolean>;\n  groupVisibility: Record<string, OverflowGroupState>;\n  hasOverflow: boolean;\n  registerItem: (item: OverflowItemEntry) => () => void;\n  updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue>({\n  itemVisibility: {},\n  groupVisibility: {},\n  hasOverflow: false,\n  registerItem: () => () => null,\n  updateOverflow: () => null,\n});\n\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n  useContextSelector(OverflowContext, selector);\n"],"sourceRoot":"../src/"}

package/lib-commonjs/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-commonjs/types.js

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

package/lib-commonjs/types.js.map

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

package/lib-commonjs/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-commonjs/useIsOverflowGroupVisible.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsOverflowGroupVisible = void 0;
+
+const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
+/**
+ * @param id - unique identifier for a group of overflow items
+ * @returns visibility state of the group
+ */
+
+
+function useIsOverflowGroupVisible(id) {
+  return overflowContext_1.useOverflowContext(ctx => ctx.groupVisibility[id]);
+}
+
+exports.useIsOverflowGroupVisible = useIsOverflowGroupVisible;
+//# sourceMappingURL=useIsOverflowGroupVisible.js.map

package/lib-commonjs/useIsOverflowGroupVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useIsOverflowGroupVisible.ts"],"names":[],"mappings":";;;;;;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,yBAAhB,CAA0C,EAA1C,EAAoD;AAClD,SAAO,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,eAAJ,CAAoB,EAApB,CAA1B,CAAP;AACD;;AAFD,OAAA,CAAA,yBAAA,GAAA,yBAAA","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-commonjs/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-commonjs/useIsOverflowItemVisible.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useIsOverflowItemVisible = void 0;
+
+const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
+/**
+ * @param id - unique identifier for the item used by the overflow manager
+ * @returns visibility state of an overflow item
+ */
+
+
+function useIsOverflowItemVisible(id) {
+  return !!overflowContext_1.useOverflowContext(ctx => ctx.itemVisibility[id]);
+}
+
+exports.useIsOverflowItemVisible = useIsOverflowItemVisible;
+//# sourceMappingURL=useIsOverflowItemVisible.js.map

package/lib-commonjs/useIsOverflowItemVisible.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useIsOverflowItemVisible.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;AAGG;;;AACH,SAAgB,wBAAhB,CAAyC,EAAzC,EAAmD;AACjD,SAAO,CAAC,CAAC,iBAAA,CAAA,kBAAA,CAAmB,GAAG,IAAI,GAAG,CAAC,cAAJ,CAAmB,EAAnB,CAA1B,CAAT;AACD;;AAFD,OAAA,CAAA,wBAAA,GAAA,wBAAA","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-commonjs/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-commonjs/useOverflowContainer.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.updateVisibilityAttribute = exports.useOverflowContainer = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const priority_overflow_1 = /*#__PURE__*/require("@fluentui/priority-overflow");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const constants_1 = /*#__PURE__*/require("./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
+ */
+
+
+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 = react_utilities_1.useEventCallback(update);
+  const [overflowManager] = React.useState(() => priority_overflow_1.createOverflowManager());
+  react_utilities_1.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(constants_1.DATA_OVERFLOW_ITEM, '');
+    return () => {
+      item.element.removeAttribute(constants_1.DATA_OVERFLOWING);
+      item.element.removeAttribute(constants_1.DATA_OVERFLOW_ITEM);
+      overflowManager.removeItem(item.id);
+    };
+  }, [overflowManager]);
+  const updateOverflow = React.useCallback(() => {
+    overflowManager.update();
+  }, [overflowManager]);
+  return {
+    containerRef,
+    registerItem,
+    updateOverflow
+  };
+};
+
+exports.useOverflowContainer = useOverflowContainer;
+
+const updateVisibilityAttribute = ({
+  item,
+  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-commonjs/useOverflowContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AASA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AAEA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;AAEA;;;;;AAKG;;;AACI,MAAM,oBAAoB,GAAG,CAClC,MADkC,EAElC,OAFkC,KAGM;AACxC,QAAM;AAAE,IAAA,YAAF;AAAgB,IAAA,iBAAhB;AAAmC,IAAA,OAAnC;AAA4C,IAAA,cAA5C;AAA4D,IAAA;AAA5D,MAAuF,OAA7F,CADwC,CAExC;;AACA,QAAM,YAAY,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAArB;AACA,QAAM,mBAAmB,GAAG,iBAAA,CAAA,gBAAA,CAAiB,MAAjB,CAA5B;AACA,QAAM,CAAC,eAAD,IAAoB,KAAK,CAAC,QAAN,CAAgC,MAAM,mBAAA,CAAA,qBAAA,EAAtC,CAA1B;AAEA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,QAAI,CAAC,YAAY,CAAC,OAAlB,EAA2B;AACzB;AACD;;AAED,IAAA,eAAe,CAAC,OAAhB,CAAwB,YAAY,CAAC,OAArC,EAA8C;AAC5C,MAAA,iBAAiB,EAAE,iBAAiB,KAAA,IAAjB,IAAA,iBAAiB,KAAA,KAAA,CAAjB,GAAA,iBAAA,GAAqB,KADI;AAE5C,MAAA,YAAY,EAAE,YAAY,KAAA,IAAZ,IAAA,YAAY,KAAA,KAAA,CAAZ,GAAA,YAAA,GAAgB,YAFc;AAG5C,MAAA,OAAO,EAAE,OAAO,KAAA,IAAP,IAAA,OAAO,KAAA,KAAA,CAAP,GAAA,OAAA,GAAW,EAHwB;AAI5C,MAAA,cAAc,EAAE,cAAc,KAAA,IAAd,IAAA,cAAc,KAAA,KAAA,CAAd,GAAA,cAAA,GAAkB,CAJU;AAK5C,MAAA,sBAAsB,EAAE,sBAAsB,KAAA,IAAtB,IAAA,sBAAsB,KAAA,KAAA,CAAtB,GAAA,sBAAA,GAA2B,MAAM,SALb;AAM5C,MAAA,gBAAgB,EAAE,mBAAmB,KAAA,IAAnB,IAAA,mBAAmB,KAAA,KAAA,CAAnB,GAAA,mBAAA,GAAwB,MAAM;AANJ,KAA9C;AASA,WAAO,MAAK;AACV,MAAA,eAAe,CAAC,UAAhB;AACD,KAFD;AAGD,GAjBD,EAiBG,CACD,mBADC,EAED,eAFC,EAGD,iBAHC,EAID,YAJC,EAKD,OALC,EAMD,cANC,EAOD,sBAPC,CAjBH;AA2BA,QAAM,YAAY,GAAG,KAAK,CAAC,WAAN,CAClB,IAAD,IAA4B;AAC1B,IAAA,eAAe,CAAC,OAAhB,CAAwB,IAAxB;AACA,IAAA,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,WAAA,CAAA,kBAA1B,EAA8C,EAA9C;AAEA,WAAO,MAAK;AACV,MAAA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,WAAA,CAAA,gBAA7B;AACA,MAAA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,WAAA,CAAA,kBAA7B;AACA,MAAA,eAAe,CAAC,UAAhB,CAA2B,IAAI,CAAC,EAAhC;AACD,KAJD;AAKD,GAVkB,EAWnB,CAAC,eAAD,CAXmB,CAArB;AAcA,QAAM,cAAc,GAAG,KAAK,CAAC,WAAN,CAAkB,MAAK;AAC5C,IAAA,eAAe,CAAC,MAAhB;AACD,GAFsB,EAEpB,CAAC,eAAD,CAFoB,CAAvB;AAIA,SAAO;AACL,IAAA,YADK;AAEL,IAAA,YAFK;AAGL,IAAA;AAHK,GAAP;AAKD,CA5DM;;AAAM,OAAA,CAAA,oBAAA,GAAoB,oBAApB;;AA8DN,MAAM,yBAAyB,GAA2B,CAAC;AAAE,EAAA,IAAF;AAAQ,EAAA;AAAR,CAAD,KAAsB;AACrF,MAAI,OAAJ,EAAa;AACX,IAAA,IAAI,CAAC,OAAL,CAAa,eAAb,CAA6B,WAAA,CAAA,gBAA7B;AACD,GAFD,MAEO;AACL,IAAA,IAAI,CAAC,OAAL,CAAa,YAAb,CAA0B,WAAA,CAAA,gBAA1B,EAA4C,EAA5C;AACD;AACF,CANM;;AAAM,OAAA,CAAA,yBAAA,GAAyB,yBAAzB","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-commonjs/useOverflowCount.d.ts

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

package/lib-commonjs/useOverflowCount.js

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

package/lib-commonjs/useOverflowCount.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowCount.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;AAEG;;;AACI,MAAM,gBAAgB,GAAG,MAC9B,iBAAA,CAAA,kBAAA,CAAmB,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,CARD,CADK;;AAAM,OAAA,CAAA,gBAAA,GAAgB,gBAAhB","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-commonjs/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-commonjs/useOverflowItem.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverflowItem = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const overflowContext_1 = /*#__PURE__*/require("./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
+ */
+
+
+function useOverflowItem(id, priority, groupId) {
+  const ref = React.useRef(null);
+  const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
+  react_utilities_1.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;
+}
+
+exports.useOverflowItem = useOverflowItem;
+//# sourceMappingURL=useOverflowItem.js.map

package/lib-commonjs/useOverflowItem.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;AAMG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;AAC3G,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;AAEA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,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,GATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;AAWA,SAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","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-commonjs/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-commonjs/useOverflowMenu.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOverflowMenu = void 0;
+
+const React = /*#__PURE__*/require("react");
+
+const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
+
+const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
+
+const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
+
+const constants_1 = /*#__PURE__*/require("./constants");
+
+function useOverflowMenu(id) {
+  const elementId = react_utilities_1.useId('overflow-menu', id);
+  const overflowCount = useOverflowCount_1.useOverflowCount();
+  const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
+  const updateOverflow = overflowContext_1.useOverflowContext(v => v.updateOverflow);
+  const ref = React.useRef(null);
+  const isOverflowing = overflowCount > 0;
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    const element = ref.current;
+
+    if (element) {
+      const deregisterItem = registerItem({
+        element,
+        id: elementId,
+        priority: Infinity
+      });
+      element.setAttribute(constants_1.DATA_OVERFLOW_MENU, '');
+      return () => {
+        deregisterItem();
+        element === null || element === void 0 ? void 0 : element.removeAttribute(constants_1.DATA_OVERFLOW_MENU);
+      };
+    }
+  }, [registerItem, isOverflowing, elementId]);
+  react_utilities_1.useIsomorphicLayoutEffect(() => {
+    if (isOverflowing) {
+      updateOverflow();
+    }
+  }, [isOverflowing, updateOverflow, ref]);
+  return {
+    ref,
+    overflowCount,
+    isOverflowing
+  };
+}
+
+exports.useOverflowMenu = useOverflowMenu;
+//# sourceMappingURL=useOverflowMenu.js.map

package/lib-commonjs/useOverflowMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["useOverflowMenu.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AACA,MAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AACA,MAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAEA,SAAgB,eAAhB,CAA8D,EAA9D,EAAyE;AACvE,QAAM,SAAS,GAAG,iBAAA,CAAA,KAAA,CAAM,eAAN,EAAuB,EAAvB,CAAlB;AACA,QAAM,aAAa,GAAG,kBAAA,CAAA,gBAAA,EAAtB;AACA,QAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;AACA,QAAM,cAAc,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,cAA1B,CAAvB;AACA,QAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;AACA,QAAM,aAAa,GAAG,aAAa,GAAG,CAAtC;AAEA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,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,WAAA,CAAA,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,WAAA,CAAA,kBAAzB,CAAA;AACD,OAHD;AAID;AACF,GAfD,EAeG,CAAC,YAAD,EAAe,aAAf,EAA8B,SAA9B,CAfH;AAiBA,EAAA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;AAC7B,QAAI,aAAJ,EAAmB;AACjB,MAAA,cAAc;AACf;AACF,GAJD,EAIG,CAAC,aAAD,EAAgB,cAAhB,EAAgC,GAAhC,CAJH;AAMA,SAAO;AAAE,IAAA,GAAF;AAAO,IAAA,aAAP;AAAsB,IAAA;AAAtB,GAAP;AACD;;AAhCD,OAAA,CAAA,eAAA,GAAA,eAAA","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/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@fluentui/react-overflow",
+  "version": "0.0.0-nightly-20220511-0419.1",
+  "description": "React bindings for @fluentui/priority-overflow",
+  "main": "lib-commonjs/index.js",
+  "module": "lib/index.js",
+  "typings": "lib/index.d.ts",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/microsoft/fluentui"
+  },
+  "license": "MIT",
+  "scripts": {
+    "build": "just-scripts build",
+    "bundle-size": "bundle-size measure",
+    "clean": "just-scripts clean",
+    "code-style": "just-scripts code-style",
+    "just": "just-scripts",
+    "lint": "just-scripts lint",
+    "start": "yarn storybook",
+    "test": "jest --passWithNoTests",
+    "docs": "api-extractor run --config=config/api-extractor.local.json --local",
+    "build:local": "tsc -p ./tsconfig.lib.json --module esnext --emitDeclarationOnly && node ../../../scripts/typescript/normalize-import --output ./dist/packages/react-components/react-overflow/src && yarn docs",
+    "storybook": "node ../../../scripts/storybook/runner",
+    "type-check": "tsc -b tsconfig.json"
+  },
+  "devDependencies": {
+    "@fluentui/eslint-plugin": "*",
+    "@fluentui/scripts": "^1.0.0"
+  },
+  "dependencies": {
+    "@fluentui/priority-overflow": "^0.0.0-nightly-20220511-0419.1",
+    "@fluentui/react-context-selector": "0.0.0-nightly-20220511-0419.1",
+    "@fluentui/react-theme": "0.0.0-nightly-20220511-0419.1",
+    "@fluentui/react-utilities": "0.0.0-nightly-20220511-0419.1",
+    "@griffel/react": "1.0.3",
+    "tslib": "^2.1.0"
+  },
+  "peerDependencies": {
+    "@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": {
+    "disallowedChangeTypes": [
+      "major",
+      "minor",
+      "patch"
+    ]
+  }
+}