@fluentui/react-overflow 0.0.0-nightly-20230223-2115.1 → 0.0.0-nightly-20230228-0425.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 +11 -11
- package/CHANGELOG.md +8 -8
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js +1 -1
- package/lib/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib/components/OverflowItem/index.js.map +1 -1
- package/lib/constants.js.map +1 -1
- package/lib/index.js.map +1 -1
- package/lib/overflowContext.js +1 -4
- package/lib/overflowContext.js.map +1 -1
- package/lib/types.js +1 -1
- package/lib/types.js.map +1 -1
- package/lib/useIsOverflowGroupVisible.js.map +1 -1
- package/lib/useIsOverflowItemVisible.js.map +1 -1
- package/lib/useOverflowContainer.js +10 -11
- package/lib/useOverflowContainer.js.map +1 -1
- package/lib/useOverflowCount.js +1 -2
- package/lib/useOverflowCount.js.map +1 -1
- package/lib/useOverflowItem.js +1 -1
- package/lib/useOverflowItem.js.map +1 -1
- package/lib/useOverflowMenu.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +70 -62
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +21 -16
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js +2 -5
- package/lib-commonjs/components/OverflowItem/OverflowItem.types.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/index.js +8 -6
- package/lib-commonjs/components/OverflowItem/index.js.map +1 -1
- package/lib-commonjs/constants.js +6 -16
- package/lib-commonjs/constants.js.map +1 -1
- package/lib-commonjs/index.js +86 -34
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/overflowContext.js +16 -24
- package/lib-commonjs/overflowContext.js.map +1 -1
- package/lib-commonjs/types.js +2 -5
- package/lib-commonjs/types.js.map +1 -1
- package/lib-commonjs/useIsOverflowGroupVisible.js +11 -9
- package/lib-commonjs/useIsOverflowGroupVisible.js.map +1 -1
- package/lib-commonjs/useIsOverflowItemVisible.js +11 -9
- package/lib-commonjs/useIsOverflowItemVisible.js.map +1 -1
- package/lib-commonjs/useOverflowContainer.js +80 -88
- package/lib-commonjs/useOverflowContainer.js.map +1 -1
- package/lib-commonjs/useOverflowCount.js +15 -15
- package/lib-commonjs/useOverflowCount.js.map +1 -1
- package/lib-commonjs/useOverflowItem.js +27 -27
- package/lib-commonjs/useOverflowItem.js.map +1 -1
- package/lib-commonjs/useOverflowMenu.js +30 -41
- package/lib-commonjs/useOverflowMenu.js.map +1 -1
- package/package.json +7 -7
- package/.swcrc +0 -33
@@ -1,34 +1,34 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "useOverflowItem", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>useOverflowItem
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
6
|
+
exports.useOverflowItem = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
|
+
const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
|
10
|
+
/**
|
11
|
+
* @internal
|
12
|
+
* Registers an overflow item
|
13
|
+
* @param id - unique identifier for the item used by the overflow manager
|
14
|
+
* @param priority - higher priority means the item overflows later
|
15
|
+
* @param groupId - assigns the item to a group, group visibility can be watched
|
16
|
+
* @returns ref to assign to an intrinsic HTML element
|
17
|
+
*/
|
13
18
|
function useOverflowItem(id, priority, groupId) {
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
id,
|
21
|
-
priority: priority ?? 0,
|
22
|
-
groupId
|
23
|
-
});
|
24
|
-
}
|
25
|
-
}, [
|
19
|
+
const ref = React.useRef(null);
|
20
|
+
const registerItem = overflowContext_1.useOverflowContext(v => v.registerItem);
|
21
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
22
|
+
if (ref.current) {
|
23
|
+
return registerItem({
|
24
|
+
element: ref.current,
|
26
25
|
id,
|
27
|
-
priority,
|
28
|
-
registerItem,
|
26
|
+
priority: priority !== null && priority !== void 0 ? priority : 0,
|
29
27
|
groupId
|
30
|
-
|
31
|
-
|
32
|
-
}
|
33
|
-
|
28
|
+
});
|
29
|
+
}
|
30
|
+
}, [id, priority, registerItem, groupId]);
|
31
|
+
return ref;
|
32
|
+
}
|
33
|
+
exports.useOverflowItem = useOverflowItem;
|
34
34
|
//# sourceMappingURL=useOverflowItem.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AAEA;;;;;;;;AAQA,SAAgBA,eAAe,CAA+BC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;EAC3G,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,YAAY,GAAGC,oCAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,YAAY,CAAC;EAE5DG,2CAAyB,CAAC,MAAK;IAC7B,IAAIN,GAAG,CAACO,OAAO,EAAE;MACf,OAAOJ,YAAY,CAAC;QAClBK,OAAO,EAAER,GAAG,CAACO,OAAO;QACpBV,EAAE;QACFC,QAAQ,EAAEA,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAI,CAAC;QACvBC;OACD,CAAC;;EAEN,CAAC,EAAE,CAACF,EAAE,EAAEC,QAAQ,EAAEK,YAAY,EAAEJ,OAAO,CAAC,CAAC;EAEzC,OAAOC,GAAG;AACZ;AAhBAS","names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","overflowContext_1","v","react_utilities_1","current","element","exports"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowItem.ts"],"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"]}
|
@@ -1,46 +1,35 @@
|
|
1
1
|
"use strict";
|
2
|
+
|
2
3
|
Object.defineProperty(exports, "__esModule", {
|
3
|
-
|
4
|
-
});
|
5
|
-
Object.defineProperty(exports, "useOverflowMenu", {
|
6
|
-
enumerable: true,
|
7
|
-
get: ()=>useOverflowMenu
|
4
|
+
value: true
|
8
5
|
});
|
9
|
-
|
10
|
-
const
|
11
|
-
const
|
12
|
-
const
|
13
|
-
const
|
6
|
+
exports.useOverflowMenu = void 0;
|
7
|
+
const React = /*#__PURE__*/require("react");
|
8
|
+
const react_utilities_1 = /*#__PURE__*/require("@fluentui/react-utilities");
|
9
|
+
const overflowContext_1 = /*#__PURE__*/require("./overflowContext");
|
10
|
+
const useOverflowCount_1 = /*#__PURE__*/require("./useOverflowCount");
|
14
11
|
function useOverflowMenu(id) {
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
31
|
-
|
32
|
-
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
]);
|
39
|
-
return {
|
40
|
-
ref,
|
41
|
-
overflowCount,
|
42
|
-
isOverflowing
|
43
|
-
};
|
44
|
-
} //# sourceMappingURL=useOverflowMenu.js.map
|
45
|
-
|
12
|
+
const elementId = react_utilities_1.useId('overflow-menu', id);
|
13
|
+
const overflowCount = useOverflowCount_1.useOverflowCount();
|
14
|
+
const registerOverflowMenu = overflowContext_1.useOverflowContext(v => v.registerOverflowMenu);
|
15
|
+
const updateOverflow = overflowContext_1.useOverflowContext(v => v.updateOverflow);
|
16
|
+
const ref = React.useRef(null);
|
17
|
+
const isOverflowing = overflowCount > 0;
|
18
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
19
|
+
if (ref.current) {
|
20
|
+
return registerOverflowMenu(ref.current);
|
21
|
+
}
|
22
|
+
}, [registerOverflowMenu, isOverflowing, elementId]);
|
23
|
+
react_utilities_1.useIsomorphicLayoutEffect(() => {
|
24
|
+
if (isOverflowing) {
|
25
|
+
updateOverflow();
|
26
|
+
}
|
27
|
+
}, [isOverflowing, updateOverflow, ref]);
|
28
|
+
return {
|
29
|
+
ref,
|
30
|
+
overflowCount,
|
31
|
+
isOverflowing
|
32
|
+
};
|
33
|
+
}
|
34
|
+
exports.useOverflowMenu = useOverflowMenu;
|
46
35
|
//# sourceMappingURL=useOverflowMenu.js.map
|
@@ -1 +1 @@
|
|
1
|
-
{"version":3,"sources":["
|
1
|
+
{"version":3,"mappings":";;;;;;AAAA;AACA;AACA;AACA;AAEA,SAAgBA,eAAe,CAA+BC,EAAW;EACvE,MAAMC,SAAS,GAAGC,uBAAK,CAAC,eAAe,EAAEF,EAAE,CAAC;EAC5C,MAAMG,aAAa,GAAGC,mCAAgB,EAAE;EACxC,MAAMC,oBAAoB,GAAGC,oCAAkB,CAACC,CAAC,IAAIA,CAAC,CAACF,oBAAoB,CAAC;EAC5E,MAAMG,cAAc,GAAGF,oCAAkB,CAACC,CAAC,IAAIA,CAAC,CAACC,cAAc,CAAC;EAChE,MAAMC,GAAG,GAAGC,KAAK,CAACC,MAAM,CAAW,IAAI,CAAC;EACxC,MAAMC,aAAa,GAAGT,aAAa,GAAG,CAAC;EAEvCD,2CAAyB,CAAC,MAAK;IAC7B,IAAIO,GAAG,CAACI,OAAO,EAAE;MACf,OAAOR,oBAAoB,CAACI,GAAG,CAACI,OAAO,CAAC;;EAE5C,CAAC,EAAE,CAACR,oBAAoB,EAAEO,aAAa,EAAEX,SAAS,CAAC,CAAC;EAEpDC,2CAAyB,CAAC,MAAK;IAC7B,IAAIU,aAAa,EAAE;MACjBJ,cAAc,EAAE;;EAEpB,CAAC,EAAE,CAACI,aAAa,EAAEJ,cAAc,EAAEC,GAAG,CAAC,CAAC;EAExC,OAAO;IAAEA,GAAG;IAAEN,aAAa;IAAES;EAAa,CAAE;AAC9C;AArBAE","names":["useOverflowMenu","id","elementId","react_utilities_1","overflowCount","useOverflowCount_1","registerOverflowMenu","overflowContext_1","v","updateOverflow","ref","React","useRef","isOverflowing","current","exports"],"sourceRoot":"","sources":["../../../../../../../packages/react-components/react-overflow/src/useOverflowMenu.ts"],"sourcesContent":["import * 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>(id?: string) {\n const elementId = useId('overflow-menu', id);\n const overflowCount = useOverflowCount();\n const registerOverflowMenu = useOverflowContext(v => v.registerOverflowMenu);\n const updateOverflow = useOverflowContext(v => v.updateOverflow);\n const ref = React.useRef<TElement>(null);\n const isOverflowing = overflowCount > 0;\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current) {\n return registerOverflowMenu(ref.current);\n }\n }, [registerOverflowMenu, isOverflowing, elementId]);\n\n useIsomorphicLayoutEffect(() => {\n if (isOverflowing) {\n updateOverflow();\n }\n }, [isOverflowing, updateOverflow, ref]);\n\n return { ref, overflowCount, isOverflowing };\n}\n"]}
|
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-20230228-0425.1",
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
5
5
|
"main": "lib-commonjs/index.js",
|
6
6
|
"module": "lib/index.js",
|
@@ -24,7 +24,7 @@
|
|
24
24
|
"test": "jest --passWithNoTests",
|
25
25
|
"storybook": "start-storybook",
|
26
26
|
"type-check": "tsc -b tsconfig.json",
|
27
|
-
"generate-api": "just-scripts
|
27
|
+
"generate-api": "tsc -p ./tsconfig.lib.json --emitDeclarationOnly && just-scripts api-extractor"
|
28
28
|
},
|
29
29
|
"devDependencies": {
|
30
30
|
"@fluentui/eslint-plugin": "*",
|
@@ -33,12 +33,12 @@
|
|
33
33
|
"@fluentui/scripts-tasks": "*"
|
34
34
|
},
|
35
35
|
"dependencies": {
|
36
|
-
"@fluentui/priority-overflow": "0.0.0-nightly-
|
37
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
36
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20230228-0425.1",
|
37
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20230228-0425.1",
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20230228-0425.1",
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20230228-0425.1",
|
40
40
|
"@griffel/react": "^1.5.2",
|
41
|
-
"
|
41
|
+
"tslib": "^2.1.0"
|
42
42
|
},
|
43
43
|
"peerDependencies": {
|
44
44
|
"@types/react": ">=16.8.0 <19.0.0",
|
package/.swcrc
DELETED
@@ -1,33 +0,0 @@
|
|
1
|
-
{
|
2
|
-
"$schema": "https://json.schemastore.org/swcrc",
|
3
|
-
"env": {
|
4
|
-
"targets": {
|
5
|
-
"chrome": "84",
|
6
|
-
"edge": "84",
|
7
|
-
"firefox": "75",
|
8
|
-
"opera": "73",
|
9
|
-
"safari": "14.1"
|
10
|
-
}
|
11
|
-
},
|
12
|
-
"exclude": [
|
13
|
-
"/testing",
|
14
|
-
"/**/*.cy.ts",
|
15
|
-
"/**/*.cy.tsx",
|
16
|
-
"/**/*.spec.ts",
|
17
|
-
"/**/*.spec.tsx",
|
18
|
-
"/**/*.test.ts",
|
19
|
-
"/**/*.test.tsx"
|
20
|
-
],
|
21
|
-
"jsc": {
|
22
|
-
"parser": {
|
23
|
-
"syntax": "typescript",
|
24
|
-
"tsx": true,
|
25
|
-
"decorators": false,
|
26
|
-
"dynamicImport": false
|
27
|
-
},
|
28
|
-
"target": "es2019",
|
29
|
-
"externalHelpers": true
|
30
|
-
},
|
31
|
-
"minify": false,
|
32
|
-
"sourceMaps": true
|
33
|
-
}
|