@fluentui/react-overflow 9.9.0 → 9.9.2
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.
- package/CHANGELOG.md +24 -2
- package/dist/index.d.cts +299 -0
- package/lib/components/Overflow/Overflow.js +5 -5
- package/lib/components/Overflow/Overflow.js.map +1 -1
- package/lib/components/Overflow/index.js +4 -4
- package/lib/components/Overflow/index.js.map +1 -1
- package/lib/components/Overflow/renderOverflow.js +3 -3
- package/lib/components/Overflow/renderOverflow.js.map +1 -1
- package/lib/components/Overflow/useOverflow.js +2 -2
- package/lib/components/Overflow/useOverflow.js.map +1 -1
- package/lib/components/Overflow/useOverflowStyles.styles.js +3 -3
- package/lib/components/Overflow/useOverflowStyles.styles.js.map +1 -1
- package/lib/components/Overflow/useOverflowStyles.styles.raw.js +3 -3
- package/lib/components/Overflow/useOverflowStyles.styles.raw.js.map +1 -1
- package/lib/components/OverflowDivider/OverflowDivider.js +3 -3
- package/lib/components/OverflowDivider/OverflowDivider.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js +3 -3
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/components/OverflowItem/index.js +1 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/components/OverflowReorderObserver/OverflowReorderObserver.js +3 -3
- package/lib/components/OverflowReorderObserver/OverflowReorderObserver.js.map +1 -1
- package/lib/components/OverflowReorderObserver/index.js +1 -1
- package/lib/components/OverflowReorderObserver/index.js.map +1 -1
- package/lib/index.js +15 -15
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js +2 -2
- package/lib/useIsOverflowGroupVisible.js +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js +1 -1
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js +4 -4
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowContextValues.js +1 -1
- package/lib/useOverflowCount.js +1 -1
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowDivider.js +3 -3
- package/lib/useOverflowDivider.js.map +1 -1
- package/lib/useOverflowItem.js +3 -3
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js +4 -4
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib/useOverflowSnapshot.js +3 -3
- package/lib/useOverflowSnapshot.js.map +1 -1
- package/lib/useOverflowVisibility.js +1 -1
- package/lib/useOverflowVisibility.js.map +1 -1
- package/lib-commonjs/components/Overflow/{Overflow.js → Overflow.cjs} +4 -4
- package/lib-commonjs/components/Overflow/{Overflow.js.map → Overflow.cjs.map} +1 -1
- package/lib-commonjs/components/Overflow/{index.js → index.cjs} +4 -4
- package/lib-commonjs/components/Overflow/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/Overflow/{renderOverflow.js → renderOverflow.cjs} +1 -1
- package/lib-commonjs/components/Overflow/{renderOverflow.js.map → renderOverflow.cjs.map} +1 -1
- package/lib-commonjs/components/Overflow/{useOverflow.js → useOverflow.cjs} +1 -1
- package/lib-commonjs/components/Overflow/{useOverflow.js.map → useOverflow.cjs.map} +1 -1
- package/lib-commonjs/components/Overflow/useOverflowStyles.styles.cjs.map +1 -0
- package/lib-commonjs/components/Overflow/{useOverflowStyles.styles.raw.js → useOverflowStyles.styles.raw.cjs} +1 -1
- package/lib-commonjs/components/Overflow/{useOverflowStyles.styles.raw.js.map → useOverflowStyles.styles.raw.cjs.map} +1 -1
- package/lib-commonjs/components/OverflowDivider/{OverflowDivider.js → OverflowDivider.cjs} +1 -1
- package/lib-commonjs/components/OverflowDivider/{OverflowDivider.js.map → OverflowDivider.cjs.map} +1 -1
- package/lib-commonjs/components/OverflowItem/{OverflowItem.js → OverflowItem.cjs} +1 -1
- package/lib-commonjs/components/OverflowItem/{OverflowItem.js.map → OverflowItem.cjs.map} +1 -1
- package/lib-commonjs/components/OverflowItem/{index.js → index.cjs} +1 -1
- package/lib-commonjs/components/OverflowItem/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/components/OverflowReorderObserver/{OverflowReorderObserver.js → OverflowReorderObserver.cjs} +1 -1
- package/lib-commonjs/components/OverflowReorderObserver/{OverflowReorderObserver.js.map → OverflowReorderObserver.cjs.map} +1 -1
- package/lib-commonjs/components/OverflowReorderObserver/{index.js → index.cjs} +1 -1
- package/lib-commonjs/components/OverflowReorderObserver/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/{index.js → index.cjs} +20 -20
- package/lib-commonjs/{index.js.map → index.cjs.map} +1 -1
- package/lib-commonjs/{useIsOverflowGroupVisible.js → useIsOverflowGroupVisible.cjs} +1 -1
- package/lib-commonjs/{useIsOverflowGroupVisible.js.map → useIsOverflowGroupVisible.cjs.map} +1 -1
- package/lib-commonjs/{useIsOverflowItemVisible.js → useIsOverflowItemVisible.cjs} +1 -1
- package/lib-commonjs/{useIsOverflowItemVisible.js.map → useIsOverflowItemVisible.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowContainer.js → useOverflowContainer.cjs} +1 -1
- package/lib-commonjs/{useOverflowContainer.js.map → useOverflowContainer.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowCount.js → useOverflowCount.cjs} +1 -1
- package/lib-commonjs/{useOverflowCount.js.map → useOverflowCount.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowDivider.js → useOverflowDivider.cjs} +1 -1
- package/lib-commonjs/{useOverflowDivider.js.map → useOverflowDivider.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowItem.js → useOverflowItem.cjs} +1 -1
- package/lib-commonjs/{useOverflowItem.js.map → useOverflowItem.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowMenu.js → useOverflowMenu.cjs} +2 -2
- package/lib-commonjs/{useOverflowMenu.js.map → useOverflowMenu.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowSnapshot.js → useOverflowSnapshot.cjs} +1 -1
- package/lib-commonjs/{useOverflowSnapshot.js.map → useOverflowSnapshot.cjs.map} +1 -1
- package/lib-commonjs/{useOverflowVisibility.js → useOverflowVisibility.cjs} +1 -1
- package/lib-commonjs/{useOverflowVisibility.js.map → useOverflowVisibility.cjs.map} +1 -1
- package/package.json +17 -11
- package/lib-commonjs/components/Overflow/useOverflowStyles.styles.js.map +0 -1
- /package/lib-commonjs/components/Overflow/{Overflow.types.js → Overflow.types.cjs} +0 -0
- /package/lib-commonjs/components/Overflow/{Overflow.types.js.map → Overflow.types.cjs.map} +0 -0
- /package/lib-commonjs/components/Overflow/{useOverflowStyles.styles.js → useOverflowStyles.styles.cjs} +0 -0
- /package/lib-commonjs/components/OverflowDivider/{OverflowDivider.types.js → OverflowDivider.types.cjs} +0 -0
- /package/lib-commonjs/components/OverflowDivider/{OverflowDivider.types.js.map → OverflowDivider.types.cjs.map} +0 -0
- /package/lib-commonjs/components/OverflowItem/{OverflowItem.types.js → OverflowItem.types.cjs} +0 -0
- /package/lib-commonjs/components/OverflowItem/{OverflowItem.types.js.map → OverflowItem.types.cjs.map} +0 -0
- /package/lib-commonjs/{constants.js → constants.cjs} +0 -0
- /package/lib-commonjs/{constants.js.map → constants.cjs.map} +0 -0
- /package/lib-commonjs/{overflowContext.js → overflowContext.cjs} +0 -0
- /package/lib-commonjs/{overflowContext.js.map → overflowContext.cjs.map} +0 -0
- /package/lib-commonjs/{types.js → types.cjs} +0 -0
- /package/lib-commonjs/{types.js.map → types.cjs.map} +0 -0
- /package/lib-commonjs/{useOverflowContextValues.js → useOverflowContextValues.cjs} +0 -0
- /package/lib-commonjs/{useOverflowContextValues.js.map → useOverflowContextValues.cjs.map} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Overflow,\n useOverflow_unstable,\n renderOverflow_unstable,\n useOverflowStyles_unstable,\n} from './components/Overflow';\nexport type {\n OverflowProps,\n OnOverflowChangeData,\n OverflowState,\n OverflowComponentState,\n OverflowContextValues,\n} from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowContextValues_unstable } from './useOverflowContextValues';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext, OverflowProvider } from './overflowContext';\nexport type { OverflowContextValue } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport type { OverflowDividerProps } from './components/OverflowDivider/OverflowDivider.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\nexport { OverflowReorderObserver } from './components/OverflowReorderObserver';\n\nexport type { OnUpdateItemVisibility, OnUpdateOverflow, OverflowEventPayload } from '@fluentui/priority-overflow';\n"],"names":["Overflow","useOverflow_unstable","renderOverflow_unstable","useOverflowStyles_unstable","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowContextValues_unstable","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowProvider","OverflowItem","OverflowDivider","OverflowReorderObserver"],"mappings":";;;;;;;;;;;IAaSI;0CAAgB;;yBAA+D;eAArBG;;;eAAxCF,6BAAkB;;;eAAEC,6BAAkB;;;eAZ/DN,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {\n Overflow,\n useOverflow_unstable,\n renderOverflow_unstable,\n useOverflowStyles_unstable,\n} from './components/Overflow';\nexport type {\n OverflowProps,\n OnOverflowChangeData,\n OverflowState,\n OverflowComponentState,\n OverflowContextValues,\n} from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowContextValues_unstable } from './useOverflowContextValues';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext, OverflowProvider } from './overflowContext';\nexport type { OverflowContextValue } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport type { OverflowDividerProps } from './components/OverflowDivider/OverflowDivider.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\nexport { OverflowReorderObserver } from './components/OverflowReorderObserver';\n\nexport type { OnUpdateItemVisibility, OnUpdateOverflow, OverflowEventPayload } from '@fluentui/priority-overflow';\n"],"names":["Overflow","useOverflow_unstable","renderOverflow_unstable","useOverflowStyles_unstable","DATA_OVERFLOWING","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","DATA_OVERFLOW_DIVIDER","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowContextValues_unstable","useOverflowCount","useOverflowItem","useOverflowMenu","useOverflowDivider","useOverflowVisibility","useOverflowContext","OverflowProvider","OverflowItem","OverflowDivider","OverflowReorderObserver"],"mappings":";;;;;;;;;;;IAaSI;0CAAgB;;yBAA+D;eAArBG;;;eAAxCF,6BAAkB;;;eAAEC,6BAAkB;;;eAZ/DN,eAAQ;;IA8BDoB;+CAAe;;;eADfD,0BAAY;;oBALwB;eAAhBD;;IAOpBG,uBAAuB;;;;eA7B9BnB,8BAAuB;;;eAYhBM,oDAAyB;;;eACzBC,kDAAwB;;;eACxBC,0CAAoB;;;eAQpBO,mCAAkB;;;eAPlBN,2DAAiC;;oBACjB;eAAhBC;;sBAGkB;eAAlBG;;;eAFAF,gCAAe;;mBACA;eAAfC;;;eAjBPX,iCAA0B;;;eAmBnBa,4CAAqB;;;eArB5Bf,2BAAoB;;;uBAGf,iCAAwB;2BAQiE,iBAAc;2CAEpE,iCAA8B;0CAC/B,gCAA6B;sCACjC,4BAAyB;0CACZ,gCAA6B;kCAC9C,wBAAqB;iCACtB,uBAAoB;iCACpB,uBAAoB;oCACjB,0BAAuB;uCACpB,6BAA0B;iCAEX,uBAAoB;8BAK5C,4CAAyC;iCACtC,kDAA+C;wBACvC,gDAAuC"}
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useIsOverflowGroupVisible", {
|
|
|
9
9
|
return useIsOverflowGroupVisible;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _useOverflowSnapshot = require("./useOverflowSnapshot");
|
|
12
|
+
const _useOverflowSnapshot = require("./useOverflowSnapshot.cjs");
|
|
13
13
|
function useIsOverflowGroupVisible(id) {
|
|
14
14
|
return (0, _useOverflowSnapshot.useOverflowSnapshot)((snapshot)=>snapshot.groupVisibility[id]);
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowSnapshot(snapshot => snapshot.groupVisibility[id]);\n}\n"],"names":["useOverflowSnapshot","useIsOverflowGroupVisible","id","snapshot","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,
|
|
1
|
+
{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowSnapshot(snapshot => snapshot.groupVisibility[id]);\n}\n"],"names":["useOverflowSnapshot","useIsOverflowGroupVisible","id","snapshot","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,2BAAwB;AAMrD,SAASC,0BAA0BC,EAAU;IAClD,WAAOF,wCAAAA,EAAoBG,CAAAA,WAAYA,SAASC,eAAe,CAACF,GAAG;AACrE"}
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useIsOverflowItemVisible", {
|
|
|
9
9
|
return useIsOverflowItemVisible;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _useOverflowSnapshot = require("./useOverflowSnapshot");
|
|
12
|
+
const _useOverflowSnapshot = require("./useOverflowSnapshot.cjs");
|
|
13
13
|
function useIsOverflowItemVisible(id) {
|
|
14
14
|
return (0, _useOverflowSnapshot.useOverflowSnapshot)((snapshot)=>!!snapshot.itemVisibility[id]);
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["'use client';\n\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return useOverflowSnapshot(snapshot => !!snapshot.itemVisibility[id]);\n}\n"],"names":["useOverflowSnapshot","useIsOverflowItemVisible","id","snapshot","itemVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAEoC,
|
|
1
|
+
{"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["'use client';\n\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return useOverflowSnapshot(snapshot => !!snapshot.itemVisibility[id]);\n}\n"],"names":["useOverflowSnapshot","useIsOverflowItemVisible","id","snapshot","itemVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAEoC,2BAAwB;AAMrD,SAASC,yBAAyBC,EAAU;IACjD,WAAOF,wCAAAA,EAAoBG,CAAAA,WAAY,CAAC,CAACA,SAASC,cAAc,CAACF,GAAG;AACtE"}
|
|
@@ -21,7 +21,7 @@ const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildc
|
|
|
21
21
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
22
22
|
const _priorityoverflow = require("@fluentui/priority-overflow");
|
|
23
23
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
24
|
-
const _constants = require("./constants");
|
|
24
|
+
const _constants = require("./constants.cjs");
|
|
25
25
|
const useOverflowContainer = (update, options)=>{
|
|
26
26
|
const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop, hasHiddenItems = false } = options;
|
|
27
27
|
const onUpdateItemVisibilityCallback = (0, _reactutilities.useEventCallback)(onUpdateItemVisibility);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n hasHiddenItems = false,\n } = options;\n\n const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n const observeOptions: Required<OverflowOptions> = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n onUpdateOverflow: update,\n hasHiddenItems,\n }),\n [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n );\n\n const containerRef = React.useRef<TElement>(null);\n\n const managerRef = React.useRef<OverflowManager | null>(null);\n\n if (managerRef.current === null) {\n managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n }\n\n useIsomorphicLayoutEffect(() => {\n if (managerRef.current && containerRef.current) {\n // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n // on the container being measured.\n managerRef.current.observe(containerRef.current, { forceUpdate: true });\n return () => managerRef.current?.disconnect();\n }\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n managerRef.current?.setOptions(observeOptions);\n }, [observeOptions]);\n\n const registerItem = React.useCallback((item: OverflowItemEntry) => {\n managerRef.current?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n managerRef.current?.removeItem(item.id);\n };\n }, []);\n\n const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n const el = divider.element;\n managerRef.current?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n managerRef.current?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, []);\n\n const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n managerRef.current?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n managerRef.current?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, []);\n\n const updateOverflow = React.useCallback(() => {\n managerRef.current?.update();\n }, []);\n\n const getSnapshot = React.useCallback<OverflowManager['getSnapshot']>(\n () => managerRef.current?.getSnapshot() ?? EMPTY_SNAPSHOT,\n [],\n );\n\n const subscribe = React.useCallback<OverflowManager['subscribe']>(\n listener => managerRef.current?.subscribe(listener) ?? noop,\n [],\n );\n\n const forceUpdateOverflow = React.useCallback(() => {\n managerRef.current?.forceUpdate();\n }, []);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n forceUpdateOverflow,\n containerRef,\n getSnapshot,\n subscribe,\n };\n};\n\nconst noop = () => {\n /* noop */\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","EMPTY_SNAPSHOT","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","noop","hasHiddenItems","onUpdateItemVisibilityCallback","observeOptions","useMemo","onUpdateOverflow","containerRef","useRef","managerRef","current","observe","forceUpdate","disconnect","setOptions","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","removeDivider","groupId","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","getSnapshot","subscribe","listener","forceUpdateOverflow","updateVisibilityAttribute","visible"],"mappings":"AAAA;;;;;;;;;;;;6BA6IauD;;;IAnHA7C,oBAAAA;;;;;iEAxBU,QAAQ;kCACuB,8BAA8B;gCAab,4BAA4B;2BAEH,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowContainer.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { createOverflowManager, EMPTY_SNAPSHOT } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowDividerEntry,\n OverflowManager,\n OverflowOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport type { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_DIVIDER, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\n\n/**\n * @internal\n * @param update - Callback when overflow state changes\n * @param options - Options to configure the overflow container\n * @returns - ref to attach to an intrinsic HTML element and imperative functions\n */\nexport const useOverflowContainer = <TElement extends HTMLElement>(\n update: OnUpdateOverflow,\n options: Omit<OverflowOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const {\n overflowAxis = 'horizontal',\n overflowDirection = 'end',\n padding = 10,\n minimumVisible = 0,\n onUpdateItemVisibility = noop,\n hasHiddenItems = false,\n } = options;\n\n const onUpdateItemVisibilityCallback = useEventCallback(onUpdateItemVisibility);\n\n const observeOptions: Required<OverflowOptions> = React.useMemo(\n () => ({\n overflowAxis,\n overflowDirection,\n padding,\n minimumVisible,\n onUpdateItemVisibility: onUpdateItemVisibilityCallback,\n onUpdateOverflow: update,\n hasHiddenItems,\n }),\n [minimumVisible, onUpdateItemVisibilityCallback, overflowAxis, overflowDirection, padding, update, hasHiddenItems],\n );\n\n const containerRef = React.useRef<TElement>(null);\n\n const managerRef = React.useRef<OverflowManager | null>(null);\n\n if (managerRef.current === null) {\n managerRef.current = canUseDOM() ? createOverflowManager(observeOptions) : null;\n }\n\n useIsomorphicLayoutEffect(() => {\n if (managerRef.current && containerRef.current) {\n // forceUpdate resolves overflow synchronously for a correct first paint; the manager guards it\n // on the container being measured.\n managerRef.current.observe(containerRef.current, { forceUpdate: true });\n return () => managerRef.current?.disconnect();\n }\n }, []);\n\n useIsomorphicLayoutEffect(() => {\n managerRef.current?.setOptions(observeOptions);\n }, [observeOptions]);\n\n const registerItem = React.useCallback((item: OverflowItemEntry) => {\n managerRef.current?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n managerRef.current?.removeItem(item.id);\n };\n }, []);\n\n const registerDivider = React.useCallback((divider: OverflowDividerEntry) => {\n const el = divider.element;\n managerRef.current?.addDivider(divider);\n el.setAttribute(DATA_OVERFLOW_DIVIDER, '');\n\n return () => {\n managerRef.current?.removeDivider(divider.groupId);\n el.removeAttribute(DATA_OVERFLOW_DIVIDER);\n };\n }, []);\n\n const registerOverflowMenu = React.useCallback((el: HTMLElement) => {\n managerRef.current?.addOverflowMenu(el);\n el.setAttribute(DATA_OVERFLOW_MENU, '');\n\n return () => {\n managerRef.current?.removeOverflowMenu();\n el.removeAttribute(DATA_OVERFLOW_MENU);\n };\n }, []);\n\n const updateOverflow = React.useCallback(() => {\n managerRef.current?.update();\n }, []);\n\n const getSnapshot = React.useCallback<OverflowManager['getSnapshot']>(\n () => managerRef.current?.getSnapshot() ?? EMPTY_SNAPSHOT,\n [],\n );\n\n const subscribe = React.useCallback<OverflowManager['subscribe']>(\n listener => managerRef.current?.subscribe(listener) ?? noop,\n [],\n );\n\n const forceUpdateOverflow = React.useCallback(() => {\n managerRef.current?.forceUpdate();\n }, []);\n\n return {\n registerItem,\n registerDivider,\n registerOverflowMenu,\n updateOverflow,\n forceUpdateOverflow,\n containerRef,\n getSnapshot,\n subscribe,\n };\n};\n\nconst noop = () => {\n /* noop */\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"names":["React","createOverflowManager","EMPTY_SNAPSHOT","canUseDOM","useEventCallback","useIsomorphicLayoutEffect","DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","useOverflowContainer","update","options","overflowAxis","overflowDirection","padding","minimumVisible","onUpdateItemVisibility","noop","hasHiddenItems","onUpdateItemVisibilityCallback","observeOptions","useMemo","onUpdateOverflow","containerRef","useRef","managerRef","current","observe","forceUpdate","disconnect","setOptions","registerItem","useCallback","item","addItem","element","setAttribute","removeAttribute","removeItem","id","registerDivider","divider","el","addDivider","removeDivider","groupId","registerOverflowMenu","addOverflowMenu","removeOverflowMenu","updateOverflow","getSnapshot","subscribe","listener","forceUpdateOverflow","updateVisibilityAttribute","visible"],"mappings":"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"}
|
|
@@ -9,6 +9,6 @@ Object.defineProperty(exports, "useOverflowCount", {
|
|
|
9
9
|
return useOverflowCount;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _useOverflowSnapshot = require("./useOverflowSnapshot");
|
|
12
|
+
const _useOverflowSnapshot = require("./useOverflowSnapshot.cjs");
|
|
13
13
|
const useOverflowCount = ()=>(0, _useOverflowSnapshot.useOverflowSnapshot)(selectInvisibleItemCount);
|
|
14
14
|
const selectInvisibleItemCount = (snapshot)=>snapshot.invisibleItemCount;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowCount.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = (): number => useOverflowSnapshot(selectInvisibleItemCount);\n\nconst selectInvisibleItemCount = (snapshot: OverflowSnapshot): number => snapshot.invisibleItemCount;\n"],"names":["useOverflowSnapshot","useOverflowCount","selectInvisibleItemCount","snapshot","invisibleItemCount"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowCount.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = (): number => useOverflowSnapshot(selectInvisibleItemCount);\n\nconst selectInvisibleItemCount = (snapshot: OverflowSnapshot): number => snapshot.invisibleItemCount;\n"],"names":["useOverflowSnapshot","useOverflowCount","selectInvisibleItemCount","snapshot","invisibleItemCount"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,2BAAwB;AAKrD,MAAMC,mBAAmB,QAAcD,wCAAAA,EAAoBE,0BAA0B;AAE5F,MAAMA,2BAA2B,CAACC,WAAuCA,SAASC,kBAAkB"}
|
|
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useOverflowDivider", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _overflowContext = require("./overflowContext");
|
|
15
|
+
const _overflowContext = require("./overflowContext.cjs");
|
|
16
16
|
function useOverflowDivider(groupId) {
|
|
17
17
|
const ref = _react.useRef(null);
|
|
18
18
|
const registerDivider = (0, _overflowContext.useOverflowContext)((v)=>v.registerDivider);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACW,4BAA4B;iCACnC,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowDivider.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowDivider<TElement extends HTMLElement>(groupId?: string): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowDivider","groupId","ref","useRef","registerDivider","v","current","element"],"mappings":"AAAA;;;;;;;;;;;;iEAEuB,QAAQ;gCACW,4BAA4B;iCACnC,uBAAoB;AAShD,SAASG,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAML,OAAMM,MAAM,CAAkB;IAC1C,MAAMC,sBAAkBL,mCAAAA,EAAmBM,CAAAA,IAAKA,EAAED,eAAe;QAEjEN,yCAAAA,EAA0B;QACxB,IAAII,IAAII,OAAO,IAAIL,SAAS;YAC1B,OAAOG,gBAAgB;gBACrBG,SAASL,IAAII,OAAO;gBACpBL;YACF;QACF;IACF,GAAG;QAACG;QAAiBH;KAAQ;IAE7B,OAAOC;AACT"}
|
|
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useOverflowItem", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _overflowContext = require("./overflowContext");
|
|
15
|
+
const _overflowContext = require("./overflowContext.cjs");
|
|
16
16
|
function useOverflowItem(id, priority, groupId, pinned) {
|
|
17
17
|
const ref = _react.useRef(null);
|
|
18
18
|
const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @param pinned - if true, the item will never overflow and will always be visible\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(\n id: string,\n priority?: number,\n groupId?: string,\n pinned?: boolean,\n): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {\n // eslint-disable-next-line no-console\n console.error(\n `useOverflowItem: Overflow item with id \"${id}\" has pinned=true and priority<0. ` +\n `Pinned items are always visible and should not have defined priority.`,\n );\n }\n }\n\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n pinned,\n });\n }\n }, [id, priority, registerItem, groupId, pinned]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","pinned","ref","useRef","registerItem","v","process","env","NODE_ENV","console","error","current","element"],"mappings":"AAAA;;;;;+BAgBgBG;;;;;;;iEAdO,QAAQ;gCACW,4BAA4B;iCACnC,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowItem.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Registers an overflow item\n *\n * @internal\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @param pinned - if true, the item will never overflow and will always be visible\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(\n id: string,\n priority?: number,\n groupId?: string,\n pinned?: boolean,\n): React.RefObject<TElement | null> {\n const ref = React.useRef<TElement | null>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (process.env.NODE_ENV !== 'production') {\n if (typeof pinned !== 'undefined' && typeof priority !== 'undefined' && pinned) {\n // eslint-disable-next-line no-console\n console.error(\n `useOverflowItem: Overflow item with id \"${id}\" has pinned=true and priority<0. ` +\n `Pinned items are always visible and should not have defined priority.`,\n );\n }\n }\n\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n pinned,\n });\n }\n }, [id, priority, registerItem, groupId, pinned]);\n\n return ref;\n}\n"],"names":["React","useIsomorphicLayoutEffect","useOverflowContext","useOverflowItem","id","priority","groupId","pinned","ref","useRef","registerItem","v","process","env","NODE_ENV","console","error","current","element"],"mappings":"AAAA;;;;;+BAgBgBG;;;;;;;iEAdO,QAAQ;gCACW,4BAA4B;iCACnC,uBAAoB;AAYhD,yBACLC,EAAU,EACVC,QAAiB,EACjBC,OAAgB,EAChBC,MAAgB;IAEhB,MAAMC,MAAMR,OAAMS,MAAM,CAAkB;IAC1C,MAAMC,mBAAeR,mCAAAA,EAAmBS,CAAAA,IAAKA,EAAED,YAAY;QAE3DT,yCAAAA,EAA0B;QACxB,IAAIW,QAAQC,GAAG,CAACC,QAAQ,KAAK,cAAc;YACzC,IAAI,OAAOP,WAAW,eAAe,OAAOF,aAAa,eAAeE,QAAQ;gBAC9E,sCAAsC;gBACtCQ,QAAQC,KAAK,CACX,CAAC,wCAAwC,EAAEZ,GAAG,kCAAkC,CAAC,GAC/E,CAAC,qEAAqE,CAAC;YAE7E;QACF;QAEA,IAAII,IAAIS,OAAO,EAAE;YACf,OAAOP,aAAa;gBAClBQ,SAASV,IAAIS,OAAO;gBACpBb;gBACAC,UAAUA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACtBC;gBACAC;YACF;QACF;IACF,GAAG;QAACH;QAAIC;QAAUK;QAAcJ;QAASC;KAAO;IAEhD,OAAOC;AACT"}
|
|
@@ -12,8 +12,8 @@ Object.defineProperty(exports, "useOverflowMenu", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _overflowContext = require("./overflowContext");
|
|
16
|
-
const _useOverflowCount = require("./useOverflowCount");
|
|
15
|
+
const _overflowContext = require("./overflowContext.cjs");
|
|
16
|
+
const _useOverflowCount = require("./useOverflowCount.cjs");
|
|
17
17
|
function useOverflowMenu(id) {
|
|
18
18
|
const elementId = (0, _reactutilities.useId)('overflow-menu', id);
|
|
19
19
|
const overflowCount = (0, _useOverflowCount.useOverflowCount)();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n id?: string,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const { registerOverflowMenu, forceUpdateOverflow } = useOverflowContext();\n const ref = React.useRef<TElement | null>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n const unregister = registerOverflowMenu(ref.current);\n if (isOverflowing) {\n forceUpdateOverflow();\n }\n return () => {\n unregister();\n forceUpdateOverflow();\n };\n }\n }, [registerOverflowMenu, forceUpdateOverflow, isOverflowing, elementId]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","forceUpdateOverflow","ref","useRef","isOverflowing","current","unregister"],"mappings":"AAAA;;;;;+BAOgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowMenu.ts"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { useId, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\nimport { useOverflowCount } from './useOverflowCount';\n\nexport function useOverflowMenu<TElement extends HTMLElement>(\n id?: string,\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n): { ref: React.MutableRefObject<TElement | null>; overflowCount: number; isOverflowing: boolean } {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const { registerOverflowMenu, forceUpdateOverflow } = useOverflowContext();\n const ref = React.useRef<TElement | null>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n const unregister = registerOverflowMenu(ref.current);\n if (isOverflowing) {\n forceUpdateOverflow();\n }\n return () => {\n unregister();\n forceUpdateOverflow();\n };\n }\n }, [registerOverflowMenu, forceUpdateOverflow, isOverflowing, elementId]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"],"names":["React","useId","useIsomorphicLayoutEffect","useOverflowContext","useOverflowCount","useOverflowMenu","id","elementId","overflowCount","registerOverflowMenu","forceUpdateOverflow","ref","useRef","isOverflowing","current","unregister"],"mappings":"AAAA;;;;;+BAOgBK;;;;;;;iEALO,QAAQ;gCACkB,4BAA4B;iCAC1C,uBAAoB;kCACtB,wBAAqB;AAE/C,yBACLC,EAAW;IAGX,MAAMC,gBAAYN,qBAAAA,EAAM,iBAAiBK;IACzC,MAAME,gBAAgBJ,sCAAAA;IACtB,MAAM,EAAEK,oBAAoB,EAAEC,mBAAmB,EAAE,OAAGP,mCAAAA;IACtD,MAAMQ,MAAMX,OAAMY,MAAM,CAAkB;IAC1C,MAAMC,gBAAgBL,gBAAgB;IAEtCN,6CAAAA,EAA0B;QACxB,IAAIS,IAAIG,OAAO,EAAE;YACf,MAAMC,aAAaN,qBAAqBE,IAAIG,OAAO;YACnD,IAAID,eAAe;gBACjBH;YACF;YACA,OAAO;gBACLK;gBACAL;YACF;QACF;IACF,GAAG;QAACD;QAAsBC;QAAqBG;QAAeN;KAAU;IAExE,OAAO;QAAEI;QAAKH;QAAeK;IAAc;AAC7C"}
|
|
@@ -12,7 +12,7 @@ Object.defineProperty(exports, "useOverflowSnapshot", {
|
|
|
12
12
|
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
|
|
13
13
|
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
|
|
14
14
|
const _reactutilities = require("@fluentui/react-utilities");
|
|
15
|
-
const _overflowContext = require("./overflowContext");
|
|
15
|
+
const _overflowContext = require("./overflowContext.cjs");
|
|
16
16
|
function useOverflowSnapshot(selector) {
|
|
17
17
|
const { getSnapshot, subscribe } = (0, _overflowContext.useOverflowContext)();
|
|
18
18
|
const select = (0, _reactutilities.useEventCallback)(selector);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowSnapshot.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport * as React from 'react';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Subscribes to the overflow snapshot and returns a derived slice of it.\n *\n * @param selector - derives the slice of the snapshot the consumer depends on\n */\nexport function useOverflowSnapshot<Selected>(selector: (snapshot: OverflowSnapshot) => Selected): Selected {\n const { getSnapshot, subscribe } = useOverflowContext();\n const select = useEventCallback(selector);\n\n const [selected, setSelected] = React.useState(() => selector(getSnapshot()));\n\n useIsomorphicLayoutEffect(() => {\n const checkForUpdates = () => setSelected(select(getSnapshot()));\n checkForUpdates();\n return subscribe(checkForUpdates);\n }, [subscribe, getSnapshot, select]);\n\n return selected;\n}\n"],"names":["React","useEventCallback","useIsomorphicLayoutEffect","useOverflowContext","useOverflowSnapshot","selector","getSnapshot","subscribe","select","selected","setSelected","useState","checkForUpdates"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;gCAC6B,4BAA4B;iCACrD,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowSnapshot.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowSnapshot } from '@fluentui/priority-overflow';\nimport * as React from 'react';\nimport { useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * Subscribes to the overflow snapshot and returns a derived slice of it.\n *\n * @param selector - derives the slice of the snapshot the consumer depends on\n */\nexport function useOverflowSnapshot<Selected>(selector: (snapshot: OverflowSnapshot) => Selected): Selected {\n const { getSnapshot, subscribe } = useOverflowContext();\n const select = useEventCallback(selector);\n\n const [selected, setSelected] = React.useState(() => selector(getSnapshot()));\n\n useIsomorphicLayoutEffect(() => {\n const checkForUpdates = () => setSelected(select(getSnapshot()));\n checkForUpdates();\n return subscribe(checkForUpdates);\n }, [subscribe, getSnapshot, select]);\n\n return selected;\n}\n"],"names":["React","useEventCallback","useIsomorphicLayoutEffect","useOverflowContext","useOverflowSnapshot","selector","getSnapshot","subscribe","select","selected","setSelected","useState","checkForUpdates"],"mappings":"AAAA;;;;;;;;;;;;iEAGuB,QAAQ;gCAC6B,4BAA4B;iCACrD,uBAAoB;AAOhD,SAASI,oBAA8BC,QAAkD;IAC9F,MAAM,EAAEC,WAAW,EAAEC,SAAS,EAAE,OAAGJ,mCAAAA;IACnC,MAAMK,aAASP,gCAAAA,EAAiBI;IAEhC,MAAM,CAACI,UAAUC,YAAY,GAAGV,OAAMW,QAAQ,CAAC,IAAMN,SAASC;QAE9DJ,yCAAAA,EAA0B;QACxB,MAAMU,kBAAkB,IAAMF,YAAYF,OAAOF;QACjDM;QACA,OAAOL,UAAUK;IACnB,GAAG;QAACL;QAAWD;QAAaE;KAAO;IAEnC,OAAOC;AACT"}
|
|
@@ -9,7 +9,7 @@ Object.defineProperty(exports, "useOverflowVisibility", {
|
|
|
9
9
|
return useOverflowVisibility;
|
|
10
10
|
}
|
|
11
11
|
});
|
|
12
|
-
const _useOverflowSnapshot = require("./useOverflowSnapshot");
|
|
12
|
+
const _useOverflowSnapshot = require("./useOverflowSnapshot.cjs");
|
|
13
13
|
function useOverflowVisibility() {
|
|
14
14
|
return (0, _useOverflowSnapshot.useOverflowSnapshot)(selectVisibility);
|
|
15
15
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} {\n return useOverflowSnapshot(selectVisibility);\n}\n\nconst selectVisibility = (\n snapshot: OverflowSnapshot,\n): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} => ({\n itemVisibility: snapshot.itemVisibility,\n groupVisibility: snapshot.groupVisibility,\n});\n"],"names":["useOverflowSnapshot","useOverflowVisibility","selectVisibility","snapshot","itemVisibility","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,
|
|
1
|
+
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["'use client';\n\nimport type { OverflowGroupState, OverflowSnapshot } from '@fluentui/priority-overflow';\nimport { useOverflowSnapshot } from './useOverflowSnapshot';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility(): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} {\n return useOverflowSnapshot(selectVisibility);\n}\n\nconst selectVisibility = (\n snapshot: OverflowSnapshot,\n): {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n} => ({\n itemVisibility: snapshot.itemVisibility,\n groupVisibility: snapshot.groupVisibility,\n});\n"],"names":["useOverflowSnapshot","useOverflowVisibility","selectVisibility","snapshot","itemVisibility","groupVisibility"],"mappings":"AAAA;;;;;;;;;;;qCAGoC,2BAAwB;AAWrD,SAASC;IAId,WAAOD,wCAAAA,EAAoBE;AAC7B;AAEA,MAAMA,mBAAmB,CACvBC,WAII,CAAA;QACJC,gBAAgBD,SAASC,cAAc;QACvCC,iBAAiBF,SAASE,eAAe;KAC3C,CAAA"}
|
package/package.json
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "9.9.
|
|
3
|
+
"version": "9.9.2",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
|
-
"main": "lib-commonjs/index.
|
|
5
|
+
"main": "lib-commonjs/index.cjs",
|
|
6
6
|
"module": "lib/index.js",
|
|
7
7
|
"typings": "./dist/index.d.ts",
|
|
8
8
|
"sideEffects": false,
|
|
@@ -12,10 +12,10 @@
|
|
|
12
12
|
},
|
|
13
13
|
"license": "MIT",
|
|
14
14
|
"dependencies": {
|
|
15
|
-
"@fluentui/priority-overflow": "^9.4.
|
|
16
|
-
"@fluentui/react-shared-contexts": "^9.26.
|
|
17
|
-
"@fluentui/react-theme": "^9.2.
|
|
18
|
-
"@fluentui/react-utilities": "^9.26.
|
|
15
|
+
"@fluentui/priority-overflow": "^9.4.2",
|
|
16
|
+
"@fluentui/react-shared-contexts": "^9.26.3",
|
|
17
|
+
"@fluentui/react-theme": "^9.2.2",
|
|
18
|
+
"@fluentui/react-utilities": "^9.26.6",
|
|
19
19
|
"@griffel/react": "^1.5.32",
|
|
20
20
|
"@swc/helpers": "^0.5.1"
|
|
21
21
|
},
|
|
@@ -33,17 +33,23 @@
|
|
|
33
33
|
},
|
|
34
34
|
"exports": {
|
|
35
35
|
".": {
|
|
36
|
-
"
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
36
|
+
"import": {
|
|
37
|
+
"types": "./dist/index.d.ts",
|
|
38
|
+
"default": "./lib/index.js"
|
|
39
|
+
},
|
|
40
|
+
"require": {
|
|
41
|
+
"types": "./dist/index.d.cts",
|
|
42
|
+
"default": "./lib-commonjs/index.cjs"
|
|
43
|
+
}
|
|
40
44
|
},
|
|
41
45
|
"./package.json": "./package.json"
|
|
42
46
|
},
|
|
43
47
|
"files": [
|
|
44
48
|
"*.md",
|
|
45
49
|
"dist/*.d.ts",
|
|
50
|
+
"dist/*.d.cts",
|
|
46
51
|
"lib",
|
|
47
52
|
"lib-commonjs"
|
|
48
|
-
]
|
|
53
|
+
],
|
|
54
|
+
"type": "module"
|
|
49
55
|
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"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"],"names":["__styles","mergeClasses","getTriggerChild","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d","useOverflowStyles_unstable","state","styles","child","children","className","props"],"mappings":"AAAA,YAAY;;;;;;;;;;;;IAICK,iBAAiB;;;IAYjBM,0BAA0B;;;;uBAfE,gBAAgB;gCACzB,2BAA2B;AAEpD,0BAAuB,WAAA,OAAGX,eAAA,EAAA;IAAAM,YAAA,EAAA;QAAAC,OAAA,EAAA;IAAA;IAAAC,gBAAA,EAAA;QAAAC,MAAA,EAAA;IAAA;AAAA,GAAA;IAAAC,CAAA,EAAA;QAAA;QAAA;KAAA;AAAA,CAWhC,CAAC;AACK,oCAAoCE,KAAK,IAAG;IAC/C,MAAMC,MAAM,GAAGR,iBAAiB,CAAC,CAAC;IAClC,MAAMS,KAAK,OAAGZ,+BAAe,EAACU,KAAK,CAACG,QAAQ,CAAC;IAC7C,oDAAA;IACAH,KAAK,CAACI,SAAS,OAAGf,mBAAY,EAAC,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;IACjK,OAAOJ,KAAK;AAChB,CAAC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
/package/lib-commonjs/components/OverflowItem/{OverflowItem.types.js → OverflowItem.types.cjs}
RENAMED
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|
|
File without changes
|