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
+58
View File
@@ -0,0 +1,58 @@
import * as React from 'react';
import { mergeClasses } from '@griffel/react';
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
import { OverflowContext } from '../overflowContext';
import { updateVisibilityAttribute, useOverflowContainer } from '../useOverflowContainer';
import { useOverflowStyles } from './useOverflowStyles.styles';
/**
* Provides an OverflowContext for OverflowItem descendants.
*/ export const Overflow = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const styles = 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 } = useOverflowContainer(update, {
overflowDirection,
overflowAxis,
padding,
minimumVisible,
onUpdateItemVisibility: updateVisibilityAttribute
});
const child = getTriggerChild(children);
const clonedChild = applyTriggerPropsToChildren(children, {
ref: useMergedRefs(containerRef, ref, child === null || child === void 0 ? void 0 : child.ref),
className: mergeClasses('fui-Overflow', styles.overflowMenu, styles.overflowingItems, children.props.className)
});
return /*#__PURE__*/ React.createElement(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,13 @@
import * as React from 'react';
import { applyTriggerPropsToChildren, useMergedRefs } from '@fluentui/react-utilities';
import { useOverflowDivider } from '../../useOverflowDivider';
/**
* Attaches overflow item behavior to its child registered with the OverflowContext.
* It does not render an element of its own.
*/ export const OverflowDivider = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const { groupId, children } = props;
const containerRef = useOverflowDivider(groupId);
return applyTriggerPropsToChildren(children, {
ref: 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":["React","applyTriggerPropsToChildren","useMergedRefs","useOverflowDivider","OverflowDivider","forwardRef","props","ref","groupId","children","containerRef"],"rangeMappings":";;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,2BAA2B,EAAEC,aAAa,QAAQ,4BAA4B;AACvF,SAASC,kBAAkB,QAAQ,2BAA2B;AAG9D;;;CAGC,GACD,OAAO,MAAMC,gCAAkBJ,MAAMK,UAAU,CAAC,CAACC,OAA6BC;IAC5E,MAAM,EAAEC,OAAO,EAAEC,QAAQ,EAAE,GAAGH;IAE9B,MAAMI,eAAeP,mBAAmBK;IACxC,OAAOP,4BAA4BQ,UAAU;QAC3CF,KAAKL,cAAcQ,cAAcH;IACnC;AACF,GAAG"}
@@ -0,0 +1 @@
import * as React from '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":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -0,0 +1,18 @@
import * as React from 'react';
import { applyTriggerPropsToChildren, getTriggerChild, useMergedRefs } from '@fluentui/react-utilities';
import { useOverflowItem } from '../../useOverflowItem';
/**
* Attaches overflow item behavior to its child registered with the OverflowContext.
* It does not render an element of its own.
*
* Behaves similarly to other `*Trigger` components in Fluent UI React.
*/ export const OverflowItem = /*#__PURE__*/ React.forwardRef((props, ref)=>{
const { id, groupId, priority, children } = props;
const containerRef = useOverflowItem(id, priority, groupId);
const child = getTriggerChild(children);
return applyTriggerPropsToChildren(children, {
ref: 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":["React","applyTriggerPropsToChildren","getTriggerChild","useMergedRefs","useOverflowItem","OverflowItem","forwardRef","props","ref","id","groupId","priority","children","containerRef","child","isFluentTriggerComponent"],"rangeMappings":";;;;;;;;;;;;;;;;;","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"}
@@ -0,0 +1 @@
import * as React from '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":["React"],"rangeMappings":"","mappings":"AAAA,YAAYA,WAAW,QAAQ"}
@@ -0,0 +1 @@
export { OverflowItem } from './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":"AACA,SAASA,YAAY,QAAQ,iBAAiB"}
@@ -0,0 +1,12 @@
import { __styles } from '@griffel/react';
import { DATA_OVERFLOWING, DATA_OVERFLOW_MENU } from '../constants';
export const useOverflowStyles = /*#__PURE__*/__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,"names":["__styles","DATA_OVERFLOWING","DATA_OVERFLOW_MENU","useOverflowStyles","overflowMenu","Brvla84","overflowingItems","zb22lx","d"],"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"],"mappings":"AAAA,SAAAA,QAAA,QAA2B,gBAAgB;AAC3C,SAASC,gBAAgB,EAAEC,kBAAkB,QAAQ,cAAc;AACnE,OAAO,MAAMC,iBAAiB,gBAAGH,QAAA;EAAAI,YAAA;IAAAC,OAAA;EAAA;EAAAC,gBAAA;IAAAC,MAAA;EAAA;AAAA;EAAAC,CAAA;AAAA,CAWhC,CAAC","ignoreList":[]}