@fluentui/react-overflow 0.0.0-nightly-20240514-0405.1 → 0.0.0-nightly-20240515-0405.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.md +8 -8
- package/dist/index.d.ts +2 -0
- package/lib/components/Overflow.js +3 -2
- package/lib/components/Overflow.js.map +1 -1
- package/lib/components/OverflowItem/OverflowItem.js +7 -2
- package/lib/components/OverflowItem/OverflowItem.js.map +1 -1
- package/lib-commonjs/components/Overflow.js +2 -1
- package/lib-commonjs/components/Overflow.js.map +1 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js +4 -1
- package/lib-commonjs/components/OverflowItem/OverflowItem.js.map +1 -1
- package/package.json +5 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-overflow
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 15 May 2024 04:20:44 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-20240515-0405.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20240515-0405.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.18..@fluentui/react-overflow_v0.0.0-nightly-
|
|
9
|
+
Wed, 15 May 2024 04:20:44 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.1.18..@fluentui/react-overflow_v0.0.0-nightly-20240515-0405.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/priority-overflow to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/priority-overflow to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
|
|
16
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
|
|
17
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
|
|
18
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20240515-0405.1 ([commit](https://github.com/microsoft/fluentui/commit/dbb856a22fab6021463d58dd45839c80032d8bf8) by beachball)
|
|
19
19
|
|
|
20
20
|
## [9.1.18](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.1.18)
|
|
21
21
|
|
package/dist/index.d.ts
CHANGED
|
@@ -57,6 +57,8 @@ declare type OverflowDividerProps = {
|
|
|
57
57
|
/**
|
|
58
58
|
* Attaches overflow item behavior to its child registered with the OverflowContext.
|
|
59
59
|
* It does not render an element of its own.
|
|
60
|
+
*
|
|
61
|
+
* Behaves similarly to other `*Trigger` components in Fluent UI React.
|
|
60
62
|
*/
|
|
61
63
|
export declare const OverflowItem: React_2.ForwardRefExoticComponent<OverflowItemProps & React_2.RefAttributes<unknown>>;
|
|
62
64
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { mergeClasses } from '@griffel/react';
|
|
3
|
-
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
|
+
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
|
|
4
4
|
import { OverflowContext } from '../overflowContext';
|
|
5
5
|
import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
|
|
6
6
|
import { useOverflowStyles } from './useOverflowStyles.styles';
|
|
@@ -37,8 +37,9 @@ import { useOverflowStyles } from './useOverflowStyles.styles';
|
|
|
37
37
|
minimumVisible,
|
|
38
38
|
onUpdateItemVisibility: updateVisibilityAttribute
|
|
39
39
|
});
|
|
40
|
+
const child = getTriggerChild(children);
|
|
40
41
|
const clonedChild = applyTriggerPropsToChildren(children, {
|
|
41
|
-
ref: useMergedRefs(containerRef, ref),
|
|
42
|
+
ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
|
|
42
43
|
className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
|
|
43
44
|
});
|
|
44
45
|
return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;
|
|
1
|
+
{"version":3,"sources":["Overflow.tsx"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport type { OnUpdateOverflow, OverflowGroupState, ObserveOptions } from '@fluentui/priority-overflow';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\n\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n\ninterface OverflowState {\n hasOverflow: boolean;\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n}\n\n/**\n * Overflow Props\n */\nexport type OverflowProps = Partial<\n Pick<ObserveOptions, 'overflowAxis' | 'overflowDirection' | 'padding' | 'minimumVisible'>\n> & {\n children: React.ReactElement;\n};\n\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */\nexport const Overflow = React.forwardRef((props: OverflowProps, ref) => {\n const styles = useOverflowStyles();\n\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n\n const [overflowState, setOverflowState] = React.useState<OverflowState>({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {},\n });\n\n // useOverflowContainer wraps this method in a useEventCallback.\n const update: OnUpdateOverflow = data => {\n const { visibleItems, invisibleItems, groupVisibility } = data;\n\n const itemVisibility: Record<string, boolean> = {};\n visibleItems.forEach(item => {\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach(x => (itemVisibility[x.id] = false));\n\n setOverflowState(() => {\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility,\n };\n });\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(\n update,\n {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n },\n );\n\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"names":["React","mergeClasses","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","onUpdateItemVisibility","child","clonedChild","className","overflowMenu","overflowingItems","Provider","value"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,YAAY,QAAQ,iBAAiB;AAE9C,SAASC,2BAA2B,EAAEC,eAAe,EAAEC,aAAa,QAAQ,4BAA4B;AAExG,SAASC,eAAe,QAAQ,qBAAqB;AACrD,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ,0BAA0B;AAC1F,SAASC,iBAAiB,QAAQ,6BAA6B;AAiB/D;;CAEC,GACD,OAAO,MAAMC,yBAAWT,MAAMU,UAAU,CAAC,CAACC,OAAsBC;IAC9D,MAAMC,SAASL;IAEf,MAAM,EAAEM,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGP;IAE9F,MAAM,CAACQ,eAAeC,iBAAiB,GAAGpB,MAAMqB,QAAQ,CAAgB;QACtEC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IAEA,gEAAgE;IAChE,MAAMC,SAA2BC,CAAAA;QAC/B,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAE1D,MAAMH,iBAA0C,CAAC;QACjDI,aAAaE,OAAO,CAACC,CAAAA;YACnBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC5B;QACAH,eAAeC,OAAO,CAACG,CAAAA,IAAMT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QAEpDX,iBAAiB;YACf,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACF;QACF;IACF;IAEA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAG/B,qBAC5FkB,QACA;QACER;QACAD;QACAE;QACAH;QACAwB,wBAAwBjC;IAC1B;IAGF,MAAMkC,QAAQrC,gBAAgBW;IAC9B,MAAM2B,cAAcvC,4BAA4BY,UAAU;QACxDF,KAAKR,cAAc8B,cAActB,KAAK4B,kBAAAA,4BAAAA,MAAO5B,GAAG;QAChD8B,WAAWzC,aAAa,gBAAgBY,OAAO8B,YAAY,EAAE9B,OAAO+B,gBAAgB,EAAE9B,SAASH,KAAK,CAAC+B,SAAS;IAChH;IAEA,qBACE,oBAACrC,gBAAgBwC,QAAQ;QACvBC,OAAO;YACLvB,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACF;OAECG;AAGP,GAAG"}
|
|
@@ -1,13 +1,18 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
|
|
2
|
+
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
|
|
3
3
|
import { useOverflowItem } from '../../useOverflowItem';
|
|
4
4
|
/**
|
|
5
5
|
* Attaches overflow item behavior to its child registered with the OverflowContext.
|
|
6
6
|
* It does not render an element of its own.
|
|
7
|
+
*
|
|
8
|
+
* Behaves similarly to other `*Trigger` components in Fluent UI React.
|
|
7
9
|
*/ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
|
|
8
10
|
const { id, groupId, priority, children } = props;
|
|
9
11
|
const containerRef = useOverflowItem(id, priority, groupId);
|
|
12
|
+
const child = getTriggerChild(children);
|
|
10
13
|
return applyTriggerPropsToChildren(children, {
|
|
11
|
-
ref: useMergedRefs(containerRef, ref)
|
|
14
|
+
ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)
|
|
12
15
|
});
|
|
13
16
|
});
|
|
17
|
+
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
|
18
|
+
OverflowItem.isFluentTriggerComponent = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {
|
|
1
|
+
{"version":3,"sources":["OverflowItem.tsx"],"sourcesContent":["import * as React from 'react';\nimport {\n applyTriggerPropsToChildren,\n type FluentTriggerComponent,\n getTriggerChild,\n useMergedRefs,\n} from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\nimport { OverflowItemProps } from './OverflowItem.types';\n\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */\nexport const OverflowItem = React.forwardRef((props: OverflowItemProps, ref) => {\n const { id, groupId, priority, children } = props;\n\n const containerRef = useOverflowItem(id, priority, groupId);\n const child = getTriggerChild(children);\n\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child?.ref),\n });\n});\n\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\n(OverflowItem as FluentTriggerComponent).isFluentTriggerComponent = true;\n"],"names":["React","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SACEC,2BAA2B,EAE3BC,eAAe,EACfC,aAAa,QACR,4BAA4B;AACnC,SAASC,eAAe,QAAQ,wBAAwB;AAGxD;;;;;CAKC,GACD,OAAO,MAAMC,6BAAeL,MAAMM,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeT,gBAAgBK,IAAIE,UAAUD;IACnD,MAAMI,QAAQZ,gBAAgBU;IAE9B,OAAOX,4BAA4BW,UAAU;QAC3CJ,KAAKL,cAAcU,cAAcL,KAAKM,kBAAAA,4BAAAA,MAAON,GAAG;IAClD;AACF,GAAG;AAEH,6FAA6F;AAC5FH,aAAwCU,wBAAwB,GAAG"}
|
|
@@ -46,8 +46,9 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
|
46
46
|
minimumVisible,
|
|
47
47
|
onUpdateItemVisibility: _useOverflowContainer.updateVisibilityAttribute
|
|
48
48
|
});
|
|
49
|
+
const child = (0, _reactutilities.getTriggerChild)(children);
|
|
49
50
|
const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
|
|
50
|
-
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref),
|
|
51
|
+
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
|
|
51
52
|
className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
|
|
52
53
|
});
|
|
53
54
|
return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = (data)=>{\n const { visibleItems, invisibleItems, groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((item)=>{\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n setOverflowState(()=>{\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider\n }\n }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;
|
|
1
|
+
{"version":3,"sources":["Overflow.js"],"sourcesContent":["import * as React from 'react';\nimport { mergeClasses } from '@griffel/react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\nimport { OverflowContext } from '../overflowContext';\nimport { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';\nimport { useOverflowStyles } from './useOverflowStyles.styles';\n/**\n * Provides an OverflowContext for OverflowItem descendants.\n */ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const styles = useOverflowStyles();\n const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding } = props;\n const [overflowState, setOverflowState] = React.useState({\n hasOverflow: false,\n itemVisibility: {},\n groupVisibility: {}\n });\n // useOverflowContainer wraps this method in a useEventCallback.\n const update = (data)=>{\n const { visibleItems, invisibleItems, groupVisibility } = data;\n const itemVisibility = {};\n visibleItems.forEach((item)=>{\n itemVisibility[item.id] = true;\n });\n invisibleItems.forEach((x)=>itemVisibility[x.id] = false);\n setOverflowState(()=>{\n return {\n hasOverflow: data.invisibleItems.length > 0,\n itemVisibility,\n groupVisibility\n };\n });\n };\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute\n });\n const child = getTriggerChild(children);\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),\n className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/ React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility: overflowState.itemVisibility,\n groupVisibility: overflowState.groupVisibility,\n hasOverflow: overflowState.hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n registerDivider\n }\n }, clonedChild);\n});\n"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","item","id","x","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","registerDivider","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","child","getTriggerChild","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;wBACM;gCAC+C;iCAC5C;sCACgC;yCAC9B;AAGvB,MAAMA,WAAW,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IAC/D,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EAAEC,QAAQ,EAAEC,cAAc,EAAEC,eAAe,YAAY,EAAEC,iBAAiB,EAAEC,OAAO,EAAE,GAAGR;IAC9F,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACrDC,aAAa;QACbC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACtB;IACA,gEAAgE;IAChE,MAAMC,SAAS,CAACC;QACZ,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEJ,eAAe,EAAE,GAAGE;QAC1D,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAAC,CAACC;YAClBP,cAAc,CAACO,KAAKC,EAAE,CAAC,GAAG;QAC9B;QACAH,eAAeC,OAAO,CAAC,CAACG,IAAIT,cAAc,CAACS,EAAED,EAAE,CAAC,GAAG;QACnDX,iBAAiB;YACb,OAAO;gBACHE,aAAaI,KAAKE,cAAc,CAACK,MAAM,GAAG;gBAC1CV;gBACAC;YACJ;QACJ;IACJ;IACA,MAAM,EAAEU,YAAY,EAAEC,YAAY,EAAEC,cAAc,EAAEC,oBAAoB,EAAEC,eAAe,EAAE,GAAGC,IAAAA,0CAAoB,EAACd,QAAQ;QACvHR;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACrD;IACA,MAAMC,QAAQC,IAAAA,+BAAe,EAAC7B;IAC9B,MAAM8B,cAAcC,IAAAA,2CAA2B,EAAC/B,UAAU;QACtDH,KAAKmC,IAAAA,6BAAa,EAACZ,cAAcvB,KAAK+B,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAM/B,GAAG;QAC7FoC,WAAWC,IAAAA,oBAAY,EAAC,gBAAgBpC,OAAOqC,YAAY,EAAErC,OAAOsC,gBAAgB,EAAEpC,SAASJ,KAAK,CAACqC,SAAS;IAClH;IACA,OAAO,WAAW,GAAGvC,OAAM2C,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAC/DC,OAAO;YACH/B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCa;YACAC;YACAC;YACAC;QACJ;IACJ,GAAGM;AACP"}
|
|
@@ -15,7 +15,10 @@ const _useOverflowItem = require("../../useOverflowItem");
|
|
|
15
15
|
const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
|
|
16
16
|
const { id, groupId, priority, children } = props;
|
|
17
17
|
const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId);
|
|
18
|
+
const child = (0, _reactutilities.getTriggerChild)(children);
|
|
18
19
|
return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
|
|
19
|
-
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref)
|
|
20
|
+
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)
|
|
20
21
|
});
|
|
21
22
|
});
|
|
23
|
+
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
|
|
24
|
+
OverflowItem.isFluentTriggerComponent = true;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { id, groupId, priority, children } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref)\n });\n});\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","applyTriggerPropsToChildren","useMergedRefs"],"mappings":";;;;+
|
|
1
|
+
{"version":3,"sources":["OverflowItem.js"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowItem } from '../../useOverflowItem';\n/**\n * Attaches overflow item behavior to its child registered with the OverflowContext.\n * It does not render an element of its own.\n *\n * Behaves similarly to other `*Trigger` components in Fluent UI React.\n */ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{\n const { id, groupId, priority, children } = props;\n const containerRef = useOverflowItem(id, priority, groupId);\n const child = getTriggerChild(children);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)\n });\n});\n// type casting here is required to ensure internal type FluentTriggerComponent is not leaked\nOverflowItem.isFluentTriggerComponent = true;\n"],"names":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","child","getTriggerChild","applyTriggerPropsToChildren","useMergedRefs","isFluentTriggerComponent"],"mappings":";;;;+BAQiBA;;;eAAAA;;;;iEARM;gCACqD;iCAC5C;AAMrB,MAAMA,eAAe,WAAW,GAAGC,OAAMC,UAAU,CAAC,CAACC,OAAOC;IACnE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAC5C,MAAMM,eAAeC,IAAAA,gCAAe,EAACL,IAAIE,UAAUD;IACnD,MAAMK,QAAQC,IAAAA,+BAAe,EAACJ;IAC9B,OAAOK,IAAAA,2CAA2B,EAACL,UAAU;QACzCJ,KAAKU,IAAAA,6BAAa,EAACL,cAAcL,KAAKO,UAAU,QAAQA,UAAU,KAAK,IAAI,KAAK,IAAIA,MAAMP,GAAG;IACjG;AACJ;AACA,6FAA6F;AAC7FJ,aAAae,wBAAwB,GAAG"}
|
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-20240515-0405.1",
|
|
4
4
|
"description": "React bindings for @fluentui/priority-overflow",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -34,10 +34,10 @@
|
|
|
34
34
|
"@fluentui/scripts-tasks": "*"
|
|
35
35
|
},
|
|
36
36
|
"dependencies": {
|
|
37
|
-
"@fluentui/priority-overflow": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
40
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
37
|
+
"@fluentui/priority-overflow": "0.0.0-nightly-20240515-0405.1",
|
|
38
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20240515-0405.1",
|
|
39
|
+
"@fluentui/react-theme": "0.0.0-nightly-20240515-0405.1",
|
|
40
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20240515-0405.1",
|
|
41
41
|
"@griffel/react": "^1.5.14",
|
|
42
42
|
"@swc/helpers": "^0.5.1"
|
|
43
43
|
},
|