| 1 | {"version":3,"file":"OverflowSet.base.js","sourceRoot":"../src/","sources":["components/OverflowSet/OverflowSet.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { FocusZone, FocusZoneDirection, IFocusZone } from '@fluentui/react-focus';\nimport { IKeytipProps } from '../../Keytip';\nimport {\n initializeComponentRef,\n classNamesFunction,\n divProperties,\n elementContains,\n focusFirstChild,\n getNativeProps,\n warnMutuallyExclusive,\n} from '../../Utilities';\nimport { IProcessedStyleSet } from '../../Styling';\nimport { KeytipManager } from '../../utilities/keytips/KeytipManager';\nimport {\n IOverflowSet,\n IOverflowSetItemProps,\n IOverflowSetProps,\n IOverflowSetStyles,\n IOverflowSetStyleProps,\n} from './OverflowSet.types';\n\nconst getClassNames = classNamesFunction<IOverflowSetStyleProps, IOverflowSetStyles>();\nconst COMPONENT_NAME = 'OverflowSet';\n\nexport class OverflowSetBase extends React.Component<IOverflowSetProps, {}> implements IOverflowSet {\n private _focusZone = React.createRef<IFocusZone>();\n private _persistedKeytips: { [uniqueID: string]: IKeytipProps } = {};\n private _keytipManager: KeytipManager = KeytipManager.getInstance();\n private _divContainer = React.createRef<HTMLDivElement>();\n private _classNames: IProcessedStyleSet<IOverflowSetStyles>;\n\n constructor(props: IOverflowSetProps) {\n super(props);\n\n initializeComponentRef(this);\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n doNotContainWithinFocusZone: 'focusZoneProps',\n });\n }\n\n public render(): JSX.Element {\n const {\n items,\n overflowItems,\n className,\n // eslint-disable-next-line deprecation/deprecation\n focusZoneProps,\n styles,\n vertical,\n // eslint-disable-next-line deprecation/deprecation\n doNotContainWithinFocusZone,\n role,\n overflowSide = 'end',\n } = this.props;\n\n this._classNames = getClassNames(styles, { className, vertical });\n\n let Tag;\n let uniqueComponentProps;\n\n if (doNotContainWithinFocusZone) {\n Tag = 'div';\n uniqueComponentProps = {\n ...getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties),\n ref: this._divContainer,\n };\n } else {\n Tag = FocusZone;\n uniqueComponentProps = {\n ...getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties),\n ...focusZoneProps,\n componentRef: this._focusZone,\n direction: vertical ? FocusZoneDirection.vertical : FocusZoneDirection.horizontal,\n };\n }\n\n const showOverflow = overflowItems && overflowItems.length > 0;\n\n return (\n <Tag\n role={role || 'group'}\n aria-orientation={role === 'menubar' ? (vertical === true ? 'vertical' : 'horizontal') : undefined}\n {...uniqueComponentProps}\n className={this._classNames.root}\n >\n {overflowSide === 'start' && showOverflow && this._onRenderOverflowButtonWrapper(overflowItems!)}\n {items && this._onRenderItems(items)}\n {overflowSide === 'end' && showOverflow && this._onRenderOverflowButtonWrapper(overflowItems!)}\n </Tag>\n );\n }\n\n /**\n * Sets focus to the first tabbable item in the OverflowSet.\n * @param forceIntoFirstElement - If true, focus will be forced into the first element,\n * even if focus is already in theOverflowSet\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n public focus(forceIntoFirstElement?: boolean): boolean {\n let focusSucceeded = false;\n\n // eslint-disable-next-line deprecation/deprecation\n if (this.props.doNotContainWithinFocusZone) {\n if (this._divContainer.current) {\n focusSucceeded = focusFirstChild(this._divContainer.current);\n }\n } else if (this._focusZone.current) {\n focusSucceeded = this._focusZone.current.focus(forceIntoFirstElement);\n }\n\n return focusSucceeded;\n }\n\n /**\n * Sets focus to a specific child element within the OverflowSet.\n * @param childElement - The child element within the zone to focus.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n public focusElement(childElement?: HTMLElement): boolean {\n let focusSucceeded = false;\n\n if (!childElement) {\n return false;\n }\n\n // eslint-disable-next-line deprecation/deprecation\n if (this.props.doNotContainWithinFocusZone) {\n if (this._divContainer.current && elementContains(this._divContainer.current, childElement)) {\n childElement.focus();\n focusSucceeded = document.activeElement === childElement;\n }\n } else if (this._focusZone.current) {\n focusSucceeded = this._focusZone.current.focusElement(childElement);\n }\n\n return focusSucceeded;\n }\n\n // Add keytip register/unregister handlers to lifecycle functions to correctly manage persisted keytips\n public componentDidMount() {\n this._registerPersistedKeytips();\n }\n\n public componentWillUnmount() {\n this._unregisterPersistedKeytips();\n }\n\n public UNSAFE_componentWillUpdate() {\n this._unregisterPersistedKeytips();\n }\n\n public componentDidUpdate() {\n this._registerPersistedKeytips();\n }\n\n private _registerPersistedKeytips() {\n Object.keys(this._persistedKeytips).forEach((key: string) => {\n const keytip = this._persistedKeytips[key];\n const uniqueID = this._keytipManager.register(keytip, true);\n // Update map\n this._persistedKeytips[uniqueID] = keytip;\n delete this._persistedKeytips[key];\n });\n }\n\n private _unregisterPersistedKeytips() {\n // Delete all persisted keytips saved\n Object.keys(this._persistedKeytips).forEach((uniqueID: string) => {\n this._keytipManager.unregister(this._persistedKeytips[uniqueID], uniqueID, true);\n });\n this._persistedKeytips = {};\n }\n\n private _onRenderItems = (items: IOverflowSetItemProps[]): JSX.Element[] => {\n return items.map((item, i) => {\n return (\n <div key={item.key} className={this._classNames.item}>\n {this.props.onRenderItem(item)}\n </div>\n );\n });\n };\n\n private _onRenderOverflowButtonWrapper = (items: any[]): JSX.Element => {\n const wrapperDivProps: React.HTMLProps<HTMLDivElement> = {\n className: this._classNames.overflowButton,\n };\n\n const overflowKeytipSequences = this.props.keytipSequences;\n let newOverflowItems: any[] = [];\n\n if (overflowKeytipSequences) {\n items.forEach(overflowItem => {\n const keytip = (overflowItem as IOverflowSetItemProps).keytipProps;\n if (keytip) {\n // Create persisted keytip\n const persistedKeytip: IKeytipProps = {\n content: keytip.content,\n keySequences: keytip.keySequences,\n disabled: keytip.disabled || !!(overflowItem.disabled || overflowItem.isDisabled),\n hasDynamicChildren: keytip.hasDynamicChildren,\n hasMenu: keytip.hasMenu,\n };\n\n if (keytip.hasDynamicChildren || this._getSubMenuForItem(overflowItem)) {\n // If the keytip has a submenu or children nodes, change onExecute to persistedKeytipExecute\n persistedKeytip.onExecute = this._keytipManager.menuExecute.bind(\n this._keytipManager,\n overflowKeytipSequences,\n overflowItem.keytipProps.keySequences,\n );\n } else {\n // If the keytip doesn't have a submenu, just execute the original function\n persistedKeytip.onExecute = keytip.onExecute;\n }\n\n // Add this persisted keytip to our internal list, use a temporary uniqueID (its content)\n // uniqueID will get updated on register\n this._persistedKeytips[persistedKeytip.content] = persistedKeytip;\n\n // Add the overflow sequence to this item\n const newOverflowItem = {\n ...overflowItem,\n keytipProps: {\n ...keytip,\n overflowSetSequence: overflowKeytipSequences,\n },\n };\n newOverflowItems.push(newOverflowItem);\n } else {\n // Nothing to change, add overflowItem to list\n newOverflowItems.push(overflowItem);\n }\n });\n } else {\n newOverflowItems = items;\n }\n return <div {...wrapperDivProps}>{this.props.onRenderOverflowButton(newOverflowItems)}</div>;\n };\n\n /**\n * Gets the subMenu for an overflow item\n * Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps\n */\n private _getSubMenuForItem(item: any): any[] | boolean | undefined {\n if (this.props.itemSubMenuProvider) {\n return this.props.itemSubMenuProvider(item);\n }\n if (item.subMenuProps) {\n return item.subMenuProps.items;\n }\n return undefined;\n }\n}\n"]} |