@fluentui/react-overflow 0.0.0-nightly-20230509-0416.1 → 0.0.0-nightly-20230511-0420.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 CHANGED
@@ -2,9 +2,9 @@
2
2
  "name": "@fluentui/react-overflow",
3
3
  "entries": [
4
4
  {
5
- "date": "Tue, 09 May 2023 04:21:46 GMT",
6
- "tag": "@fluentui/react-overflow_v0.0.0-nightly-20230509-0416.1",
7
- "version": "0.0.0-nightly-20230509-0416.1",
5
+ "date": "Thu, 11 May 2023 04:26:25 GMT",
6
+ "tag": "@fluentui/react-overflow_v0.0.0-nightly-20230511-0420.1",
7
+ "version": "0.0.0-nightly-20230511-0420.1",
8
8
  "comments": {
9
9
  "prerelease": [
10
10
  {
@@ -16,26 +16,26 @@
16
16
  {
17
17
  "author": "beachball",
18
18
  "package": "@fluentui/react-overflow",
19
- "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20230509-0416.1",
20
- "commit": "a811ee3db9621e279945d12e66817c041af26c4e"
19
+ "comment": "Bump @fluentui/priority-overflow to v0.0.0-nightly-20230511-0420.1",
20
+ "commit": "5847d0c4bebcfb769cbdb0b1029013a74ace3541"
21
21
  },
22
22
  {
23
23
  "author": "beachball",
24
24
  "package": "@fluentui/react-overflow",
25
- "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230509-0416.1",
26
- "commit": "a811ee3db9621e279945d12e66817c041af26c4e"
25
+ "comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20230511-0420.1",
26
+ "commit": "5847d0c4bebcfb769cbdb0b1029013a74ace3541"
27
27
  },
28
28
  {
29
29
  "author": "beachball",
30
30
  "package": "@fluentui/react-overflow",
31
- "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230509-0416.1",
32
- "commit": "a811ee3db9621e279945d12e66817c041af26c4e"
31
+ "comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20230511-0420.1",
32
+ "commit": "5847d0c4bebcfb769cbdb0b1029013a74ace3541"
33
33
  },
34
34
  {
35
35
  "author": "beachball",
36
36
  "package": "@fluentui/react-overflow",
37
- "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230509-0416.1",
38
- "commit": "a811ee3db9621e279945d12e66817c041af26c4e"
37
+ "comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20230511-0420.1",
38
+ "commit": "5847d0c4bebcfb769cbdb0b1029013a74ace3541"
39
39
  }
40
40
  ]
41
41
  }
package/CHANGELOG.md CHANGED
@@ -1,21 +1,21 @@
1
1
  # Change Log - @fluentui/react-overflow
2
2
 
3
- This log was last generated on Tue, 09 May 2023 04:21:46 GMT and should not be manually modified.
3
+ This log was last generated on Thu, 11 May 2023 04:26:25 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
- ## [0.0.0-nightly-20230509-0416.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230509-0416.1)
7
+ ## [0.0.0-nightly-20230511-0420.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v0.0.0-nightly-20230511-0420.1)
8
8
 
9
- Tue, 09 May 2023 04:21:46 GMT
10
- [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.15..@fluentui/react-overflow_v0.0.0-nightly-20230509-0416.1)
9
+ Thu, 11 May 2023 04:26:25 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-overflow_v9.0.15..@fluentui/react-overflow_v0.0.0-nightly-20230511-0420.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-20230509-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/a811ee3db9621e279945d12e66817c041af26c4e) by beachball)
16
- - Bump @fluentui/react-context-selector to v0.0.0-nightly-20230509-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/a811ee3db9621e279945d12e66817c041af26c4e) by beachball)
17
- - Bump @fluentui/react-theme to v0.0.0-nightly-20230509-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/a811ee3db9621e279945d12e66817c041af26c4e) by beachball)
18
- - Bump @fluentui/react-utilities to v0.0.0-nightly-20230509-0416.1 ([commit](https://github.com/microsoft/fluentui/commit/a811ee3db9621e279945d12e66817c041af26c4e) by beachball)
15
+ - Bump @fluentui/priority-overflow to v0.0.0-nightly-20230511-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/5847d0c4bebcfb769cbdb0b1029013a74ace3541) by beachball)
16
+ - Bump @fluentui/react-context-selector to v0.0.0-nightly-20230511-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/5847d0c4bebcfb769cbdb0b1029013a74ace3541) by beachball)
17
+ - Bump @fluentui/react-theme to v0.0.0-nightly-20230511-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/5847d0c4bebcfb769cbdb0b1029013a74ace3541) by beachball)
18
+ - Bump @fluentui/react-utilities to v0.0.0-nightly-20230511-0420.1 ([commit](https://github.com/microsoft/fluentui/commit/5847d0c4bebcfb769cbdb0b1029013a74ace3541) by beachball)
19
19
 
20
20
  ## [9.0.15](https://github.com/microsoft/fluentui/tree/@fluentui/react-overflow_v9.0.15)
21
21
 
@@ -16,20 +16,28 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
16
16
  overflowDirection,
17
17
  padding
18
18
  } = props;
19
- const [hasOverflow, setHasOverflow] = React.useState(false);
20
- const [itemVisibility, setItemVisibility] = React.useState({});
21
- const [groupVisibility, setGroupVisibility] = React.useState({});
19
+ const [overflowState, setOverflowState] = React.useState({
20
+ hasOverflow: false,
21
+ itemVisibility: {},
22
+ groupVisibility: {}
23
+ });
22
24
  // useOverflowContainer wraps this method in a useEventCallback.
23
- // TODO: Do we need a useEventCallback here too?
24
25
  const update = data => {
25
- setHasOverflow(() => data.invisibleItems.length > 0);
26
- setItemVisibility(() => {
27
- const newState = {};
28
- data.visibleItems.forEach(x => newState[x.id] = true);
29
- data.invisibleItems.forEach(x => newState[x.id] = false);
30
- return newState;
26
+ const {
27
+ visibleItems,
28
+ invisibleItems,
29
+ groupVisibility
30
+ } = data;
31
+ const itemVisibility = {};
32
+ visibleItems.forEach(x => itemVisibility[x.id] = true);
33
+ invisibleItems.forEach(x => itemVisibility[x.id] = false);
34
+ setOverflowState(() => {
35
+ return {
36
+ hasOverflow: data.invisibleItems.length > 0,
37
+ itemVisibility,
38
+ groupVisibility
39
+ };
31
40
  });
32
- setGroupVisibility(data.groupVisibility);
33
41
  };
34
42
  const {
35
43
  containerRef,
@@ -49,9 +57,9 @@ export const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {
49
57
  });
50
58
  return /*#__PURE__*/React.createElement(OverflowContext.Provider, {
51
59
  value: {
52
- itemVisibility,
53
- groupVisibility,
54
- hasOverflow,
60
+ itemVisibility: overflowState.itemVisibility,
61
+ groupVisibility: overflowState.groupVisibility,
62
+ hasOverflow: overflowState.hasOverflow,
55
63
  registerItem,
56
64
  updateOverflow,
57
65
  registerOverflowMenu
@@ -1 +1 @@
1
- {"version":3,"names":["React","mergeClasses","applyTriggerPropsToChildren","useMergedRefs","OverflowContext","updateVisibilityAttribute","useOverflowContainer","useOverflowStyles","Overflow","forwardRef","props","ref","styles","children","minimumVisible","overflowAxis","overflowDirection","padding","hasOverflow","setHasOverflow","useState","itemVisibility","setItemVisibility","groupVisibility","setGroupVisibility","update","data","invisibleItems","length","newState","visibleItems","forEach","x","id","containerRef","registerItem","updateOverflow","registerOverflowMenu","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","createElement","Provider","value"],"sources":["../../src/components/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\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 [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState<Record<string, boolean>>({});\n const [groupVisibility, setGroupVisibility] = React.useState<Record<string, OverflowGroupState>>({});\n\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update: OnUpdateOverflow = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState: Record<string, boolean> = {};\n data.visibleItems.forEach(x => (newState[x.id] = true));\n data.invisibleItems.forEach(x => (newState[x.id] = false));\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n\n const { containerRef, registerItem, updateOverflow, registerOverflowMenu } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(styles.overflowMenu, styles.overflowingItems, children.props.className),\n });\n\n return (\n <OverflowContext.Provider\n value={{\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu,\n }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAE7B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAE3D,SAASC,eAAe,QAAQ;AAChC,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ;AAChE,SAASC,iBAAiB,QAAQ;AAWlC;;;AAGA,OAAO,MAAMC,QAAA,gBAAWR,KAAA,CAAMS,UAAU,CAAC,CAACC,KAAA,EAAsBC,GAAA,KAAQ;EACtE,MAAMC,MAAA,GAASL,iBAAA;EAEf,MAAM;IAAEM,QAAA;IAAUC,cAAA;IAAgBC,YAAA,GAAe;IAAcC,iBAAA;IAAmBC;EAAO,CAAE,GAAGP,KAAA;EAE9F,MAAM,CAACQ,WAAA,EAAaC,cAAA,CAAe,GAAGnB,KAAA,CAAMoB,QAAQ,CAAC,KAAK;EAC1D,MAAM,CAACC,cAAA,EAAgBC,iBAAA,CAAkB,GAAGtB,KAAA,CAAMoB,QAAQ,CAA0B,CAAC;EACrF,MAAM,CAACG,eAAA,EAAiBC,kBAAA,CAAmB,GAAGxB,KAAA,CAAMoB,QAAQ,CAAqC,CAAC;EAElG;EACA;EACA,MAAMK,MAAA,GAA2BC,IAAA,IAAQ;IACvCP,cAAA,CAAe,MAAMO,IAAA,CAAKC,cAAc,CAACC,MAAM,GAAG;IAClDN,iBAAA,CAAkB,MAAM;MACtB,MAAMO,QAAA,GAAoC,CAAC;MAC3CH,IAAA,CAAKI,YAAY,CAACC,OAAO,CAACC,CAAA,IAAMH,QAAQ,CAACG,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;MACrDP,IAAA,CAAKC,cAAc,CAACI,OAAO,CAACC,CAAA,IAAMH,QAAQ,CAACG,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;MACxD,OAAOJ,QAAA;IACT;IACAL,kBAAA,CAAmBE,IAAA,CAAKH,eAAe;EACzC;EAEA,MAAM;IAAEW,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAG/B,oBAAA,CAAqBmB,MAAA,EAAQ;IACxGT,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAwB,sBAAA,EAAwBjC;EAC1B;EAEA,MAAMkC,WAAA,GAAcrC,2BAAA,CAA4BW,QAAA,EAAU;IACxDF,GAAA,EAAKR,aAAA,CAAc+B,YAAA,EAAcvB,GAAA;IACjC6B,SAAA,EAAWvC,YAAA,CAAaW,MAAA,CAAO6B,YAAY,EAAE7B,MAAA,CAAO8B,gBAAgB,EAAE7B,QAAA,CAASH,KAAK,CAAC8B,SAAS;EAChG;EAEA,oBACExC,KAAA,CAAA2C,aAAA,CAACvC,eAAA,CAAgBwC,QAAQ;IACvBC,KAAA,EAAO;MACLxB,cAAA;MACAE,eAAA;MACAL,WAAA;MACAiB,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}
1
+ {"version":3,"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","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","onUpdateItemVisibility","clonedChild","className","overflowMenu","overflowingItems","createElement","Provider","value"],"sources":["../../src/components/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(x => (itemVisibility[x.id] = true));\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 } = useOverflowContainer(update, {\n overflowDirection,\n overflowAxis,\n padding,\n minimumVisible,\n onUpdateItemVisibility: updateVisibilityAttribute,\n });\n\n const clonedChild = applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n className: mergeClasses(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 }}\n >\n {clonedChild}\n </OverflowContext.Provider>\n );\n});\n"],"mappings":"AAAA,YAAYA,KAAA,MAAW;AACvB,SAASC,YAAY,QAAQ;AAE7B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ;AAE3D,SAASC,eAAe,QAAQ;AAChC,SAASC,yBAAyB,EAAEC,oBAAoB,QAAQ;AAChE,SAASC,iBAAiB,QAAQ;AAiBlC;;;AAGA,OAAO,MAAMC,QAAA,gBAAWR,KAAA,CAAMS,UAAU,CAAC,CAACC,KAAA,EAAsBC,GAAA,KAAQ;EACtE,MAAMC,MAAA,GAASL,iBAAA;EAEf,MAAM;IAAEM,QAAA;IAAUC,cAAA;IAAgBC,YAAA,GAAe;IAAcC,iBAAA;IAAmBC;EAAO,CAAE,GAAGP,KAAA;EAE9F,MAAM,CAACQ,aAAA,EAAeC,gBAAA,CAAiB,GAAGnB,KAAA,CAAMoB,QAAQ,CAAgB;IACtEC,WAAA,EAAa,KAAK;IAClBC,cAAA,EAAgB,CAAC;IACjBC,eAAA,EAAiB,CAAC;EACpB;EAEA;EACA,MAAMC,MAAA,GAA2BC,IAAA,IAAQ;IACvC,MAAM;MAAEC,YAAA;MAAcC,cAAA;MAAgBJ;IAAe,CAAE,GAAGE,IAAA;IAE1D,MAAMH,cAAA,GAA0C,CAAC;IACjDI,YAAA,CAAaE,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,IAAI;IACtDH,cAAA,CAAeC,OAAO,CAACC,CAAA,IAAMP,cAAc,CAACO,CAAA,CAAEC,EAAE,CAAC,GAAG,KAAK;IAEzDX,gBAAA,CAAiB,MAAM;MACrB,OAAO;QACLE,WAAA,EAAaI,IAAA,CAAKE,cAAc,CAACI,MAAM,GAAG;QAC1CT,cAAA;QACAC;MACF;IACF;EACF;EAEA,MAAM;IAAES,YAAA;IAAcC,YAAA;IAAcC,cAAA;IAAgBC;EAAoB,CAAE,GAAG7B,oBAAA,CAAqBkB,MAAA,EAAQ;IACxGR,iBAAA;IACAD,YAAA;IACAE,OAAA;IACAH,cAAA;IACAsB,sBAAA,EAAwB/B;EAC1B;EAEA,MAAMgC,WAAA,GAAcnC,2BAAA,CAA4BW,QAAA,EAAU;IACxDF,GAAA,EAAKR,aAAA,CAAc6B,YAAA,EAAcrB,GAAA;IACjC2B,SAAA,EAAWrC,YAAA,CAAaW,MAAA,CAAO2B,YAAY,EAAE3B,MAAA,CAAO4B,gBAAgB,EAAE3B,QAAA,CAASH,KAAK,CAAC4B,SAAS;EAChG;EAEA,oBACEtC,KAAA,CAAAyC,aAAA,CAACrC,eAAA,CAAgBsC,QAAQ;IACvBC,KAAA,EAAO;MACLrB,cAAA,EAAgBJ,aAAA,CAAcI,cAAc;MAC5CC,eAAA,EAAiBL,aAAA,CAAcK,eAAe;MAC9CF,WAAA,EAAaH,aAAA,CAAcG,WAAW;MACtCY,YAAA;MACAC,cAAA;MACAC;IACF;KAECE,WAAA;AAGP"}
@@ -16,20 +16,24 @@ const _useOverflowStylesStyles = require("./useOverflowStyles.styles");
16
16
  const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
17
17
  const styles = (0, _useOverflowStylesStyles.useOverflowStyles)();
18
18
  const { children , minimumVisible , overflowAxis ='horizontal' , overflowDirection , padding } = props;
19
- const [hasOverflow, setHasOverflow] = _react.useState(false);
20
- const [itemVisibility, setItemVisibility] = _react.useState({});
21
- const [groupVisibility, setGroupVisibility] = _react.useState({});
19
+ const [overflowState, setOverflowState] = _react.useState({
20
+ hasOverflow: false,
21
+ itemVisibility: {},
22
+ groupVisibility: {}
23
+ });
22
24
  // useOverflowContainer wraps this method in a useEventCallback.
23
- // TODO: Do we need a useEventCallback here too?
24
25
  const update = (data)=>{
25
- setHasOverflow(()=>data.invisibleItems.length > 0);
26
- setItemVisibility(()=>{
27
- const newState = {};
28
- data.visibleItems.forEach((x)=>newState[x.id] = true);
29
- data.invisibleItems.forEach((x)=>newState[x.id] = false);
30
- return newState;
26
+ const { visibleItems , invisibleItems , groupVisibility } = data;
27
+ const itemVisibility = {};
28
+ visibleItems.forEach((x)=>itemVisibility[x.id] = true);
29
+ invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
30
+ setOverflowState(()=>{
31
+ return {
32
+ hasOverflow: data.invisibleItems.length > 0,
33
+ itemVisibility,
34
+ groupVisibility
35
+ };
31
36
  });
32
- setGroupVisibility(data.groupVisibility);
33
37
  };
34
38
  const { containerRef , registerItem , updateOverflow , registerOverflowMenu } = (0, _useOverflowContainer.useOverflowContainer)(update, {
35
39
  overflowDirection,
@@ -44,9 +48,9 @@ const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
44
48
  });
45
49
  return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
46
50
  value: {
47
- itemVisibility,
48
- groupVisibility,
49
- hasOverflow,
51
+ itemVisibility: overflowState.itemVisibility,
52
+ groupVisibility: overflowState.groupVisibility,
53
+ hasOverflow: overflowState.hasOverflow,
50
54
  registerItem,
51
55
  updateOverflow,
52
56
  registerOverflowMenu
@@ -1 +1 @@
1
- {"version":3,"sources":["../../lib/components/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 */\nexport const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {\n const styles = useOverflowStyles();\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding\n } = props;\n const [hasOverflow, setHasOverflow] = React.useState(false);\n const [itemVisibility, setItemVisibility] = React.useState({});\n const [groupVisibility, setGroupVisibility] = React.useState({});\n // useOverflowContainer wraps this method in a useEventCallback.\n // TODO: Do we need a useEventCallback here too?\n const update = data => {\n setHasOverflow(() => data.invisibleItems.length > 0);\n setItemVisibility(() => {\n const newState = {};\n data.visibleItems.forEach(x => newState[x.id] = true);\n data.invisibleItems.forEach(x => newState[x.id] = false);\n return newState;\n });\n setGroupVisibility(data.groupVisibility);\n };\n const {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n } = 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(styles.overflowMenu, styles.overflowingItems, children.props.className)\n });\n return /*#__PURE__*/React.createElement(OverflowContext.Provider, {\n value: {\n itemVisibility,\n groupVisibility,\n hasOverflow,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n }\n }, clonedChild);\n});\n//# sourceMappingURL=Overflow.js.map"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","hasOverflow","setHasOverflow","useState","itemVisibility","setItemVisibility","groupVisibility","setGroupVisibility","update","data","invisibleItems","length","newState","visibleItems","forEach","x","id","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAI3B,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EACJC,SAAQ,EACRC,eAAc,EACdC,cAAe,aAAY,EAC3BC,kBAAiB,EACjBC,QAAO,EACR,GAAGR;IACJ,MAAM,CAACS,aAAaC,eAAe,GAAGZ,OAAMa,QAAQ,CAAC,KAAK;IAC1D,MAAM,CAACC,gBAAgBC,kBAAkB,GAAGf,OAAMa,QAAQ,CAAC,CAAC;IAC5D,MAAM,CAACG,iBAAiBC,mBAAmB,GAAGjB,OAAMa,QAAQ,CAAC,CAAC;IAC9D,gEAAgE;IAChE,gDAAgD;IAChD,MAAMK,SAASC,CAAAA,OAAQ;QACrBP,eAAe,IAAMO,KAAKC,cAAc,CAACC,MAAM,GAAG;QAClDN,kBAAkB,IAAM;YACtB,MAAMO,WAAW,CAAC;YAClBH,KAAKI,YAAY,CAACC,OAAO,CAACC,CAAAA,IAAKH,QAAQ,CAACG,EAAEC,EAAE,CAAC,GAAG,IAAI;YACpDP,KAAKC,cAAc,CAACI,OAAO,CAACC,CAAAA,IAAKH,QAAQ,CAACG,EAAEC,EAAE,CAAC,GAAG,KAAK;YACvD,OAAOJ;QACT;QACAL,mBAAmBE,KAAKH,eAAe;IACzC;IACA,MAAM,EACJW,aAAY,EACZC,aAAY,EACZC,eAAc,EACdC,qBAAoB,EACrB,GAAGC,IAAAA,0CAAoB,EAACb,QAAQ;QAC/BT;QACAD;QACAE;QACAH;QACAyB,wBAAwBC,+CAAyB;IACnD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC7B,UAAU;QACxDH,KAAKiC,IAAAA,6BAAa,EAACT,cAAcxB;QACjCkC,WAAWC,IAAAA,oBAAY,EAAClC,OAAOmC,YAAY,EAAEnC,OAAOoC,gBAAgB,EAAElC,SAASJ,KAAK,CAACmC,SAAS;IAChG;IACA,OAAO,WAAW,GAAErC,OAAMyC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAChEC,OAAO;YACL9B;YACAE;YACAL;YACAiB;YACAC;YACAC;QACF;IACF,GAAGI;AACL,IACA,oCAAoC"}
1
+ {"version":3,"sources":["../../lib/components/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 */\nexport const Overflow = /*#__PURE__*/React.forwardRef((props, ref) => {\n const styles = useOverflowStyles();\n const {\n children,\n minimumVisible,\n overflowAxis = 'horizontal',\n overflowDirection,\n padding\n } = 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 {\n visibleItems,\n invisibleItems,\n groupVisibility\n } = data;\n const itemVisibility = {};\n visibleItems.forEach(x => itemVisibility[x.id] = true);\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 {\n containerRef,\n registerItem,\n updateOverflow,\n registerOverflowMenu\n } = 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(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 }\n }, clonedChild);\n});\n//# sourceMappingURL=Overflow.js.map"],"names":["Overflow","React","forwardRef","props","ref","styles","useOverflowStyles","children","minimumVisible","overflowAxis","overflowDirection","padding","overflowState","setOverflowState","useState","hasOverflow","itemVisibility","groupVisibility","update","data","visibleItems","invisibleItems","forEach","x","id","length","containerRef","registerItem","updateOverflow","registerOverflowMenu","useOverflowContainer","onUpdateItemVisibility","updateVisibilityAttribute","clonedChild","applyTriggerPropsToChildren","useMergedRefs","className","mergeClasses","overflowMenu","overflowingItems","createElement","OverflowContext","Provider","value"],"mappings":";;;;+BASaA;;aAAAA;;;6DATU;wBACM;gCAC8B;iCAC3B;sCACgC;yCAC9B;AAI3B,MAAMA,WAAW,WAAW,GAAEC,OAAMC,UAAU,CAAC,CAACC,OAAOC,MAAQ;IACpE,MAAMC,SAASC,IAAAA,0CAAiB;IAChC,MAAM,EACJC,SAAQ,EACRC,eAAc,EACdC,cAAe,aAAY,EAC3BC,kBAAiB,EACjBC,QAAO,EACR,GAAGR;IACJ,MAAM,CAACS,eAAeC,iBAAiB,GAAGZ,OAAMa,QAAQ,CAAC;QACvDC,aAAa,KAAK;QAClBC,gBAAgB,CAAC;QACjBC,iBAAiB,CAAC;IACpB;IACA,gEAAgE;IAChE,MAAMC,SAASC,CAAAA,OAAQ;QACrB,MAAM,EACJC,aAAY,EACZC,eAAc,EACdJ,gBAAe,EAChB,GAAGE;QACJ,MAAMH,iBAAiB,CAAC;QACxBI,aAAaE,OAAO,CAACC,CAAAA,IAAKP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,IAAI;QACrDH,eAAeC,OAAO,CAACC,CAAAA,IAAKP,cAAc,CAACO,EAAEC,EAAE,CAAC,GAAG,KAAK;QACxDX,iBAAiB,IAAM;YACrB,OAAO;gBACLE,aAAaI,KAAKE,cAAc,CAACI,MAAM,GAAG;gBAC1CT;gBACAC;YACF;QACF;IACF;IACA,MAAM,EACJS,aAAY,EACZC,aAAY,EACZC,eAAc,EACdC,qBAAoB,EACrB,GAAGC,IAAAA,0CAAoB,EAACZ,QAAQ;QAC/BR;QACAD;QACAE;QACAH;QACAuB,wBAAwBC,+CAAyB;IACnD;IACA,MAAMC,cAAcC,IAAAA,2CAA2B,EAAC3B,UAAU;QACxDH,KAAK+B,IAAAA,6BAAa,EAACT,cAActB;QACjCgC,WAAWC,IAAAA,oBAAY,EAAChC,OAAOiC,YAAY,EAAEjC,OAAOkC,gBAAgB,EAAEhC,SAASJ,KAAK,CAACiC,SAAS;IAChG;IACA,OAAO,WAAW,GAAEnC,OAAMuC,aAAa,CAACC,gCAAe,CAACC,QAAQ,EAAE;QAChEC,OAAO;YACL3B,gBAAgBJ,cAAcI,cAAc;YAC5CC,iBAAiBL,cAAcK,eAAe;YAC9CF,aAAaH,cAAcG,WAAW;YACtCY;YACAC;YACAC;QACF;IACF,GAAGI;AACL,IACA,oCAAoC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-overflow",
3
- "version": "0.0.0-nightly-20230509-0416.1",
3
+ "version": "0.0.0-nightly-20230511-0420.1",
4
4
  "description": "React bindings for @fluentui/priority-overflow",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -33,10 +33,10 @@
33
33
  "@fluentui/scripts-tasks": "*"
34
34
  },
35
35
  "dependencies": {
36
- "@fluentui/priority-overflow": "0.0.0-nightly-20230509-0416.1",
37
- "@fluentui/react-context-selector": "0.0.0-nightly-20230509-0416.1",
38
- "@fluentui/react-theme": "0.0.0-nightly-20230509-0416.1",
39
- "@fluentui/react-utilities": "0.0.0-nightly-20230509-0416.1",
36
+ "@fluentui/priority-overflow": "0.0.0-nightly-20230511-0420.1",
37
+ "@fluentui/react-context-selector": "0.0.0-nightly-20230511-0420.1",
38
+ "@fluentui/react-theme": "0.0.0-nightly-20230511-0420.1",
39
+ "@fluentui/react-utilities": "0.0.0-nightly-20230511-0420.1",
40
40
  "@griffel/react": "^1.5.2",
41
41
  "@swc/helpers": "^0.4.14"
42
42
  },