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

package/CHANGELOG.json

@@ -0,0 +1,164 @@
+{
+  "name": "@fluentui/react-overflow",
+  "entries": [
+    {
+      "date": "Wed, 11 May 2022 04:31:16 GMT",
+      "tag": "@fluentui/react-overflow_v0.0.0-nightly-20220511-0419.1",
+      "version": "0.0.0-nightly-20220511-0419.1",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "email not defined",
+            "package": "@fluentui/react-overflow",
+            "commit": "not available",
+            "comment": "Release nightly v9"
+          },
+          {
+            "author": "lingfangao@hotmail.com",
+            "package": "@fluentui/react-overflow",
+            "commit": "4ae08d6ecf85ac29593ddc2abb23f8a073711b38",
+            "comment": "feat: Initial beta release"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20220511-0419.1",
+            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20220511-0419.1",
+            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20220511-0419.1",
+            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20220511-0419.1",
+            "commit": "03a572202e24fe35d789f3009dc25922a002061e"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Thu, 05 May 2022 18:26:30 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.0",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.7",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.8",
+            "commit": "c5abb9c480ac94d12aa644d68d30773d77f2a159"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 04 May 2022 13:26:54 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.0",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.6",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.7",
+            "commit": "65f94192ed3b2cde7e52b9c7e12d6f38b81965dd"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Mon, 25 Apr 2022 09:32:19 GMT",
+      "tag": "@fluentui/react-priority-overflow_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "undefined": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-priority-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.0",
+            "commit": "02ca1d3c198452c1693067f5f18bd01b2ed5d6e6"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 19 Apr 2022 19:17:29 GMT",
+      "tag": "@fluentui/react-overflow_v9.0.0-alpha.0",
+      "version": "9.0.0-alpha.0",
+      "comments": {
+        "prerelease": [
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/priority-overflow to v9.0.0-beta.0",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-context-selector to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-theme to v9.0.0-rc.5",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui/react-overflow",
+            "comment": "Bump @fluentui/react-utilities to v9.0.0-rc.6",
+            "commit": "f94b48c825ca8c8b2e3b6755bdd29fe15c7d435d"
+          }
+        ]
+      }
+    }
+  ]
+}

package/CHANGELOG.md

@@ -0,0 +1,54 @@
+# Change Log - @fluentui/react-overflow
+
+This log was last generated on Wed, 11 May 2022 04:31:16 GMT and should not be manually modified.
+
+<!-- Start content -->
+
+## [0.0.0-nightly-20220511-0419.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20220511-0419.1)
+
+Wed, 11 May 2022 04:31:16 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-alpha.0..@fluentui/react-overflow_v0.0.0-nightly-20220511-0419.1)
+
+### Changes
+
+- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by email not defined)
+- feat: Initial beta release ([PR #22913](https://github.com/microsoft/fluentui/pull/22913) by lingfangao@hotmail.com)
+- Bump @fluentui/priority-overflow to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
+- Bump @fluentui/react-context-selector to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
+- Bump @fluentui/react-theme to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
+- Bump @fluentui/react-utilities to v0.0.0-nightly-20220511-0419.1 ([commit](https://github.com/microsoft/fluentui/commit/03a572202e24fe35d789f3009dc25922a002061e) by beachball)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-alpha.0)
+
+Thu, 05 May 2022 18:26:30 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-alpha.0..@fluentui/react-overflow_v9.0.0-alpha.0)
+
+### Changes
+
+- Bump @fluentui/priority-overflow to v9.0.0-beta.0 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.7 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.8 ([PR #22857](https://github.com/microsoft/fluentui/pull/22857) by beachball)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-alpha.0)
+
+Wed, 04 May 2022 13:26:54 GMT 
+[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-priority-overflow_v9.0.0-alpha.0..@fluentui/react-overflow_v9.0.0-alpha.0)
+
+### Changes
+
+- Bump @fluentui/priority-overflow to v9.0.0-beta.0 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.6 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.7 ([PR #22786](https://github.com/microsoft/fluentui/pull/22786) by beachball)
+
+## [9.0.0-alpha.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-alpha.0)
+
+Tue, 19 Apr 2022 19:17:29 GMT
+
+### Changes
+
+- Bump @fluentui/priority-overflow to v9.0.0-beta.0 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-context-selector to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-theme to v9.0.0-rc.5 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)
+- Bump @fluentui/react-utilities to v9.0.0-rc.6 ([PR #21995](https://github.com/microsoft/fluentui/pull/21995) by beachball)

package/LICENSE

@@ -0,0 +1,15 @@
+@fluentui/react-overflow
+
+Copyright (c) Microsoft Corporation
+
+All rights reserved.
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the ""Software""), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED _AS IS_, WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+Note: Usage of the fonts and icons referenced in Fluent UI React is subject to the terms listed at https://aka.ms/fluentui-assets-license

package/README.md

@@ -0,0 +1,5 @@
+# @fluentui/react-overflow
+
+**React Priority Overflow components for [Fluent UI React](https://developer.microsoft.com/en-us/fluentui)**
+
+These are not production-ready components and **should never be used in product**. This space is useful for testing new components whose APIs might change before final release.

package/dist/index.d.ts

@@ -0,0 +1,121 @@
+import type { ObserveOptions } from '@fluentui/priority-overflow';
+import type { OnUpdateItemVisibility } from '@fluentui/priority-overflow';
+import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
+import { OverflowGroupState } from '@fluentui/priority-overflow';
+import type { OverflowItemEntry } from '@fluentui/priority-overflow';
+import * as React_2 from 'react';
+
+export declare const DATA_OVERFLOW_ITEM = "data-overflow-item";
+
+export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";
+
+export declare const DATA_OVERFLOWING = "data-overflowing";
+
+/**
+ * Provides an OverflowContext for OverflowItem descendants.
+ */
+export declare const Overflow: React_2.ForwardRefExoticComponent<Partial<Pick<ObserveOptions, "padding" | "overflowDirection" | "overflowAxis" | "minimumVisible">> & {
+    children: React_2.ReactElement;
+} & React_2.RefAttributes<unknown>>;
+
+declare interface OverflowContextValue {
+    itemVisibility: Record<string, boolean>;
+    groupVisibility: Record<string, OverflowGroupState>;
+    hasOverflow: boolean;
+    registerItem: (item: OverflowItemEntry) => () => void;
+    updateOverflow: (padding?: number) => void;
+}
+
+/**
+ * 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_2.ForwardRefExoticComponent<OverflowItemProps & React_2.RefAttributes<unknown>>;
+
+/**
+ * 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_2.ReactElement;
+};
+
+/**
+ * Overflow Props
+ */
+export declare type OverflowProps = Partial<Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>> & {
+    children: React_2.ReactElement;
+};
+
+export declare const updateVisibilityAttribute: OnUpdateItemVisibility;
+
+/**
+ * @param id - unique identifier for a group of overflow items
+ * @returns visibility state of the group
+ */
+export declare function useIsOverflowGroupVisible(id: string): OverflowGroupState;
+
+/**
+ * @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;
+
+/**
+ *
+ * @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 interface UseOverflowContainerReturn<TElement extends HTMLElement> {
+    /**
+     * Ref to apply to the container that will overflow
+     */
+    containerRef: React_2.RefObject<TElement>;
+    /**
+     * Registers and overflow item
+     */
+    registerItem: OverflowContextValue['registerItem'];
+    /**
+     * Imperative function to trigger overflow update
+     */
+    updateOverflow: OverflowContextValue['updateOverflow'];
+}
+
+/**
+ * @returns Number of items that are overflowing
+ */
+export declare const useOverflowCount: () => number;
+
+/**
+ * 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_2.RefObject<TElement>;
+
+export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
+    ref: React_2.RefObject<TElement>;
+    overflowCount: number;
+    isOverflowing: boolean;
+};
+
+export { }

package/lib/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/components/Overflow.js

@@ -0,0 +1,73 @@
+import * as React from 'react';
+import { __styles, mergeClasses } from '@griffel/react';
+import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { OverflowContext } from '../overflowContext';
+import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
+import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
+
+const useStyles = /*#__PURE__*/__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.
+ */
+
+
+export const 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(update, {
+    overflowDirection,
+    overflowAxis,
+    padding,
+    minimumVisible,
+    onUpdateItemVisibility: updateVisibilityAttribute
+  });
+  const clonedChild = applyTriggerPropsToChildren(children, {
+    ref: useMergedRefs(containerRef, ref),
+    className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className)
+  });
+  return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
+    value: {
+      itemVisibility,
+      groupVisibility,
+      hasOverflow,
+      registerItem,
+      updateOverflow
+    }
+  }, clonedChild);
+});
+//# sourceMappingURL=Overflow.js.map

package/lib/components/Overflow.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["components/Overflow.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,mBAAqB,YAArB,QAAyC,gBAAzC;AAEA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AAEA,SAAS,eAAT,QAAgC,oBAAhC;AACA,SAAS,yBAAT,EAAoC,oBAApC,QAAgE,yBAAhE;AACA,SAAS,gBAAT,EAA2B,kBAA3B,QAAqD,cAArD;;AAEA,MAAM,SAAS,gBAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAlB;AAuBA;;AAEG;;;AACH,OAAO,MAAM,QAAQ,gBAAG,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,oBAAoB,CAAC,MAAD,EAAS;AAClF,IAAA,iBADkF;AAElF,IAAA,YAFkF;AAGlF,IAAA,OAHkF;AAIlF,IAAA,cAJkF;AAKlF,IAAA,sBAAsB,EAAE;AAL0D,GAAT,CAA3E;AAQA,QAAM,WAAW,GAAG,2BAA2B,CAAC,QAAD,EAAW;AACxD,IAAA,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf,CADsC;AAExD,IAAA,SAAS,EAAE,YAAY,CAAC,MAAM,CAAC,YAAR,EAAsB,MAAM,CAAC,gBAA7B,EAA+C,QAAQ,CAAC,KAAT,CAAe,SAA9D;AAFiC,GAAX,CAA/C;AAKA,sBACE,KAAA,CAAA,aAAA,CAAC,eAAe,CAAC,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,CAAjB","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/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/components/OverflowItem/OverflowItem.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
+import { useOverflowItem } from '../../useOverflowItem';
+/**
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
+ * It does not render an element of its own.
+ */
+
+export const OverflowItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    id,
+    groupId,
+    priority,
+    children
+  } = props;
+  const containerRef = useOverflowItem(id, priority, groupId);
+  return applyTriggerPropsToChildren(children, {
+    ref: useMergedRefs(containerRef, ref)
+  });
+});
+//# sourceMappingURL=OverflowItem.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["components/OverflowItem/OverflowItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,2BAAT,EAAsC,aAAtC,QAA2D,2BAA3D;AACA,SAAS,eAAT,QAAgC,uBAAhC;AAGA;;;AAGG;;AACH,OAAO,MAAM,YAAY,gBAAG,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,eAAe,CAAC,EAAD,EAAK,QAAL,EAAe,OAAf,CAApC;AACA,SAAO,2BAA2B,CAAC,QAAD,EAAW;AAC3C,IAAA,GAAG,EAAE,aAAa,CAAC,YAAD,EAAe,GAAf;AADyB,GAAX,CAAlC;AAGD,CAP2B,CAArB","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/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/components/OverflowItem/OverflowItem.types.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"OverflowItem.types.js","sourceRoot":"../src/","sources":["components/OverflowItem/OverflowItem.types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n  /**\n   * The unique identifier for the item used by the overflow manager.\n   */\n  id: string;\n  /**\n   * Assigns the item to a group, group visibility can be watched.\n   */\n  groupId?: string;\n  /**\n   * A higher priority means the item overflows later.\n   */\n  priority?: number;\n  /**\n   * The single child that has overflow item behavior attached.\n   */\n  children: React.ReactElement;\n};\n"]}

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

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

package/lib/components/OverflowItem/index.js

@@ -0,0 +1,2 @@
+export { OverflowItem } from './OverflowItem';
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["components/OverflowItem/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC","sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"]}

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

@@ -0,0 +1,4 @@
+export const DATA_OVERFLOWING = 'data-overflowing';
+export const DATA_OVERFLOW_ITEM = 'data-overflow-item';
+export const DATA_OVERFLOW_MENU = 'data-overflow-menu';
+//# sourceMappingURL=constants.js.map

package/lib/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sourceRoot":"../src/","sources":["constants.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AACnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC;AACvD,MAAM,CAAC,MAAM,kBAAkB,GAAG,oBAAoB,CAAC","sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\n"]}

package/lib/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';

package/lib/index.js

@@ -0,0 +1,10 @@
+export { Overflow } from './components/Overflow';
+export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
+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 { OverflowItem } from './components/OverflowItem/OverflowItem';
+//# sourceMappingURL=index.js.map

package/lib/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,yBAAyB,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AACzF,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","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"]}

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

@@ -0,0 +1,10 @@
+import { createContext, useContextSelector } from '@fluentui/react-context-selector';
+export const OverflowContext = /*#__PURE__*/createContext({
+  itemVisibility: {},
+  groupVisibility: {},
+  hasOverflow: false,
+  registerItem: () => () => null,
+  updateOverflow: () => null
+});
+export const useOverflowContext = selector => useContextSelector(OverflowContext, selector);
+//# sourceMappingURL=overflowContext.js.map

package/lib/overflowContext.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["overflowContext.ts"],"names":[],"mappings":"AACA,SAA0B,aAA1B,EAAyC,kBAAzC,QAAmE,kCAAnE;AAUA,OAAO,MAAM,eAAe,gBAAG,aAAa,CAAuB;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,CAAvB,CAArC;AAQP,OAAO,MAAM,kBAAkB,GAAmB,QAAhB,IAChC,kBAAkB,CAAC,eAAD,EAAkB,QAAlB,CADb","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/tsdoc-metadata.json

@@ -0,0 +1,11 @@
+// This file is read by tools that parse documentation comments conforming to the TSDoc standard.
+// It should be published with your NPM package.  It should not be tracked by Git.
+{
+  "tsdocVersion": "0.12",
+  "toolPackages": [
+    {
+      "packageName": "@microsoft/api-extractor",
+      "packageVersion": "7.18.1"
+    }
+  ]
+}