@fluentui/react-overflow 9.9.1 → 9.9.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (105) hide show
  1. package/CHANGELOG.md +25 -2
  2. package/dist/index.d.cts +299 -0
  3. package/lib/components/Overflow/Overflow.js +5 -5
  4. package/lib/components/Overflow/Overflow.js.map +1 -1
  5. package/lib/components/Overflow/index.js +4 -4
  6. package/lib/components/Overflow/index.js.map +1 -1
  7. package/lib/components/Overflow/renderOverflow.js +3 -3
  8. package/lib/components/Overflow/renderOverflow.js.map +1 -1
  9. package/lib/components/Overflow/useOverflow.js +2 -2
  10. package/lib/components/Overflow/useOverflow.js.map +1 -1
  11. package/lib/components/Overflow/useOverflowStyles.styles.js +3 -3
  12. package/lib/components/Overflow/useOverflowStyles.styles.js.map +1 -1
  13. package/lib/components/Overflow/useOverflowStyles.styles.raw.js +3 -3
  14. package/lib/components/Overflow/useOverflowStyles.styles.raw.js.map +1 -1
  15. package/lib/components/OverflowDivider/OverflowDivider.js +3 -3
  16. package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -1
  17. package/lib/components/OverflowItem/OverflowItem.js +3 -3
  18. package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
  19. package/lib/components/OverflowItem/index.js +1 -1
  20. package/lib/components/OverflowItem/index.js.map +1 -1
  21. package/lib/components/OverflowReorderObserver/OverflowReorderObserver.js +3 -3
  22. package/lib/components/OverflowReorderObserver/OverflowReorderObserver.js.map +1 -1
  23. package/lib/components/OverflowReorderObserver/index.js +1 -1
  24. package/lib/components/OverflowReorderObserver/index.js.map +1 -1
  25. package/lib/index.js +15 -15
  26. package/lib/index.js.map +1 -1
  27. package/lib/overflowContext.js +2 -2
  28. package/lib/useIsOverflowGroupVisible.js +1 -1
  29. package/lib/useIsOverflowGroupVisible.js.map +1 -1
  30. package/lib/useIsOverflowItemVisible.js +1 -1
  31. package/lib/useIsOverflowItemVisible.js.map +1 -1
  32. package/lib/useOverflowContainer.js +5 -5
  33. package/lib/useOverflowContainer.js.map +1 -1
  34. package/lib/useOverflowContextValues.js +1 -1
  35. package/lib/useOverflowCount.js +1 -1
  36. package/lib/useOverflowCount.js.map +1 -1
  37. package/lib/useOverflowDivider.js +3 -3
  38. package/lib/useOverflowDivider.js.map +1 -1
  39. package/lib/useOverflowItem.js +3 -3
  40. package/lib/useOverflowItem.js.map +1 -1
  41. package/lib/useOverflowMenu.js +6 -14
  42. package/lib/useOverflowMenu.js.map +1 -1
  43. package/lib/useOverflowSnapshot.js +3 -3
  44. package/lib/useOverflowSnapshot.js.map +1 -1
  45. package/lib/useOverflowVisibility.js +6 -5
  46. package/lib/useOverflowVisibility.js.map +1 -1
  47. package/lib-commonjs/components/Overflow/{Overflow.js → Overflow.cjs} +4 -4
  48. package/lib-commonjs/components/Overflow/{Overflow.js.map → Overflow.cjs.map} +1 -1
  49. package/lib-commonjs/components/Overflow/{index.js → index.cjs} +4 -4
  50. package/lib-commonjs/components/Overflow/{index.js.map → index.cjs.map} +1 -1
  51. package/lib-commonjs/components/Overflow/{renderOverflow.js → renderOverflow.cjs} +1 -1
  52. package/lib-commonjs/components/Overflow/{renderOverflow.js.map → renderOverflow.cjs.map} +1 -1
  53. package/lib-commonjs/components/Overflow/{useOverflow.js → useOverflow.cjs} +1 -1
  54. package/lib-commonjs/components/Overflow/{useOverflow.js.map → useOverflow.cjs.map} +1 -1
  55. package/lib-commonjs/components/Overflow/useOverflowStyles.styles.cjs.map +1 -0
  56. package/lib-commonjs/components/Overflow/{useOverflowStyles.styles.raw.js → useOverflowStyles.styles.raw.cjs} +1 -1
  57. package/lib-commonjs/components/Overflow/{useOverflowStyles.styles.raw.js.map → useOverflowStyles.styles.raw.cjs.map} +1 -1
  58. package/lib-commonjs/components/OverflowDivider/{OverflowDivider.js → OverflowDivider.cjs} +1 -1
  59. package/lib-commonjs/components/OverflowDivider/{OverflowDivider.js.map → OverflowDivider.cjs.map} +1 -1
  60. package/lib-commonjs/components/OverflowItem/{OverflowItem.js → OverflowItem.cjs} +1 -1
  61. package/lib-commonjs/components/OverflowItem/{OverflowItem.js.map → OverflowItem.cjs.map} +1 -1
  62. package/lib-commonjs/components/OverflowItem/{index.js → index.cjs} +1 -1
  63. package/lib-commonjs/components/OverflowItem/{index.js.map → index.cjs.map} +1 -1
  64. package/lib-commonjs/components/OverflowReorderObserver/{OverflowReorderObserver.js → OverflowReorderObserver.cjs} +1 -1
  65. package/lib-commonjs/components/OverflowReorderObserver/{OverflowReorderObserver.js.map → OverflowReorderObserver.cjs.map} +1 -1
  66. package/lib-commonjs/components/OverflowReorderObserver/{index.js → index.cjs} +1 -1
  67. package/lib-commonjs/components/OverflowReorderObserver/{index.js.map → index.cjs.map} +1 -1
  68. package/lib-commonjs/{index.js → index.cjs} +20 -20
  69. package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
  70. package/lib-commonjs/{useIsOverflowGroupVisible.js → useIsOverflowGroupVisible.cjs} +1 -1
  71. package/lib-commonjs/{useIsOverflowGroupVisible.js.map → useIsOverflowGroupVisible.cjs.map} +1 -1
  72. package/lib-commonjs/{useIsOverflowItemVisible.js → useIsOverflowItemVisible.cjs} +1 -1
  73. package/lib-commonjs/{useIsOverflowItemVisible.js.map → useIsOverflowItemVisible.cjs.map} +1 -1
  74. package/lib-commonjs/{useOverflowContainer.js → useOverflowContainer.cjs} +2 -2
  75. package/lib-commonjs/{useOverflowContainer.js.map → useOverflowContainer.cjs.map} +1 -1
  76. package/lib-commonjs/{useOverflowCount.js → useOverflowCount.cjs} +1 -1
  77. package/lib-commonjs/{useOverflowCount.js.map → useOverflowCount.cjs.map} +1 -1
  78. package/lib-commonjs/{useOverflowDivider.js → useOverflowDivider.cjs} +1 -1
  79. package/lib-commonjs/{useOverflowDivider.js.map → useOverflowDivider.cjs.map} +1 -1
  80. package/lib-commonjs/{useOverflowItem.js → useOverflowItem.cjs} +1 -1
  81. package/lib-commonjs/{useOverflowItem.js.map → useOverflowItem.cjs.map} +1 -1
  82. package/lib-commonjs/{useOverflowMenu.js → useOverflowMenu.cjs} +4 -12
  83. package/lib-commonjs/useOverflowMenu.cjs.map +1 -0
  84. package/lib-commonjs/{useOverflowSnapshot.js → useOverflowSnapshot.cjs} +1 -1
  85. package/lib-commonjs/{useOverflowSnapshot.js.map → useOverflowSnapshot.cjs.map} +1 -1
  86. package/lib-commonjs/{useOverflowVisibility.js → useOverflowVisibility.cjs} +6 -5
  87. package/lib-commonjs/{useOverflowVisibility.js.map → useOverflowVisibility.cjs.map} +1 -1
  88. package/package.json +17 -11
  89. package/lib-commonjs/components/Overflow/useOverflowStyles.styles.js.map +0 -1
  90. package/lib-commonjs/useOverflowMenu.js.map +0 -1
  91. /package/lib-commonjs/components/Overflow/{Overflow.types.js → Overflow.types.cjs} +0 -0
  92. /package/lib-commonjs/components/Overflow/{Overflow.types.js.map → Overflow.types.cjs.map} +0 -0
  93. /package/lib-commonjs/components/Overflow/{useOverflowStyles.styles.js → useOverflowStyles.styles.cjs} +0 -0
  94. /package/lib-commonjs/components/OverflowDivider/{OverflowDivider.types.js → OverflowDivider.types.cjs} +0 -0
  95. /package/lib-commonjs/components/OverflowDivider/{OverflowDivider.types.js.map → OverflowDivider.types.cjs.map} +0 -0
  96. /package/lib-commonjs/components/OverflowItem/{OverflowItem.types.js → OverflowItem.types.cjs} +0 -0
  97. /package/lib-commonjs/components/OverflowItem/{OverflowItem.types.js.map → OverflowItem.types.cjs.map} +0 -0
  98. /package/lib-commonjs/{constants.js → constants.cjs} +0 -0
  99. /package/lib-commonjs/{constants.js.map → constants.cjs.map} +0 -0
  100. /package/lib-commonjs/{overflowContext.js → overflowContext.cjs} +0 -0
  101. /package/lib-commonjs/{overflowContext.js.map → overflowContext.cjs.map} +0 -0
  102. /package/lib-commonjs/{types.js → types.cjs} +0 -0
  103. /package/lib-commonjs/{types.js.map → types.cjs.map} +0 -0
  104. /package/lib-commonjs/{useOverflowContextValues.js → useOverflowContextValues.cjs} +0 -0
  105. /package/lib-commonjs/{useOverflowContextValues.js.map → useOverflowContextValues.cjs.map} +0 -0
package/CHANGELOG.md CHANGED
@@ -1,12 +1,35 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Wed, 15 Jul 2026 14:10:10 GMT and should not be manually modified.
3
+ <!-- This log was last generated on Mon, 24 Aug 2026 08:15:11 GMT and should not be manually modified. -->
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.9.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.9.3)
8
+
9
+ Mon, 24 Aug 2026 08:15:11 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.9.2..@fluentui/react-overflow_v9.9.3)
11
+
12
+ ### Patches
13
+
14
+ - fix: avoid redundant overflow work during menu teardown and unchanged visibility updates ([PR #36588](https://github.com/microsoft/fluentui/pull/36588) by bernardo.sunderhus@gmail.com)
15
+ - Bump @fluentui/priority-overflow to v9.4.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
16
+
17
+ ## [9.9.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.9.2)
18
+
19
+ Tue, 11 Aug 2026 17:20:14 GMT
20
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.9.1..@fluentui/react-overflow_v9.9.2)
21
+
22
+ ### Patches
23
+
24
+ - Ship ESM-first (type:module): valid ESM under lib/, CommonJS under lib-commonjs/*.cjs, and drop the `node` export condition - bare-Node `import` resolves ESM, `require` resolves CJS; node-targeted bundlers tree-shake. ([PR #36327](https://github.com/microsoft/fluentui/pull/36327) by martinhochel@microsoft.com)
25
+ - Bump @fluentui/priority-overflow to v9.4.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
26
+ - Bump @fluentui/react-shared-contexts to v9.26.3 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
27
+ - Bump @fluentui/react-theme to v9.2.2 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.26.6 ([commit](https://github.com/microsoft/fluentui/commit/undefined) by beachball)
29
+
7
30
  ## [9.9.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.9.1)
8
31
 
9
- Wed, 15 Jul 2026 14:10:10 GMT
32
+ Wed, 15 Jul 2026 14:10:41 GMT
10
33
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.9.0..@fluentui/react-overflow_v9.9.1)
11
34
 
12
35
  ### Patches
@@ -0,0 +1,299 @@
1
+ import { OnUpdateItemVisibility } from '@fluentui/priority-overflow';
2
+ import { OnUpdateOverflow } from '@fluentui/priority-overflow';
3
+ import type { OverflowDividerEntry } from '@fluentui/priority-overflow';
4
+ import { OverflowEventPayload } from '@fluentui/priority-overflow';
5
+ import type { OverflowGroupState } from '@fluentui/priority-overflow';
6
+ import type { OverflowItemEntry } from '@fluentui/priority-overflow';
7
+ import { OverflowOptions } from '@fluentui/priority-overflow';
8
+ import type { OverflowSnapshot } from '@fluentui/priority-overflow';
9
+ import * as React_2 from 'react';
10
+
11
+ export declare const DATA_OVERFLOW_DIVIDER = "data-overflow-divider";
12
+
13
+ export declare const DATA_OVERFLOW_ITEM = "data-overflow-item";
14
+
15
+ export declare const DATA_OVERFLOW_MENU = "data-overflow-menu";
16
+
17
+ export declare const DATA_OVERFLOWING = "data-overflowing";
18
+
19
+ export declare interface OnOverflowChangeData extends OverflowState {
20
+ }
21
+
22
+ export { OnUpdateItemVisibility }
23
+
24
+ export { OnUpdateOverflow }
25
+
26
+ /**
27
+ * Provides an OverflowContext for OverflowItem descendants.
28
+ */
29
+ export declare const Overflow: React_2.ForwardRefExoticComponent<Partial<Pick<OverflowOptions, "overflowAxis" | "overflowDirection" | "padding" | "minimumVisible" | "hasHiddenItems">> & {
30
+ children: React_2.ReactElement;
31
+ onOverflowChange?: (ev: null, data: OverflowState) => void;
32
+ } & React_2.RefAttributes<unknown>>;
33
+
34
+ /**
35
+ * State used in rendering Overflow. Carries the overflow container's registration api so
36
+ * `useOverflowContextValues_unstable` can assemble the context values.
37
+ */
38
+ export declare type OverflowComponentState = UseOverflowContainerReturn<HTMLElement> & {
39
+ /**
40
+ * Merged ref applied to the cloned child's root element.
41
+ */
42
+ ref: React_2.Ref<HTMLElement>;
43
+ /**
44
+ * Class name applied to the cloned child. Set by `useOverflowStyles_unstable`; left `undefined`
45
+ * by headless consumers that apply no styling.
46
+ */
47
+ className?: string;
48
+ /**
49
+ * The single child that overflow behavior is attached to.
50
+ */
51
+ children: React_2.ReactElement;
52
+ };
53
+
54
+ /**
55
+ * @public
56
+ */
57
+ export declare interface OverflowContextValue {
58
+ /**
59
+ * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead
60
+ */
61
+ itemVisibility: Record<string, boolean>;
62
+ /**
63
+ * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead
64
+ */
65
+ groupVisibility: Record<string, OverflowGroupState>;
66
+ /**
67
+ * @deprecated This value is not guaranteed to be up to date and should not be used directly. Use getSnapshot or the provided hooks instead
68
+ */
69
+ hasOverflow: boolean;
70
+ registerItem: (item: OverflowItemEntry) => () => void;
71
+ registerOverflowMenu: (el: HTMLElement) => () => void;
72
+ registerDivider: (divider: OverflowDividerEntry) => () => void;
73
+ updateOverflow: (padding?: number) => void;
74
+ forceUpdateOverflow: () => void;
75
+ containerRef?: React_2.RefObject<HTMLElement | null>;
76
+ getSnapshot: () => OverflowSnapshot;
77
+ subscribe: (listener: () => void) => () => void;
78
+ }
79
+
80
+ /**
81
+ * Context values provided to overflow descendants.
82
+ */
83
+ export declare type OverflowContextValues = {
84
+ overflow: OverflowContextValue;
85
+ };
86
+
87
+ /**
88
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
89
+ * It does not render an element of its own.
90
+ */
91
+ export declare const OverflowDivider: React_2.ForwardRefExoticComponent<OverflowDividerProps & React_2.RefAttributes<unknown>>;
92
+
93
+ /**
94
+ * OverflowDividerProps
95
+ */
96
+ export declare type OverflowDividerProps = {
97
+ /**
98
+ * Assigns the item to a group, group visibility can be watched.
99
+ */
100
+ groupId: string;
101
+ /**
102
+ * The single child that has overflow item behavior attached.
103
+ */
104
+ children: React_2.ReactElement;
105
+ };
106
+
107
+ export { OverflowEventPayload }
108
+
109
+ /**
110
+ * Attaches overflow item behavior to its child registered with the OverflowContext.
111
+ * It does not render an element of its own.
112
+ *
113
+ * Behaves similarly to other `*Trigger` components in Fluent UI React.
114
+ */
115
+ export declare const OverflowItem: React_2.ForwardRefExoticComponent<OverflowItemProps & React_2.RefAttributes<unknown>>;
116
+
117
+ /**
118
+ * OverflowItemProps
119
+ */
120
+ export declare type OverflowItemProps = {
121
+ /**
122
+ * The unique identifier for the item used by the overflow manager.
123
+ */
124
+ id: string;
125
+ /**
126
+ * Assigns the item to a group, group visibility can be watched.
127
+ */
128
+ groupId?: string;
129
+ /**
130
+ * The single child that has overflow item behavior attached.
131
+ */
132
+ children: React_2.ReactElement;
133
+ } & ({
134
+ /**
135
+ * If true, the item will never overflow and will always be visible.
136
+ * Mutually exclusive with `priority`.
137
+ */
138
+ pinned?: boolean;
139
+ priority?: never;
140
+ } | {
141
+ pinned?: never;
142
+ /**
143
+ * A higher priority means the item overflows later.
144
+ * Mutually exclusive with `pinned`.
145
+ */
146
+ priority?: number;
147
+ });
148
+
149
+ export declare type OverflowProps = Partial<Pick<OverflowOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible' | 'hasHiddenItems'>> & {
150
+ children: React_2.ReactElement;
151
+ onOverflowChange?: (ev: null, data: OverflowState) => void;
152
+ };
153
+
154
+ /**
155
+ * Provides an {@link OverflowContextValue} to descendant overflow hooks and components.
156
+ * Used by headless consumers that build their own overflow root.
157
+ * @public
158
+ */
159
+ export declare const OverflowProvider: React_2.Provider<OverflowContextValue>;
160
+
161
+ /**
162
+ * Renderless opt-in component that observes the `<Overflow>` container for
163
+ * direct-child DOM mutations and triggers an overflow recompute. Drop it
164
+ * inside `<Overflow>` when items can be reordered, added, or removed via
165
+ * React state without a container resize — Fluent's overflow manager only
166
+ * listens to `ResizeObserver` otherwise, so reorders leave visibility flags
167
+ * stale.
168
+ *
169
+ * @example
170
+ * ```tsx
171
+ * <Overflow>
172
+ * <div>
173
+ * <OverflowReorderObserver />
174
+ * {items.map(id => <OverflowItem key={id} id={id} priority={1}>{id}</OverflowItem>)}
175
+ * </div>
176
+ * </Overflow>
177
+ * ```
178
+ */
179
+ export declare const OverflowReorderObserver: React_2.FC;
180
+
181
+ export declare interface OverflowState {
182
+ hasOverflow: boolean;
183
+ itemVisibility: Record<string, boolean>;
184
+ groupVisibility: Record<string, OverflowGroupState>;
185
+ }
186
+
187
+ /**
188
+ * Render the final JSX of Overflow.
189
+ *
190
+ * Griffel-free so it can be reused by headless consumers; all class merging happens in
191
+ * `useOverflowStyles_unstable`.
192
+ */
193
+ export declare const renderOverflow_unstable: (state: OverflowComponentState, contextValues: OverflowContextValues) => React_2.ReactElement;
194
+
195
+ /**
196
+ * @param id - unique identifier for a group of overflow items
197
+ * @returns visibility state of the group
198
+ */
199
+ export declare function useIsOverflowGroupVisible(id: string): OverflowGroupState;
200
+
201
+ /**
202
+ * @param id - unique identifier for the item used by the overflow manager
203
+ * @returns visibility state of an overflow item
204
+ */
205
+ export declare function useIsOverflowItemVisible(id: string): boolean;
206
+
207
+ /**
208
+ * The state required to render Overflow.
209
+ *
210
+ * @param props - props from this instance of Overflow
211
+ * @param ref - reference forwarded to the single child's root element
212
+ */
213
+ export declare const useOverflow_unstable: (props: OverflowProps, ref: React_2.Ref<HTMLElement>) => OverflowComponentState;
214
+
215
+ /**
216
+ * @internal
217
+ * @param update - Callback when overflow state changes
218
+ * @param options - Options to configure the overflow container
219
+ * @returns - ref to attach to an intrinsic HTML element and imperative functions
220
+ */
221
+ export declare const useOverflowContainer: <TElement extends HTMLElement>(update: OnUpdateOverflow, options: Omit<OverflowOptions, "onUpdateOverflow">) => UseOverflowContainerReturn<TElement>;
222
+
223
+ /**
224
+ * @public
225
+ */
226
+ export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'forceUpdateOverflow' | 'registerOverflowMenu' | 'registerDivider' | 'getSnapshot' | 'subscribe'> {
227
+ /**
228
+ * Ref to apply to the container that will overflow
229
+ */
230
+ containerRef: React_2.RefObject<TElement | null>;
231
+ }
232
+
233
+ /**
234
+ * @internal
235
+ */
236
+ export declare function useOverflowContext(): OverflowContextValue;
237
+
238
+ /**
239
+ * @internal
240
+ */
241
+ export declare function useOverflowContext<SelectedValue>(selector: (context: OverflowContextValue) => SelectedValue): SelectedValue;
242
+
243
+ /**
244
+ * Assembles the overflow context values provided to descendants, from the state returned by
245
+ * {@link useOverflow_unstable}.
246
+ *
247
+ * @internal
248
+ */
249
+ export declare const useOverflowContextValues_unstable: (state: OverflowComponentState) => OverflowContextValues;
250
+
251
+ /**
252
+ * @returns Number of items that are overflowing
253
+ */
254
+ export declare const useOverflowCount: () => number;
255
+
256
+ /**
257
+ * Registers an overflow item
258
+ *
259
+ * @internal
260
+ * @param groupId - assigns the item to a group, group visibility can be watched
261
+ * @returns ref to assign to an intrinsic HTML element
262
+ */
263
+ export declare function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React_2.RefObject<TElement | null>;
264
+
265
+ /**
266
+ * Registers an overflow item
267
+ *
268
+ * @internal
269
+ * @param id - unique identifier for the item used by the overflow manager
270
+ * @param priority - higher priority means the item overflows later
271
+ * @param groupId - assigns the item to a group, group visibility can be watched
272
+ * @param pinned - if true, the item will never overflow and will always be visible
273
+ * @returns ref to assign to an intrinsic HTML element
274
+ */
275
+ export declare function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string, pinned?: boolean): React_2.RefObject<TElement | null>;
276
+
277
+ export declare function useOverflowMenu<TElement extends HTMLElement>(id?: string): {
278
+ ref: React_2.MutableRefObject<TElement | null>;
279
+ overflowCount: number;
280
+ isOverflowing: boolean;
281
+ };
282
+
283
+ export declare const useOverflowStyles_unstable: (state: OverflowComponentState) => OverflowComponentState;
284
+
285
+ /**
286
+ * A hook that returns the visibility status of all items and groups.
287
+ *
288
+ * ⚠️ Heads up!
289
+ *
290
+ * This hook will cause the component it is in to re-render for every single time an item overflows or becomes
291
+ * visible - use with caution
292
+ * @returns visibility status of all items and groups
293
+ */
294
+ export declare function useOverflowVisibility(): {
295
+ itemVisibility: Record<string, boolean>;
296
+ groupVisibility: Record<string, OverflowGroupState>;
297
+ };
298
+
299
+ export { }
@@ -1,9 +1,9 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { useOverflow_unstable } from './useOverflow';
4
- import { useOverflowContextValues_unstable } from '../../useOverflowContextValues';
5
- import { useOverflowStyles_unstable } from './useOverflowStyles.styles';
6
- import { renderOverflow_unstable } from './renderOverflow';
2
+ import * as React from "react";
3
+ import { useOverflow_unstable } from "./useOverflow.js";
4
+ import { useOverflowContextValues_unstable } from "../../useOverflowContextValues.js";
5
+ import { useOverflowStyles_unstable } from "./useOverflowStyles.styles.js";
6
+ import { renderOverflow_unstable } from "./renderOverflow.js";
7
7
  /**
8
8
  * Provides an OverflowContext for OverflowItem descendants.
9
9
  */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Overflow/Overflow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { OverflowProps } from './Overflow.types';\nimport { useOverflow_unstable } from './useOverflow';\nimport { useOverflowContextValues_unstable } from '../../useOverflowContextValues';\nimport { useOverflowStyles_unstable } from './useOverflowStyles.styles';\nimport { renderOverflow_unstable } from './renderOverflow';\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const state = useOverflow_unstable(props, ref as React.Ref<HTMLElement>);\n const contextValues = useOverflowContextValues_unstable(state);\n\n useOverflowStyles_unstable(state);\n\n return renderOverflow_unstable(state, contextValues);\n});\n"],"names":["React","useOverflow_unstable","useOverflowContextValues_unstable","useOverflowStyles_unstable","renderOverflow_unstable","Overflow","forwardRef","props","ref","state","contextValues"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,iCAAiC,QAAQ,iCAAiC;AACnF,SAASC,0BAA0B,QAAQ,6BAA6B;AACxE,SAASC,uBAAuB,QAAQ,mBAAmB;AAE3D;;CAEC,GACD,OAAO,MAAMC,yBAAWL,MAAMM,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBR,kCAAkCO;IAExDN,2BAA2BM;IAE3B,OAAOL,wBAAwBK,OAAOC;AACxC,GAAG"}
1
+ {"version":3,"sources":["../src/components/Overflow/Overflow.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport type { OverflowProps } from './Overflow.types';\nimport { useOverflow_unstable } from './useOverflow';\nimport { useOverflowContextValues_unstable } from '../../useOverflowContextValues';\nimport { useOverflowStyles_unstable } from './useOverflowStyles.styles';\nimport { renderOverflow_unstable } from './renderOverflow';\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const state = useOverflow_unstable(props, ref as React.Ref<HTMLElement>);\n const contextValues = useOverflowContextValues_unstable(state);\n\n useOverflowStyles_unstable(state);\n\n return renderOverflow_unstable(state, contextValues);\n});\n"],"names":["React","useOverflow_unstable","useOverflowContextValues_unstable","useOverflowStyles_unstable","renderOverflow_unstable","Overflow","forwardRef","props","ref","state","contextValues"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,iCAAiC,QAAQ,oCAAiC;AACnF,SAASC,0BAA0B,QAAQ,gCAA6B;AACxE,SAASC,uBAAuB,QAAQ,sBAAmB;AAE3D;;CAEC,GACD,OAAO,MAAMC,yBAAWL,MAAMM,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,QAAQR,qBAAqBM,OAAOC;IAC1C,MAAME,gBAAgBR,kCAAkCO;IAExDN,2BAA2BM;IAE3B,OAAOL,wBAAwBK,OAAOC;AACxC,GAAG"}
@@ -1,4 +1,4 @@
1
- export { Overflow } from './Overflow';
2
- export { useOverflow_unstable } from './useOverflow';
3
- export { renderOverflow_unstable } from './renderOverflow';
4
- export { useOverflowStyles_unstable } from './useOverflowStyles.styles';
1
+ export { Overflow } from "./Overflow.js";
2
+ export { useOverflow_unstable } from "./useOverflow.js";
3
+ export { renderOverflow_unstable } from "./renderOverflow.js";
4
+ export { useOverflowStyles_unstable } from "./useOverflowStyles.styles.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Overflow/index.ts"],"sourcesContent":["export { Overflow } from './Overflow';\nexport { useOverflow_unstable } from './useOverflow';\nexport { renderOverflow_unstable } from './renderOverflow';\nexport { useOverflowStyles_unstable } from './useOverflowStyles.styles';\nexport type {\n OverflowProps,\n OnOverflowChangeData,\n OverflowState,\n OverflowComponentState,\n OverflowContextValues,\n} from './Overflow.types';\n"],"names":["Overflow","useOverflow_unstable","renderOverflow_unstable","useOverflowStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,aAAa;AACtC,SAASC,oBAAoB,QAAQ,gBAAgB;AACrD,SAASC,uBAAuB,QAAQ,mBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,6BAA6B"}
1
+ {"version":3,"sources":["../src/components/Overflow/index.ts"],"sourcesContent":["export { Overflow } from './Overflow';\nexport { useOverflow_unstable } from './useOverflow';\nexport { renderOverflow_unstable } from './renderOverflow';\nexport { useOverflowStyles_unstable } from './useOverflowStyles.styles';\nexport type {\n OverflowProps,\n OnOverflowChangeData,\n OverflowState,\n OverflowComponentState,\n OverflowContextValues,\n} from './Overflow.types';\n"],"names":["Overflow","useOverflow_unstable","renderOverflow_unstable","useOverflowStyles_unstable"],"mappings":"AAAA,SAASA,QAAQ,QAAQ,gBAAa;AACtC,SAASC,oBAAoB,QAAQ,mBAAgB;AACrD,SAASC,uBAAuB,QAAQ,sBAAmB;AAC3D,SAASC,0BAA0B,QAAQ,gCAA6B"}
@@ -1,6 +1,6 @@
1
- import * as React from 'react';
2
- import { applyTriggerPropsToChildren, getTriggerChild } from '@fluentui/react-utilities';
3
- import { OverflowContext } from '../../overflowContext';
1
+ import * as React from "react";
2
+ import { applyTriggerPropsToChildren, getTriggerChild } from "@fluentui/react-utilities";
3
+ import { OverflowContext } from "../../overflowContext.js";
4
4
  /**
5
5
  * Render the final JSX of Overflow.
6
6
  *
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Overflow/renderOverflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../../overflowContext';\nimport type { OverflowComponentState, OverflowContextValues } from './Overflow.types';\n\n/**\n * Render the final JSX of Overflow.\n *\n * Griffel-free so it can be reused by headless consumers; all class merging happens in\n * `useOverflowStyles_unstable`.\n */\nexport const renderOverflow_unstable = (\n state: OverflowComponentState,\n contextValues: OverflowContextValues,\n): React.ReactElement => {\n const child = getTriggerChild<HTMLElement>(state.children);\n\n const clonedChild = applyTriggerPropsToChildren(state.children, {\n ref: state.ref,\n className: state.className ?? child?.props.className,\n });\n\n return <OverflowContext.Provider value={contextValues.overflow}>{clonedChild}</OverflowContext.Provider>;\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","OverflowContext","renderOverflow_unstable","state","contextValues","child","children","clonedChild","ref","className","props","Provider","value","overflow"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,eAAe,QAAQ,4BAA4B;AACzF,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,QAAQL,gBAA6BG,MAAMG,QAAQ;QAI5CH;IAFb,MAAMI,cAAcR,4BAA4BI,MAAMG,QAAQ,EAAE;QAC9DE,KAAKL,MAAMK,GAAG;QACdC,WAAWN,CAAAA,mBAAAA,MAAMM,SAAS,cAAfN,8BAAAA,mBAAmBE,kBAAAA,4BAAAA,MAAOK,KAAK,CAACD,SAAS;IACtD;IAEA,qBAAO,oBAACR,gBAAgBU,QAAQ;QAACC,OAAOR,cAAcS,QAAQ;OAAGN;AACnE,EAAE"}
1
+ {"version":3,"sources":["../src/components/Overflow/renderOverflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../../overflowContext';\nimport type { OverflowComponentState, OverflowContextValues } from './Overflow.types';\n\n/**\n * Render the final JSX of Overflow.\n *\n * Griffel-free so it can be reused by headless consumers; all class merging happens in\n * `useOverflowStyles_unstable`.\n */\nexport const renderOverflow_unstable = (\n state: OverflowComponentState,\n contextValues: OverflowContextValues,\n): React.ReactElement => {\n const child = getTriggerChild<HTMLElement>(state.children);\n\n const clonedChild = applyTriggerPropsToChildren(state.children, {\n ref: state.ref,\n className: state.className ?? child?.props.className,\n });\n\n return <OverflowContext.Provider value={contextValues.overflow}>{clonedChild}</OverflowContext.Provider>;\n};\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","OverflowContext","renderOverflow_unstable","state","contextValues","child","children","clonedChild","ref","className","props","Provider","value","overflow"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,eAAe,QAAQ,4BAA4B;AACzF,SAASC,eAAe,QAAQ,2BAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,0BAA0B,CACrCC,OACAC;IAEA,MAAMC,QAAQL,gBAA6BG,MAAMG,QAAQ;QAI5CH;IAFb,MAAMI,cAAcR,4BAA4BI,MAAMG,QAAQ,EAAE;QAC9DE,KAAKL,MAAMK,GAAG;QACdC,WAAWN,CAAAA,mBAAAA,MAAMM,SAAS,cAAfN,8BAAAA,mBAAmBE,kBAAAA,4BAAAA,MAAOK,KAAK,CAACD,SAAS;IACtD;IAEA,qBAAO,oBAACR,gBAAgBU,QAAQ;QAACC,OAAOR,cAAcS,QAAQ;OAAGN;AACnE,EAAE"}
@@ -1,6 +1,6 @@
1
1
  'use client';
2
- import { getTriggerChild, getReactElementRef, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';
3
- import { updateVisibilityAttribute, useOverflowContainer } from '../../useOverflowContainer';
2
+ import { getTriggerChild, getReactElementRef, useMergedRefs, useEventCallback } from "@fluentui/react-utilities";
3
+ import { updateVisibilityAttribute, useOverflowContainer } from "../../useOverflowContainer.js";
4
4
  /**
5
5
  * The state required to render Overflow.
6
6
  *
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Overflow/useOverflow.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnUpdateOverflow } from '@fluentui/priority-overflow';\nimport { getTriggerChild, getReactElementRef, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';\n\nimport { updateVisibilityAttribute, useOverflowContainer } from '../../useOverflowContainer';\nimport type { OverflowComponentState, OverflowProps, OverflowState } from './Overflow.types';\n\n/**\n * The state required to render Overflow.\n *\n * @param props - props from this instance of Overflow\n * @param ref - reference forwarded to the single child's root element\n */\nexport const useOverflow_unstable = (props: OverflowProps, ref: React.Ref<HTMLElement>): OverflowComponentState => {\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding,\n onOverflowChange,\n hasHiddenItems,\n } = props;\n\n const update: OnUpdateOverflow = useEventCallback(() => {\n // eslint-disable-next-line react-hooks/immutability\n const snapshot = getSnapshot();\n const state: OverflowState = {\n hasOverflow: snapshot.invisibleItemCount > 0,\n itemVisibility: snapshot.itemVisibility,\n groupVisibility: snapshot.groupVisibility,\n };\n onOverflowChange?.(null, state);\n });\n\n const {\n containerRef,\n getSnapshot,\n subscribe,\n registerItem,\n updateOverflow,\n forceUpdateOverflow,\n registerOverflowMenu,\n registerDivider,\n } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n hasHiddenItems,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const child = getTriggerChild<HTMLElement>(children);\n\n return {\n containerRef,\n getSnapshot,\n subscribe,\n registerItem,\n updateOverflow,\n forceUpdateOverflow,\n registerOverflowMenu,\n registerDivider,\n ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n children,\n };\n};\n"],"names":["getTriggerChild","getReactElementRef","useMergedRefs","useEventCallback","updateVisibilityAttribute","useOverflowContainer","useOverflow_unstable","props","ref","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","hasHiddenItems","update","snapshot","getSnapshot","state","hasOverflow","invisibleItemCount","itemVisibility","groupVisibility","containerRef","subscribe","registerItem","updateOverflow","forceUpdateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child"],"mappings":"AAAA;AAIA,SAASA,eAAe,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEjH,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,6BAA6B;AAG7F;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EACJC,QAAQ,EACRC,cAAc,EACdC,eAAe,YAAY,EAC3BC,iBAAiB,EACjBC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACf,GAAGR;IAEJ,MAAMS,SAA2Bb,iBAAiB;QAChD,oDAAoD;QACpD,MAAMc,WAAWC;QACjB,MAAMC,QAAuB;YAC3BC,aAAaH,SAASI,kBAAkB,GAAG;YAC3CC,gBAAgBL,SAASK,cAAc;YACvCC,iBAAiBN,SAASM,eAAe;QAC3C;QACAT,6BAAAA,uCAAAA,iBAAmB,MAAMK;IAC3B;IAEA,MAAM,EACJK,YAAY,EACZN,WAAW,EACXO,SAAS,EACTC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,oBAAoB,EACpBC,eAAe,EAChB,GAAGzB,qBAAqBW,QAAQ;QAC/BJ;QACAD;QACAE;QACAH;QACAK;QACAgB,wBAAwB3B;IAC1B;IAEA,MAAM4B,QAAQhC,gBAA6BS;IAE3C,OAAO;QACLe;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,KAAKN,cAAcsB,cAAchB,KAAKP,mBAAmB+B;QACzDvB;IACF;AACF,EAAE"}
1
+ {"version":3,"sources":["../src/components/Overflow/useOverflow.ts"],"sourcesContent":["'use client';\n\nimport type * as React from 'react';\nimport type { OnUpdateOverflow } from '@fluentui/priority-overflow';\nimport { getTriggerChild, getReactElementRef, useMergedRefs, useEventCallback } from '@fluentui/react-utilities';\n\nimport { updateVisibilityAttribute, useOverflowContainer } from '../../useOverflowContainer';\nimport type { OverflowComponentState, OverflowProps, OverflowState } from './Overflow.types';\n\n/**\n * The state required to render Overflow.\n *\n * @param props - props from this instance of Overflow\n * @param ref - reference forwarded to the single child's root element\n */\nexport const useOverflow_unstable = (props: OverflowProps, ref: React.Ref<HTMLElement>): OverflowComponentState => {\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding,\n onOverflowChange,\n hasHiddenItems,\n } = props;\n\n const update: OnUpdateOverflow = useEventCallback(() => {\n // eslint-disable-next-line react-hooks/immutability\n const snapshot = getSnapshot();\n const state: OverflowState = {\n hasOverflow: snapshot.invisibleItemCount > 0,\n itemVisibility: snapshot.itemVisibility,\n groupVisibility: snapshot.groupVisibility,\n };\n onOverflowChange?.(null, state);\n });\n\n const {\n containerRef,\n getSnapshot,\n subscribe,\n registerItem,\n updateOverflow,\n forceUpdateOverflow,\n registerOverflowMenu,\n registerDivider,\n } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n hasHiddenItems,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const child = getTriggerChild<HTMLElement>(children);\n\n return {\n containerRef,\n getSnapshot,\n subscribe,\n registerItem,\n updateOverflow,\n forceUpdateOverflow,\n registerOverflowMenu,\n registerDivider,\n ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n children,\n };\n};\n"],"names":["getTriggerChild","getReactElementRef","useMergedRefs","useEventCallback","updateVisibilityAttribute","useOverflowContainer","useOverflow_unstable","props","ref","children","minimumVisible","overflowAxis","overflowDirection","padding","onOverflowChange","hasHiddenItems","update","snapshot","getSnapshot","state","hasOverflow","invisibleItemCount","itemVisibility","groupVisibility","containerRef","subscribe","registerItem","updateOverflow","forceUpdateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child"],"mappings":"AAAA;AAIA,SAASA,eAAe,EAAEC,kBAAkB,EAAEC,aAAa,EAAEC,gBAAgB,QAAQ,4BAA4B;AAEjH,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,gCAA6B;AAG7F;;;;;CAKC,GACD,OAAO,MAAMC,uBAAuB,CAACC,OAAsBC;IACzD,MAAM,EACJC,QAAQ,EACRC,cAAc,EACdC,eAAe,YAAY,EAC3BC,iBAAiB,EACjBC,OAAO,EACPC,gBAAgB,EAChBC,cAAc,EACf,GAAGR;IAEJ,MAAMS,SAA2Bb,iBAAiB;QAChD,oDAAoD;QACpD,MAAMc,WAAWC;QACjB,MAAMC,QAAuB;YAC3BC,aAAaH,SAASI,kBAAkB,GAAG;YAC3CC,gBAAgBL,SAASK,cAAc;YACvCC,iBAAiBN,SAASM,eAAe;QAC3C;QACAT,6BAAAA,uCAAAA,iBAAmB,MAAMK;IAC3B;IAEA,MAAM,EACJK,YAAY,EACZN,WAAW,EACXO,SAAS,EACTC,YAAY,EACZC,cAAc,EACdC,mBAAmB,EACnBC,oBAAoB,EACpBC,eAAe,EAChB,GAAGzB,qBAAqBW,QAAQ;QAC/BJ;QACAD;QACAE;QACAH;QACAK;QACAgB,wBAAwB3B;IAC1B;IAEA,MAAM4B,QAAQhC,gBAA6BS;IAE3C,OAAO;QACLe;QACAN;QACAO;QACAC;QACAC;QACAC;QACAC;QACAC;QACAtB,KAAKN,cAAcsB,cAAchB,KAAKP,mBAAmB+B;QACzDvB;IACF;AACF,EAAE"}
@@ -1,8 +1,8 @@
1
1
  'use client';
2
2
 
3
- import { __styles, mergeClasses } from '@griffel/react';
4
- import { getTriggerChild } from '@fluentui/react-utilities';
5
- import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';
3
+ import { __styles, mergeClasses } from "@griffel/react";
4
+ import { getTriggerChild } from "@fluentui/react-utilities";
5
+ import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from "../../constants.js";
6
6
  export const useOverflowStyles = /*#__PURE__*/__styles({
7
7
  overflowMenu: {
8
8
  Brvla84: "fyfkpbf"
@@ -1 +1 @@
1
- {"version":3,"names":["__styles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d","useOverflowStyles_unstable","state","styles","child","children","className","props"],"sources":["useOverflowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTriggerChild } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\nexport const useOverflowStyles_unstable = (state)=>{\n const styles = useOverflowStyles();\n const child = getTriggerChild(state.children);\n // eslint-disable-next-line react-hooks/immutability\n state.className = mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,iBAAiB;AACtE,OAAO,MAAMC,iBAAiB,gBAAGL,QAAA;EAAAM,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,MAAMS,KAAK,GAAGZ,eAAe,CAACU,KAAK,CAACG,QAAQ,CAAC;EAC7C;EACAH,KAAK,CAACI,SAAS,GAAGf,YAAY,CAAC,cAAc,EAAEY,MAAM,CAACP,YAAY,EAAEO,MAAM,CAACL,gBAAgB,EAAEM,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAACD,SAAS,CAAC;EACjK,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
1
+ {"version":3,"names":["__styles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d","useOverflowStyles_unstable","state","styles","child","children","className","props"],"sources":["useOverflowStyles.styles.js"],"sourcesContent":["'use client';\nimport { makeStyles, mergeClasses } from \"@griffel/react\";\nimport { getTriggerChild } from \"@fluentui/react-utilities\";\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from \"../../constants.js\";\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\nexport const useOverflowStyles_unstable = (state)=>{\n const styles = useOverflowStyles();\n const child = getTriggerChild(state.children);\n // eslint-disable-next-line react-hooks/immutability\n state.className = mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child === null || child === void 0 ? void 0 : child.props.className);\n return state;\n};\n"],"mappings":"AAAA,YAAY;;AACZ,SAAAA,QAAA,EAAqBC,YAAY,QAAQ,gBAAgB;AACzD,SAASC,eAAe,QAAQ,2BAA2B;AAC3D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,oBAAoB;AACzE,OAAO,MAAMC,iBAAiB,gBAAGL,QAAA;EAAAM,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC;AACF,OAAO,MAAMC,0BAA0B,GAAIC,KAAK,IAAG;EAC/C,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;EAClC,MAAMS,KAAK,GAAGZ,eAAe,CAACU,KAAK,CAACG,QAAQ,CAAC;EAC7C;EACAH,KAAK,CAACI,SAAS,GAAGf,YAAY,CAAC,cAAc,EAAEY,MAAM,CAACP,YAAY,EAAEO,MAAM,CAACL,gBAAgB,EAAEM,KAAK,KAAK,IAAI,IAAIA,KAAK,KAAK,KAAK,CAAC,GAAG,KAAK,CAAC,GAAGA,KAAK,CAACG,KAAK,CAACD,SAAS,CAAC;EACjK,OAAOJ,KAAK;AAChB,CAAC","ignoreList":[]}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
- import { makeStyles, mergeClasses } from '@griffel/react';
3
- import { getTriggerChild } from '@fluentui/react-utilities';
4
- import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';
2
+ import { makeStyles, mergeClasses } from "@griffel/react";
3
+ import { getTriggerChild } from "@fluentui/react-utilities";
4
+ import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from "../../constants.js";
5
5
  export const useOverflowStyles = makeStyles({
6
6
  overflowMenu: {
7
7
  [`& [${DATA_OVERFLOW_MENU}]`]: {
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/Overflow/useOverflowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTriggerChild } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';\nimport type { OverflowComponentState } from './Overflow.types';\n\nexport const useOverflowStyles = 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\nexport const useOverflowStyles_unstable = (state: OverflowComponentState): OverflowComponentState => {\n const styles = useOverflowStyles();\n const child = getTriggerChild<HTMLElement>(state.children);\n\n // eslint-disable-next-line react-hooks/immutability\n state.className = mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display","useOverflowStyles_unstable","state","styles","child","children","className","props"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,kBAAkB;AAGvE,OAAO,MAAMC,oBAAoBL,WAAW;IAC1CM,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,mBAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG;AAEH,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,SAASP;IACf,MAAMQ,QAAQX,gBAA6BS,MAAMG,QAAQ;IAEzD,oDAAoD;IACpDH,MAAMI,SAAS,GAAGd,aAAa,gBAAgBW,OAAON,YAAY,EAAEM,OAAOJ,gBAAgB,EAAEK,kBAAAA,4BAAAA,MAAOG,KAAK,CAACD,SAAS;IAEnH,OAAOJ;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/Overflow/useOverflowStyles.styles.ts"],"sourcesContent":["'use client';\n\nimport { makeStyles, mergeClasses } from '@griffel/react';\nimport { getTriggerChild } from '@fluentui/react-utilities';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../../constants';\nimport type { OverflowComponentState } from './Overflow.types';\n\nexport const useOverflowStyles = 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\nexport const useOverflowStyles_unstable = (state: OverflowComponentState): OverflowComponentState => {\n const styles = useOverflowStyles();\n const child = getTriggerChild<HTMLElement>(state.children);\n\n // eslint-disable-next-line react-hooks/immutability\n state.className = mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, child?.props.className);\n\n return state;\n};\n"],"names":["makeStyles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","flexShrink","overflowingItems","display","useOverflowStyles_unstable","state","styles","child","children","className","props"],"mappings":"AAAA;AAEA,SAASA,UAAU,EAAEC,YAAY,QAAQ,iBAAiB;AAC1D,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,qBAAkB;AAGvE,OAAO,MAAMC,oBAAoBL,WAAW;IAC1CM,cAAc;QACZ,CAAC,CAAC,GAAG,EAAEF,mBAAmB,CAAC,CAAC,CAAC,EAAE;YAC7BG,YAAY;QACd;IACF;IAEAC,kBAAkB;QAChB,CAAC,CAAC,GAAG,EAAEL,iBAAiB,CAAC,CAAC,CAAC,EAAE;YAC3BM,SAAS;QACX;IACF;AACF,GAAG;AAEH,OAAO,MAAMC,6BAA6B,CAACC;IACzC,MAAMC,SAASP;IACf,MAAMQ,QAAQX,gBAA6BS,MAAMG,QAAQ;IAEzD,oDAAoD;IACpDH,MAAMI,SAAS,GAAGd,aAAa,gBAAgBW,OAAON,YAAY,EAAEM,OAAOJ,gBAAgB,EAAEK,kBAAAA,4BAAAA,MAAOG,KAAK,CAACD,SAAS;IAEnH,OAAOJ;AACT,EAAE"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
4
- import { useOverflowDivider } from '../../useOverflowDivider';
2
+ import * as React from "react";
3
+ import { applyTriggerPropsToChildren, useMergedRefs } from "@fluentui/react-utilities";
4
+ import { useOverflowDivider } from "../../useOverflowDivider.js";
5
5
  /**
6
6
  * Attaches overflow item behavior to its child registered with the OverflowContext.
7
7
  * It does not render an element of its own.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport type { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}
1
+ {"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport type { OverflowDividerProps } from './OverflowDivider.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 OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,8BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { applyTriggerPropsToChildren, getReactElementRef, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
4
- import { useOverflowItem } from '../../useOverflowItem';
2
+ import * as React from "react";
3
+ import { applyTriggerPropsToChildren, getReactElementRef, getTriggerChild, useMergedRefs } from "@fluentui/react-utilities";
4
+ import { useOverflowItem } from "../../useOverflowItem.js";
5
5
  /**
6
6
  * Attaches overflow item behavior to its child registered with the OverflowContext.
7
7
  * It does not render an element of its own.
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getReactElementRef,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport type { 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 *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, pinned, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId, pinned);\n const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getReactElementRef","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,kBAAkB,EAElBC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeN,MAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,eAAeV,gBAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,QAAQb,gBAAgBW;IAE9B,OAAOb,4BAA4Ba,UAAU;QAC3CL,KAAKL,cAAcW,cAAcN,KAAKP,mBAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/OverflowItem.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n getReactElementRef,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport type { 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 *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, pinned, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId, pinned);\n const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, getReactElementRef(child)),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getReactElementRef","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","pinned","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAC3BC,kBAAkB,EAElBC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,2BAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeN,MAAMO,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,MAAM,EAAEC,QAAQ,EAAE,GAAGN;IAEpD,MAAMO,eAAeV,gBAAgBK,IAAIE,UAAUD,SAASE;IAC5D,MAAMG,QAAQb,gBAAgBW;IAE9B,OAAOb,4BAA4Ba,UAAU;QAC3CL,KAAKL,cAAcW,cAAcN,KAAKP,mBAAmBc;IAC3D;AACF,GAAG;AAEH,6FAA6F;AAC5FV,aAAwCW,wBAAwB,GAAG"}
@@ -1 +1 @@
1
- export { OverflowItem } from './OverflowItem';
1
+ export { OverflowItem } from "./OverflowItem.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}
1
+ {"version":3,"sources":["../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"mappings":"AACA,SAASA,YAAY,QAAQ,oBAAiB"}
@@ -1,7 +1,7 @@
1
1
  'use client';
2
- import * as React from 'react';
3
- import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
4
- import { useOverflowContext } from '../../overflowContext';
2
+ import * as React from "react";
3
+ import { useFluent_unstable as useFluent } from "@fluentui/react-shared-contexts";
4
+ import { useOverflowContext } from "../../overflowContext.js";
5
5
  /**
6
6
  * Renderless opt-in component that observes the `<Overflow>` container for
7
7
  * direct-child DOM mutations and triggers an overflow recompute. Drop it
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverflowReorderObserver/OverflowReorderObserver.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '../../overflowContext';\n\n/**\n * Renderless opt-in component that observes the `<Overflow>` container for\n * direct-child DOM mutations and triggers an overflow recompute. Drop it\n * inside `<Overflow>` when items can be reordered, added, or removed via\n * React state without a container resize — Fluent's overflow manager only\n * listens to `ResizeObserver` otherwise, so reorders leave visibility flags\n * stale.\n *\n * @example\n * ```tsx\n * <Overflow>\n * <div>\n * <OverflowReorderObserver />\n * {items.map(id => <OverflowItem key={id} id={id} priority={1}>{id}</OverflowItem>)}\n * </div>\n * </Overflow>\n * ```\n */\nexport const OverflowReorderObserver: React.FC = () => {\n const containerRef = useOverflowContext(v => v.containerRef);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const { targetDocument } = useFluent();\n const targetWindow = targetDocument?.defaultView;\n\n React.useEffect(() => {\n const el = containerRef?.current;\n if (!el || !targetWindow?.MutationObserver) {\n return;\n }\n\n const mutationObserver = new targetWindow.MutationObserver(() => updateOverflow());\n mutationObserver.observe(el, { childList: true });\n\n return () => mutationObserver.disconnect();\n }, [containerRef, updateOverflow, targetWindow]);\n\n return null;\n};\n"],"names":["React","useFluent_unstable","useFluent","useOverflowContext","OverflowReorderObserver","containerRef","v","updateOverflow","targetDocument","targetWindow","defaultView","useEffect","el","current","MutationObserver","mutationObserver","observe","childList","disconnect"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,wBAAwB;AAE3D;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,0BAAoC;IAC/C,MAAMC,eAAeF,mBAAmBG,CAAAA,IAAKA,EAAED,YAAY;IAC3D,MAAME,iBAAiBJ,mBAAmBG,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAC3B,MAAMO,eAAeD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEhDV,MAAMW,SAAS,CAAC;QACd,MAAMC,KAAKP,yBAAAA,mCAAAA,aAAcQ,OAAO;QAChC,IAAI,CAACD,MAAM,EAACH,yBAAAA,mCAAAA,aAAcK,gBAAgB,GAAE;YAC1C;QACF;QAEA,MAAMC,mBAAmB,IAAIN,aAAaK,gBAAgB,CAAC,IAAMP;QACjEQ,iBAAiBC,OAAO,CAACJ,IAAI;YAAEK,WAAW;QAAK;QAE/C,OAAO,IAAMF,iBAAiBG,UAAU;IAC1C,GAAG;QAACb;QAAcE;QAAgBE;KAAa;IAE/C,OAAO;AACT,EAAE"}
1
+ {"version":3,"sources":["../src/components/OverflowReorderObserver/OverflowReorderObserver.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';\nimport { useOverflowContext } from '../../overflowContext';\n\n/**\n * Renderless opt-in component that observes the `<Overflow>` container for\n * direct-child DOM mutations and triggers an overflow recompute. Drop it\n * inside `<Overflow>` when items can be reordered, added, or removed via\n * React state without a container resize — Fluent's overflow manager only\n * listens to `ResizeObserver` otherwise, so reorders leave visibility flags\n * stale.\n *\n * @example\n * ```tsx\n * <Overflow>\n * <div>\n * <OverflowReorderObserver />\n * {items.map(id => <OverflowItem key={id} id={id} priority={1}>{id}</OverflowItem>)}\n * </div>\n * </Overflow>\n * ```\n */\nexport const OverflowReorderObserver: React.FC = () => {\n const containerRef = useOverflowContext(v => v.containerRef);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const { targetDocument } = useFluent();\n const targetWindow = targetDocument?.defaultView;\n\n React.useEffect(() => {\n const el = containerRef?.current;\n if (!el || !targetWindow?.MutationObserver) {\n return;\n }\n\n const mutationObserver = new targetWindow.MutationObserver(() => updateOverflow());\n mutationObserver.observe(el, { childList: true });\n\n return () => mutationObserver.disconnect();\n }, [containerRef, updateOverflow, targetWindow]);\n\n return null;\n};\n"],"names":["React","useFluent_unstable","useFluent","useOverflowContext","OverflowReorderObserver","containerRef","v","updateOverflow","targetDocument","targetWindow","defaultView","useEffect","el","current","MutationObserver","mutationObserver","observe","childList","disconnect"],"mappings":"AAAA;AAEA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,sBAAsBC,SAAS,QAAQ,kCAAkC;AAClF,SAASC,kBAAkB,QAAQ,2BAAwB;AAE3D;;;;;;;;;;;;;;;;;CAiBC,GACD,OAAO,MAAMC,0BAAoC;IAC/C,MAAMC,eAAeF,mBAAmBG,CAAAA,IAAKA,EAAED,YAAY;IAC3D,MAAME,iBAAiBJ,mBAAmBG,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAM,EAAEC,cAAc,EAAE,GAAGN;IAC3B,MAAMO,eAAeD,2BAAAA,qCAAAA,eAAgBE,WAAW;IAEhDV,MAAMW,SAAS,CAAC;QACd,MAAMC,KAAKP,yBAAAA,mCAAAA,aAAcQ,OAAO;QAChC,IAAI,CAACD,MAAM,EAACH,yBAAAA,mCAAAA,aAAcK,gBAAgB,GAAE;YAC1C;QACF;QAEA,MAAMC,mBAAmB,IAAIN,aAAaK,gBAAgB,CAAC,IAAMP;QACjEQ,iBAAiBC,OAAO,CAACJ,IAAI;YAAEK,WAAW;QAAK;QAE/C,OAAO,IAAMF,iBAAiBG,UAAU;IAC1C,GAAG;QAACb;QAAcE;QAAgBE;KAAa;IAE/C,OAAO;AACT,EAAE"}
@@ -1 +1 @@
1
- export { OverflowReorderObserver } from './OverflowReorderObserver';
1
+ export { OverflowReorderObserver } from "./OverflowReorderObserver.js";
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/components/OverflowReorderObserver/index.ts"],"sourcesContent":["export { OverflowReorderObserver } from './OverflowReorderObserver';\n"],"names":["OverflowReorderObserver"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,4BAA4B"}
1
+ {"version":3,"sources":["../src/components/OverflowReorderObserver/index.ts"],"sourcesContent":["export { OverflowReorderObserver } from './OverflowReorderObserver';\n"],"names":["OverflowReorderObserver"],"mappings":"AAAA,SAASA,uBAAuB,QAAQ,+BAA4B"}
package/lib/index.js CHANGED
@@ -1,15 +1,15 @@
1
- export { Overflow, useOverflow_unstable, renderOverflow_unstable, useOverflowStyles_unstable } from './components/Overflow';
2
- export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';
3
- export { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';
4
- export { useIsOverflowItemVisible } from './useIsOverflowItemVisible';
5
- export { useOverflowContainer } from './useOverflowContainer';
6
- export { useOverflowContextValues_unstable } from './useOverflowContextValues';
7
- export { useOverflowCount } from './useOverflowCount';
8
- export { useOverflowItem } from './useOverflowItem';
9
- export { useOverflowMenu } from './useOverflowMenu';
10
- export { useOverflowDivider } from './useOverflowDivider';
11
- export { useOverflowVisibility } from './useOverflowVisibility';
12
- export { useOverflowContext, OverflowProvider } from './overflowContext';
13
- export { OverflowItem } from './components/OverflowItem/OverflowItem';
14
- export { OverflowDivider } from './components/OverflowDivider/OverflowDivider';
15
- export { OverflowReorderObserver } from './components/OverflowReorderObserver';
1
+ export { Overflow, useOverflow_unstable, renderOverflow_unstable, useOverflowStyles_unstable } from "./components/Overflow/index.js";
2
+ export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from "./constants.js";
3
+ export { useIsOverflowGroupVisible } from "./useIsOverflowGroupVisible.js";
4
+ export { useIsOverflowItemVisible } from "./useIsOverflowItemVisible.js";
5
+ export { useOverflowContainer } from "./useOverflowContainer.js";
6
+ export { useOverflowContextValues_unstable } from "./useOverflowContextValues.js";
7
+ export { useOverflowCount } from "./useOverflowCount.js";
8
+ export { useOverflowItem } from "./useOverflowItem.js";
9
+ export { useOverflowMenu } from "./useOverflowMenu.js";
10
+ export { useOverflowDivider } from "./useOverflowDivider.js";
11
+ export { useOverflowVisibility } from "./useOverflowVisibility.js";
12
+ export { useOverflowContext, OverflowProvider } from "./overflowContext.js";
13
+ export { OverflowItem } from "./components/OverflowItem/OverflowItem.js";
14
+ export { OverflowDivider } from "./components/OverflowDivider/OverflowDivider.js";
15
+ export { OverflowReorderObserver } from "./components/OverflowReorderObserver/index.js";