@fluentui/react-overflow 0.0.0-nightly-20220623-0419.1 → 0.0.0-nightly-20220628-0417.1
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.json +62 -9
- package/CHANGELOG.md +21 -7
- package/dist/index.d.ts +5 -4
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/useOverflowContainer.js +1 -1
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowItem.js +1 -0
- package/lib/useOverflowItem.js.map +1 -1
- package/lib-commonjs/index.js +1 -7
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +1 -1
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +1 -0
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/package.json +8 -7
package/CHANGELOG.json
CHANGED
|
@@ -2,34 +2,87 @@
|
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-overflow_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Tue, 28 Jun 2022 04:31:02 GMT",
|
|
6
|
+
"tag": "@fluentui/react-overflow_v0.0.0-nightly-20220628-0417.1",
|
|
7
|
+
"version": "0.0.0-nightly-20220628-0417.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
|
+
{
|
|
11
|
+
"author": "lingfangao@hotmail.com",
|
|
12
|
+
"package": "@fluentui/react-overflow",
|
|
13
|
+
"commit": "e0aabd850b15adf9c151ebd4e332f7c50ad6cfdf",
|
|
14
|
+
"comment": "Update 9.0.0-rc dependencies to use caret range"
|
|
15
|
+
},
|
|
10
16
|
{
|
|
11
17
|
"author": "olfedias@microsoft.com",
|
|
12
18
|
"package": "@fluentui/react-overflow",
|
|
13
19
|
"commit": "795427199eae1e792f85b6faf0783edfccd3c738",
|
|
14
20
|
"comment": "fix: do not throw in SSR"
|
|
15
21
|
},
|
|
22
|
+
{
|
|
23
|
+
"author": "lingfangao@hotmail.com",
|
|
24
|
+
"package": "@fluentui/react-overflow",
|
|
25
|
+
"commit": "2da4428ae7d6e464c538b7ed10e425ce0e531144",
|
|
26
|
+
"comment": "chore: Mark teams-prg owned APIs with @internal"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
"author": "Humberto.Morimoto@microsoft.com",
|
|
30
|
+
"package": "@fluentui/react-overflow",
|
|
31
|
+
"commit": "ddf16d80c50d80bc07331b478f567629775f2898",
|
|
32
|
+
"comment": "chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector."
|
|
33
|
+
},
|
|
34
|
+
{
|
|
35
|
+
"author": "lingfangao@hotmail.com",
|
|
36
|
+
"package": "@fluentui/react-overflow",
|
|
37
|
+
"commit": "675acea49c97f10837ddee9b8c4350ca27750125",
|
|
38
|
+
"comment": "Bump Griffel dependencies"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
"author": "beachball",
|
|
42
|
+
"package": "@fluentui/react-overflow",
|
|
43
|
+
"comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20220628-0417.1",
|
|
44
|
+
"commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
|
|
45
|
+
},
|
|
16
46
|
{
|
|
17
47
|
"author": "beachball",
|
|
18
48
|
"package": "@fluentui/react-overflow",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0
|
|
20
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0",
|
|
50
|
+
"commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
|
|
21
51
|
},
|
|
22
52
|
{
|
|
23
53
|
"author": "beachball",
|
|
24
54
|
"package": "@fluentui/react-overflow",
|
|
25
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0
|
|
26
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0",
|
|
56
|
+
"commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
|
|
27
57
|
},
|
|
28
58
|
{
|
|
29
59
|
"author": "beachball",
|
|
30
60
|
"package": "@fluentui/react-overflow",
|
|
31
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0
|
|
32
|
-
"commit": "
|
|
61
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0",
|
|
62
|
+
"commit": "3dd54b72d321c3345a21b4175ffe89e7c457c094"
|
|
63
|
+
}
|
|
64
|
+
],
|
|
65
|
+
"none": [
|
|
66
|
+
{
|
|
67
|
+
"author": "tristan.watanabe@gmail.com",
|
|
68
|
+
"package": "@fluentui/react-overflow",
|
|
69
|
+
"commit": "e0c1dd07dd4772941273c9ac66422bc743fbe7d9",
|
|
70
|
+
"comment": "chore: Move Overflow stories to folder with index entry."
|
|
71
|
+
}
|
|
72
|
+
]
|
|
73
|
+
}
|
|
74
|
+
},
|
|
75
|
+
{
|
|
76
|
+
"date": "Thu, 23 Jun 2022 14:25:31 GMT",
|
|
77
|
+
"tag": "@fluentui/react-overflow_v9.0.0-beta.4",
|
|
78
|
+
"version": "9.0.0-beta.4",
|
|
79
|
+
"comments": {
|
|
80
|
+
"prerelease": [
|
|
81
|
+
{
|
|
82
|
+
"author": "beachball",
|
|
83
|
+
"package": "@fluentui/react-overflow",
|
|
84
|
+
"comment": "Bump @fluentui/react-theme to v9.0.0-rc.10",
|
|
85
|
+
"commit": "b00790b7a0ea1473d8c3cc49c7ca0088002957ed"
|
|
33
86
|
}
|
|
34
87
|
]
|
|
35
88
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,20 +1,34 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Tue, 28 Jun 2022 04:31:02 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20220628-0417.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20220628-0417.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.
|
|
9
|
+
Tue, 28 Jun 2022 04:31:02 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.4..@fluentui/react-overflow_v0.0.0-nightly-20220628-0417.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
|
+
- Update 9.0.0-rc dependencies to use caret range ([PR #23732](https://github.com/microsoft/fluentui/pull/23732) by lingfangao@hotmail.com)
|
|
14
15
|
- fix: do not throw in SSR ([PR #23372](https://github.com/microsoft/fluentui/pull/23372) by olfedias@microsoft.com)
|
|
15
|
-
-
|
|
16
|
-
-
|
|
17
|
-
- Bump
|
|
16
|
+
- chore: Mark teams-prg owned APIs with @internal ([PR #23689](https://github.com/microsoft/fluentui/pull/23689) by lingfangao@hotmail.com)
|
|
17
|
+
- chore: Adding scheduler as a peer dependency since this package has a dependency on @fluentui/react-context-selector. ([PR #23681](https://github.com/microsoft/fluentui/pull/23681) by Humberto.Morimoto@microsoft.com)
|
|
18
|
+
- Bump Griffel dependencies ([PR #23688](https://github.com/microsoft/fluentui/pull/23688) by lingfangao@hotmail.com)
|
|
19
|
+
- Bump @fluentui/priority-overflow to v0.0.0-nightly-20220628-0417.1 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
|
|
20
|
+
- Bump @fluentui/react-context-selector to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
|
|
21
|
+
- Bump @fluentui/react-theme to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
|
|
22
|
+
- Bump @fluentui/react-utilities to v0.0.0 ([commit](https://github.com/microsoft/fluentui/commit/3dd54b72d321c3345a21b4175ffe89e7c457c094) by beachball)
|
|
23
|
+
|
|
24
|
+
## [9.0.0-beta.4](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.4)
|
|
25
|
+
|
|
26
|
+
Thu, 23 Jun 2022 14:25:31 GMT
|
|
27
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.0-beta.3..@fluentui/react-overflow_v9.0.0-beta.4)
|
|
28
|
+
|
|
29
|
+
### Changes
|
|
30
|
+
|
|
31
|
+
- Bump @fluentui/react-theme to v9.0.0-rc.10 ([PR #23608](https://github.com/microsoft/fluentui/pull/23608) by beachball)
|
|
18
32
|
|
|
19
33
|
## [9.0.0-beta.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.0-beta.3)
|
|
20
34
|
|
package/dist/index.d.ts
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import type { ObserveOptions } from '@fluentui/priority-overflow';
|
|
2
|
-
import type { OnUpdateItemVisibility } from '@fluentui/priority-overflow';
|
|
3
2
|
import type { OnUpdateOverflow } from '@fluentui/priority-overflow';
|
|
4
3
|
import { OverflowGroupState } from '@fluentui/priority-overflow';
|
|
5
4
|
import type { OverflowItemEntry } from '@fluentui/priority-overflow';
|
|
@@ -61,8 +60,6 @@ export declare type OverflowProps = Partial<Pick<ObserveOptions, 'overflowAxis'
|
|
|
61
60
|
children: React_2.ReactElement;
|
|
62
61
|
};
|
|
63
62
|
|
|
64
|
-
export declare const updateVisibilityAttribute: OnUpdateItemVisibility;
|
|
65
|
-
|
|
66
63
|
/**
|
|
67
64
|
* @param id - unique identifier for a group of overflow items
|
|
68
65
|
* @returns visibility state of the group
|
|
@@ -76,13 +73,16 @@ export declare function useIsOverflowGroupVisible(id: string): OverflowGroupStat
|
|
|
76
73
|
export declare function useIsOverflowItemVisible(id: string): boolean;
|
|
77
74
|
|
|
78
75
|
/**
|
|
79
|
-
*
|
|
76
|
+
* @internal
|
|
80
77
|
* @param update - Callback when overflow state changes
|
|
81
78
|
* @param options - Options to configure the overflow container
|
|
82
79
|
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
|
83
80
|
*/
|
|
84
81
|
export declare const useOverflowContainer: <TElement extends HTMLElement>(update: OnUpdateOverflow, options: Omit<ObserveOptions, 'onUpdateOverflow'>) => UseOverflowContainerReturn<TElement>;
|
|
85
82
|
|
|
83
|
+
/**
|
|
84
|
+
* @internal
|
|
85
|
+
*/
|
|
86
86
|
export declare interface UseOverflowContainerReturn<TElement extends HTMLElement> {
|
|
87
87
|
/**
|
|
88
88
|
* Ref to apply to the container that will overflow
|
|
@@ -104,6 +104,7 @@ export declare interface UseOverflowContainerReturn<TElement extends HTMLElement
|
|
|
104
104
|
export declare const useOverflowCount: () => number;
|
|
105
105
|
|
|
106
106
|
/**
|
|
107
|
+
* @internal
|
|
107
108
|
* Registers an overflow item
|
|
108
109
|
* @param id - unique identifier for the item used by the overflow manager
|
|
109
110
|
* @param priority - higher priority means the item overflows later
|
package/lib/index.js
CHANGED
|
@@ -2,7 +2,7 @@ export { Overflow } from './components/Overflow';
|
|
|
2
2
|
export { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';
|
|
3
3
|
export { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';
|
|
4
4
|
export { useIsOverflowItemVisible } from './useIsOverflowItemVisible';
|
|
5
|
-
export {
|
|
5
|
+
export { useOverflowContainer } from './useOverflowContainer';
|
|
6
6
|
export { useOverflowCount } from './useOverflowCount';
|
|
7
7
|
export { useOverflowItem } from './useOverflowItem';
|
|
8
8
|
export { useOverflowMenu } from './useOverflowMenu';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"../src/","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAEjD,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEvF,OAAO,EAAE,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACxE,OAAO,EAAE,wBAAwB,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACtD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AAGpD,OAAO,EAAE,YAAY,EAAE,MAAM,wCAAwC,CAAC","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"]}
|
package/lib/types.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n /**\n * Registers and overflow item\n */\n registerItem: OverflowContextValue['registerItem'];\n /**\n * Imperative function to trigger overflow update\n */\n updateOverflow: OverflowContextValue['updateOverflow'];\n}\n"]}
|
|
1
|
+
{"version":3,"file":"types.js","sourceRoot":"../src/","sources":["types.ts"],"names":[],"mappings":"","sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n /**\n * Registers and overflow item\n */\n registerItem: OverflowContextValue['registerItem'];\n /**\n * Imperative function to trigger overflow update\n */\n updateOverflow: OverflowContextValue['updateOverflow'];\n}\n"]}
|
|
@@ -3,7 +3,7 @@ import { createOverflowManager } from '@fluentui/priority-overflow';
|
|
|
3
3
|
import { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
4
4
|
import { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } from './constants';
|
|
5
5
|
/**
|
|
6
|
-
*
|
|
6
|
+
* @internal
|
|
7
7
|
* @param update - Callback when overflow state changes
|
|
8
8
|
* @param options - Options to configure the overflow container
|
|
9
9
|
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,qBAAT,QAAsC,6BAAtC;
|
|
1
|
+
{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } 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<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"sourceRoot":"../src/"}
|
package/lib/useOverflowItem.js
CHANGED
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';
|
|
3
3
|
import { useOverflowContext } from './overflowContext';
|
|
4
4
|
/**
|
|
5
|
+
* @internal
|
|
5
6
|
* Registers an overflow item
|
|
6
7
|
* @param id - unique identifier for the item used by the overflow manager
|
|
7
8
|
* @param priority - higher priority means the item overflows later
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA
|
|
1
|
+
{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAZ,MAAuB,OAAvB;AACA,SAAS,yBAAT,QAA0C,2BAA1C;AACA,SAAS,kBAAT,QAAmC,mBAAnC;AAEA;;;;;;;AAOG;;AACH,OAAM,SAAU,eAAV,CAAwD,EAAxD,EAAoE,QAApE,EAAuF,OAAvF,EAAuG;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,kBAAkB,CAAC,CAAC,IAAI,CAAC,CAAC,YAAR,CAAvC;EAEA,yBAAyB,CAAC,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATwB,EAStB,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATsB,CAAzB;EAWA,OAAO,GAAP;AACD","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"sourceRoot":"../src/"}
|
package/lib-commonjs/index.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.OverflowItem = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.
|
|
6
|
+
exports.OverflowItem = exports.useOverflowMenu = exports.useOverflowItem = exports.useOverflowCount = exports.useOverflowContainer = exports.useIsOverflowItemVisible = exports.useIsOverflowGroupVisible = exports.DATA_OVERFLOW_MENU = exports.DATA_OVERFLOW_ITEM = exports.DATA_OVERFLOWING = exports.Overflow = void 0;
|
|
7
7
|
|
|
8
8
|
var Overflow_1 = /*#__PURE__*/require("./components/Overflow");
|
|
9
9
|
|
|
@@ -55,12 +55,6 @@ Object.defineProperty(exports, "useIsOverflowItemVisible", {
|
|
|
55
55
|
|
|
56
56
|
var useOverflowContainer_1 = /*#__PURE__*/require("./useOverflowContainer");
|
|
57
57
|
|
|
58
|
-
Object.defineProperty(exports, "updateVisibilityAttribute", {
|
|
59
|
-
enumerable: true,
|
|
60
|
-
get: function () {
|
|
61
|
-
return useOverflowContainer_1.updateVisibilityAttribute;
|
|
62
|
-
}
|
|
63
|
-
});
|
|
64
58
|
Object.defineProperty(exports, "useOverflowContainer", {
|
|
65
59
|
enumerable: true,
|
|
66
60
|
get: function () {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,0BAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,
|
|
1
|
+
{"version":3,"sources":["index.ts"],"names":[],"mappings":";;;;;;;AAAA,IAAA,UAAA,gBAAA,OAAA,CAAA,uBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,UAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,UAAA,CAAA,QAAA;EAAQ;AAAR,CAAA;;AAET,IAAA,WAAA,gBAAA,OAAA,CAAA,aAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;AAAkB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;AAAoB,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,oBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,WAAA,CAAA,kBAAA;EAAkB;AAAlB,CAAA;;AAE/C,IAAA,2BAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,2BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,2BAAA,CAAA,yBAAA;EAAyB;AAAzB,CAAA;;AACT,IAAA,0BAAA,gBAAA,OAAA,CAAA,4BAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,0BAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,0BAAA,CAAA,wBAAA;EAAwB;AAAxB,CAAA;;AACT,IAAA,sBAAA,gBAAA,OAAA,CAAA,wBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,sBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,sBAAA,CAAA,oBAAA;EAAoB;AAApB,CAAA;;AACT,IAAA,kBAAA,gBAAA,OAAA,CAAA,oBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,kBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,kBAAA,CAAA,gBAAA;EAAgB;AAAhB,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AACT,IAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,iBAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,iBAAA,CAAA,eAAA;EAAe;AAAf,CAAA;;AAGT,IAAA,cAAA,gBAAA,OAAA,CAAA,wCAAA,CAAA;;AAAS,MAAA,CAAA,cAAA,CAAA,OAAA,EAAA,cAAA,EAAA;EAAA,UAAA,EAAA,IAAA;EAAA,GAAA,EAAA,YAAA;IAAA,OAAA,cAAA,CAAA,YAAA;EAAY;AAAZ,CAAA","sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\n"],"sourceRoot":"../src/"}
|
|
@@ -13,7 +13,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
13
13
|
|
|
14
14
|
const constants_1 = /*#__PURE__*/require("./constants");
|
|
15
15
|
/**
|
|
16
|
-
*
|
|
16
|
+
* @internal
|
|
17
17
|
* @param update - Callback when overflow state changes
|
|
18
18
|
* @param options - Options to configure the overflow container
|
|
19
19
|
* @returns - ref to attach to an intrinsic HTML element and imperative functions
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,mBAAA,gBAAA,OAAA,CAAA,6BAAA,CAAA;;
|
|
1
|
+
{"version":3,"sources":["useOverflowContainer.ts"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { createOverflowManager } from '@fluentui/priority-overflow';\n\n/**\n * @internal\n */\nimport type {\n OnUpdateItemVisibility,\n OnUpdateOverflow,\n OverflowItemEntry,\n OverflowManager,\n ObserveOptions,\n} from '@fluentui/priority-overflow';\nimport { canUseDOM, useEventCallback, useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { UseOverflowContainerReturn } from './types';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM } 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<ObserveOptions, 'onUpdateOverflow'>,\n): UseOverflowContainerReturn<TElement> => {\n const { overflowAxis, overflowDirection, padding, minimumVisible, onUpdateItemVisibility } = options;\n\n // DOM ref to the overflow container element\n const containerRef = React.useRef<TElement>(null);\n const updateOverflowItems = useEventCallback(update);\n\n const [overflowManager] = React.useState<OverflowManager | null>(() =>\n canUseDOM() ? createOverflowManager() : null,\n );\n\n useIsomorphicLayoutEffect(() => {\n if (!containerRef.current) {\n return;\n }\n\n if (overflowManager) {\n overflowManager.observe(containerRef.current, {\n overflowDirection: overflowDirection ?? 'end',\n overflowAxis: overflowAxis ?? 'horizontal',\n padding: padding ?? 10,\n minimumVisible: minimumVisible ?? 0,\n onUpdateItemVisibility: onUpdateItemVisibility ?? (() => undefined),\n onUpdateOverflow: updateOverflowItems ?? (() => undefined),\n });\n\n return () => {\n overflowManager.disconnect();\n };\n }\n }, [\n updateOverflowItems,\n overflowManager,\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility,\n ]);\n\n const registerItem = React.useCallback(\n (item: OverflowItemEntry) => {\n overflowManager?.addItem(item);\n item.element.setAttribute(DATA_OVERFLOW_ITEM, '');\n\n return () => {\n item.element.removeAttribute(DATA_OVERFLOWING);\n item.element.removeAttribute(DATA_OVERFLOW_ITEM);\n overflowManager?.removeItem(item.id);\n };\n },\n [overflowManager],\n );\n\n const updateOverflow = React.useCallback(() => {\n overflowManager?.update();\n }, [overflowManager]);\n\n return {\n containerRef,\n registerItem,\n updateOverflow,\n };\n};\n\nexport const updateVisibilityAttribute: OnUpdateItemVisibility = ({ item, visible }) => {\n if (visible) {\n item.element.removeAttribute(DATA_OVERFLOWING);\n } else {\n item.element.setAttribute(DATA_OVERFLOWING, '');\n }\n};\n"],"sourceRoot":"../src/"}
|
|
@@ -11,6 +11,7 @@ const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
|
|
11
11
|
|
|
12
12
|
const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
|
|
13
13
|
/**
|
|
14
|
+
* @internal
|
|
14
15
|
* Registers an overflow item
|
|
15
16
|
* @param id - unique identifier for the item used by the overflow manager
|
|
16
17
|
* @param priority - higher priority means the item overflows later
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA
|
|
1
|
+
{"version":3,"sources":["useOverflowItem.ts"],"names":[],"mappings":";;;;;;;AAAA,MAAA,KAAA,gBAAA,OAAA,CAAA,OAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,2BAAA,CAAA;;AACA,MAAA,iBAAA,gBAAA,OAAA,CAAA,mBAAA,CAAA;AAEA;;;;;;;AAOG;;;AACH,SAAgB,eAAhB,CAA8D,EAA9D,EAA0E,QAA1E,EAA6F,OAA7F,EAA6G;EAC3G,MAAM,GAAG,GAAG,KAAK,CAAC,MAAN,CAAuB,IAAvB,CAAZ;EACA,MAAM,YAAY,GAAG,iBAAA,CAAA,kBAAA,CAAmB,CAAC,IAAI,CAAC,CAAC,YAA1B,CAArB;EAEA,iBAAA,CAAA,yBAAA,CAA0B,MAAK;IAC7B,IAAI,GAAG,CAAC,OAAR,EAAiB;MACf,OAAO,YAAY,CAAC;QAClB,OAAO,EAAE,GAAG,CAAC,OADK;QAElB,EAFkB;QAGlB,QAAQ,EAAE,QAAQ,KAAA,IAAR,IAAA,QAAQ,KAAA,KAAA,CAAR,GAAA,QAAA,GAAY,CAHJ;QAIlB;MAJkB,CAAD,CAAnB;IAMD;EACF,CATD,EASG,CAAC,EAAD,EAAK,QAAL,EAAe,YAAf,EAA6B,OAA7B,CATH;EAWA,OAAO,GAAP;AACD;;AAhBD,OAAA,CAAA,eAAA,GAAA,eAAA","sourcesContent":["import * as React from 'react';\nimport { useIsomorphicLayoutEffect } from '@fluentui/react-utilities';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @internal\n * Registers an overflow item\n * @param id - unique identifier for the item used by the overflow manager\n * @param priority - higher priority means the item overflows later\n * @param groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowItem<TElement extends HTMLElement>(id: string, priority?: number, groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerItem = useOverflowContext(v => v.registerItem);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerItem({\n element: ref.current,\n id,\n priority: priority ?? 0,\n groupId,\n });\n }\n }, [id, priority, registerItem, groupId]);\n\n return ref;\n}\n"],"sourceRoot":"../src/"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-overflow",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20220628-0417.1",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -30,18 +30,19 @@
|
|
|
30
30
|
"@fluentui/scripts": "^1.0.0"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/priority-overflow": "^0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-context-selector": "0.0.0
|
|
35
|
-
"@fluentui/react-theme": "0.0.0
|
|
36
|
-
"@fluentui/react-utilities": "0.0.0
|
|
37
|
-
"@griffel/react": "1.
|
|
33
|
+
"@fluentui/priority-overflow": "^0.0.0-nightly-20220628-0417.1",
|
|
34
|
+
"@fluentui/react-context-selector": "^0.0.0",
|
|
35
|
+
"@fluentui/react-theme": "^0.0.0",
|
|
36
|
+
"@fluentui/react-utilities": "^0.0.0",
|
|
37
|
+
"@griffel/react": "1.2.0",
|
|
38
38
|
"tslib": "^2.1.0"
|
|
39
39
|
},
|
|
40
40
|
"peerDependencies": {
|
|
41
41
|
"@types/react": ">=16.8.0 <18.0.0",
|
|
42
42
|
"@types/react-dom": ">=16.8.0 <18.0.0",
|
|
43
43
|
"react": ">=16.8.0 <18.0.0",
|
|
44
|
-
"react-dom": ">=16.8.0 <18.0.0"
|
|
44
|
+
"react-dom": ">=16.8.0 <18.0.0",
|
|
45
|
+
"scheduler": "^0.19.0 || ^0.20.0"
|
|
45
46
|
},
|
|
46
47
|
"beachball": {
|
|
47
48
|
"disallowedChangeTypes": [
|