Initial commit

This commit is contained in:
2025-03-07 19:22:02 +01:00
commit 4a98255d83
55743 changed files with 5280367 additions and 0 deletions
@@ -0,0 +1,67 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Overflow", {
enumerable: true,
get: function() {
return Overflow;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _react1 = require("@griffel/react");
const _reactutilities = require("@fluentui/react-utilities");
const _overflowContext = require("../overflowContext");
const _useOverflowContainer = require("../useOverflowContainer");
const _useOverflowStylesstyles = require("./useOverflowStyles.styles");
const Overflow = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const styles = (0, _useOverflowStylesstyles.useOverflowStyles)();
const { children, minimumVisible, overflowAxis = 'horizontal', overflowDirection, padding, onOverflowChange } = props;
const [overflowState, setOverflowState] = _react.useState({
hasOverflow: false,
itemVisibility: {},
groupVisibility: {}
});
// useOverflowContainer wraps this method in a useEventCallback.
const update = (data)=>{
const { visibleItems, invisibleItems, groupVisibility } = data;
const itemVisibility = {};
visibleItems.forEach((item)=>{
itemVisibility[item.id] = true;
});
invisibleItems.forEach((x)=>itemVisibility[x.id] = false);
const newState = {
hasOverflow: data.invisibleItems.length > 0,
itemVisibility,
groupVisibility
};
onOverflowChange === null || onOverflowChange === void 0 ? void 0 : onOverflowChange(null, {
...newState
});
setOverflowState(newState);
};
const { containerRef, registerItem, updateOverflow, registerOverflowMenu, registerDivider } = (0, _useOverflowContainer.useOverflowContainer)(update, {
overflowDirection,
overflowAxis,
padding,
minimumVisible,
onUpdateItemVisibility: _useOverflowContainer.updateVisibilityAttribute
});
const child = (0, _reactutilities.getTriggerChild)(children);
const clonedChild = (0, _reactutilities.applyTriggerPropsToChildren)(children, {
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
className: (0, _react1.mergeClasses)('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
});
return /*#__PURE__*/ _react.createElement(_overflowContext.OverflowContext.Provider, {
value: {
itemVisibility: overflowState.itemVisibility,
groupVisibility: overflowState.groupVisibility,
hasOverflow: overflowState.hasOverflow,
registerItem,
updateOverflow,
registerOverflowMenu,
registerDivider
}
}, clonedChild);
});
File diff suppressed because one or more lines are too long
@@ -0,0 +1,21 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OverflowDivider", {
enumerable: true,
get: function() {
return OverflowDivider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useOverflowDivider = require("../../useOverflowDivider");
const OverflowDivider = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const { groupId, children } = props;
const containerRef = (0, _useOverflowDivider.useOverflowDivider)(groupId);
return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref)
});
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.tsx"],"sourcesContent":["import * as React from 'react';\nimport { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';\nimport { useOverflowDivider } from '../../useOverflowDivider';\nimport { OverflowDividerProps } from './OverflowDivider.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 */\nexport const OverflowDivider = React.forwardRef((props: OverflowDividerProps, ref) => {\n const { groupId, children } = props;\n\n const containerRef = useOverflowDivider(groupId);\n return applyTriggerPropsToChildren(children, {\n ref: useMergedRefs(containerRef, ref),\n });\n});\n"],"names":["OverflowDivider","React","forwardRef","props","ref","groupId","children","containerRef","useOverflowDivider","applyTriggerPropsToChildren","useMergedRefs"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BASaA;;;eAAAA;;;;iEATU;gCACoC;oCACxB;AAO5B,MAAMA,kBAAAA,WAAAA,GAAkBC,OAAMC,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeC,IAAAA,sCAAAA,EAAmBH;IACxC,OAAOI,IAAAA,2CAAAA,EAA4BH,UAAU;QAC3CF,KAAKM,IAAAA,6BAAAA,EAAcH,cAAcH;IACnC;AACF"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverflowDivider/OverflowDivider.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowDividerProps\n */\nexport type OverflowDividerProps = {\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId: string;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OverflowItem", {
enumerable: true,
get: function() {
return OverflowItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _useOverflowItem = require("../../useOverflowItem");
const OverflowItem = /*#__PURE__*/ _react.forwardRef((props, ref)=>{
const { id, groupId, priority, children } = props;
const containerRef = (0, _useOverflowItem.useOverflowItem)(id, priority, groupId);
const child = (0, _reactutilities.getTriggerChild)(children);
return (0, _reactutilities.applyTriggerPropsToChildren)(children, {
ref: (0, _reactutilities.useMergedRefs)(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref)
});
});
// type casting here is required to ensure internal type FluentTriggerComponent is not leaked
OverflowItem.isFluentTriggerComponent = true;
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverflowItem/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":["OverflowItem","React","forwardRef","props","ref","id","groupId","priority","children","containerRef","useOverflowItem","child","getTriggerChild","applyTriggerPropsToChildren","useMergedRefs","isFluentTriggerComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAgBaA;;;eAAAA;;;;iEAhBU;gCAMhB;iCACyB;AASzB,MAAMA,eAAAA,WAAAA,GAAeC,OAAMC,UAAU,CAAC,CAACC,OAA0BC;IACtE,MAAM,EAAEC,EAAE,EAAEC,OAAO,EAAEC,QAAQ,EAAEC,QAAQ,EAAE,GAAGL;IAE5C,MAAMM,eAAeC,IAAAA,gCAAAA,EAAgBL,IAAIE,UAAUD;IACnD,MAAMK,QAAQC,IAAAA,+BAAAA,EAAgBJ;IAE9B,OAAOK,IAAAA,2CAAAA,EAA4BL,UAAU;QAC3CJ,KAAKU,IAAAA,6BAAAA,EAAcL,cAAcL,KAAKO,UAAAA,QAAAA,UAAAA,KAAAA,IAAAA,KAAAA,IAAAA,MAAOP,GAAG;IAClD;AACF;AAEA,6FAA6F;AAC5FJ,aAAwCe,wBAAwB,GAAG"}
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverflowItem/OverflowItem.types.ts"],"sourcesContent":["import * as React from 'react';\n\n/**\n * OverflowItemProps\n */\nexport type OverflowItemProps = {\n /**\n * The unique identifier for the item used by the overflow manager.\n */\n id: string;\n /**\n * Assigns the item to a group, group visibility can be watched.\n */\n groupId?: string;\n /**\n * A higher priority means the item overflows later.\n */\n priority?: number;\n /**\n * The single child that has overflow item behavior attached.\n */\n children: React.ReactElement;\n};\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,11 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "OverflowItem", {
enumerable: true,
get: function() {
return _OverflowItem.OverflowItem;
}
});
const _OverflowItem = require("./OverflowItem");
@@ -0,0 +1 @@
{"version":3,"sources":["../src/components/OverflowItem/index.ts"],"sourcesContent":["export type { OverflowItemProps } from './OverflowItem.types';\nexport { OverflowItem } from './OverflowItem';\n"],"names":["OverflowItem"],"rangeMappings":";;;;;;;;;;","mappings":";;;;+BACSA;;;eAAAA,0BAAY;;;8BAAQ"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverflowStyles", {
enumerable: true,
get: function() {
return useOverflowStyles;
}
});
const _react = require("@griffel/react");
const useOverflowStyles = /*#__PURE__*/ (0, _react.__styles)({
overflowMenu: {
Brvla84: "fyfkpbf"
},
overflowingItems: {
zb22lx: "f10570jf"
}
}, {
d: [
".fyfkpbf [data-overflow-menu]{flex-shrink:0;}",
".f10570jf [data-overflowing]{display:none;}"
]
});
@@ -0,0 +1 @@
{"version":3,"sources":["useOverflowStyles.styles.js"],"sourcesContent":["import { makeStyles } from '@griffel/react';\nimport { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';\nexport const useOverflowStyles = makeStyles({\n overflowMenu: {\n [`& [${DATA_OVERFLOW_MENU}]`]: {\n flexShrink: 0\n }\n },\n overflowingItems: {\n [`& [${DATA_OVERFLOWING}]`]: {\n display: 'none'\n }\n }\n});\n"],"names":["useOverflowStyles","__styles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAEaA;;;eAAAA;;;uBAFc;AAEpB,MAAMA,oBAAiB,WAAA,GAAGC,IAAAA,eAAA,EAAA;IAAAC,cAAA;QAAAC,SAAA;IAAA;IAAAC,kBAAA;QAAAC,QAAA;IAAA;AAAA,GAAA;IAAAC,GAAA;QAAA;QAAA;KAAA;AAAA"}
+28
View File
@@ -0,0 +1,28 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DATA_OVERFLOWING: function() {
return DATA_OVERFLOWING;
},
DATA_OVERFLOW_DIVIDER: function() {
return DATA_OVERFLOW_DIVIDER;
},
DATA_OVERFLOW_ITEM: function() {
return DATA_OVERFLOW_ITEM;
},
DATA_OVERFLOW_MENU: function() {
return DATA_OVERFLOW_MENU;
}
});
const DATA_OVERFLOWING = 'data-overflowing';
const DATA_OVERFLOW_ITEM = 'data-overflow-item';
const DATA_OVERFLOW_MENU = 'data-overflow-menu';
const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const DATA_OVERFLOWING = 'data-overflowing';\nexport const DATA_OVERFLOW_ITEM = 'data-overflow-item';\nexport const DATA_OVERFLOW_MENU = 'data-overflow-menu';\nexport const DATA_OVERFLOW_DIVIDER = 'data-overflow-divider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAAaA,gBAAAA;eAAAA;;IAGAC,qBAAAA;eAAAA;;IAFAC,kBAAAA;eAAAA;;IACAC,kBAAAA;eAAAA;;;AAFN,MAAMH,mBAAmB;AACzB,MAAME,qBAAqB;AAC3B,MAAMC,qBAAqB;AAC3B,MAAMF,wBAAwB"}
+73
View File
@@ -0,0 +1,73 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
DATA_OVERFLOWING: function() {
return _constants.DATA_OVERFLOWING;
},
DATA_OVERFLOW_DIVIDER: function() {
return _constants.DATA_OVERFLOW_DIVIDER;
},
DATA_OVERFLOW_ITEM: function() {
return _constants.DATA_OVERFLOW_ITEM;
},
DATA_OVERFLOW_MENU: function() {
return _constants.DATA_OVERFLOW_MENU;
},
Overflow: function() {
return _Overflow.Overflow;
},
OverflowDivider: function() {
return _OverflowDivider.OverflowDivider;
},
OverflowItem: function() {
return _OverflowItem.OverflowItem;
},
useIsOverflowGroupVisible: function() {
return _useIsOverflowGroupVisible.useIsOverflowGroupVisible;
},
useIsOverflowItemVisible: function() {
return _useIsOverflowItemVisible.useIsOverflowItemVisible;
},
useOverflowContainer: function() {
return _useOverflowContainer.useOverflowContainer;
},
useOverflowContext: function() {
return _overflowContext.useOverflowContext;
},
useOverflowCount: function() {
return _useOverflowCount.useOverflowCount;
},
useOverflowDivider: function() {
return _useOverflowDivider.useOverflowDivider;
},
useOverflowItem: function() {
return _useOverflowItem.useOverflowItem;
},
useOverflowMenu: function() {
return _useOverflowMenu.useOverflowMenu;
},
useOverflowVisibility: function() {
return _useOverflowVisibility.useOverflowVisibility;
}
});
const _Overflow = require("./components/Overflow");
const _constants = require("./constants");
const _useIsOverflowGroupVisible = require("./useIsOverflowGroupVisible");
const _useIsOverflowItemVisible = require("./useIsOverflowItemVisible");
const _useOverflowContainer = require("./useOverflowContainer");
const _useOverflowCount = require("./useOverflowCount");
const _useOverflowItem = require("./useOverflowItem");
const _useOverflowMenu = require("./useOverflowMenu");
const _useOverflowDivider = require("./useOverflowDivider");
const _useOverflowVisibility = require("./useOverflowVisibility");
const _overflowContext = require("./overflowContext");
const _OverflowItem = require("./components/OverflowItem/OverflowItem");
const _OverflowDivider = require("./components/OverflowDivider/OverflowDivider");
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { Overflow } from './components/Overflow';\nexport type { OverflowProps, OnOverflowChangeData } from './components/Overflow';\nexport { DATA_OVERFLOWING, DATA_OVERFLOW_ITEM, DATA_OVERFLOW_MENU, DATA_OVERFLOW_DIVIDER } from './constants';\nexport type { UseOverflowContainerReturn } from './types';\nexport { useIsOverflowGroupVisible } from './useIsOverflowGroupVisible';\nexport { useIsOverflowItemVisible } from './useIsOverflowItemVisible';\nexport { useOverflowContainer } from './useOverflowContainer';\nexport { useOverflowCount } from './useOverflowCount';\nexport { useOverflowItem } from './useOverflowItem';\nexport { useOverflowMenu } from './useOverflowMenu';\nexport { useOverflowDivider } from './useOverflowDivider';\nexport { useOverflowVisibility } from './useOverflowVisibility';\n\nexport { useOverflowContext } from './overflowContext';\n\nexport type { OverflowItemProps } from './components/OverflowItem/OverflowItem.types';\nexport { OverflowItem } from './components/OverflowItem/OverflowItem';\nexport { OverflowDivider } from './components/OverflowDivider/OverflowDivider';\n"],"names":["DATA_OVERFLOWING","DATA_OVERFLOW_DIVIDER","DATA_OVERFLOW_ITEM","DATA_OVERFLOW_MENU","Overflow","OverflowDivider","OverflowItem","useIsOverflowGroupVisible","useIsOverflowItemVisible","useOverflowContainer","useOverflowContext","useOverflowCount","useOverflowDivider","useOverflowItem","useOverflowMenu","useOverflowVisibility"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAESA,gBAAgB;eAAhBA,2BAAgB;;IAA0CC,qBAAqB;eAArBA,gCAAqB;;IAA7DC,kBAAkB;eAAlBA,6BAAkB;;IAAEC,kBAAkB;eAAlBA,6BAAkB;;IAFxDC,QAAQ;eAARA,kBAAQ;;IAiBRC,eAAe;eAAfA,gCAAe;;IADfC,YAAY;eAAZA,0BAAY;;IAZZC,yBAAyB;eAAzBA,oDAAyB;;IACzBC,wBAAwB;eAAxBA,kDAAwB;;IACxBC,oBAAoB;eAApBA,0CAAoB;;IAOpBC,kBAAkB;eAAlBA,mCAAkB;;IANlBC,gBAAgB;eAAhBA,kCAAgB;;IAGhBC,kBAAkB;eAAlBA,sCAAkB;;IAFlBC,eAAe;eAAfA,gCAAe;;IACfC,eAAe;eAAfA,gCAAe;;IAEfC,qBAAqB;eAArBA,4CAAqB;;;0BAXL;2BAEuE;2CAEtD;0CACD;sCACJ;kCACJ;iCACD;iCACA;oCACG;uCACG;iCAEH;8BAGN;iCACG"}
+30
View File
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
OverflowContext: function() {
return OverflowContext;
},
useOverflowContext: function() {
return useOverflowContext;
}
});
const _reactcontextselector = require("@fluentui/react-context-selector");
const OverflowContext = (0, _reactcontextselector.createContext)(undefined);
const overflowContextDefaultValue = {
itemVisibility: {},
groupVisibility: {},
hasOverflow: false,
registerItem: ()=>()=>null,
updateOverflow: ()=>null,
registerOverflowMenu: ()=>()=>null,
registerDivider: ()=>()=>null
};
const useOverflowContext = (selector)=>(0, _reactcontextselector.useContextSelector)(OverflowContext, (ctx = overflowContextDefaultValue)=>selector(ctx));
@@ -0,0 +1 @@
{"version":3,"sources":["../src/overflowContext.ts"],"sourcesContent":["import type { OverflowGroupState, OverflowItemEntry, OverflowDividerEntry } from '@fluentui/priority-overflow';\nimport { ContextSelector, createContext, useContextSelector, Context } from '@fluentui/react-context-selector';\n\n/**\n * @internal\n */\nexport interface OverflowContextValue {\n itemVisibility: Record<string, boolean>;\n groupVisibility: Record<string, OverflowGroupState>;\n hasOverflow: boolean;\n registerItem: (item: OverflowItemEntry) => () => void;\n registerOverflowMenu: (el: HTMLElement) => () => void;\n registerDivider: (divider: OverflowDividerEntry) => () => void;\n updateOverflow: (padding?: number) => void;\n}\n\nexport const OverflowContext = createContext<OverflowContextValue | undefined>(\n undefined,\n) as Context<OverflowContextValue>;\n\nconst overflowContextDefaultValue: OverflowContextValue = {\n itemVisibility: {},\n groupVisibility: {},\n hasOverflow: false,\n registerItem: () => () => null,\n updateOverflow: () => null,\n registerOverflowMenu: () => () => null,\n registerDivider: () => () => null,\n};\n\n/**\n * @internal\n */\nexport const useOverflowContext = <SelectedValue>(selector: ContextSelector<OverflowContextValue, SelectedValue>) =>\n useContextSelector(OverflowContext, (ctx = overflowContextDefaultValue) => selector(ctx));\n"],"names":["OverflowContext","useOverflowContext","createContext","undefined","overflowContextDefaultValue","itemVisibility","groupVisibility","hasOverflow","registerItem","updateOverflow","registerOverflowMenu","registerDivider","selector","useContextSelector","ctx"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAgBaA,eAAAA;eAAAA;;IAiBAC,kBAAAA;eAAAA;;;sCAhC+D;AAerE,MAAMD,kBAAkBE,IAAAA,mCAAAA,EAC7BC;AAGF,MAAMC,8BAAoD;IACxDC,gBAAgB,CAAC;IACjBC,iBAAiB,CAAC;IAClBC,aAAa;IACbC,cAAc,IAAM,IAAM;IAC1BC,gBAAgB,IAAM;IACtBC,sBAAsB,IAAM,IAAM;IAClCC,iBAAiB,IAAM,IAAM;AAC/B;AAKO,MAAMV,qBAAqB,CAAgBW,WAChDC,IAAAA,wCAAAA,EAAmBb,iBAAiB,CAACc,MAAMV,2BAA2B,GAAKQ,SAASE"}
+6
View File
@@ -0,0 +1,6 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
+1
View File
@@ -0,0 +1 @@
{"version":3,"sources":["../src/types.ts"],"sourcesContent":["import * as React from 'react';\nimport { OverflowContextValue } from './overflowContext';\n\n/**\n * @internal\n */\nexport interface UseOverflowContainerReturn<TElement extends HTMLElement>\n extends Pick<OverflowContextValue, 'registerItem' | 'updateOverflow' | 'registerOverflowMenu' | 'registerDivider'> {\n /**\n * Ref to apply to the container that will overflow\n */\n containerRef: React.RefObject<TElement>;\n}\n"],"names":[],"rangeMappings":";;;;;","mappings":";;;;;iEAAuB"}
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useIsOverflowGroupVisible", {
enumerable: true,
get: function() {
return useIsOverflowGroupVisible;
}
});
const _overflowContext = require("./overflowContext");
function useIsOverflowGroupVisible(id) {
return (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility[id]);
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/useIsOverflowGroupVisible.ts"],"sourcesContent":["import { OverflowGroupState } from '@fluentui/priority-overflow';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for a group of overflow items\n * @returns visibility state of the group\n */\nexport function useIsOverflowGroupVisible(id: string): OverflowGroupState {\n return useOverflowContext(ctx => ctx.groupVisibility[id]);\n}\n"],"names":["useIsOverflowGroupVisible","id","useOverflowContext","ctx","groupVisibility"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BAOgBA;;;eAAAA;;;iCANmB;AAM5B,SAASA,0BAA0BC,EAAU;IAClD,OAAOC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,eAAe,CAACH,GAAG;AAC1D"}
@@ -0,0 +1,14 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useIsOverflowItemVisible", {
enumerable: true,
get: function() {
return useIsOverflowItemVisible;
}
});
const _overflowContext = require("./overflowContext");
function useIsOverflowItemVisible(id) {
return !!(0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility[id]);
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/useIsOverflowItemVisible.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @param id - unique identifier for the item used by the overflow manager\n * @returns visibility state of an overflow item\n */\nexport function useIsOverflowItemVisible(id: string): boolean {\n return !!useOverflowContext(ctx => ctx.itemVisibility[id]);\n}\n"],"names":["useIsOverflowItemVisible","id","useOverflowContext","ctx","itemVisibility"],"rangeMappings":";;;;;;;;;;;;;","mappings":";;;;+BAMgBA;;;eAAAA;;;iCANmB;AAM5B,SAASA,yBAAyBC,EAAU;IACjD,OAAO,CAAC,CAACC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,cAAc,CAACH,GAAG;AAC3D"}
@@ -0,0 +1,126 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
function _export(target, all) {
for(var name in all)Object.defineProperty(target, name, {
enumerable: true,
get: all[name]
});
}
_export(exports, {
updateVisibilityAttribute: function() {
return updateVisibilityAttribute;
},
useOverflowContainer: function() {
return useOverflowContainer;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _priorityoverflow = require("@fluentui/priority-overflow");
const _reactutilities = require("@fluentui/react-utilities");
const _constants = require("./constants");
const noop = ()=>null;
const useOverflowContainer = (update, options)=>{
'use no memo';
const { overflowAxis = 'horizontal', overflowDirection = 'end', padding = 10, minimumVisible = 0, onUpdateItemVisibility = noop } = options;
const onUpdateOverflow = (0, _reactutilities.useEventCallback)(update);
const overflowOptions = _react.useMemo(()=>({
overflowAxis,
overflowDirection,
padding,
minimumVisible,
onUpdateItemVisibility,
onUpdateOverflow
}), [
minimumVisible,
onUpdateItemVisibility,
overflowAxis,
overflowDirection,
padding,
onUpdateOverflow
]);
const firstMount = (0, _reactutilities.useFirstMount)();
// DOM ref to the overflow container element
const containerRef = _react.useRef(null);
const [overflowManager, setOverflowManager] = _react.useState(()=>(0, _reactutilities.canUseDOM)() ? (0, _priorityoverflow.createOverflowManager)() : null);
// On first mount there is no need to create an overflow manager and re-render
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (firstMount && containerRef.current) {
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.observe(containerRef.current, overflowOptions);
}
}, [
firstMount,
overflowManager,
overflowOptions
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (!containerRef.current || !(0, _reactutilities.canUseDOM)() || firstMount) {
return;
}
const newOverflowManager = (0, _priorityoverflow.createOverflowManager)();
newOverflowManager.observe(containerRef.current, overflowOptions);
setOverflowManager(newOverflowManager);
// We don't want to re-create the overflow manager when the first mount flag changes from true to false
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [
overflowOptions
]);
/* Clean up overflow manager on unmount */ _react.useEffect(()=>()=>{
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.disconnect();
}, [
overflowManager
]);
const registerItem = _react.useCallback((item)=>{
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addItem(item);
item.element.setAttribute(_constants.DATA_OVERFLOW_ITEM, '');
return ()=>{
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
item.element.removeAttribute(_constants.DATA_OVERFLOW_ITEM);
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeItem(item.id);
};
}, [
overflowManager
]);
const registerDivider = _react.useCallback((divider)=>{
const el = divider.element;
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addDivider(divider);
el.setAttribute(_constants.DATA_OVERFLOW_DIVIDER, '');
return ()=>{
divider.groupId && (overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeDivider(divider.groupId));
el.removeAttribute(_constants.DATA_OVERFLOW_DIVIDER);
};
}, [
overflowManager
]);
const registerOverflowMenu = _react.useCallback((el)=>{
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.addOverflowMenu(el);
el.setAttribute(_constants.DATA_OVERFLOW_MENU, '');
return ()=>{
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.removeOverflowMenu();
el.removeAttribute(_constants.DATA_OVERFLOW_MENU);
};
}, [
overflowManager
]);
const updateOverflow = _react.useCallback(()=>{
overflowManager === null || overflowManager === void 0 ? void 0 : overflowManager.update();
}, [
overflowManager
]);
return {
registerItem,
registerDivider,
registerOverflowMenu,
updateOverflow,
containerRef
};
};
const updateVisibilityAttribute = ({ item, visible })=>{
if (visible) {
item.element.removeAttribute(_constants.DATA_OVERFLOWING);
} else {
item.element.setAttribute(_constants.DATA_OVERFLOWING, '');
}
};
File diff suppressed because one or more lines are too long
+19
View File
@@ -0,0 +1,19 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverflowCount", {
enumerable: true,
get: function() {
return useOverflowCount;
}
});
const _overflowContext = require("./overflowContext");
const useOverflowCount = ()=>(0, _overflowContext.useOverflowContext)((v)=>{
return Object.entries(v.itemVisibility).reduce((acc, [id, visible])=>{
if (!visible) {
acc++;
}
return acc;
}, 0);
});
@@ -0,0 +1 @@
{"version":3,"sources":["../src/useOverflowCount.ts"],"sourcesContent":["import { useOverflowContext } from './overflowContext';\n\n/**\n * @returns Number of items that are overflowing\n */\nexport const useOverflowCount = () =>\n useOverflowContext(v => {\n return Object.entries(v.itemVisibility).reduce((acc, [id, visible]) => {\n if (!visible) {\n acc++;\n }\n\n return acc;\n }, 0);\n });\n"],"names":["useOverflowCount","useOverflowContext","v","Object","entries","itemVisibility","reduce","acc","id","visible"],"rangeMappings":";;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKaA;;;eAAAA;;;iCALsB;AAK5B,MAAMA,mBAAmB,IAC9BC,IAAAA,mCAAAA,EAAmBC,CAAAA;QACjB,OAAOC,OAAOC,OAAO,CAACF,EAAEG,cAAc,EAAEC,MAAM,CAAC,CAACC,KAAK,CAACC,IAAIC,QAAQ;YAChE,IAAI,CAACA,SAAS;gBACZF;YACF;YAEA,OAAOA;QACT,GAAG;IACL"}
@@ -0,0 +1,30 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverflowDivider", {
enumerable: true,
get: function() {
return useOverflowDivider;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _overflowContext = require("./overflowContext");
function useOverflowDivider(groupId) {
const ref = _react.useRef(null);
const registerDivider = (0, _overflowContext.useOverflowContext)((v)=>v.registerDivider);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (ref.current && groupId) {
return registerDivider({
element: ref.current,
groupId
});
}
}, [
registerDivider,
groupId
]);
return ref;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/useOverflowDivider.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 groupId - assigns the item to a group, group visibility can be watched\n * @returns ref to assign to an intrinsic HTML element\n */\nexport function useOverflowDivider<TElement extends HTMLElement>(groupId?: string) {\n const ref = React.useRef<TElement>(null);\n const registerDivider = useOverflowContext(v => v.registerDivider);\n\n useIsomorphicLayoutEffect(() => {\n if (ref.current && groupId) {\n return registerDivider({\n element: ref.current,\n groupId,\n });\n }\n }, [registerDivider, groupId]);\n\n return ref;\n}\n"],"names":["useOverflowDivider","groupId","ref","React","useRef","registerDivider","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAUgBA;;;eAAAA;;;;iEAVO;gCACmB;iCACP;AAQ5B,SAASA,mBAAiDC,OAAgB;IAC/E,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,kBAAkBC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,eAAe;IAEjEG,IAAAA,yCAAAA,EAA0B;QACxB,IAAIN,IAAIO,OAAO,IAAIR,SAAS;YAC1B,OAAOI,gBAAgB;gBACrBK,SAASR,IAAIO,OAAO;gBACpBR;YACF;QACF;IACF,GAAG;QAACI;QAAiBJ;KAAQ;IAE7B,OAAOC;AACT"}
+34
View File
@@ -0,0 +1,34 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverflowItem", {
enumerable: true,
get: function() {
return useOverflowItem;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _overflowContext = require("./overflowContext");
function useOverflowItem(id, priority, groupId) {
const ref = _react.useRef(null);
const registerItem = (0, _overflowContext.useOverflowContext)((v)=>v.registerItem);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (ref.current) {
return registerItem({
element: ref.current,
id,
priority: priority !== null && priority !== void 0 ? priority : 0,
groupId
});
}
}, [
id,
priority,
registerItem,
groupId
]);
return ref;
}
@@ -0,0 +1 @@
{"version":3,"sources":["../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"],"names":["useOverflowItem","id","priority","groupId","ref","React","useRef","registerItem","useOverflowContext","v","useIsomorphicLayoutEffect","current","element"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;iEAZO;gCACmB;iCACP;AAU5B,SAASA,gBAA8CC,EAAU,EAAEC,QAAiB,EAAEC,OAAgB;IAC3G,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,eAAeC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,YAAY;IAE3DG,IAAAA,yCAAAA,EAA0B;QACxB,IAAIN,IAAIO,OAAO,EAAE;YACf,OAAOJ,aAAa;gBAClBK,SAASR,IAAIO,OAAO;gBACpBV;gBACAC,UAAUA,aAAAA,QAAAA,aAAAA,KAAAA,IAAAA,WAAY;gBACtBC;YACF;QACF;IACF,GAAG;QAACF;QAAIC;QAAUK;QAAcJ;KAAQ;IAExC,OAAOC;AACT"}
+46
View File
@@ -0,0 +1,46 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverflowMenu", {
enumerable: true,
get: function() {
return useOverflowMenu;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _reactutilities = require("@fluentui/react-utilities");
const _overflowContext = require("./overflowContext");
const _useOverflowCount = require("./useOverflowCount");
function useOverflowMenu(id) {
const elementId = (0, _reactutilities.useId)('overflow-menu', id);
const overflowCount = (0, _useOverflowCount.useOverflowCount)();
const registerOverflowMenu = (0, _overflowContext.useOverflowContext)((v)=>v.registerOverflowMenu);
const updateOverflow = (0, _overflowContext.useOverflowContext)((v)=>v.updateOverflow);
const ref = _react.useRef(null);
const isOverflowing = overflowCount > 0;
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (ref.current) {
return registerOverflowMenu(ref.current);
}
}, [
registerOverflowMenu,
isOverflowing,
elementId
]);
(0, _reactutilities.useIsomorphicLayoutEffect)(()=>{
if (isOverflowing) {
updateOverflow();
}
}, [
isOverflowing,
updateOverflow,
ref
]);
return {
ref,
overflowCount,
isOverflowing
};
}
@@ -0,0 +1 @@
{"version":3,"sources":["../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"],"names":["useOverflowMenu","id","elementId","useId","overflowCount","useOverflowCount","registerOverflowMenu","useOverflowContext","v","updateOverflow","ref","React","useRef","isOverflowing","useIsomorphicLayoutEffect","current"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAKgBA;;;eAAAA;;;;iEALO;gCAC0B;iCACd;kCACF;AAE1B,SAASA,gBAA8CC,EAAW;IACvE,MAAMC,YAAYC,IAAAA,qBAAAA,EAAM,iBAAiBF;IACzC,MAAMG,gBAAgBC,IAAAA,kCAAAA;IACtB,MAAMC,uBAAuBC,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEF,oBAAoB;IAC3E,MAAMG,iBAAiBF,IAAAA,mCAAAA,EAAmBC,CAAAA,IAAKA,EAAEC,cAAc;IAC/D,MAAMC,MAAMC,OAAMC,MAAM,CAAW;IACnC,MAAMC,gBAAgBT,gBAAgB;IAEtCU,IAAAA,yCAAAA,EAA0B;QACxB,IAAIJ,IAAIK,OAAO,EAAE;YACf,OAAOT,qBAAqBI,IAAIK,OAAO;QACzC;IACF,GAAG;QAACT;QAAsBO;QAAeX;KAAU;IAEnDY,IAAAA,yCAAAA,EAA0B;QACxB,IAAID,eAAe;YACjBJ;QACF;IACF,GAAG;QAACI;QAAeJ;QAAgBC;KAAI;IAEvC,OAAO;QAAEA;QAAKN;QAAeS;IAAc;AAC7C"}
@@ -0,0 +1,24 @@
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "useOverflowVisibility", {
enumerable: true,
get: function() {
return useOverflowVisibility;
}
});
const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
const _overflowContext = require("./overflowContext");
function useOverflowVisibility() {
const itemVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.itemVisibility);
const groupVisibility = (0, _overflowContext.useOverflowContext)((ctx)=>ctx.groupVisibility);
return _react.useMemo(()=>({
itemVisibility,
groupVisibility
}), [
itemVisibility,
groupVisibility
]);
}
@@ -0,0 +1 @@
{"version":3,"sources":["../src/useOverflowVisibility.ts"],"sourcesContent":["import * as React from 'react';\nimport { useOverflowContext } from './overflowContext';\n\n/**\n * A hook that returns the visibility status of all items and groups.\n *\n * ⚠️ Heads up!\n *\n * This hook will cause the component it is in to re-render for every single time an item overflows or becomes\n * visible - use with caution\n * @returns visibility status of all items and groups\n */\nexport function useOverflowVisibility() {\n const itemVisibility = useOverflowContext(ctx => ctx.itemVisibility);\n const groupVisibility = useOverflowContext(ctx => ctx.groupVisibility);\n\n return React.useMemo(() => ({ itemVisibility, groupVisibility }), [itemVisibility, groupVisibility]);\n}\n"],"names":["useOverflowVisibility","itemVisibility","useOverflowContext","ctx","groupVisibility","React","useMemo"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYgBA;;;eAAAA;;;;iEAZO;iCACY;AAW5B,SAASA;IACd,MAAMC,iBAAiBC,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIF,cAAc;IACnE,MAAMG,kBAAkBF,IAAAA,mCAAAA,EAAmBC,CAAAA,MAAOA,IAAIC,eAAe;IAErE,OAAOC,OAAMC,OAAO,CAAC,IAAO,CAAA;YAAEL;YAAgBG;QAAgB,CAAA,GAAI;QAACH;QAAgBG;KAAgB;AACrG"}