.\n // TODO We may need to elevate classNames from
into ?\n var nativeProps = getNativeProps(this.props, divProperties);\n return (React.createElement(ResizeGroupAs, __assign({}, nativeProps, { componentRef: this._resizeGroup, data: commandBarData, onReduceData: onReduceData, onGrowData: onGrowData, onRenderData: this._onRenderData, dataDidRender: dataDidRender })));\n };\n CommandBarBase.prototype.focus = function () {\n var overflowSet = this._overflowSet.current;\n overflowSet && overflowSet.focus();\n };\n CommandBarBase.prototype.remeasure = function () {\n this._resizeGroup.current && this._resizeGroup.current.remeasure();\n };\n CommandBarBase.prototype._onButtonClick = function (item) {\n return function (ev) {\n // inactive is deprecated. remove check in 7.0\n // eslint-disable-next-line deprecation/deprecation\n if (item.inactive) {\n return;\n }\n if (item.onClick) {\n item.onClick(ev, item);\n }\n };\n };\n CommandBarBase.prototype._computeCacheKey = function (data) {\n var primaryItems = data.primaryItems, overflow = data.overflow, farItems = data.farItems;\n var returnKey = function (acc, current) {\n var _a = current.cacheKey, cacheKey = _a === void 0 ? current.key : _a;\n return acc + cacheKey;\n };\n var primaryKey = primaryItems && primaryItems.reduce(returnKey, '');\n var overflowKey = overflow ? 'overflow' : '';\n var farKey = farItems && farItems.reduce(returnKey, '');\n return [primaryKey, overflowKey, farKey].join('');\n };\n CommandBarBase.defaultProps = {\n items: [],\n overflowItems: [],\n };\n return CommandBarBase;\n}(React.Component));\nexport { CommandBarBase };\n//# sourceMappingURL=CommandBar.base.js.map","import { styled } from '../../Utilities';\nimport { CommandBarBase } from './CommandBar.base';\nimport { getStyles } from './CommandBar.styles';\n// Create a CommandBar variant which uses these default styles and this styled subcomponent.\nexport var CommandBar = styled(CommandBarBase, getStyles, undefined, {\n scope: 'CommandBar',\n});\n//# sourceMappingURL=CommandBar.js.map","import { __assign, __rest } from \"tslib\";\nimport { memoizeFunction } from '../../Utilities';\nvar COMMAND_BAR_HEIGHT = 44;\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var semanticColors = theme.semanticColors;\n return {\n root: [\n theme.fonts.medium,\n 'ms-CommandBar',\n {\n display: 'flex',\n backgroundColor: semanticColors.bodyBackground,\n padding: '0 14px 0 24px',\n height: COMMAND_BAR_HEIGHT,\n },\n className,\n ],\n primarySet: [\n 'ms-CommandBar-primaryCommand',\n {\n flexGrow: '1',\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n secondarySet: [\n 'ms-CommandBar-secondaryCommand',\n {\n flexShrink: '0',\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n };\n};\nexport var getCommandButtonStyles = memoizeFunction(function (customStyles) {\n var rootStyles = {\n height: '100%',\n };\n var labelStyles = {\n whiteSpace: 'nowrap',\n };\n var _a = customStyles || {}, root = _a.root, label = _a.label, restCustomStyles = __rest(_a, [\"root\", \"label\"]);\n return __assign(__assign({}, restCustomStyles), { root: root ? [rootStyles, root] : rootStyles, label: label ? [labelStyles, label] : labelStyles });\n});\n//# sourceMappingURL=CommandBar.styles.js.map","import { __assign, __rest, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { ContextualMenuItemType } from './ContextualMenu.types';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '../../FocusZone';\nimport { divProperties, getNativeProps, shallowCompare, assign, classNamesFunction, css, getFirstFocusable, getLastFocusable, getRTL, KeyCodes, shouldWrapFocus, isIOS, isMac, memoizeFunction, getPropsWithDefaults, getDocument, FocusRects, } from '../../Utilities';\nimport { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';\nimport { Callout } from '../../Callout';\nimport { ContextualMenuItem } from './ContextualMenuItem';\nimport { ContextualMenuSplitButton, ContextualMenuButton, ContextualMenuAnchor, } from './ContextualMenuItemWrapper/index';\nimport { concatStyleSetsWithProps } from '../../Styling';\nimport { getItemStyles } from './ContextualMenu.classNames';\nimport { useTarget, usePrevious, useAsync, useWarnings, useId, useIsomorphicLayoutEffect, } from '@fluentui/react-hooks';\nimport { useResponsiveMode, ResponsiveMode } from '../../ResponsiveMode';\nimport { MenuContext } from '../../utilities/MenuContext/index';\nvar getClassNames = classNamesFunction();\nvar getContextualMenuItemClassNames = classNamesFunction();\n// The default ContextualMenu properties have no items and beak, the default submenu direction is right and top.\nvar DEFAULT_PROPS = {\n items: [],\n shouldFocusOnMount: true,\n gapSpace: 0,\n directionalHint: DirectionalHint.bottomAutoEdge,\n beakWidth: 16,\n};\n/* return number of menu items, excluding headers and dividers */\nfunction getItemCount(items) {\n var totalItemCount = 0;\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n totalItemCount += itemCount;\n }\n }\n return totalItemCount;\n}\nexport function getSubmenuItems(item, options) {\n var target = options === null || options === void 0 ? void 0 : options.target;\n // eslint-disable-next-line deprecation/deprecation\n var items = item.subMenuProps ? item.subMenuProps.items : item.items;\n if (items) {\n var overrideItems = [];\n for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {\n var subItem = items_2[_i];\n if (subItem.preferMenuTargetAsEventTarget) {\n // For sub-items which need an overridden target, intercept `onClick`\n var onClick = subItem.onClick, contextItem = __rest(subItem, [\"onClick\"]);\n overrideItems.push(__assign(__assign({}, contextItem), { onClick: getOnClickWithOverrideTarget(onClick, target) }));\n }\n else {\n overrideItems.push(subItem);\n }\n }\n return overrideItems;\n }\n}\n/**\n * Returns true if a list of menu items can contain a checkbox\n */\nexport function canAnyMenuItemsCheck(items) {\n return items.some(function (item) {\n if (item.canCheck) {\n return true;\n }\n // If the item is a section, check if any of the items in the section can check.\n if (item.sectionProps && item.sectionProps.items.some(function (submenuItem) { return submenuItem.canCheck === true; })) {\n return true;\n }\n return false;\n });\n}\nvar NavigationIdleDelay = 250; /* ms */\nvar COMPONENT_NAME = 'ContextualMenu';\nvar _getMenuItemStylesFunction = memoizeFunction(function () {\n var styles = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styles[_i] = arguments[_i];\n }\n return function (styleProps) {\n return concatStyleSetsWithProps.apply(void 0, __spreadArray([styleProps, getItemStyles], styles, false));\n };\n});\n//#region Custom hooks\nfunction useVisibility(props, targetWindow) {\n var _a = props.hidden, hidden = _a === void 0 ? false : _a, onMenuDismissed = props.onMenuDismissed, onMenuOpened = props.onMenuOpened;\n var previousHidden = usePrevious(hidden);\n var onMenuOpenedRef = React.useRef(onMenuOpened);\n var onMenuClosedRef = React.useRef(onMenuDismissed);\n var propsRef = React.useRef(props);\n onMenuOpenedRef.current = onMenuOpened;\n onMenuClosedRef.current = onMenuDismissed;\n propsRef.current = props;\n React.useEffect(function () {\n var _a, _b;\n // Don't issue dismissed callbacks on initial mount\n if (hidden && previousHidden === false) {\n (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current);\n }\n else if (!hidden && previousHidden !== false) {\n (_b = onMenuOpenedRef.current) === null || _b === void 0 ? void 0 : _b.call(onMenuOpenedRef, propsRef.current);\n }\n }, [hidden, previousHidden]);\n // Issue onDismissedCallback on unmount\n React.useEffect(function () { return function () { var _a; return (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current); }; }, []);\n}\nfunction useSubMenuState(_a, dismiss) {\n var hidden = _a.hidden, items = _a.items, theme = _a.theme, className = _a.className, id = _a.id, menuTarget = _a.target;\n var _b = React.useState(), expandedMenuItemKey = _b[0], setExpandedMenuItemKey = _b[1];\n var _c = React.useState(), submenuTarget = _c[0], setSubmenuTarget = _c[1];\n /** True if the menu was expanded by mouse click OR hover (as opposed to by keyboard) */\n var _d = React.useState(), shouldFocusOnContainer = _d[0], setShouldFocusOnContainer = _d[1];\n var subMenuId = useId(COMPONENT_NAME, id);\n var closeSubMenu = React.useCallback(function () {\n setShouldFocusOnContainer(undefined);\n setExpandedMenuItemKey(undefined);\n setSubmenuTarget(undefined);\n }, []);\n var openSubMenu = React.useCallback(function (_a, target, focusContainer) {\n var submenuItemKey = _a.key;\n if (expandedMenuItemKey === submenuItemKey) {\n return;\n }\n target.focus();\n setShouldFocusOnContainer(focusContainer);\n setExpandedMenuItemKey(submenuItemKey);\n setSubmenuTarget(target);\n }, [expandedMenuItemKey]);\n React.useEffect(function () {\n if (hidden) {\n closeSubMenu();\n }\n }, [hidden, closeSubMenu]);\n var onSubMenuDismiss = useOnSubmenuDismiss(dismiss, closeSubMenu);\n var getSubmenuProps = function () {\n var item = findItemByKeyFromItems(expandedMenuItemKey, items);\n var submenuProps = null;\n if (item) {\n submenuProps = {\n items: getSubmenuItems(item, { target: menuTarget }),\n target: submenuTarget,\n onDismiss: onSubMenuDismiss,\n isSubMenu: true,\n id: subMenuId,\n shouldFocusOnMount: true,\n shouldFocusOnContainer: shouldFocusOnContainer,\n directionalHint: getRTL(theme) ? DirectionalHint.leftTopEdge : DirectionalHint.rightTopEdge,\n className: className,\n gapSpace: 0,\n isBeakVisible: false,\n };\n if (item.subMenuProps) {\n assign(submenuProps, item.subMenuProps);\n }\n if (item.preferMenuTargetAsEventTarget) {\n var onItemClick = item.onItemClick;\n submenuProps.onItemClick = getOnClickWithOverrideTarget(onItemClick, menuTarget);\n }\n }\n return submenuProps;\n };\n return [expandedMenuItemKey, openSubMenu, getSubmenuProps, onSubMenuDismiss];\n}\nfunction useShouldUpdateFocusOnMouseMove(_a) {\n var delayUpdateFocusOnHover = _a.delayUpdateFocusOnHover, hidden = _a.hidden;\n var shouldUpdateFocusOnMouseEvent = React.useRef(!delayUpdateFocusOnHover);\n var gotMouseMove = React.useRef(false);\n React.useEffect(function () {\n shouldUpdateFocusOnMouseEvent.current = !delayUpdateFocusOnHover;\n gotMouseMove.current = hidden ? false : !delayUpdateFocusOnHover && gotMouseMove.current;\n }, [delayUpdateFocusOnHover, hidden]);\n var onMenuFocusCapture = React.useCallback(function () {\n if (delayUpdateFocusOnHover) {\n shouldUpdateFocusOnMouseEvent.current = false;\n }\n }, [delayUpdateFocusOnHover]);\n return [shouldUpdateFocusOnMouseEvent, gotMouseMove, onMenuFocusCapture];\n}\nfunction usePreviousActiveElement(_a, targetWindow, hostElement) {\n var hidden = _a.hidden, onRestoreFocus = _a.onRestoreFocus;\n var previousActiveElement = React.useRef();\n var tryFocusPreviousActiveElement = React.useCallback(function (options) {\n var _a, _b;\n if (onRestoreFocus) {\n onRestoreFocus(options);\n }\n else if (options === null || options === void 0 ? void 0 : options.documentContainsFocus) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n (_b = (_a = previousActiveElement.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n }, [onRestoreFocus]);\n useIsomorphicLayoutEffect(function () {\n var _a, _b;\n if (!hidden) {\n var newElement = targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement;\n if (!((_a = hostElement.current) === null || _a === void 0 ? void 0 : _a.contains(newElement)) && newElement.tagName !== 'BODY') {\n previousActiveElement.current = newElement;\n }\n }\n else if (previousActiveElement.current) {\n tryFocusPreviousActiveElement({\n originalElement: previousActiveElement.current,\n containsFocus: true,\n documentContainsFocus: ((_b = getDocument()) === null || _b === void 0 ? void 0 : _b.hasFocus()) || false,\n });\n previousActiveElement.current = undefined;\n }\n }, [hidden, targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement, tryFocusPreviousActiveElement, hostElement]);\n return [tryFocusPreviousActiveElement];\n}\nfunction useKeyHandlers(_a, dismiss, hostElement, openSubMenu) {\n var theme = _a.theme, isSubMenu = _a.isSubMenu, _b = _a.focusZoneProps, _c = _b === void 0 ? {} : _b, checkForNoWrap = _c.checkForNoWrap, _d = _c.direction, focusZoneDirection = _d === void 0 ? FocusZoneDirection.vertical : _d;\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n var lastKeyDownWasAltOrMeta = React.useRef();\n /**\n * Calls `shouldHandleKey` to determine whether the keyboard event should be handled;\n * if so, stops event propagation and dismisses menu(s).\n * @param ev - The keyboard event.\n * @param shouldHandleKey - Returns whether we should handle this keyboard event.\n * @param dismissAllMenus - If true, dismiss all menus. Otherwise, dismiss only the current menu.\n * Only does anything if `shouldHandleKey` returns true.\n * @returns Whether the event was handled.\n */\n var keyHandler = function (ev, shouldHandleKey, dismissAllMenus) {\n var handled = false;\n if (shouldHandleKey(ev)) {\n dismiss(ev, dismissAllMenus);\n ev.preventDefault();\n ev.stopPropagation();\n handled = true;\n }\n return handled;\n };\n /**\n * Checks if the submenu should be closed\n */\n var shouldCloseSubMenu = function (ev) {\n var submenuCloseKey = getRTL(theme) ? KeyCodes.right : KeyCodes.left;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== submenuCloseKey || !isSubMenu) {\n return false;\n }\n return !!(focusZoneDirection === FocusZoneDirection.vertical ||\n (checkForNoWrap && !shouldWrapFocus(ev.target, 'data-no-horizontal-wrap')));\n };\n var shouldHandleKeyDown = function (ev) {\n return (\n // eslint-disable-next-line deprecation/deprecation\n ev.which === KeyCodes.escape ||\n shouldCloseSubMenu(ev) ||\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.up && (ev.altKey || ev.metaKey)));\n };\n var onKeyDown = function (ev) {\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in shouldHandleKeyUp for reasoning.\n lastKeyDownWasAltOrMeta.current = isAltOrMeta(ev);\n // On Mac, pressing escape dismisses all levels of native context menus\n // eslint-disable-next-line deprecation/deprecation\n var dismissAllMenus = ev.which === KeyCodes.escape && (isMac() || isIOS());\n return keyHandler(ev, shouldHandleKeyDown, dismissAllMenus);\n };\n /**\n * We close the menu on key up only if ALL of the following are true:\n * - Most recent key down was alt or meta (command)\n * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to\n * expand/collapse the menu)\n * - We're not on a Mac (or iOS)\n *\n * This is because on Windows, pressing alt moves focus to the application menu bar or similar,\n * closing any open context menus. There is not a similar behavior on Macs.\n */\n var shouldHandleKeyUp = function (ev) {\n var keyPressIsAltOrMetaAlone = lastKeyDownWasAltOrMeta.current && isAltOrMeta(ev);\n lastKeyDownWasAltOrMeta.current = false;\n return !!keyPressIsAltOrMetaAlone && !(isIOS() || isMac());\n };\n var onKeyUp = function (ev) {\n return keyHandler(ev, shouldHandleKeyUp, true /* dismissAllMenus */);\n };\n var onMenuKeyDown = function (ev) {\n // Mark as handled if onKeyDown returns true (for handling collapse cases)\n // or if we are attempting to expand a submenu\n var handled = onKeyDown(ev);\n if (handled || !hostElement.current) {\n return;\n }\n // If we have a modifier key being pressed, we do not want to move focus.\n // Otherwise, handle up and down keys.\n var hasModifier = !!(ev.altKey || ev.metaKey);\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!hasModifier && (isUp || isDown)) {\n var elementToFocus = isUp\n ? getLastFocusable(hostElement.current, hostElement.current.lastChild, true)\n : getFirstFocusable(hostElement.current, hostElement.current.firstChild, true);\n if (elementToFocus) {\n elementToFocus.focus();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n var onItemKeyDown = function (item, ev) {\n var openKey = getRTL(theme) ? KeyCodes.left : KeyCodes.right;\n if (!item.disabled &&\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === openKey || ev.which === KeyCodes.enter || (ev.which === KeyCodes.down && (ev.altKey || ev.metaKey)))) {\n openSubMenu(item, ev.currentTarget);\n ev.preventDefault();\n }\n };\n return [onKeyDown, onKeyUp, onMenuKeyDown, onItemKeyDown];\n}\nfunction useScrollHandler(asyncTracker) {\n var isScrollIdle = React.useRef(true);\n var scrollIdleTimeoutId = React.useRef();\n /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n var onScroll = function () {\n if (!isScrollIdle.current && scrollIdleTimeoutId.current !== undefined) {\n asyncTracker.clearTimeout(scrollIdleTimeoutId.current);\n scrollIdleTimeoutId.current = undefined;\n }\n else {\n isScrollIdle.current = false;\n }\n scrollIdleTimeoutId.current = asyncTracker.setTimeout(function () {\n isScrollIdle.current = true;\n }, NavigationIdleDelay);\n };\n return [onScroll, isScrollIdle];\n}\nfunction useOnSubmenuDismiss(dismiss, closeSubMenu) {\n var isMountedRef = React.useRef(false);\n React.useEffect(function () {\n isMountedRef.current = true;\n return function () {\n isMountedRef.current = false;\n };\n }, []);\n /**\n * This function is called ASYNCHRONOUSLY, and so there is a chance it is called\n * after the component is unmounted. The isMountedRef is added to prevent\n * from calling setState() after unmount. Do NOT copy this pattern in synchronous\n * code.\n */\n var onSubMenuDismiss = function (ev, dismissAll) {\n if (dismissAll) {\n dismiss(ev, dismissAll);\n }\n else if (isMountedRef.current) {\n closeSubMenu();\n }\n };\n return onSubMenuDismiss;\n}\nfunction useSubmenuEnterTimer(_a, asyncTracker) {\n var _b = _a.subMenuHoverDelay, subMenuHoverDelay = _b === void 0 ? NavigationIdleDelay : _b;\n var enterTimerRef = React.useRef(undefined);\n var cancelSubMenuTimer = function () {\n if (enterTimerRef.current !== undefined) {\n asyncTracker.clearTimeout(enterTimerRef.current);\n enterTimerRef.current = undefined;\n }\n };\n var startSubmenuTimer = function (onTimerExpired) {\n enterTimerRef.current = asyncTracker.setTimeout(function () {\n onTimerExpired();\n cancelSubMenuTimer();\n }, subMenuHoverDelay);\n };\n return [cancelSubMenuTimer, startSubmenuTimer, enterTimerRef];\n}\nfunction useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss) {\n var menuTarget = props.target;\n var onItemMouseEnterBase = function (item, ev, target) {\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var onItemMouseMoveBase = function (item, ev, target) {\n var targetElement = ev.currentTarget;\n // Always do this check to make sure we record a mouseMove if needed (even if we are timed out)\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n else {\n return;\n }\n if (!isScrollIdle.current ||\n subMenuEntryTimer.current !== undefined ||\n targetElement === (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement)) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var shouldIgnoreMouseEvent = function () {\n return !isScrollIdle.current || !gotMouseMove.current;\n };\n var onMouseItemLeave = function (item, ev) {\n var _a;\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n cancelSubMenuTimer();\n if (expandedMenuItemKey !== undefined) {\n return;\n }\n /**\n * IE11 focus() method forces parents to scroll to top of element.\n * Edge and IE expose a setActive() function for focusable divs that\n * sets the page focus but does not scroll the parent element.\n */\n if (hostElement.current.setActive) {\n try {\n hostElement.current.setActive();\n }\n catch (e) {\n /* no-op */\n }\n }\n else {\n (_a = hostElement.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n };\n /**\n * Handles updating focus when mouseEnter or mouseMove fire.\n * As part of updating focus, This function will also update\n * the expand/collapse state accordingly.\n */\n var updateFocusOnMouseEvent = function (item, ev, target) {\n var targetElement = target ? target : ev.currentTarget;\n if (item.key === expandedMenuItemKey) {\n return;\n }\n cancelSubMenuTimer();\n // If the menu is not expanded we can update focus without any delay\n if (expandedMenuItemKey === undefined) {\n targetElement.focus();\n }\n // Delay updating expanding/dismissing the submenu\n // and only set focus if we have not already done so\n if (hasSubmenu(item)) {\n ev.stopPropagation();\n startSubmenuTimer(function () {\n targetElement.focus();\n openSubMenu(item, targetElement, true);\n });\n }\n else {\n startSubmenuTimer(function () {\n onSubMenuDismiss(ev);\n targetElement.focus();\n });\n }\n };\n var onItemClick = function (item, ev) {\n onItemClickBase(item, ev, ev.currentTarget);\n };\n var onItemClickBase = function (item, ev, target) {\n var items = getSubmenuItems(item, { target: menuTarget });\n // Cancel an async menu item hover timeout action from being taken and instead\n // just trigger the click event instead.\n cancelSubMenuTimer();\n if (!hasSubmenu(item) && (!items || !items.length)) {\n // This is an item without a menu. Click it.\n executeItemClick(item, ev);\n }\n else {\n if (item.key !== expandedMenuItemKey) {\n // This has a collapsed sub menu. Expand it.\n // focus on the container by default when the menu is opened with a click event\n // this differentiates from a keyboard interaction triggering the click event\n var shouldFocusOnContainer = typeof props.shouldFocusOnContainer === 'boolean'\n ? props.shouldFocusOnContainer\n : ev.nativeEvent.pointerType === 'mouse';\n openSubMenu(item, target, shouldFocusOnContainer);\n }\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n var onAnchorClick = function (item, ev) {\n executeItemClick(item, ev);\n ev.stopPropagation();\n };\n var executeItemClick = function (item, ev) {\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (item.preferMenuTargetAsEventTarget) {\n overrideTarget(ev, menuTarget);\n }\n var shouldDismiss = false;\n if (item.onClick) {\n shouldDismiss = !!item.onClick(ev, item);\n }\n else if (props.onItemClick) {\n shouldDismiss = !!props.onItemClick(ev, item);\n }\n if (shouldDismiss || !ev.defaultPrevented) {\n dismiss(ev, true);\n }\n };\n return [\n onItemMouseEnterBase,\n onItemMouseMoveBase,\n onMouseItemLeave,\n onItemClick,\n onAnchorClick,\n executeItemClick,\n onItemClickBase,\n ];\n}\n//#endregion\nexport var ContextualMenuBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var _a;\n var _b = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults), ref = _b.ref, props = __rest(_b, [\"ref\"]);\n var hostElement = React.useRef(null);\n var asyncTracker = useAsync();\n var menuId = useId(COMPONENT_NAME, props.id);\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: {\n getMenuClassNames: 'styles',\n },\n });\n var dismiss = function (ev, dismissAll) { var _a; return (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props, ev, dismissAll); };\n var _c = useTarget(props.target, hostElement), targetRef = _c[0], targetWindow = _c[1];\n var tryFocusPreviousActiveElement = usePreviousActiveElement(props, targetWindow, hostElement)[0];\n var _d = useSubMenuState(props, dismiss), expandedMenuItemKey = _d[0], openSubMenu = _d[1], getSubmenuProps = _d[2], onSubMenuDismiss = _d[3];\n var _e = useShouldUpdateFocusOnMouseMove(props), shouldUpdateFocusOnMouseEvent = _e[0], gotMouseMove = _e[1], onMenuFocusCapture = _e[2];\n var _f = useScrollHandler(asyncTracker), onScroll = _f[0], isScrollIdle = _f[1];\n var _g = useSubmenuEnterTimer(props, asyncTracker), cancelSubMenuTimer = _g[0], startSubmenuTimer = _g[1], subMenuEntryTimer = _g[2];\n var responsiveMode = useResponsiveMode(hostElement, props.responsiveMode);\n useVisibility(props, targetWindow);\n var _h = useKeyHandlers(props, dismiss, hostElement, openSubMenu), onKeyDown = _h[0], onKeyUp = _h[1], onMenuKeyDown = _h[2], onItemKeyDown = _h[3];\n var _j = useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss), onItemMouseEnterBase = _j[0], onItemMouseMoveBase = _j[1], onMouseItemLeave = _j[2], onItemClick = _j[3], onAnchorClick = _j[4], executeItemClick = _j[5], onItemClickBase = _j[6];\n //#region Render helpers\n var onDefaultRenderMenuList = function (menuListProps, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, defaultRender) {\n var indexCorrection = 0;\n var items = menuListProps.items, totalItemCount = menuListProps.totalItemCount, hasCheckmarks = menuListProps.hasCheckmarks, hasIcons = menuListProps.hasIcons;\n return (React.createElement(\"ul\", { className: menuClassNames.list, onKeyDown: onKeyDown, onKeyUp: onKeyUp, role: 'presentation' }, items.map(function (item, index) {\n var menuItem = renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var indexIncrease = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n indexCorrection += indexIncrease;\n }\n return menuItem;\n })));\n };\n var renderFocusZone = function (children, adjustedFocusZoneProps) {\n var _a = props.focusZoneAs, ChildrenRenderer = _a === void 0 ? FocusZone : _a;\n return React.createElement(ChildrenRenderer, __assign({}, adjustedFocusZoneProps), children);\n };\n /**\n * !!!IMPORTANT!!! Avoid mutating `item: IContextualMenuItem` argument. It will\n * cause the menu items to always re-render because the component update is based on shallow comparison.\n */\n var renderMenuItem = function (item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var _a;\n var renderedItems = [];\n var iconProps = item.iconProps || { iconName: 'None' };\n var getItemClassNames = item.getItemClassNames, // eslint-disable-line deprecation/deprecation\n itemProps = item.itemProps;\n var styles = itemProps ? itemProps.styles : undefined;\n // We only send a dividerClassName when the item to be rendered is a divider.\n // For all other cases, the default divider style is used.\n var dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;\n var subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';\n // eslint-disable-next-line deprecation/deprecation\n var itemClassNames;\n // IContextualMenuItem#getItemClassNames for backwards compatibility\n // otherwise uses mergeStyles for class names.\n if (getItemClassNames) {\n itemClassNames = getItemClassNames(props.theme, isItemDisabled(item), expandedMenuItemKey === item.key, !!getIsChecked(item), !!item.href, iconProps.iconName !== 'None', item.className, dividerClassName, iconProps.className, subMenuIconClassName, item.primaryDisabled);\n }\n else {\n var itemStyleProps = {\n theme: props.theme,\n disabled: isItemDisabled(item),\n expanded: expandedMenuItemKey === item.key,\n checked: !!getIsChecked(item),\n isAnchorLink: !!item.href,\n knownIcon: iconProps.iconName !== 'None',\n itemClassName: item.className,\n dividerClassName: dividerClassName,\n iconClassName: iconProps.className,\n subMenuClassName: subMenuIconClassName,\n primaryDisabled: item.primaryDisabled,\n };\n // We need to generate default styles then override if styles are provided\n // since the ContextualMenu currently handles item classNames.\n itemClassNames = getContextualMenuItemClassNames(_getMenuItemStylesFunction((_a = menuClassNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.menuItem, styles), itemStyleProps);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (item.text === '-' || item.name === '-') {\n item.itemType = ContextualMenuItemType.Divider;\n }\n switch (item.itemType) {\n case ContextualMenuItemType.Divider:\n renderedItems.push(renderSeparator(index, itemClassNames));\n break;\n case ContextualMenuItemType.Header:\n renderedItems.push(renderSeparator(index, itemClassNames));\n var headerItem = renderHeaderMenuItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n renderedItems.push(renderListItem(headerItem, item.key || index, itemClassNames, item.title));\n break;\n case ContextualMenuItemType.Section:\n renderedItems.push(renderSectionItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons));\n break;\n default:\n var defaultRenderNormalItem = function () {\n return renderNormalItem(item, itemClassNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);\n };\n var menuItem = props.onRenderContextualMenuItem\n ? props.onRenderContextualMenuItem(item, defaultRenderNormalItem)\n : defaultRenderNormalItem();\n renderedItems.push(renderListItem(menuItem, item.key || index, itemClassNames, item.title));\n break;\n }\n // Since multiple nodes *could* be rendered, wrap them all in a fragment with this item's key.\n // This ensures the reconciler handles multi-item output per-node correctly and does not re-mount content.\n return React.createElement(React.Fragment, { key: item.key }, renderedItems);\n };\n var defaultMenuItemRenderer = function (item, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var index = item.index, focusableElementIndex = item.focusableElementIndex, totalItemCount = item.totalItemCount, hasCheckmarks = item.hasCheckmarks, hasIcons = item.hasIcons;\n return renderMenuItem(item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n };\n var renderSectionItem = function (sectionItem, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var sectionProps = sectionItem.sectionProps;\n if (!sectionProps) {\n return;\n }\n var headerItem;\n var groupProps;\n if (sectionProps.title) {\n var headerContextualMenuItem = undefined;\n var ariaLabelledby = '';\n if (typeof sectionProps.title === 'string') {\n // Since title is a user-facing string, it needs to be stripped\n // of whitespace in order to build a valid element ID\n var id_1 = menuId + sectionProps.title.replace(/\\s/g, '');\n headerContextualMenuItem = {\n key: \"section-\".concat(sectionProps.title, \"-title\"),\n itemType: ContextualMenuItemType.Header,\n text: sectionProps.title,\n id: id_1,\n };\n ariaLabelledby = id_1;\n }\n else {\n var id_2 = sectionProps.title.id || menuId + sectionProps.title.key.replace(/\\s/g, '');\n headerContextualMenuItem = __assign(__assign({}, sectionProps.title), { id: id_2 });\n ariaLabelledby = id_2;\n }\n if (headerContextualMenuItem) {\n groupProps = {\n role: 'group',\n 'aria-labelledby': ariaLabelledby,\n };\n headerItem = renderHeaderMenuItem(headerContextualMenuItem, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n }\n }\n if (sectionProps.items && sectionProps.items.length > 0) {\n var correctedIndex_1 = 0;\n return (React.createElement(\"li\", { role: \"presentation\", key: sectionProps.key || sectionItem.key || \"section-\".concat(index) },\n React.createElement(\"div\", __assign({}, groupProps),\n React.createElement(\"ul\", { className: menuClassNames.list, role: \"presentation\" },\n sectionProps.topDivider && renderSeparator(index, itemClassNames, true, true),\n headerItem && renderListItem(headerItem, sectionItem.key || index, itemClassNames, sectionItem.title),\n sectionProps.items.map(function (contextualMenuItem, itemsIndex) {\n var menuItem = renderMenuItem(contextualMenuItem, itemsIndex, correctedIndex_1, getItemCount(sectionProps.items), hasCheckmarks, hasIcons, menuClassNames);\n if (contextualMenuItem.itemType !== ContextualMenuItemType.Divider &&\n contextualMenuItem.itemType !== ContextualMenuItemType.Header) {\n var indexIncrease = contextualMenuItem.customOnRenderListLength\n ? contextualMenuItem.customOnRenderListLength\n : 1;\n correctedIndex_1 += indexIncrease;\n }\n return menuItem;\n }),\n sectionProps.bottomDivider && renderSeparator(index, itemClassNames, false, true)))));\n }\n };\n var renderListItem = function (content, key, classNames, // eslint-disable-line deprecation/deprecation\n title) {\n return (React.createElement(\"li\", { role: \"presentation\", title: title, key: key, className: classNames.item }, content));\n };\n var renderSeparator = function (index, classNames, // eslint-disable-line deprecation/deprecation\n top, fromSection) {\n if (fromSection || index > 0) {\n return (React.createElement(\"li\", { role: \"separator\", key: 'separator-' + index + (top === undefined ? '' : top ? '-top' : '-bottom'), className: classNames.divider, \"aria-hidden\": \"true\" }));\n }\n return null;\n };\n var renderNormalItem = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons) {\n if (item.onRender) {\n return item.onRender(__assign({ 'aria-posinset': focusableElementIndex + 1, 'aria-setsize': totalItemCount }, item), dismiss);\n }\n var contextualMenuItemAs = props.contextualMenuItemAs;\n var commonProps = {\n item: item,\n classNames: classNames,\n index: index,\n focusableElementIndex: focusableElementIndex,\n totalItemCount: totalItemCount,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n contextualMenuItemAs: contextualMenuItemAs,\n onItemMouseEnter: onItemMouseEnterBase,\n onItemMouseLeave: onMouseItemLeave,\n onItemMouseMove: onItemMouseMoveBase,\n onItemMouseDown: onItemMouseDown,\n executeItemClick: executeItemClick,\n onItemKeyDown: onItemKeyDown,\n expandedMenuItemKey: expandedMenuItemKey,\n openSubMenu: openSubMenu,\n dismissSubMenu: onSubMenuDismiss,\n dismissMenu: dismiss,\n };\n if (item.href) {\n return React.createElement(ContextualMenuAnchor, __assign({}, commonProps, { onItemClick: onAnchorClick }));\n }\n if (item.split && hasSubmenu(item)) {\n return (React.createElement(ContextualMenuSplitButton, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase, onTap: cancelSubMenuTimer })));\n }\n return React.createElement(ContextualMenuButton, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase }));\n };\n var renderHeaderMenuItem = function (item, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var _a = props.contextualMenuItemAs, ChildrenRenderer = _a === void 0 ? ContextualMenuItem : _a;\n var itemProps = item.itemProps, id = item.id;\n var divHtmlProperties = itemProps && getNativeProps(itemProps, divProperties);\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", __assign({ id: id, className: menuClassNames.header }, divHtmlProperties, { style: item.style }),\n React.createElement(ChildrenRenderer, __assign({ item: item, classNames: itemClassNames, index: index, onCheckmarkClick: hasCheckmarks ? onItemClick : undefined, hasIcons: hasIcons }, itemProps))));\n };\n //#endregion\n //#region Main render\n var isBeakVisible = props.isBeakVisible;\n var items = props.items, labelElementId = props.labelElementId, id = props.id, className = props.className, beakWidth = props.beakWidth, directionalHint = props.directionalHint, directionalHintForRTL = props.directionalHintForRTL, alignTargetEdge = props.alignTargetEdge, gapSpace = props.gapSpace, coverTarget = props.coverTarget, ariaLabel = props.ariaLabel, doNotLayer = props.doNotLayer, target = props.target, bounds = props.bounds, useTargetWidth = props.useTargetWidth, useTargetAsMinWidth = props.useTargetAsMinWidth, directionalHintFixed = props.directionalHintFixed, shouldFocusOnMount = props.shouldFocusOnMount, shouldFocusOnContainer = props.shouldFocusOnContainer, title = props.title, styles = props.styles, theme = props.theme, calloutProps = props.calloutProps, _k = props.onRenderSubMenu, onRenderSubMenu = _k === void 0 ? onDefaultRenderSubMenu : _k, _l = props.onRenderMenuList, onRenderMenuList = _l === void 0 ? function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); } : _l, focusZoneProps = props.focusZoneProps, \n // eslint-disable-next-line deprecation/deprecation\n getMenuClassNames = props.getMenuClassNames;\n var classNames = getMenuClassNames\n ? getMenuClassNames(theme, className)\n : getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var hasIcons = itemsHaveIcons(items);\n function itemsHaveIcons(contextualMenuItems) {\n for (var _i = 0, contextualMenuItems_1 = contextualMenuItems; _i < contextualMenuItems_1.length; _i++) {\n var item = contextualMenuItems_1[_i];\n if (item.iconProps) {\n return true;\n }\n if (item.itemType === ContextualMenuItemType.Section &&\n item.sectionProps &&\n itemsHaveIcons(item.sectionProps.items)) {\n return true;\n }\n }\n return false;\n }\n var adjustedFocusZoneProps = __assign(__assign({ direction: FocusZoneDirection.vertical, handleTabKey: FocusZoneTabbableElements.all, isCircularNavigation: true }, focusZoneProps), { className: css(classNames.root, (_a = props.focusZoneProps) === null || _a === void 0 ? void 0 : _a.className) });\n var hasCheckmarks = canAnyMenuItemsCheck(items);\n var submenuProps = expandedMenuItemKey && props.hidden !== true ? getSubmenuProps() : null;\n isBeakVisible = isBeakVisible === undefined ? responsiveMode <= ResponsiveMode.medium : isBeakVisible;\n /**\n * When useTargetWidth is true, get the width of the target element and apply it for the context menu container\n */\n var contextMenuStyle;\n var targetAsHtmlElement = targetRef.current;\n if ((useTargetWidth || useTargetAsMinWidth) && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {\n var targetBoundingRect = targetAsHtmlElement.getBoundingClientRect();\n var targetWidth = targetBoundingRect.width - 2; /* Accounts for 1px border */\n if (useTargetWidth) {\n contextMenuStyle = {\n width: targetWidth,\n };\n }\n else if (useTargetAsMinWidth) {\n contextMenuStyle = {\n minWidth: targetWidth,\n };\n }\n }\n // The menu should only return if items were provided, if no items were provided then it should not appear.\n if (items && items.length > 0) {\n var totalItemCount_1 = getItemCount(items);\n var calloutStyles_1 = classNames.subComponentStyles\n ? classNames.subComponentStyles.callout\n : undefined;\n return (React.createElement(MenuContext.Consumer, null, function (menuContext) { return (React.createElement(Callout, __assign({ styles: calloutStyles_1, onRestoreFocus: tryFocusPreviousActiveElement }, calloutProps, { target: target || menuContext.target, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: css('ms-ContextualMenu-Callout', calloutProps && calloutProps.className), setInitialFocus: shouldFocusOnMount, onDismiss: props.onDismiss || menuContext.onDismiss, onScroll: onScroll, bounds: bounds, directionalHintFixed: directionalHintFixed, alignTargetEdge: alignTargetEdge, hidden: props.hidden || menuContext.hidden, ref: forwardedRef }),\n React.createElement(\"div\", { style: contextMenuStyle, ref: hostElement, id: id, className: classNames.container, tabIndex: shouldFocusOnContainer ? 0 : -1, onKeyDown: onMenuKeyDown, onKeyUp: onKeyUp, onFocusCapture: onMenuFocusCapture, \"aria-label\": ariaLabel, \"aria-labelledby\": labelElementId, role: 'menu' },\n title && React.createElement(\"div\", { className: classNames.title },\n \" \",\n title,\n \" \"),\n items && items.length\n ? renderFocusZone(onRenderMenuList({\n ariaLabel: ariaLabel,\n items: items,\n totalItemCount: totalItemCount_1,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n defaultMenuItemRenderer: function (item) {\n return defaultMenuItemRenderer(item, classNames);\n },\n labelElementId: labelElementId,\n }, function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); }), adjustedFocusZoneProps)\n : null,\n submenuProps && onRenderSubMenu(submenuProps, onDefaultRenderSubMenu)),\n React.createElement(FocusRects, null))); }));\n }\n else {\n return null;\n }\n //#endregion\n}), function (prevProps, newProps) {\n if (!newProps.shouldUpdateWhenHidden && prevProps.hidden && newProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(prevProps, newProps);\n});\nContextualMenuBase.displayName = 'ContextualMenuBase';\n/**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\nfunction isAltOrMeta(ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n}\nfunction onItemMouseDown(item, ev) {\n var _a;\n (_a = item.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(item, item, ev);\n}\nfunction onDefaultRenderSubMenu(subMenuProps, defaultRender) {\n throw Error('ContextualMenuBase: onRenderSubMenu callback is null or undefined. ' +\n 'Please ensure to set `onRenderSubMenu` property either manually or with `styled` helper.');\n}\n/**\n * Returns the item that matches a given key if any.\n * @param key - The key of the item to match\n * @param items - The items to look for the key\n */\nfunction findItemByKeyFromItems(key, items) {\n for (var _i = 0, items_3 = items; _i < items_3.length; _i++) {\n var item = items_3[_i];\n if (item.itemType === ContextualMenuItemType.Section && item.sectionProps) {\n var match = findItemByKeyFromItems(key, item.sectionProps.items);\n if (match) {\n return match;\n }\n }\n else if (item.key && item.key === key) {\n return item;\n }\n }\n}\nfunction getOnClickWithOverrideTarget(onClick, target) {\n return onClick\n ? function (ev, item) {\n overrideTarget(ev, target);\n return onClick(ev, item);\n }\n : onClick;\n}\nfunction overrideTarget(ev, target) {\n if (ev && target) {\n ev.persist();\n if (target instanceof Event) {\n ev.target = target.target;\n }\n else if (target instanceof Element) {\n ev.target = target;\n }\n }\n}\n//# sourceMappingURL=ContextualMenu.base.js.map","import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';\nimport { getMenuItemStyles } from './ContextualMenu.cnstyles';\nimport { mergeStyleSets, getGlobalClassNames, getScreenSelector, ScreenWidthMaxMedium, hiddenContentStyle, } from '../../Styling';\nimport { memoizeFunction, IsFocusVisibleClassName } from '../../Utilities';\nvar CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getSplitButtonVerticalDividerClassNames = memoizeFunction(\n/* eslint-disable deprecation/deprecation */\nfunction (theme) {\n var _a;\n return mergeStyleSets(getDividerClassNames(theme), {\n /* eslint-enable deprecation/deprecation */\n wrapper: {\n position: 'absolute',\n right: 28,\n selectors: (_a = {},\n _a[MediumScreenSelector] = {\n right: 32, // fontSize of the icon increased from 12px to 16px\n },\n _a),\n },\n divider: {\n height: 16,\n width: 1,\n },\n });\n});\nvar GlobalClassNames = {\n item: 'ms-ContextualMenu-item',\n divider: 'ms-ContextualMenu-divider',\n root: 'ms-ContextualMenu-link',\n isChecked: 'is-checked',\n isExpanded: 'is-expanded',\n isDisabled: 'is-disabled',\n linkContent: 'ms-ContextualMenu-linkContent',\n linkContentMenu: 'ms-ContextualMenu-linkContent',\n icon: 'ms-ContextualMenu-icon',\n iconColor: 'ms-ContextualMenu-iconColor',\n checkmarkIcon: 'ms-ContextualMenu-checkmarkIcon',\n subMenuIcon: 'ms-ContextualMenu-submenuIcon',\n label: 'ms-ContextualMenu-itemText',\n secondaryText: 'ms-ContextualMenu-secondaryText',\n splitMenu: 'ms-ContextualMenu-splitMenu',\n screenReaderText: 'ms-ContextualMenu-screenReaderText',\n};\n/**\n * @deprecated Will be removed in \\>= 7.0.\n * This is a package-internal method that has been depended on.\n * It is being kept in this form for backwards compatibility.\n * @internal\n */\n// TODO: Audit perf. impact of and potentially remove memoizeFunction.\n// https://github.com/microsoft/fluentui/issues/5534\nexport var getItemClassNames = memoizeFunction(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {\n var _a, _b, _c, _d;\n var styles = getMenuItemStyles(theme);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return mergeStyleSets({\n item: [classNames.item, styles.item, itemClassName],\n divider: [classNames.divider, styles.divider, dividerClassName],\n root: [\n classNames.root,\n styles.root,\n checked && [classNames.isChecked, styles.rootChecked],\n isAnchorLink && styles.anchorLink,\n expanded && [classNames.isExpanded, styles.rootExpanded],\n disabled && [classNames.isDisabled, styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_a = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _a[\".\".concat(IsFocusVisibleClassName, \" &:hover\")] = { background: 'inherit;' },\n _a),\n },\n ],\n className,\n ],\n splitPrimary: [\n styles.root,\n {\n width: \"calc(100% - \".concat(CONTEXTUAL_SPLIT_MENU_MINWIDTH, \")\"),\n },\n checked && ['is-checked', styles.rootChecked],\n (disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],\n !(disabled || primaryDisabled) &&\n !checked && [\n {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n // when hovering over the splitPrimary also affect the splitMenu\n _b[\":hover ~ .\".concat(classNames.splitMenu)] = styles.rootHovered,\n _b[':active'] = styles.rootPressed,\n _b[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _b[\".\".concat(IsFocusVisibleClassName, \" &:hover\")] = { background: 'inherit;' },\n _b),\n },\n ],\n ],\n splitMenu: [\n classNames.splitMenu,\n styles.root,\n {\n flexBasis: '0',\n padding: '0 8px',\n minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH,\n },\n expanded && ['is-expanded', styles.rootExpanded],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_c = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _c[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _c[\".\".concat(IsFocusVisibleClassName, \" &:hover\")] = { background: 'inherit;' },\n _c),\n },\n ],\n ],\n anchorLink: styles.anchorLink,\n linkContent: [classNames.linkContent, styles.linkContent],\n linkContentMenu: [\n classNames.linkContentMenu,\n styles.linkContent,\n {\n justifyContent: 'center',\n },\n ],\n icon: [\n classNames.icon,\n knownIcon && styles.iconColor,\n styles.icon,\n iconClassName,\n disabled && [classNames.isDisabled, styles.iconDisabled],\n ],\n iconColor: styles.iconColor,\n checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],\n subMenuIcon: [\n classNames.subMenuIcon,\n styles.subMenuIcon,\n subMenuClassName,\n expanded && { color: theme.palette.neutralPrimary },\n disabled && [styles.iconDisabled],\n ],\n label: [classNames.label, styles.label],\n secondaryText: [classNames.secondaryText, styles.secondaryText],\n splitContainer: [\n styles.splitButtonFlexContainer,\n !disabled &&\n !checked && [\n {\n selectors: (_d = {},\n _d[\".\".concat(IsFocusVisibleClassName, \" &:focus, .\").concat(IsFocusVisibleClassName, \" &:focus:hover\")] = styles.rootFocused,\n _d),\n },\n ],\n ],\n screenReaderText: [\n classNames.screenReaderText,\n styles.screenReaderText,\n hiddenContentStyle,\n { visibility: 'hidden' },\n ],\n });\n});\n/**\n * Wrapper function for generating ContextualMenuItem classNames which adheres to\n * the getStyles API, but invokes memoized className generator function with\n * primitive values.\n *\n * @param props - the ContextualMenuItem style props used to generate its styles.\n */\nexport var getItemStyles = function (props) {\n var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;\n // eslint-disable-next-line deprecation/deprecation\n return getItemClassNames(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);\n};\n//# sourceMappingURL=ContextualMenu.classNames.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, getFocusStyle, HighContrastSelector, getScreenSelector, ScreenWidthMaxMedium, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nexport var CONTEXTUAL_MENU_ITEM_HEIGHT = 36;\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getMenuItemStyles = memoizeFunction(function (theme) {\n var _a, _b, _c, _d, _e;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;\n var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;\n var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;\n var ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed;\n var ContextualMenuItemDividerColor = semanticColors.bodyDivider;\n var menuItemStyles = {\n item: [\n fonts.medium,\n {\n color: semanticColors.bodyText,\n position: 'relative',\n boxSizing: 'border-box',\n },\n ],\n divider: {\n display: 'block',\n height: '1px',\n backgroundColor: ContextualMenuItemDividerColor,\n position: 'relative',\n },\n root: [\n getFocusStyle(theme),\n fonts.medium,\n {\n color: semanticColors.bodyText,\n backgroundColor: 'transparent',\n border: 'none',\n width: '100%',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n display: 'block',\n cursor: 'pointer',\n padding: '0px 8px 0 4px',\n textAlign: 'left',\n },\n ],\n rootDisabled: {\n color: semanticColors.disabledBodyText,\n cursor: 'default',\n pointerEvents: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n // ensure disabled text looks different than enabled\n color: 'GrayText',\n opacity: 1,\n },\n _a),\n },\n rootHovered: {\n backgroundColor: ContextualMenuItemBackgroundHoverColor,\n color: ContextualMenuItemTextHoverColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDarkAlt,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootFocused: {\n backgroundColor: palette.white,\n },\n rootChecked: {\n selectors: {\n '.ms-ContextualMenu-checkmarkIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootPressed: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDark,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n },\n },\n rootExpanded: {\n backgroundColor: ContextualMenuItemBackgroundSelectedColor,\n color: semanticColors.bodyTextChecked,\n selectors: (_b = {\n '.ms-ContextualMenu-submenuIcon': (_c = {},\n _c[HighContrastSelector] = {\n // icons inside of anchor tags are not properly inheriting color in high contrast\n color: 'inherit',\n },\n _c)\n },\n _b[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _b),\n },\n linkContent: {\n whiteSpace: 'nowrap',\n height: 'inherit',\n display: 'flex',\n alignItems: 'center',\n maxWidth: '100%',\n },\n anchorLink: {\n padding: '0px 8px 0 4px',\n textRendering: 'auto',\n color: 'inherit',\n letterSpacing: 'normal',\n wordSpacing: 'normal',\n textTransform: 'none',\n textIndent: '0px',\n textShadow: 'none',\n textDecoration: 'none',\n boxSizing: 'border-box',\n },\n label: {\n margin: '0 4px',\n verticalAlign: 'middle',\n display: 'inline-block',\n flexGrow: '1',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n },\n secondaryText: {\n color: theme.palette.neutralSecondary,\n paddingLeft: '20px',\n textAlign: 'right',\n },\n icon: {\n display: 'inline-block',\n minHeight: '1px',\n maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n fontSize: IconFontSizes.medium,\n width: IconFontSizes.medium,\n margin: '0 4px',\n verticalAlign: 'middle',\n flexShrink: '0',\n selectors: (_d = {},\n _d[MediumScreenSelector] = {\n fontSize: IconFontSizes.large,\n width: IconFontSizes.large,\n },\n _d),\n },\n iconColor: {\n color: semanticColors.menuIcon,\n },\n iconDisabled: {\n color: semanticColors.disabledBodyText,\n },\n checkmarkIcon: {\n color: semanticColors.bodySubtext,\n },\n subMenuIcon: {\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n color: palette.neutralSecondary,\n textAlign: 'center',\n display: 'inline-block',\n verticalAlign: 'middle',\n flexShrink: '0',\n fontSize: IconFontSizes.small,\n selectors: (_e = {\n ':hover': {\n color: palette.neutralPrimary,\n },\n ':active': {\n color: palette.neutralPrimary,\n }\n },\n _e[MediumScreenSelector] = {\n fontSize: IconFontSizes.medium, // 16px\n },\n _e),\n },\n splitButtonFlexContainer: [\n getFocusStyle(theme),\n {\n display: 'flex',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n ],\n };\n return concatStyleSets(menuItemStyles);\n});\n//# sourceMappingURL=ContextualMenu.cnstyles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { styled, composeRenderFunction } from '../../Utilities';\nimport { ContextualMenuBase } from './ContextualMenu.base';\nimport { getStyles } from './ContextualMenu.styles';\nfunction onRenderSubMenu(subMenuProps) {\n return React.createElement(LocalContextualMenu, __assign({}, subMenuProps));\n}\n// This is to prevent cyclic import with ContextualMenu.base.tsx.\nvar LocalContextualMenu = styled(ContextualMenuBase, getStyles, function (props) { return ({\n onRenderSubMenu: props.onRenderSubMenu\n ? composeRenderFunction(props.onRenderSubMenu, onRenderSubMenu)\n : onRenderSubMenu,\n}); }, { scope: 'ContextualMenu' });\n/**\n * ContextualMenu description\n */\nexport var ContextualMenu = LocalContextualMenu;\nContextualMenu.displayName = 'ContextualMenu';\n//# sourceMappingURL=ContextualMenu.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport { CONTEXTUAL_MENU_ITEM_HEIGHT } from './ContextualMenu.cnstyles';\nvar GlobalClassNames = {\n root: 'ms-ContextualMenu',\n container: 'ms-ContextualMenu-container',\n list: 'ms-ContextualMenu-list',\n header: 'ms-ContextualMenu-header',\n title: 'ms-ContextualMenu-title',\n isopen: 'is-open',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n classNames.isopen,\n {\n backgroundColor: semanticColors.menuBackground,\n minWidth: '180px',\n },\n className,\n ],\n container: [\n classNames.container,\n {\n selectors: {\n ':focus': { outline: 0 },\n },\n },\n ],\n list: [\n classNames.list,\n classNames.isopen,\n {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n },\n ],\n header: [\n classNames.header,\n fonts.small,\n {\n fontWeight: FontWeights.semibold,\n color: semanticColors.menuHeader,\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n cursor: 'default',\n padding: '0px 6px',\n userSelect: 'none',\n textAlign: 'left',\n },\n ],\n title: [\n classNames.title,\n {\n fontSize: fonts.mediumPlus.fontSize,\n paddingRight: '14px',\n paddingLeft: '14px',\n paddingBottom: '5px',\n paddingTop: '5px',\n backgroundColor: semanticColors.menuItemBackgroundPressed,\n },\n ],\n subComponentStyles: {\n callout: {\n root: {\n boxShadow: effects.elevation8,\n },\n },\n menuItem: {},\n },\n };\n};\n//# sourceMappingURL=ContextualMenu.styles.js.map","export { DirectionalHint } from '../../common/DirectionalHint';\n/**\n * {@docCategory ContextualMenu}\n */\nexport var ContextualMenuItemType;\n(function (ContextualMenuItemType) {\n ContextualMenuItemType[ContextualMenuItemType[\"Normal\"] = 0] = \"Normal\";\n ContextualMenuItemType[ContextualMenuItemType[\"Divider\"] = 1] = \"Divider\";\n ContextualMenuItemType[ContextualMenuItemType[\"Header\"] = 2] = \"Header\";\n ContextualMenuItemType[ContextualMenuItemType[\"Section\"] = 3] = \"Section\";\n})(ContextualMenuItemType || (ContextualMenuItemType = {}));\n//# sourceMappingURL=ContextualMenu.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';\nimport { getRTL, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nvar defaultIconRenderer = function (props) {\n var item = props.item, classNames = props.classNames;\n var iconProps = item.iconProps;\n return React.createElement(Icon, __assign({}, iconProps, { className: classNames.icon }));\n};\nvar renderItemIcon = function (props) {\n var item = props.item, hasIcons = props.hasIcons;\n if (!hasIcons) {\n return null;\n }\n if (item.onRenderIcon) {\n return item.onRenderIcon(props, defaultIconRenderer);\n }\n return defaultIconRenderer(props);\n};\nvar renderCheckMarkIcon = function (_a) {\n var onCheckmarkClick = _a.onCheckmarkClick, item = _a.item, classNames = _a.classNames;\n var isItemChecked = getIsChecked(item);\n if (onCheckmarkClick) {\n // Ensures that the item is passed as the first argument to the checkmark click callback.\n var onClick = function (e) { return onCheckmarkClick(item, e); };\n return (React.createElement(Icon, { iconName: item.canCheck !== false && isItemChecked ? 'CheckMark' : '', className: classNames.checkmarkIcon, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: onClick }));\n }\n return null;\n};\nvar renderItemName = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n /* eslint-disable deprecation/deprecation */\n if (item.text || item.name) {\n return React.createElement(\"span\", { className: classNames.label }, item.text || item.name);\n }\n /* eslint-enable deprecation/deprecation */\n return null;\n};\nvar renderSecondaryText = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n if (item.secondaryText) {\n return React.createElement(\"span\", { className: classNames.secondaryText }, item.secondaryText);\n }\n return null;\n};\nvar renderSubMenuIcon = function (_a) {\n var item = _a.item, classNames = _a.classNames, theme = _a.theme;\n if (hasSubmenu(item)) {\n return (React.createElement(Icon, __assign({ iconName: getRTL(theme) ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: classNames.subMenuIcon })));\n }\n return null;\n};\nvar ContextualMenuItemBase = /** @class */ (function (_super) {\n __extends(ContextualMenuItemBase, _super);\n function ContextualMenuItemBase(props) {\n var _this = _super.call(this, props) || this;\n _this.openSubMenu = function () {\n var _a = _this.props, item = _a.item, openSubMenu = _a.openSubMenu, getSubmenuTarget = _a.getSubmenuTarget;\n if (getSubmenuTarget) {\n var submenuTarget = getSubmenuTarget();\n if (hasSubmenu(item) && openSubMenu && submenuTarget) {\n openSubMenu(item, submenuTarget);\n }\n }\n };\n _this.dismissSubMenu = function () {\n var _a = _this.props, item = _a.item, dismissSubMenu = _a.dismissSubMenu;\n if (hasSubmenu(item) && dismissSubMenu) {\n dismissSubMenu();\n }\n };\n _this.dismissMenu = function (dismissAll) {\n var dismissMenu = _this.props.dismissMenu;\n if (dismissMenu) {\n dismissMenu(undefined /* ev */, dismissAll);\n }\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemBase.prototype.render = function () {\n var _a = this.props, item = _a.item, classNames = _a.classNames;\n var renderContent = item.onRenderContent || this._renderLayout;\n return (React.createElement(\"div\", { className: item.split ? classNames.linkContentMenu : classNames.linkContent }, renderContent(this.props, {\n renderCheckMarkIcon: renderCheckMarkIcon,\n renderItemIcon: renderItemIcon,\n renderItemName: renderItemName,\n renderSecondaryText: renderSecondaryText,\n renderSubMenuIcon: renderSubMenuIcon,\n })));\n };\n ContextualMenuItemBase.prototype._renderLayout = function (props, defaultRenders) {\n return (React.createElement(React.Fragment, null,\n defaultRenders.renderCheckMarkIcon(props),\n defaultRenders.renderItemIcon(props),\n defaultRenders.renderItemName(props),\n defaultRenders.renderSecondaryText(props),\n defaultRenders.renderSubMenuIcon(props)));\n };\n return ContextualMenuItemBase;\n}(React.Component));\nexport { ContextualMenuItemBase };\n//# sourceMappingURL=ContextualMenuItem.base.js.map","import { styled } from '../../Utilities';\nimport { ContextualMenuItemBase } from './ContextualMenuItem.base';\nimport { getItemStyles } from './ContextualMenu.classNames';\n/**\n * ContextualMenuItem description\n */\nexport var ContextualMenuItem = styled(ContextualMenuItemBase, getItemStyles, undefined, { scope: 'ContextualMenuItem' });\n//# sourceMappingURL=ContextualMenuItem.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuAnchor = /** @class */ (function (_super) {\n __extends(ContextualMenuAnchor, _super);\n function ContextualMenuAnchor() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._anchor = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._getSubmenuTarget = function () {\n return _this._anchor.current ? _this._anchor.current : undefined;\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClick = _a.onItemClick;\n if (onItemClick) {\n onItemClick(item, ev);\n }\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n return _this;\n }\n ContextualMenuAnchor.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, expandedMenuItemKey = _a.expandedMenuItemKey, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var anchorRel = item.rel;\n if (item.target && item.target.toLowerCase() === '_blank') {\n anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer'; // Safe default to prevent tabjacking\n }\n var itemHasSubmenu = hasSubmenu(item);\n var nativeProps = getNativeProps(item, anchorProperties);\n var disabled = isItemDisabled(item);\n var itemProps = item.itemProps, ariaDescription = item.ariaDescription;\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, nativeProps['aria-describedby']);\n var additionalItemProperties = {\n 'aria-describedby': ariaDescribedByIds,\n };\n return (React.createElement(\"div\", null,\n React.createElement(KeytipData, { keytipProps: item.keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: disabled }, function (keytipAttributes) { return (React.createElement(\"a\", __assign({}, additionalItemProperties, nativeProps, keytipAttributes, { ref: _this._anchor, href: item.href, target: item.target, rel: anchorRel, className: classNames.root, role: \"menuitem\", \"aria-haspopup\": itemHasSubmenu || undefined, \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, \"aria-disabled\": isItemDisabled(item), \n // eslint-disable-next-line deprecation/deprecation\n style: item.style, onClick: _this._onItemClick, onMouseEnter: _this._onItemMouseEnter, onMouseLeave: _this._onItemMouseLeave, onMouseMove: _this._onItemMouseMove, onKeyDown: itemHasSubmenu ? _this._onItemKeyDown : undefined }),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); })));\n };\n return ContextualMenuAnchor;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuAnchor };\n//# sourceMappingURL=ContextualMenuAnchor.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuButton = /** @class */ (function (_super) {\n __extends(ContextualMenuButton, _super);\n function ContextualMenuButton() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._btn = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._getSubmenuTarget = function () {\n return _this._btn.current ? _this._btn.current : undefined;\n };\n return _this;\n }\n ContextualMenuButton.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, expandedMenuItemKey = _a.expandedMenuItemKey, onItemMouseDown = _a.onItemMouseDown, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var isChecked = getIsChecked(item);\n var canCheck = isChecked !== null;\n var defaultRole = getMenuItemAriaRole(item);\n var itemHasSubmenu = hasSubmenu(item);\n var itemProps = item.itemProps, ariaLabel = item.ariaLabel, ariaDescription = item.ariaDescription;\n var buttonNativeProperties = getNativeProps(item, buttonProperties);\n // Do not add the disabled attribute to the button so that it is focusable\n delete buttonNativeProperties.disabled;\n var itemRole = item.role || defaultRole;\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, buttonNativeProperties['aria-describedby']);\n var itemButtonProperties = {\n className: classNames.root,\n onClick: this._onItemClick,\n onKeyDown: itemHasSubmenu ? this._onItemKeyDown : undefined,\n onMouseEnter: this._onItemMouseEnter,\n onMouseLeave: this._onItemMouseLeave,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMove,\n href: item.href,\n title: item.title,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedByIds,\n 'aria-haspopup': itemHasSubmenu || undefined,\n 'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,\n 'aria-posinset': focusableElementIndex + 1,\n 'aria-setsize': totalItemCount,\n 'aria-disabled': isItemDisabled(item),\n 'aria-checked': (itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio') && canCheck ? !!isChecked : undefined,\n 'aria-selected': itemRole === 'menuitem' && canCheck ? !!isChecked : undefined,\n role: itemRole,\n // eslint-disable-next-line deprecation/deprecation\n style: item.style,\n };\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n return (React.createElement(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"button\", __assign({ ref: _this._btn }, buttonNativeProperties, itemButtonProperties, keytipAttributes),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n return ContextualMenuButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuButton };\n//# sourceMappingURL=ContextualMenuButton.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, shallowCompare } from '../../../Utilities';\nvar ContextualMenuItemWrapper = /** @class */ (function (_super) {\n __extends(ContextualMenuItemWrapper, _super);\n function ContextualMenuItemWrapper(props) {\n var _this = _super.call(this, props) || this;\n _this._onItemMouseEnter = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, ev.currentTarget);\n }\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, ev.currentTarget);\n }\n };\n _this._onItemMouseLeave = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseLeave = _a.onItemMouseLeave;\n if (onItemMouseLeave) {\n onItemMouseLeave(item, ev);\n }\n };\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._onItemMouseMove = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, ev.currentTarget);\n }\n };\n _this._getSubmenuTarget = function () {\n return undefined;\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemWrapper.prototype.shouldComponentUpdate = function (newProps) {\n return !shallowCompare(newProps, this.props);\n };\n return ContextualMenuItemWrapper;\n}(React.Component));\nexport { ContextualMenuItemWrapper };\n//# sourceMappingURL=ContextualMenuItemWrapper.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, KeyCodes, mergeAriaAttributeValues, memoizeFunction, Async, EventGroup, getId, } from '../../../Utilities';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, getMenuItemAriaRole, hasSubmenu, isItemDisabled } from '../../../utilities/contextualMenu/index';\nimport { VerticalDivider } from '../../../Divider';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nvar TouchIdleDelay = 500; /* ms */\nvar ContextualMenuSplitButton = /** @class */ (function (_super) {\n __extends(ContextualMenuSplitButton, _super);\n function ContextualMenuSplitButton(props) {\n var _this = _super.call(this, props) || this;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this._executeItemClick(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._getSubmenuTarget = function () {\n return _this._splitButton;\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._onItemMouseEnterPrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseEnterIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, _this._splitButton);\n }\n };\n _this._onItemMouseMovePrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseMoveIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, _this._splitButton);\n }\n };\n _this._onIconItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, (_this._splitButton ? _this._splitButton : ev.currentTarget));\n }\n };\n _this._executeItemClick = function (ev) {\n var _a = _this.props, item = _a.item, executeItemClick = _a.executeItemClick, onItemClick = _a.onItemClick;\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (_this._processingTouch && !item.canCheck && onItemClick) {\n return onItemClick(item, ev);\n }\n if (executeItemClick) {\n executeItemClick(item, ev);\n }\n };\n _this._onTouchStart = function (ev) {\n if (_this._splitButton && !('onpointerdown' in _this._splitButton)) {\n _this._handleTouchAndPointerEvent(ev);\n }\n };\n _this._onPointerDown = function (ev) {\n if (ev.pointerType === 'touch') {\n _this._handleTouchAndPointerEvent(ev);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._dismissLabelId = getId();\n return _this;\n }\n ContextualMenuSplitButton.prototype.componentDidMount = function () {\n if (this._splitButton && 'onpointerdown' in this._splitButton) {\n this._events.on(this._splitButton, 'pointerdown', this._onPointerDown, true);\n }\n };\n ContextualMenuSplitButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n ContextualMenuSplitButton.prototype.render = function () {\n var _this = this;\n var _a;\n var _b = this.props, item = _b.item, classNames = _b.classNames, index = _b.index, focusableElementIndex = _b.focusableElementIndex, totalItemCount = _b.totalItemCount, hasCheckmarks = _b.hasCheckmarks, hasIcons = _b.hasIcons, onItemMouseLeave = _b.onItemMouseLeave, expandedMenuItemKey = _b.expandedMenuItemKey;\n var itemHasSubmenu = hasSubmenu(item);\n var keytipProps = item.keytipProps;\n if (keytipProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n var ariaDescription = item.ariaDescription;\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaChecked = (_a = getIsChecked(item)) !== null && _a !== void 0 ? _a : undefined;\n return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"div\", { \"data-ktp-target\": keytipAttributes['data-ktp-target'], ref: function (splitButton) { return (_this._splitButton = splitButton); }, role: getMenuItemAriaRole(item), \"aria-label\": item.ariaLabel, className: classNames.splitContainer, \"aria-disabled\": isItemDisabled(item), \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-haspopup\": true, \"aria-describedby\": mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? _this._ariaDescriptionId : undefined, keytipAttributes['aria-describedby']), \"aria-checked\": ariaChecked, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, onMouseEnter: _this._onItemMouseEnterPrimary, onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(_this, __assign(__assign({}, item), { subMenuProps: null, items: null })) : undefined, onMouseMove: _this._onItemMouseMovePrimary, onKeyDown: _this._onItemKeyDown, onClick: _this._executeItemClick, onTouchStart: _this._onTouchStart, tabIndex: 0, \"data-is-focusable\": true, \"aria-roledescription\": item['aria-roledescription'] },\n _this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks, hasIcons),\n _this._renderSplitDivider(item),\n _this._renderSplitIconButton(item, classNames, index, keytipAttributes),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n ContextualMenuSplitButton.prototype._renderSplitPrimaryButton = function (item, \n // eslint-disable-next-line deprecation/deprecation\n classNames, index, hasCheckmarks, hasIcons) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemClick = _a.onItemClick;\n var itemProps = {\n key: item.key,\n disabled: isItemDisabled(item) || item.primaryDisabled,\n /* eslint-disable deprecation/deprecation */\n name: item.name,\n text: item.text || item.name,\n secondaryText: item.secondaryText,\n /* eslint-enable deprecation/deprecation */\n className: classNames.splitPrimary,\n canCheck: item.canCheck,\n isChecked: item.isChecked,\n checked: item.checked,\n iconProps: item.iconProps,\n id: this._dismissLabelId,\n onRenderIcon: item.onRenderIcon,\n data: item.data,\n 'data-is-focusable': false,\n };\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, getNativeProps(itemProps, buttonProperties)),\n React.createElement(ChildrenRenderer, __assign({ \"data-is-focusable\": false, item: itemProps, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._renderSplitDivider = function (item) {\n var getDividerClassNames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;\n return React.createElement(VerticalDivider, { getClassNames: getDividerClassNames });\n };\n ContextualMenuSplitButton.prototype._renderSplitIconButton = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, keytipAttributes) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemMouseLeave = _a.onItemMouseLeave, onItemMouseDown = _a.onItemMouseDown, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var itemProps = {\n onClick: this._onIconItemClick,\n disabled: isItemDisabled(item),\n className: classNames.splitMenu,\n subMenuProps: item.subMenuProps,\n submenuIconProps: item.submenuIconProps,\n split: true,\n key: item.key,\n 'aria-labelledby': this._dismissLabelId,\n };\n var buttonProps = __assign(__assign({}, getNativeProps(itemProps, buttonProperties)), {\n onMouseEnter: this._onItemMouseEnterIcon,\n onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(this, item) : undefined,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMoveIcon,\n 'data-is-focusable': false,\n 'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],\n 'aria-haspopup': true,\n });\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, buttonProps),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: itemProps, classNames: classNames, index: index, hasIcons: false, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: this._getSubmenuTarget }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._handleTouchAndPointerEvent = function (ev) {\n var _this = this;\n var onTap = this.props.onTap;\n if (onTap) {\n onTap(ev);\n }\n // If we already have an existing timeout from a previous touch/pointer event\n // cancel that timeout so we can set a new one.\n if (this._lastTouchTimeoutId) {\n this._async.clearTimeout(this._lastTouchTimeoutId);\n this._lastTouchTimeoutId = undefined;\n }\n this._processingTouch = true;\n this._lastTouchTimeoutId = this._async.setTimeout(function () {\n _this._processingTouch = false;\n _this._lastTouchTimeoutId = undefined;\n }, TouchIdleDelay);\n };\n return ContextualMenuSplitButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuSplitButton };\n//# sourceMappingURL=ContextualMenuSplitButton.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, classNamesFunction, getNativeProps, divProperties, css, format, getPropsWithDefaults, } from '@fluentui/utilities';\nimport { Calendar } from '../../Calendar';\nimport { FirstWeekOfYear, getDatePartHashValue, compareDatePart, DayOfWeek } from '@fluentui/date-time-utilities';\nimport { Callout, DirectionalHint } from '../../Callout';\nimport { mergeStyles } from '../../Styling';\nimport { TextField } from '../../TextField';\nimport { FocusTrapZone } from '../../FocusTrapZone';\nimport { useId, useAsync, useControllableValue } from '@fluentui/react-hooks';\nimport { defaultDatePickerStrings } from './defaults';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n allowTextInput: false,\n formatDate: function (date) { return (date ? date.toDateString() : ''); },\n parseDateFromString: function (dateStr) {\n //if dateStr is DATE ONLY ISO 8601 -> add time so Date.parse() won't convert it to UTC\n //See here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#date_time_string_format\n if (dateStr.match(/^\\d{4}(-\\d{2}){2}$/)) {\n dateStr += 'T12:00';\n }\n var date = Date.parse(dateStr);\n return date ? new Date(date) : null;\n },\n firstDayOfWeek: DayOfWeek.Sunday,\n initialPickerDate: new Date(),\n isRequired: false,\n isMonthPickerVisible: true,\n showMonthPickerAsOverlay: false,\n strings: defaultDatePickerStrings,\n highlightCurrentMonth: false,\n highlightSelectedMonth: false,\n borderless: false,\n pickerAriaLabel: 'Calendar',\n showWeekNumbers: false,\n firstWeekOfYear: FirstWeekOfYear.FirstDay,\n showGoToToday: true,\n showCloseButton: false,\n underlined: false,\n allFocusable: false,\n};\nfunction useFocusLogic() {\n var textFieldRef = React.useRef(null);\n var preventFocusOpeningPicker = React.useRef(false);\n var focus = function () {\n var _a, _b;\n (_b = (_a = textFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n };\n var preventNextFocusOpeningPicker = function () {\n preventFocusOpeningPicker.current = true;\n };\n return [textFieldRef, focus, preventFocusOpeningPicker, preventNextFocusOpeningPicker];\n}\nfunction useCalendarVisibility(_a, focus) {\n var allowTextInput = _a.allowTextInput, onAfterMenuDismiss = _a.onAfterMenuDismiss;\n var _b = React.useState(false), isCalendarShown = _b[0], setIsCalendarShown = _b[1];\n var isMounted = React.useRef(false);\n var async = useAsync();\n React.useEffect(function () {\n if (isMounted.current && !isCalendarShown) {\n // In browsers like IE, textfield gets unfocused when datepicker is collapsed\n if (allowTextInput) {\n async.requestAnimationFrame(focus);\n }\n // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss\n onAfterMenuDismiss === null || onAfterMenuDismiss === void 0 ? void 0 : onAfterMenuDismiss();\n }\n isMounted.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isCalendarShown]);\n return [isCalendarShown, setIsCalendarShown];\n}\nfunction useSelectedDate(_a) {\n var formatDate = _a.formatDate, value = _a.value, onSelectDate = _a.onSelectDate;\n var _b = useControllableValue(value, undefined, function (ev, newValue) {\n return onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(newValue);\n }), selectedDate = _b[0], setSelectedDateState = _b[1];\n var _c = React.useState(function () { return (value && formatDate ? formatDate(value) : ''); }), formattedDate = _c[0], setFormattedDate = _c[1];\n var setSelectedDate = function (newDate) {\n setSelectedDateState(newDate);\n setFormattedDate(newDate && formatDate ? formatDate(newDate) : '');\n };\n React.useEffect(function () {\n setFormattedDate(value && formatDate ? formatDate(value) : '');\n }, [formatDate, value]);\n return [selectedDate, formattedDate, setSelectedDate, setFormattedDate];\n}\nfunction useErrorMessage(_a, selectedDate, setSelectedDate, inputValue, isCalendarShown) {\n var _b;\n var isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate, formatDate = _a.formatDate, minDate = _a.minDate, maxDate = _a.maxDate, textField = _a.textField;\n var _c = React.useState(), errorMessage = _c[0], setErrorMessage = _c[1];\n var _d = React.useState(), statusMessage = _d[0], setStatusMessage = _d[1];\n var isFirstLoadRef = React.useRef(true);\n var validateOnLoad = (_b = textField === null || textField === void 0 ? void 0 : textField.validateOnLoad) !== null && _b !== void 0 ? _b : true;\n var validateTextInput = function (date) {\n if (date === void 0) { date = null; }\n if (allowTextInput) {\n if (inputValue || date) {\n // Don't parse if the selected date has the same formatted string as what we're about to parse.\n // The formatted string might be ambiguous (ex: \"1/2/3\" or \"New Year Eve\") and the parser might\n // not be able to come up with the exact same date.\n if (selectedDate && !errorMessage && formatDate && formatDate(date !== null && date !== void 0 ? date : selectedDate) === inputValue) {\n return;\n }\n date = date || parseDateFromString(inputValue);\n // Check if date is null, or date is Invalid Date\n if (!date || isNaN(date.getTime())) {\n // Reset invalid input field, if formatting is available\n setSelectedDate(selectedDate);\n // default the newer isResetStatusMessage string to invalidInputErrorMessage for legacy support\n var selectedText = formatDate ? formatDate(selectedDate) : '';\n var statusText = strings.isResetStatusMessage\n ? format(strings.isResetStatusMessage, inputValue, selectedText)\n : strings.invalidInputErrorMessage || '';\n setStatusMessage(statusText);\n }\n else {\n // Check against optional date boundaries\n if (isDateOutOfBounds(date, minDate, maxDate)) {\n setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');\n }\n else {\n setSelectedDate(date);\n setErrorMessage(undefined);\n setStatusMessage(undefined);\n }\n }\n }\n else {\n // Only show error for empty inputValue if it is a required field\n setErrorMessage(isRequired ? strings.isRequiredErrorMessage || ' ' : undefined);\n // If no input date string or input date string is invalid\n // date variable will be null, callback should expect null value for this case\n onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(date);\n }\n }\n else if (isRequired && !inputValue) {\n // Check when DatePicker is a required field but has NO input value\n setErrorMessage(strings.isRequiredErrorMessage || ' ');\n }\n else {\n // Cleanup the error message and status message\n setErrorMessage(undefined);\n setStatusMessage(undefined);\n }\n };\n React.useEffect(function () {\n if (isFirstLoadRef.current) {\n isFirstLoadRef.current = false;\n if (!validateOnLoad) {\n return;\n }\n }\n if (isRequired && !selectedDate) {\n setErrorMessage(strings.isRequiredErrorMessage || ' ');\n }\n else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) {\n setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');\n }\n else {\n setErrorMessage(undefined);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n // We don't want to compare the date itself, since two instances of date at the same time are not equal\n // eslint-disable-next-line react-hooks/exhaustive-deps\n minDate && getDatePartHashValue(minDate),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n maxDate && getDatePartHashValue(maxDate),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n selectedDate && getDatePartHashValue(selectedDate),\n isRequired,\n validateOnLoad,\n ]);\n return [\n isCalendarShown ? undefined : errorMessage,\n validateTextInput,\n setErrorMessage,\n isCalendarShown ? undefined : statusMessage,\n setStatusMessage,\n ];\n}\nexport var DatePickerBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var _a, _b;\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var firstDayOfWeek = props.firstDayOfWeek, strings = props.strings, label = props.label, theme = props.theme, className = props.className, styles = props.styles, initialPickerDate = props.initialPickerDate, isRequired = props.isRequired, disabled = props.disabled, ariaLabel = props.ariaLabel, pickerAriaLabel = props.pickerAriaLabel, placeholder = props.placeholder, allowTextInput = props.allowTextInput, borderless = props.borderless, minDate = props.minDate, maxDate = props.maxDate, showCloseButton = props.showCloseButton, calendarProps = props.calendarProps, calloutProps = props.calloutProps, textFieldProps = props.textField, underlined = props.underlined, allFocusable = props.allFocusable, _c = props.calendarAs, CalendarType = _c === void 0 ? Calendar : _c, tabIndex = props.tabIndex, _d = props.disableAutoFocus, disableAutoFocus = _d === void 0 ? true : _d;\n var id = useId('DatePicker', props.id);\n var calloutId = useId('DatePicker-Callout');\n var calendar = React.useRef(null);\n var datePickerDiv = React.useRef(null);\n var _e = useFocusLogic(), textFieldRef = _e[0], focus = _e[1], preventFocusOpeningPicker = _e[2], preventNextFocusOpeningPicker = _e[3];\n var _f = useCalendarVisibility(props, focus), isCalendarShown = _f[0], setIsCalendarShown = _f[1];\n var _g = useSelectedDate(props), selectedDate = _g[0], formattedDate = _g[1], setSelectedDate = _g[2], setFormattedDate = _g[3];\n var _h = useErrorMessage(props, selectedDate, setSelectedDate, formattedDate, isCalendarShown), errorMessage = _h[0], validateTextInput = _h[1], setErrorMessage = _h[2], statusMessage = _h[3], setStatusMessage = _h[4];\n var showDatePickerPopup = React.useCallback(function () {\n if (!isCalendarShown) {\n preventNextFocusOpeningPicker();\n setIsCalendarShown(true);\n }\n }, [isCalendarShown, preventNextFocusOpeningPicker, setIsCalendarShown]);\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: focus,\n reset: function () {\n setIsCalendarShown(false);\n setSelectedDate(undefined);\n setErrorMessage(undefined);\n setStatusMessage(undefined);\n },\n showDatePickerPopup: showDatePickerPopup,\n }); }, [focus, setErrorMessage, setIsCalendarShown, setSelectedDate, setStatusMessage, showDatePickerPopup]);\n var onTextFieldFocus = function () {\n if (disableAutoFocus) {\n return;\n }\n if (!allowTextInput) {\n if (!preventFocusOpeningPicker.current) {\n showDatePickerPopup();\n }\n preventFocusOpeningPicker.current = false;\n }\n };\n var onSelectDate = function (date) {\n if (props.calendarProps && props.calendarProps.onSelectDate) {\n props.calendarProps.onSelectDate(date);\n }\n calendarDismissed(date);\n };\n var onCalloutPositioned = function () {\n var shouldFocus = true;\n // If the user has specified that the callout shouldn't use initial focus, then respect\n // that and don't attempt to set focus. That will default to true within the callout\n // so we need to check if it's undefined here.\n if (props.calloutProps && props.calloutProps.setInitialFocus !== undefined) {\n shouldFocus = props.calloutProps.setInitialFocus;\n }\n if (calendar.current && shouldFocus) {\n calendar.current.focus();\n }\n };\n var onTextFieldBlur = function (ev) {\n validateTextInput();\n };\n var onTextFieldChanged = function (ev, newValue) {\n var _a;\n var textField = props.textField;\n if (allowTextInput) {\n if (isCalendarShown) {\n dismissDatePickerPopup();\n }\n setFormattedDate(newValue);\n }\n (_a = textField === null || textField === void 0 ? void 0 : textField.onChange) === null || _a === void 0 ? void 0 : _a.call(textField, ev, newValue);\n };\n var onTextFieldKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n ev.preventDefault();\n ev.stopPropagation();\n if (!isCalendarShown) {\n validateTextInput();\n showDatePickerPopup();\n }\n else {\n // When DatePicker allows input date string directly,\n // it is expected to hit another enter to close the popup\n if (props.allowTextInput) {\n dismissDatePickerPopup();\n }\n }\n break;\n case KeyCodes.escape:\n handleEscKey(ev);\n break;\n case KeyCodes.down:\n if (ev.altKey && !isCalendarShown) {\n showDatePickerPopup();\n }\n break;\n default:\n break;\n }\n };\n var onTextFieldClick = function (ev) {\n // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior\n var openOnClick = props.openOnClick || !props.disableAutoFocus;\n if (openOnClick && !isCalendarShown && !props.disabled) {\n showDatePickerPopup();\n return;\n }\n if (props.allowTextInput) {\n dismissDatePickerPopup();\n }\n };\n var onIconClick = function (ev) {\n ev.stopPropagation();\n if (!isCalendarShown && !props.disabled) {\n showDatePickerPopup();\n }\n else if (props.allowTextInput) {\n dismissDatePickerPopup();\n }\n };\n var dismissDatePickerPopup = function (newlySelectedDate) {\n if (isCalendarShown) {\n setIsCalendarShown(false);\n validateTextInput(newlySelectedDate);\n if (!allowTextInput && newlySelectedDate) {\n setSelectedDate(newlySelectedDate);\n }\n }\n };\n var renderTextfieldDescription = function (inputProps, defaultRender) {\n return (React.createElement(React.Fragment, null,\n inputProps.description || inputProps.onRenderDescription ? defaultRender(inputProps) : null,\n React.createElement(\"div\", { \"aria-live\": \"assertive\", className: classNames.statusMessage }, statusMessage)));\n };\n var renderReadOnlyInput = function (inputProps) {\n var divProps = getNativeProps(inputProps, divProperties);\n // Need to merge styles so the provided styles win over the default ones. This is due to the classnames having the\n // same specificity.\n var readOnlyTextFieldClassName = mergeStyles(divProps.className, classNames.readOnlyTextField);\n // Talkback on Android treats readonly inputs as disabled, so swipe gestures to open the Calendar\n // don't register. Workaround is rendering a div with role=\"combobox\" (passed in via TextField props).\n return (React.createElement(\"div\", __assign({}, divProps, { className: readOnlyTextFieldClassName, tabIndex: tabIndex || 0 }), formattedDate || (\n // Putting the placeholder in a separate span fixes specificity issues for the text color\n React.createElement(\"span\", { className: classNames.readOnlyPlaceholder }, placeholder))));\n };\n /**\n * Callback for closing the calendar callout\n */\n var calendarDismissed = function (newlySelectedDate) {\n preventNextFocusOpeningPicker();\n dismissDatePickerPopup(newlySelectedDate);\n // don't need to focus the text box, if necessary the focusTrapZone will do it\n };\n var calloutDismissed = function (ev) {\n calendarDismissed();\n };\n var handleEscKey = function (ev) {\n if (isCalendarShown) {\n ev.stopPropagation();\n calendarDismissed();\n }\n };\n var onCalendarDismissed = function (ev) {\n calendarDismissed();\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n underlined: underlined,\n label: !!label,\n isDatePickerShown: isCalendarShown,\n });\n var nativeProps = getNativeProps(props, divProperties, ['value']);\n var iconProps = textFieldProps && textFieldProps.iconProps;\n var textFieldId = textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label';\n var readOnly = !allowTextInput && !disabled;\n var dataIsFocusable = (_b = (_a = textFieldProps === null || textFieldProps === void 0 ? void 0 : textFieldProps['data-is-focusable']) !== null && _a !== void 0 ? _a : props['data-is-focusable']) !== null && _b !== void 0 ? _b : true;\n return (React.createElement(\"div\", __assign({}, nativeProps, { className: classNames.root, ref: forwardedRef }),\n React.createElement(\"div\", { ref: datePickerDiv, \"aria-owns\": isCalendarShown ? calloutId : undefined, className: classNames.wrapper },\n React.createElement(TextField, __assign({ role: \"combobox\", label: label, \"aria-expanded\": isCalendarShown, ariaLabel: ariaLabel, \"aria-haspopup\": \"dialog\", \"aria-controls\": isCalendarShown ? calloutId : undefined, required: isRequired, disabled: disabled, errorMessage: errorMessage, placeholder: placeholder, borderless: borderless, value: formattedDate, componentRef: textFieldRef, underlined: underlined, tabIndex: tabIndex, readOnly: !allowTextInput }, textFieldProps, { \"data-is-focusable\": dataIsFocusable, id: textFieldId, className: css(classNames.textField, textFieldProps && textFieldProps.className), iconProps: __assign(__assign({ iconName: 'Calendar' }, iconProps), { className: css(classNames.icon, iconProps && iconProps.className), onClick: onIconClick }), \n // eslint-disable-next-line react/jsx-no-bind\n onRenderDescription: renderTextfieldDescription, \n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown: onTextFieldKeyDown, \n // eslint-disable-next-line react/jsx-no-bind\n onFocus: onTextFieldFocus, \n // eslint-disable-next-line react/jsx-no-bind\n onBlur: onTextFieldBlur, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: onTextFieldClick, \n // eslint-disable-next-line react/jsx-no-bind\n onChange: onTextFieldChanged, onRenderInput: readOnly ? renderReadOnlyInput : undefined }))),\n isCalendarShown && (React.createElement(Callout, __assign({ id: calloutId, role: \"dialog\", ariaLabel: pickerAriaLabel, isBeakVisible: false, gapSpace: 0, doNotLayer: false, target: datePickerDiv.current, directionalHint: DirectionalHint.bottomLeftEdge }, calloutProps, { className: css(classNames.callout, calloutProps && calloutProps.className), \n // eslint-disable-next-line react/jsx-no-bind\n onDismiss: calloutDismissed, \n // eslint-disable-next-line react/jsx-no-bind\n onPositioned: onCalloutPositioned }),\n React.createElement(FocusTrapZone, { isClickableOutsideFocusTrap: true, disableFirstFocus: disableAutoFocus },\n React.createElement(CalendarType, __assign({}, calendarProps, { \n // eslint-disable-next-line react/jsx-no-bind\n onSelectDate: onSelectDate, \n // eslint-disable-next-line react/jsx-no-bind\n onDismiss: onCalendarDismissed, isMonthPickerVisible: props.isMonthPickerVisible, showMonthPickerAsOverlay: props.showMonthPickerAsOverlay, today: props.today, value: selectedDate || initialPickerDate, firstDayOfWeek: firstDayOfWeek, strings: strings, highlightCurrentMonth: props.highlightCurrentMonth, highlightSelectedMonth: props.highlightSelectedMonth, showWeekNumbers: props.showWeekNumbers, firstWeekOfYear: props.firstWeekOfYear, showGoToToday: props.showGoToToday, dateTimeFormatter: props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: calendar, showCloseButton: showCloseButton, allFocusable: allFocusable })))))));\n});\nDatePickerBase.displayName = 'DatePickerBase';\nfunction isDateOutOfBounds(date, minDate, maxDate) {\n return (!!minDate && compareDatePart(minDate, date) > 0) || (!!maxDate && compareDatePart(maxDate, date) < 0);\n}\n//# sourceMappingURL=DatePicker.base.js.map","import { styled } from '@fluentui/utilities';\nimport { DatePickerBase } from './DatePicker.base';\nimport { styles } from './DatePicker.styles';\nexport var DatePicker = styled(DatePickerBase, styles, undefined, {\n scope: 'DatePicker',\n});\n//# sourceMappingURL=DatePicker.js.map","import { normalize, getGlobalClassNames, FontSizes, HighContrastSelector } from '@fluentui/style-utilities';\nvar GlobalClassNames = {\n root: 'ms-DatePicker',\n callout: 'ms-DatePicker-callout',\n withLabel: 'ms-DatePicker-event--with-label',\n withoutLabel: 'ms-DatePicker-event--without-label',\n disabled: 'msDatePickerDisabled ',\n};\nvar TEXTFIELD_HEIGHT = 32;\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var DatePickerIcon = {\n color: palette.neutralSecondary,\n fontSize: FontSizes.icon,\n lineHeight: '18px',\n pointerEvents: 'none',\n position: 'absolute',\n right: '4px',\n padding: '5px',\n };\n return {\n root: [classNames.root, theme.fonts.large, isDatePickerShown && 'is-open', normalize, className],\n textField: [\n {\n position: 'relative',\n selectors: {\n '& input[readonly]': {\n cursor: 'pointer',\n },\n input: {\n selectors: {\n '::-ms-clear': {\n display: 'none',\n },\n },\n },\n },\n },\n disabled && {\n selectors: {\n '& input[readonly]': {\n cursor: 'default',\n },\n },\n },\n ],\n callout: [classNames.callout],\n icon: [\n DatePickerIcon,\n label ? classNames.withLabel : classNames.withoutLabel,\n { paddingTop: '7px' },\n !disabled && [\n classNames.disabled,\n {\n pointerEvents: 'initial',\n cursor: 'pointer',\n },\n ],\n disabled && {\n color: semanticColors.disabledText,\n cursor: 'default',\n },\n ],\n statusMessage: [\n fonts.small,\n {\n color: semanticColors.errorText,\n marginTop: 5,\n },\n ],\n readOnlyTextField: [\n {\n cursor: 'pointer',\n height: TEXTFIELD_HEIGHT,\n lineHeight: TEXTFIELD_HEIGHT - 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n underlined && {\n lineHeight: TEXTFIELD_HEIGHT + 2,\n },\n ],\n readOnlyPlaceholder: (_a = {\n color: semanticColors.inputPlaceholderText\n },\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n };\n};\n//# sourceMappingURL=DatePicker.styles.js.map","import { __assign } from \"tslib\";\nimport { defaultCalendarStrings } from '../../Calendar';\nexport var defaultDatePickerStrings = __assign(__assign({}, defaultCalendarStrings), { prevMonthAriaLabel: 'Go to previous month', nextMonthAriaLabel: 'Go to next month', prevYearAriaLabel: 'Go to previous year', nextYearAriaLabel: 'Go to next year', closeButtonAriaLabel: 'Close date picker', isRequiredErrorMessage: 'Field is required', invalidInputErrorMessage: 'Invalid date format', isResetStatusMessage: 'Invalid entry \"{0}\", date reset to \"{1}\"' });\n//# sourceMappingURL=defaults.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { Icon, FontIcon } from '../../Icon';\nimport { initializeComponentRef, EventGroup, Async, classNamesFunction, composeRenderFunction } from '../../Utilities';\nimport { ColumnActionsMode } from './DetailsList.types';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nvar MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nvar getClassNames = classNamesFunction();\nvar TRANSITION_DURATION_DRAG = 200; // ms\nvar TRANSITION_DURATION_DROP = 1500; // ms\nvar CLASSNAME_ADD_INTERVAL = 20; // ms\nvar defaultOnRenderHeader = function (classNames) {\n return function (props) {\n if (!props) {\n return null;\n }\n if (props.column.isIconOnly) {\n return React.createElement(\"span\", { className: classNames.accessibleLabel }, props.column.name);\n }\n return React.createElement(React.Fragment, null, props.column.name);\n };\n};\n/**\n * Component for rendering columns in a `DetailsList`.\n *\n * {@docCategory DetailsList}\n */\nvar DetailsColumnBase = /** @class */ (function (_super) {\n __extends(DetailsColumnBase, _super);\n function DetailsColumnBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._tooltipRef = React.createRef();\n _this._onRenderFilterIcon = function (classNames) {\n return function (props) {\n var columnProps = props.columnProps, iconProps = __rest(props, [\"columnProps\"]);\n var IconComponent = (columnProps === null || columnProps === void 0 ? void 0 : columnProps.useFastIcons) ? FontIcon : Icon;\n return React.createElement(IconComponent, __assign({}, iconProps));\n };\n };\n _this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {\n return React.createElement(\"span\", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);\n };\n _this._onColumnClick = function (ev) {\n var _a = _this.props, onColumnClick = _a.onColumnClick, column = _a.column;\n if (column.columnActionsMode === ColumnActionsMode.disabled) {\n return;\n }\n if (column.onColumnClick) {\n column.onColumnClick(ev, column);\n }\n if (onColumnClick) {\n onColumnClick(ev, column);\n }\n };\n _this._onColumnBlur = function () {\n _this._tooltipRef.current && _this._tooltipRef.current.dismiss();\n };\n _this._onColumnFocus = function () {\n _this._tooltipRef.current && _this._tooltipRef.current.show();\n };\n _this._onDragStart = function (item, itemIndex, selectedItems, event) {\n var classNames = _this._classNames;\n if (itemIndex) {\n _this._updateHeaderDragInfo(itemIndex);\n _this._root.current.classList.add(classNames.borderWhileDragging);\n _this._async.setTimeout(function () {\n if (_this._root.current) {\n _this._root.current.classList.add(classNames.noBorderWhileDragging);\n }\n }, CLASSNAME_ADD_INTERVAL);\n }\n };\n _this._onDragEnd = function (item, event) {\n var classNames = _this._classNames;\n if (event) {\n _this._updateHeaderDragInfo(-1, event);\n }\n _this._root.current.classList.remove(classNames.borderWhileDragging);\n _this._root.current.classList.remove(classNames.noBorderWhileDragging);\n };\n _this._updateHeaderDragInfo = function (itemIndex, event) {\n /* eslint-disable deprecation/deprecation */\n if (_this.props.setDraggedItemIndex) {\n _this.props.setDraggedItemIndex(itemIndex);\n }\n /* eslint-enable deprecation/deprecation */\n if (_this.props.updateDragInfo) {\n _this.props.updateDragInfo({ itemIndex: itemIndex }, event);\n }\n };\n _this._onColumnContextMenu = function (ev) {\n var _a = _this.props, onColumnContextMenu = _a.onColumnContextMenu, column = _a.column;\n if (column.onColumnContextMenu) {\n column.onColumnContextMenu(column, ev);\n ev.preventDefault();\n }\n if (onColumnContextMenu) {\n onColumnContextMenu(column, ev);\n ev.preventDefault();\n }\n };\n _this._onRootMouseDown = function (ev) {\n var isDraggable = _this.props.isDraggable;\n // Ignore anything except the primary button.\n if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n return _this;\n }\n DetailsColumnBase.prototype.render = function () {\n var _a = this.props, column = _a.column, parentId = _a.parentId, isDraggable = _a.isDraggable, styles = _a.styles, theme = _a.theme, _b = _a.cellStyleProps, cellStyleProps = _b === void 0 ? DEFAULT_CELL_STYLE_PROPS : _b, _c = _a.useFastIcons, useFastIcons = _c === void 0 ? true : _c;\n var _d = this.props.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _d === void 0 ? this._onRenderColumnHeaderTooltip : _d;\n this._classNames = getClassNames(styles, {\n theme: theme,\n headerClassName: column.headerClassName,\n iconClassName: column.iconClassName,\n isActionable: column.columnActionsMode !== ColumnActionsMode.disabled,\n isEmpty: !column.name,\n isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,\n isPadded: column.isPadded,\n isIconOnly: column.isIconOnly,\n cellStyleProps: cellStyleProps,\n transitionDurationDrag: TRANSITION_DURATION_DRAG,\n transitionDurationDrop: TRANSITION_DURATION_DROP,\n });\n var classNames = this._classNames;\n var IconComponent = useFastIcons ? FontIcon : Icon;\n var onRenderFilterIcon = column.onRenderFilterIcon\n ? composeRenderFunction(column.onRenderFilterIcon, this._onRenderFilterIcon(this._classNames))\n : this._onRenderFilterIcon(this._classNames);\n var onRenderHeader = column.onRenderHeader\n ? composeRenderFunction(column.onRenderHeader, defaultOnRenderHeader(this._classNames))\n : defaultOnRenderHeader(this._classNames);\n var hasInnerButton = column.columnActionsMode !== ColumnActionsMode.disabled &&\n (column.onColumnClick !== undefined || this.props.onColumnClick !== undefined);\n // use aria-describedby to point to the tooltip if the tooltip is not using the ariaLabel string\n var shouldAssociateTooltip = this.props.onRenderColumnHeaderTooltip\n ? !column.ariaLabel\n : this._hasAccessibleDescription();\n var accNameDescription = {\n 'aria-label': column.ariaLabel ? column.ariaLabel : column.isIconOnly ? column.name : undefined,\n 'aria-labelledby': column.ariaLabel || column.isIconOnly ? undefined : \"\".concat(parentId, \"-\").concat(column.key, \"-name\"),\n 'aria-describedby': shouldAssociateTooltip ? \"\".concat(parentId, \"-\").concat(column.key, \"-tooltip\") : undefined,\n };\n return (React.createElement(React.Fragment, null,\n React.createElement(\"div\", __assign({ key: column.key, ref: this._root, role: 'columnheader' }, (!hasInnerButton && accNameDescription), { \"aria-sort\": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none', \"data-is-focusable\": !hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined, className: classNames.root, \"data-is-draggable\": isDraggable, draggable: isDraggable, style: {\n width: column.calculatedWidth +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),\n }, \"data-automationid\": 'ColumnsHeaderColumn', \"data-item-key\": column.key, onBlur: this._onColumnBlur, onFocus: this._onColumnFocus }),\n isDraggable && (React.createElement(IconComponent, { iconName: \"GripperBarVertical\", className: classNames.gripperBarVerticalStyle })),\n onRenderColumnHeaderTooltip({\n hostClassName: classNames.cellTooltip,\n id: \"\".concat(parentId, \"-\").concat(column.key, \"-tooltip\"),\n setAriaDescribedBy: false,\n column: column,\n componentRef: this._tooltipRef,\n content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',\n children: (React.createElement(\"span\", __assign({ id: \"\".concat(parentId, \"-\").concat(column.key), className: classNames.cellTitle, \"data-is-focusable\": hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined, role: hasInnerButton ? 'button' : undefined }, (hasInnerButton && accNameDescription), { onContextMenu: this._onColumnContextMenu, onClick: this._onColumnClick, \"aria-haspopup\": column.columnActionsMode === ColumnActionsMode.hasDropdown ? 'menu' : undefined, \"aria-expanded\": column.columnActionsMode === ColumnActionsMode.hasDropdown ? !!column.isMenuOpen : undefined }),\n React.createElement(\"span\", { id: \"\".concat(parentId, \"-\").concat(column.key, \"-name\"), className: classNames.cellName },\n (column.iconName || column.iconClassName) && (React.createElement(IconComponent, { className: classNames.iconClassName, iconName: column.iconName })),\n onRenderHeader(this.props)),\n column.isFiltered && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: \"Filter\" }),\n (column.isSorted || column.showSortIconWhenUnsorted) && (React.createElement(IconComponent, { className: classNames.sortIcon, iconName: column.isSorted ? (column.isSortedDescending ? 'SortDown' : 'SortUp') : 'Sort' })),\n column.isGrouped && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: \"GroupedDescending\" }),\n column.columnActionsMode === ColumnActionsMode.hasDropdown &&\n !column.isIconOnly &&\n onRenderFilterIcon({\n 'aria-hidden': true,\n columnProps: this.props,\n className: classNames.filterChevron,\n iconName: 'ChevronDown',\n }))),\n }, this._onRenderColumnHeaderTooltip)),\n !this.props.onRenderColumnHeaderTooltip ? this._renderAccessibleDescription() : null));\n };\n DetailsColumnBase.prototype.componentDidMount = function () {\n var _this = this;\n if (this.props.dragDropHelper && this.props.isDraggable) {\n this._addDragDropHandling();\n }\n var classNames = this._classNames;\n if (this.props.isDropped) {\n if (this._root.current) {\n this._root.current.classList.add(classNames.borderAfterDropping);\n this._async.setTimeout(function () {\n if (_this._root.current) {\n _this._root.current.classList.add(classNames.noBorderAfterDropping);\n }\n }, CLASSNAME_ADD_INTERVAL);\n }\n this._async.setTimeout(function () {\n if (_this._root.current) {\n _this._root.current.classList.remove(classNames.borderAfterDropping);\n _this._root.current.classList.remove(classNames.noBorderAfterDropping);\n }\n }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL);\n }\n };\n DetailsColumnBase.prototype.componentWillUnmount = function () {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n this._async.dispose();\n this._events.dispose();\n };\n DetailsColumnBase.prototype.componentDidUpdate = function () {\n if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable) {\n this._addDragDropHandling();\n }\n if (this._dragDropSubscription && !this.props.isDraggable) {\n this._dragDropSubscription.dispose();\n this._events.off(this._root.current, 'mousedown');\n delete this._dragDropSubscription;\n }\n };\n DetailsColumnBase.prototype._getColumnDragDropOptions = function () {\n var _this = this;\n var columnIndex = this.props.columnIndex;\n var options = {\n selectionIndex: columnIndex,\n context: { data: columnIndex, index: columnIndex },\n canDrag: function () { return _this.props.isDraggable; },\n canDrop: function () { return false; },\n onDragStart: this._onDragStart,\n updateDropState: function () { return undefined; },\n onDrop: function () { return undefined; },\n onDragEnd: this._onDragEnd,\n };\n return options;\n };\n DetailsColumnBase.prototype._hasAccessibleDescription = function () {\n var column = this.props.column;\n return !!(column.filterAriaLabel ||\n column.sortAscendingAriaLabel ||\n column.sortDescendingAriaLabel ||\n column.groupAriaLabel ||\n column.sortableAriaLabel);\n };\n DetailsColumnBase.prototype._renderAccessibleDescription = function () {\n var _a = this.props, column = _a.column, parentId = _a.parentId;\n var classNames = this._classNames;\n return this._hasAccessibleDescription() && !this.props.onRenderColumnHeaderTooltip ? (React.createElement(\"label\", { key: \"\".concat(column.key, \"_label\"), id: \"\".concat(parentId, \"-\").concat(column.key, \"-tooltip\"), className: classNames.accessibleLabel, hidden: true },\n (column.isFiltered && column.filterAriaLabel) || null,\n ((column.isSorted || column.showSortIconWhenUnsorted) &&\n (column.isSorted\n ? column.isSortedDescending\n ? column.sortDescendingAriaLabel\n : column.sortAscendingAriaLabel\n : column.sortableAriaLabel)) ||\n null,\n (column.isGrouped && column.groupAriaLabel) || null)) : null;\n };\n DetailsColumnBase.prototype._addDragDropHandling = function () {\n this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getColumnDragDropOptions());\n // We need to use native on this to prevent MarqueeSelection from handling the event before us.\n this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);\n };\n return DetailsColumnBase;\n}(React.Component));\nexport { DetailsColumnBase };\n//# sourceMappingURL=DetailsColumn.base.js.map","import { styled } from '../../Utilities';\nimport { DetailsColumnBase } from './DetailsColumn.base';\nimport { getDetailsColumnStyles } from './DetailsColumn.styles';\nexport var DetailsColumn = styled(DetailsColumnBase, getDetailsColumnStyles, undefined, { scope: 'DetailsColumn' });\n//# sourceMappingURL=DetailsColumn.js.map","import { __assign } from \"tslib\";\nimport { getFocusStyle, getGlobalClassNames, hiddenContentStyle, FontWeights } from '../../Styling';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport { getCellStyles } from './DetailsHeader.styles';\nvar GlobalClassNames = {\n isActionable: 'is-actionable',\n cellIsCheck: 'ms-DetailsHeader-cellIsCheck',\n collapseButton: 'ms-DetailsHeader-collapseButton',\n isCollapsed: 'is-collapsed',\n isAllSelected: 'is-allSelected',\n isSelectAllHidden: 'is-selectAllHidden',\n isResizingColumn: 'is-resizingColumn',\n isEmpty: 'is-empty',\n isIconVisible: 'is-icon-visible',\n cellSizer: 'ms-DetailsHeader-cellSizer',\n isResizing: 'is-resizing',\n dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',\n dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',\n cellTitle: 'ms-DetailsHeader-cellTitle',\n cellName: 'ms-DetailsHeader-cellName',\n filterChevron: 'ms-DetailsHeader-filterChevron',\n gripperBarVerticalStyle: 'ms-DetailsColumn-gripperBar',\n nearIcon: 'ms-DetailsColumn-nearIcon',\n};\nexport var getDetailsColumnStyles = function (props) {\n var _a;\n var theme = props.theme, headerClassName = props.headerClassName, iconClassName = props.iconClassName, isActionable = props.isActionable, isEmpty = props.isEmpty, isIconVisible = props.isIconVisible, isPadded = props.isPadded, isIconOnly = props.isIconOnly, _b = props.cellStyleProps, cellStyleProps = _b === void 0 ? DEFAULT_CELL_STYLE_PROPS : _b, transitionDurationDrag = props.transitionDurationDrag, transitionDurationDrop = props.transitionDurationDrop;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n dropdownChevronForegroundColor: palette.neutralSecondary,\n resizerColor: palette.neutralTertiaryAlt,\n };\n var nearIconStyle = {\n color: colors.iconForegroundColor,\n opacity: 1,\n paddingLeft: 8,\n };\n var borderWhileDragging = {\n outline: \"1px solid \".concat(palette.themePrimary),\n };\n var borderAfterDragOrDrop = {\n outlineColor: 'transparent',\n };\n return {\n root: [\n getCellStyles(props),\n fonts.small,\n isActionable && [\n classNames.isActionable,\n {\n selectors: {\n ':hover': {\n color: semanticColors.bodyText,\n background: semanticColors.listHeaderBackgroundHovered,\n },\n ':active': {\n background: semanticColors.listHeaderBackgroundPressed,\n },\n },\n },\n ],\n isEmpty && [\n classNames.isEmpty,\n {\n textOverflow: 'clip',\n },\n ],\n isIconVisible && classNames.isIconVisible,\n isPadded && {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding,\n },\n {\n selectors: {\n ':hover i[data-icon-name=\"GripperBarVertical\"]': {\n display: 'block',\n },\n },\n },\n headerClassName,\n ],\n gripperBarVerticalStyle: {\n display: 'none',\n position: 'absolute',\n textAlign: 'left',\n color: palette.neutralTertiary,\n left: 1,\n },\n nearIcon: [classNames.nearIcon, nearIconStyle],\n sortIcon: [\n nearIconStyle,\n {\n paddingLeft: 4,\n position: 'relative',\n top: 1,\n },\n ],\n iconClassName: [\n {\n color: colors.iconForegroundColor,\n opacity: 1,\n },\n iconClassName,\n ],\n filterChevron: [\n classNames.filterChevron,\n {\n color: colors.dropdownChevronForegroundColor,\n paddingLeft: 6,\n verticalAlign: 'middle',\n fontSize: fonts.small.fontSize,\n },\n ],\n cellTitle: [\n classNames.cellTitle,\n getFocusStyle(theme),\n __assign({ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'stretch', boxSizing: 'border-box', overflow: 'hidden', padding: \"0 \".concat(cellStyleProps.cellRightPadding, \"px 0 \").concat(cellStyleProps.cellLeftPadding, \"px\") }, (isIconOnly\n ? {\n alignContent: 'flex-end',\n maxHeight: '100%',\n flexWrap: 'wrap-reverse',\n }\n : {})),\n ],\n cellName: [\n classNames.cellName,\n {\n flex: '0 1 auto',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n fontWeight: FontWeights.semibold,\n fontSize: fonts.medium.fontSize,\n },\n isIconOnly && {\n selectors: (_a = {},\n _a[\".\".concat(classNames.nearIcon)] = {\n paddingLeft: 0,\n },\n _a),\n },\n ],\n cellTooltip: {\n display: 'block',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n },\n accessibleLabel: hiddenContentStyle,\n borderWhileDragging: borderWhileDragging,\n noBorderWhileDragging: [borderAfterDragOrDrop, { transition: \"outline \".concat(transitionDurationDrag, \"ms ease\") }],\n borderAfterDropping: borderWhileDragging,\n noBorderAfterDropping: [borderAfterDragOrDrop, { transition: \"outline \".concat(transitionDurationDrop, \"ms ease\") }],\n };\n};\n//# sourceMappingURL=DetailsColumn.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, EventGroup, css, getRTL, getId, KeyCodes, classNamesFunction } from '../../Utilities';\nimport { ColumnDragEndLocation, CheckboxVisibility } from './DetailsList.types';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Icon, FontIcon } from '../../Icon';\nimport { Layer } from '../../Layer';\nimport { GroupSpacer } from '../GroupedList/GroupSpacer';\nimport { CollapseAllVisibility } from '../../GroupedList';\nimport { DetailsRowCheck } from './DetailsRowCheck';\nimport { SelectionMode, SELECTION_CHANGE } from '../../Selection';\nimport { DragDropHelper } from '../../DragDrop';\nimport { DetailsColumn } from '../../components/DetailsList/DetailsColumn';\nimport { SelectAllVisibility } from './DetailsHeader.types';\nvar getClassNames = classNamesFunction();\nvar MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nvar MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button\nvar NO_COLUMNS = [];\nvar DetailsHeaderBase = /** @class */ (function (_super) {\n __extends(DetailsHeaderBase, _super);\n function DetailsHeaderBase(props) {\n var _this = _super.call(this, props) || this;\n _this._rootElement = React.createRef();\n _this._rootComponent = React.createRef();\n _this._draggedColumnIndex = -1;\n _this._dropHintDetails = {};\n _this._updateDroppingState = function (newValue, event) {\n if (_this._draggedColumnIndex >= 0 && event.type !== 'drop' && !newValue) {\n _this._resetDropHints();\n }\n };\n _this._onDragOver = function (item, event) {\n if (_this._draggedColumnIndex >= 0) {\n event.stopPropagation();\n _this._computeDropHintToBeShown(event.clientX);\n }\n };\n _this._onDrop = function (item, event) {\n // Safe to assume this is defined since we're handling a drop event\n var columnReorderProps = _this._getColumnReorderProps();\n // Target index will not get changed if draggeditem is after target item.\n if (_this._draggedColumnIndex >= 0 && event) {\n var targetIndex = _this._draggedColumnIndex > _this._currentDropHintIndex\n ? _this._currentDropHintIndex\n : _this._currentDropHintIndex - 1;\n var isValidDrop = _this._isValidCurrentDropHintIndex();\n event.stopPropagation();\n if (isValidDrop) {\n _this._onDropIndexInfo.sourceIndex = _this._draggedColumnIndex;\n _this._onDropIndexInfo.targetIndex = targetIndex;\n if (columnReorderProps.onColumnDrop) {\n var dragDropDetails = {\n draggedIndex: _this._draggedColumnIndex,\n targetIndex: targetIndex,\n };\n columnReorderProps.onColumnDrop(dragDropDetails);\n /* eslint-disable deprecation/deprecation */\n }\n else if (columnReorderProps.handleColumnReorder) {\n columnReorderProps.handleColumnReorder(_this._draggedColumnIndex, targetIndex);\n /* eslint-enable deprecation/deprecation */\n }\n }\n }\n _this._resetDropHints();\n _this._dropHintDetails = {};\n _this._draggedColumnIndex = -1;\n };\n _this._computeColumnIndexOffset = function (showCheckbox) {\n var hasGroupExpander = _this.props.groupNestingDepth && _this.props.groupNestingDepth > 0;\n var offset = 1;\n if (showCheckbox) {\n offset += 1;\n }\n if (hasGroupExpander) {\n offset += 1;\n }\n return offset;\n };\n _this._updateDragInfo = function (props, event) {\n // Safe to assume this is defined since we're handling a drag event\n var columnReorderProps = _this._getColumnReorderProps();\n var itemIndex = props.itemIndex;\n if (itemIndex >= 0) {\n // Column index is set based on the checkbox\n _this._draggedColumnIndex = itemIndex - _this._computeColumnIndexOffset(!_this._isCheckboxColumnHidden());\n _this._getDropHintPositions();\n if (columnReorderProps.onColumnDragStart) {\n columnReorderProps.onColumnDragStart(true);\n }\n }\n else if (event && _this._draggedColumnIndex >= 0) {\n _this._resetDropHints();\n _this._draggedColumnIndex = -1;\n _this._dropHintDetails = {};\n if (columnReorderProps.onColumnDragEnd) {\n var columnDragEndLocation = _this._isEventOnHeader(event);\n columnReorderProps.onColumnDragEnd({ dropLocation: columnDragEndLocation }, event);\n }\n }\n };\n _this._getDropHintPositions = function () {\n var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n // Safe to assume this is defined since we're handling a drag/drop event\n var columnReorderProps = _this._getColumnReorderProps();\n var prevX = 0;\n var prevMid = 0;\n var prevRef;\n var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;\n var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;\n for (var i = frozenColumnCountFromStart; i < columns.length - frozenColumnCountFromEnd + 1; i++) {\n if (_this._rootElement.current) {\n var dropHintElement = _this._rootElement.current.querySelectorAll('#columnDropHint_' + i)[0];\n if (dropHintElement) {\n if (i === frozenColumnCountFromStart) {\n prevX = dropHintElement.offsetLeft;\n prevMid = dropHintElement.offsetLeft;\n prevRef = dropHintElement;\n }\n else {\n var newMid = (dropHintElement.offsetLeft + prevX) / 2;\n _this._dropHintDetails[i - 1] = {\n originX: prevX,\n startX: prevMid,\n endX: newMid,\n dropHintElementRef: prevRef,\n };\n prevMid = newMid;\n prevRef = dropHintElement;\n prevX = dropHintElement.offsetLeft;\n if (i === columns.length - frozenColumnCountFromEnd) {\n _this._dropHintDetails[i] = {\n originX: prevX,\n startX: prevMid,\n endX: dropHintElement.offsetLeft,\n dropHintElementRef: prevRef,\n };\n }\n }\n }\n }\n }\n };\n /**\n * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible\n */\n _this._computeDropHintToBeShown = function (clientX) {\n var isRtl = getRTL(_this.props.theme);\n if (_this._rootElement.current) {\n var clientRect = _this._rootElement.current.getBoundingClientRect();\n var headerOriginX = clientRect.left;\n var eventXRelativePosition = clientX - headerOriginX;\n var currentDropHintIndex = _this._currentDropHintIndex;\n if (_this._isValidCurrentDropHintIndex()) {\n if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex].startX, _this._dropHintDetails[currentDropHintIndex].endX)) {\n return;\n }\n }\n var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n // Safe to assume this is defined since we're handling a drag/drop event\n var columnReorderProps = _this._getColumnReorderProps();\n var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;\n var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;\n var currentIndex = frozenColumnCountFromStart;\n var lastValidColumn = columns.length - frozenColumnCountFromEnd;\n var indexToUpdate = -1;\n if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[currentIndex].endX)) {\n indexToUpdate = currentIndex;\n }\n else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[lastValidColumn].startX)) {\n indexToUpdate = lastValidColumn;\n }\n else if (_this._isValidCurrentDropHintIndex()) {\n if (_this._dropHintDetails[currentDropHintIndex + 1] &&\n _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex + 1].startX, _this._dropHintDetails[currentDropHintIndex + 1].endX)) {\n indexToUpdate = currentDropHintIndex + 1;\n }\n else if (_this._dropHintDetails[currentDropHintIndex - 1] &&\n _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex - 1].startX, _this._dropHintDetails[currentDropHintIndex - 1].endX)) {\n indexToUpdate = currentDropHintIndex - 1;\n }\n }\n if (indexToUpdate === -1) {\n var startIndex = frozenColumnCountFromStart;\n var endIndex = lastValidColumn;\n while (startIndex < endIndex) {\n var middleIndex = Math.ceil((endIndex + startIndex) / 2);\n if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].startX, _this._dropHintDetails[middleIndex].endX)) {\n indexToUpdate = middleIndex;\n break;\n }\n else if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {\n endIndex = middleIndex;\n }\n else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {\n startIndex = middleIndex;\n }\n }\n }\n if (indexToUpdate === _this._draggedColumnIndex || indexToUpdate === _this._draggedColumnIndex + 1) {\n if (_this._isValidCurrentDropHintIndex()) {\n _this._resetDropHints();\n }\n }\n else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {\n _this._resetDropHints();\n _this._updateDropHintElement(_this._dropHintDetails[indexToUpdate].dropHintElementRef, 'inline-block');\n _this._currentDropHintIndex = indexToUpdate;\n }\n }\n };\n _this._renderColumnSizer = function (_a) {\n var _b;\n var columnIndex = _a.columnIndex;\n var _c = _this.props.columns, columns = _c === void 0 ? NO_COLUMNS : _c;\n var column = columns[columnIndex];\n var columnResizeDetails = _this.state.columnResizeDetails;\n var classNames = _this._classNames;\n return column.isResizable ? (React.createElement(\"div\", { key: \"\".concat(column.key, \"_sizer\"), \"aria-hidden\": true, role: \"button\", \"data-is-focusable\": false, onClick: _stopPropagation, \"data-sizer-index\": columnIndex, onBlur: _this._onSizerBlur, className: css(classNames.cellSizer, columnIndex < columns.length - 1 ? classNames.cellSizerStart : classNames.cellSizerEnd, (_b = {},\n _b[classNames.cellIsResizing] = columnResizeDetails && columnResizeDetails.columnIndex === columnIndex,\n _b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) })) : null;\n };\n _this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {\n return React.createElement(\"span\", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);\n };\n /**\n * Called when the select all toggle is clicked.\n */\n _this._onSelectAllClicked = function () {\n var selection = _this.props.selection;\n if (selection) {\n selection.toggleAllSelected();\n }\n };\n _this._onRootMouseDown = function (ev) {\n var columnIndexAttr = ev.target.getAttribute('data-sizer-index');\n var columnIndex = Number(columnIndexAttr);\n var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {\n // Ignore anything except the primary button.\n return;\n }\n _this.setState({\n columnResizeDetails: {\n columnIndex: columnIndex,\n columnMinWidth: columns[columnIndex].calculatedWidth,\n originX: ev.clientX,\n },\n });\n ev.preventDefault();\n ev.stopPropagation();\n };\n _this._onRootMouseMove = function (ev) {\n var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;\n if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {\n _this.setState({ isSizing: true });\n }\n };\n _this._onRootKeyDown = function (ev) {\n var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;\n var _b = _this.props, _c = _b.columns, columns = _c === void 0 ? NO_COLUMNS : _c, onColumnResized = _b.onColumnResized;\n var columnIndexAttr = ev.target.getAttribute('data-sizer-index');\n if (!columnIndexAttr || isSizing) {\n return;\n }\n var columnIndex = Number(columnIndexAttr);\n if (!columnResizeDetails) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this.setState({\n columnResizeDetails: {\n columnIndex: columnIndex,\n columnMinWidth: columns[columnIndex].calculatedWidth,\n },\n });\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n else {\n var increment = void 0;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this.setState({\n columnResizeDetails: undefined,\n });\n ev.preventDefault();\n ev.stopPropagation();\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.left) {\n increment = getRTL(_this.props.theme) ? 1 : -1;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.right) {\n increment = getRTL(_this.props.theme) ? -1 : 1;\n }\n if (increment) {\n if (!ev.shiftKey) {\n increment *= 10;\n }\n _this.setState({\n columnResizeDetails: __assign(__assign({}, columnResizeDetails), { columnMinWidth: columnResizeDetails.columnMinWidth + increment }),\n });\n if (onColumnResized) {\n onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n /**\n * mouse move event handler in the header\n * it will set isSizing state to true when user clicked on the sizer and move the mouse.\n *\n * @param ev - mouse move event\n */\n _this._onSizerMouseMove = function (ev) {\n var \n // use buttons property here since ev.button in some edge case is not upding well during the move.\n // but firefox doesn't support it, so we set the default value when it is not defined.\n buttons = ev.buttons;\n var _a = _this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;\n var columnResizeDetails = _this.state.columnResizeDetails;\n if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {\n // cancel mouse down event and return early when the primary button is not pressed\n _this._onSizerMouseUp(ev);\n return;\n }\n if (ev.clientX !== columnResizeDetails.originX) {\n if (onColumnIsSizingChanged) {\n onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);\n }\n }\n if (onColumnResized) {\n var movement = ev.clientX - columnResizeDetails.originX;\n if (getRTL(_this.props.theme)) {\n movement = -movement;\n }\n onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement, columnResizeDetails.columnIndex);\n }\n };\n _this._onSizerBlur = function (ev) {\n var columnResizeDetails = _this.state.columnResizeDetails;\n if (columnResizeDetails) {\n _this.setState({\n columnResizeDetails: undefined,\n isSizing: false,\n });\n }\n };\n /**\n * mouse up event handler in the header\n * clear the resize related state.\n * This is to ensure we can catch double click event\n *\n * @param ev - mouse up event\n */\n _this._onSizerMouseUp = function (ev) {\n var _a = _this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;\n var columnResizeDetails = _this.state.columnResizeDetails;\n _this.setState({\n columnResizeDetails: undefined,\n isSizing: false,\n });\n if (onColumnIsSizingChanged) {\n onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);\n }\n };\n _this._onToggleCollapseAll = function () {\n var onToggleCollapseAll = _this.props.onToggleCollapseAll;\n var newCollapsed = !_this.state.isAllCollapsed;\n _this.setState({\n isAllCollapsed: newCollapsed,\n });\n if (onToggleCollapseAll) {\n onToggleCollapseAll(newCollapsed);\n }\n };\n initializeComponentRef(_this);\n _this._events = new EventGroup(_this);\n _this.state = {\n columnResizeDetails: undefined,\n isAllCollapsed: _this.props.isAllCollapsed,\n isAllSelected: !!_this.props.selection && _this.props.selection.isAllSelected(),\n };\n _this._onDropIndexInfo = {\n sourceIndex: -1,\n targetIndex: -1,\n };\n _this._id = getId('header');\n _this._currentDropHintIndex = -1;\n // The drag drop handler won't do any work until subscribe() is called,\n // so always set it up for convenience\n _this._dragDropHelper = new DragDropHelper({\n selection: {\n getSelection: function () {\n return;\n },\n },\n minimumPixelsForDrag: _this.props.minimumPixelsForDrag,\n });\n return _this;\n }\n DetailsHeaderBase.prototype.componentDidMount = function () {\n var selection = this.props.selection;\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);\n // this._rootElement.current will be null in tests using react-test-renderer\n if (this._rootElement.current) {\n // We need to use native on this to prevent MarqueeSelection from handling the event before us.\n this._events.on(this._rootElement.current, 'mousedown', this._onRootMouseDown);\n this._events.on(this._rootElement.current, 'keydown', this._onRootKeyDown);\n if (this._getColumnReorderProps()) {\n this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());\n }\n }\n };\n DetailsHeaderBase.prototype.componentDidUpdate = function (prevProps) {\n if (this._getColumnReorderProps()) {\n if (!this._subscriptionObject && this._rootElement.current) {\n this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());\n }\n }\n else if (this._subscriptionObject) {\n this._subscriptionObject.dispose();\n delete this._subscriptionObject;\n }\n if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {\n var _a = prevProps.columns, previousColumns = _a === void 0 ? NO_COLUMNS : _a;\n var _b = this.props.columns, columns = _b === void 0 ? NO_COLUMNS : _b;\n if (previousColumns[this._onDropIndexInfo.sourceIndex].key === columns[this._onDropIndexInfo.targetIndex].key) {\n this._onDropIndexInfo = {\n sourceIndex: -1,\n targetIndex: -1,\n };\n }\n }\n if (this.props.isAllCollapsed !== prevProps.isAllCollapsed) {\n this.setState({ isAllCollapsed: this.props.isAllCollapsed });\n }\n };\n DetailsHeaderBase.prototype.componentWillUnmount = function () {\n if (this._subscriptionObject) {\n this._subscriptionObject.dispose();\n delete this._subscriptionObject;\n }\n this._dragDropHelper.dispose();\n this._events.dispose();\n };\n DetailsHeaderBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, ariaLabel = _a.ariaLabel, ariaLabelForToggleAllGroupsButton = _a.ariaLabelForToggleAllGroupsButton, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, indentWidth = _a.indentWidth, onColumnClick = _a.onColumnClick, onColumnContextMenu = _a.onColumnContextMenu, _c = _a.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _c === void 0 ? this._onRenderColumnHeaderTooltip : _c, styles = _a.styles, selectionMode = _a.selectionMode, theme = _a.theme, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, groupNestingDepth = _a.groupNestingDepth, useFastIcons = _a.useFastIcons, checkboxVisibility = _a.checkboxVisibility, className = _a.className;\n var _d = this.state, isAllSelected = _d.isAllSelected, columnResizeDetails = _d.columnResizeDetails, isSizing = _d.isSizing, isAllCollapsed = _d.isAllCollapsed;\n var showCheckbox = selectAllVisibility !== SelectAllVisibility.none;\n var isCheckboxHidden = selectAllVisibility === SelectAllVisibility.hidden;\n var isCheckboxAlwaysVisible = checkboxVisibility === CheckboxVisibility.always;\n var columnReorderProps = this._getColumnReorderProps();\n var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart\n ? columnReorderProps.frozenColumnCountFromStart\n : 0;\n var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd\n ? columnReorderProps.frozenColumnCountFromEnd\n : 0;\n this._classNames = getClassNames(styles, {\n theme: theme,\n isAllSelected: isAllSelected,\n isSelectAllHidden: selectAllVisibility === SelectAllVisibility.hidden,\n isResizingColumn: !!columnResizeDetails && isSizing,\n isSizing: isSizing,\n isAllCollapsed: isAllCollapsed,\n isCheckboxHidden: isCheckboxHidden,\n className: className,\n });\n var classNames = this._classNames;\n var IconComponent = useFastIcons ? FontIcon : Icon;\n var hasGroupExpander = groupNestingDepth > 0;\n var showGroupExpander = hasGroupExpander && this.props.collapseAllVisibility === CollapseAllVisibility.visible;\n var columnIndexOffset = this._computeColumnIndexOffset(showCheckbox);\n var isRTL = getRTL(theme);\n return (React.createElement(FocusZone, { role: \"row\", \"aria-label\": ariaLabel, className: classNames.root, componentRef: this._rootComponent, elementRef: this._rootElement, onMouseMove: this._onRootMouseMove, \"data-automationid\": \"DetailsHeader\", direction: FocusZoneDirection.horizontal },\n showCheckbox\n ? [\n React.createElement(\"div\", { key: \"__checkbox\", className: classNames.cellIsCheck, \"aria-labelledby\": \"\".concat(this._id, \"-checkTooltip\"), onClick: !isCheckboxHidden ? this._onSelectAllClicked : undefined, role: 'columnheader' }, onRenderColumnHeaderTooltip({\n hostClassName: classNames.checkTooltip,\n id: \"\".concat(this._id, \"-checkTooltip\"),\n setAriaDescribedBy: false,\n content: ariaLabelForSelectAllCheckbox,\n children: (React.createElement(DetailsRowCheck, { id: \"\".concat(this._id, \"-check\"), \"aria-label\": selectionMode === SelectionMode.multiple\n ? ariaLabelForSelectAllCheckbox\n : ariaLabelForSelectionColumn, \"data-is-focusable\": !isCheckboxHidden || undefined, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: !isCheckboxHidden, className: classNames.check, onRenderDetailsCheckbox: onRenderDetailsCheckbox, useFastIcons: useFastIcons, isVisible: isCheckboxAlwaysVisible })),\n }, this._onRenderColumnHeaderTooltip)),\n !this.props.onRenderColumnHeaderTooltip ? (ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (React.createElement(\"label\", { key: \"__checkboxLabel\", id: \"\".concat(this._id, \"-checkTooltip\"), className: classNames.accessibleLabel, \"aria-hidden\": true }, ariaLabelForSelectAllCheckbox)) : ariaLabelForSelectionColumn && isCheckboxHidden ? (React.createElement(\"label\", { key: \"__checkboxLabel\", id: \"\".concat(this._id, \"-checkTooltip\"), className: classNames.accessibleLabel, \"aria-hidden\": true }, ariaLabelForSelectionColumn)) : null) : null,\n ]\n : null,\n showGroupExpander ? (React.createElement(\"div\", { className: classNames.cellIsGroupExpander, onClick: this._onToggleCollapseAll, \"data-is-focusable\": true, \"aria-label\": ariaLabelForToggleAllGroupsButton, \"aria-expanded\": !isAllCollapsed, role: \"columnheader\" },\n React.createElement(IconComponent, { className: classNames.collapseButton, iconName: isRTL ? 'ChevronLeftMed' : 'ChevronRightMed' }),\n React.createElement(\"span\", { className: classNames.accessibleLabel }, ariaLabelForToggleAllGroupsButton))) : hasGroupExpander ? (React.createElement(\"div\", { className: classNames.cellIsGroupExpander, \"data-is-focusable\": false, role: \"columnheader\" })) : null,\n React.createElement(GroupSpacer, { indentWidth: indentWidth, role: \"gridcell\", count: groupNestingDepth - 1 }),\n columns.map(function (column, columnIndex) {\n var _isDraggable = columnReorderProps\n ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd\n : false;\n return [\n columnReorderProps &&\n (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&\n _this._renderDropHint(columnIndex),\n React.createElement(DetailsColumn, { column: column, styles: column.styles, key: column.key, columnIndex: columnIndexOffset + columnIndex, parentId: _this._id, isDraggable: _isDraggable, updateDragInfo: _this._updateDragInfo, dragDropHelper: _this._dragDropHelper, onColumnClick: onColumnClick, onColumnContextMenu: onColumnContextMenu, \n // Do not render tooltips by default, but allow for override via props.\n onRenderColumnHeaderTooltip: _this.props.onRenderColumnHeaderTooltip, isDropped: _this._onDropIndexInfo.targetIndex === columnIndex, cellStyleProps: _this.props.cellStyleProps, useFastIcons: useFastIcons }),\n _this._renderColumnDivider(columnIndex),\n ];\n }),\n columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length),\n isSizing && (React.createElement(Layer, null,\n React.createElement(\"div\", { className: classNames.sizingOverlay, onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));\n };\n /** Set focus to the active thing in the focus area. */\n DetailsHeaderBase.prototype.focus = function () {\n var _a;\n return !!((_a = this._rootComponent.current) === null || _a === void 0 ? void 0 : _a.focus());\n };\n /**\n * Gets column reorder props from this.props. If the calling code is part of setting up or\n * handling drag/drop events, it's safe to assume that this method's return value is defined\n * (because drag/drop handling will only be set up if reorder props are given).\n */\n DetailsHeaderBase.prototype._getColumnReorderProps = function () {\n var _a = this.props, columnReorderOptions = _a.columnReorderOptions, columnReorderProps = _a.columnReorderProps;\n return columnReorderProps || (columnReorderOptions && __assign(__assign({}, columnReorderOptions), { onColumnDragEnd: undefined }));\n };\n DetailsHeaderBase.prototype._getHeaderDragDropOptions = function () {\n var options = {\n selectionIndex: 1,\n context: { data: this, index: 0 },\n canDrag: function () { return false; },\n canDrop: function () { return true; },\n onDragStart: function () { return undefined; },\n updateDropState: this._updateDroppingState,\n onDrop: this._onDrop,\n onDragEnd: function () { return undefined; },\n onDragOver: this._onDragOver,\n };\n return options;\n };\n DetailsHeaderBase.prototype._isValidCurrentDropHintIndex = function () {\n return this._currentDropHintIndex >= 0;\n };\n /**\n * @returns whether or not the \"Select All\" checkbox column is hidden.\n */\n DetailsHeaderBase.prototype._isCheckboxColumnHidden = function () {\n var _a = this.props, selectionMode = _a.selectionMode, checkboxVisibility = _a.checkboxVisibility;\n return selectionMode === SelectionMode.none || checkboxVisibility === CheckboxVisibility.hidden;\n };\n DetailsHeaderBase.prototype._resetDropHints = function () {\n if (this._currentDropHintIndex >= 0) {\n this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'none');\n this._currentDropHintIndex = -1;\n }\n };\n DetailsHeaderBase.prototype._updateDropHintElement = function (element, displayProperty) {\n element.childNodes[1].style.display = displayProperty;\n element.childNodes[0].style.display = displayProperty;\n };\n DetailsHeaderBase.prototype._isEventOnHeader = function (event) {\n if (this._rootElement.current) {\n var clientRect = this._rootElement.current.getBoundingClientRect();\n if (event.clientX > clientRect.left &&\n event.clientX < clientRect.right &&\n event.clientY > clientRect.top &&\n event.clientY < clientRect.bottom) {\n return ColumnDragEndLocation.header;\n }\n }\n };\n DetailsHeaderBase.prototype._renderColumnDivider = function (columnIndex) {\n var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n var column = columns[columnIndex];\n var onRenderDivider = column.onRenderDivider;\n return onRenderDivider\n ? onRenderDivider({ column: column, columnIndex: columnIndex }, this._renderColumnSizer)\n : this._renderColumnSizer({ column: column, columnIndex: columnIndex });\n };\n DetailsHeaderBase.prototype._renderDropHint = function (dropHintIndex) {\n var classNames = this._classNames;\n var IconComponent = this.props.useFastIcons ? FontIcon : Icon;\n return (React.createElement(\"div\", { key: 'dropHintKey', className: classNames.dropHintStyle, id: \"columnDropHint_\".concat(dropHintIndex) },\n React.createElement(\"div\", { role: \"presentation\", key: \"dropHintCircleKey\", className: classNames.dropHintCaretStyle, \"data-is-focusable\": false, \"data-sizer-index\": dropHintIndex, \"aria-hidden\": true },\n React.createElement(IconComponent, { iconName: 'CircleShapeSolid' })),\n React.createElement(\"div\", { key: \"dropHintLineKey\", \"aria-hidden\": true, \"data-is-focusable\": false, \"data-sizer-index\": dropHintIndex, className: classNames.dropHintLineStyle })));\n };\n /**\n * double click on the column sizer will auto ajust column width\n * to fit the longest content among current rendered rows.\n *\n * @param columnIndex - index of the column user double clicked\n * @param ev - mouse double click event\n */\n DetailsHeaderBase.prototype._onSizerDoubleClick = function (columnIndex, ev) {\n var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;\n if (onColumnAutoResized) {\n onColumnAutoResized(columns[columnIndex], columnIndex);\n }\n };\n DetailsHeaderBase.prototype._onSelectionChanged = function () {\n var isAllSelected = !!this.props.selection && this.props.selection.isAllSelected();\n if (this.state.isAllSelected !== isAllSelected) {\n this.setState({\n isAllSelected: isAllSelected,\n });\n }\n };\n DetailsHeaderBase.defaultProps = {\n selectAllVisibility: SelectAllVisibility.visible,\n collapseAllVisibility: CollapseAllVisibility.visible,\n useFastIcons: true,\n };\n return DetailsHeaderBase;\n}(React.Component));\nexport { DetailsHeaderBase };\nfunction _liesBetween(rtl, target, left, right) {\n return rtl ? target <= left && target >= right : target >= left && target <= right;\n}\nfunction _isBefore(rtl, a, b) {\n return rtl ? a >= b : a <= b;\n}\nfunction _isAfter(rtl, a, b) {\n return rtl ? a <= b : a >= b;\n}\nfunction _stopPropagation(ev) {\n ev.stopPropagation();\n}\n//# sourceMappingURL=DetailsHeader.base.js.map","import { styled } from '../../Utilities';\nimport { DetailsHeaderBase } from './DetailsHeader.base';\nimport { getDetailsHeaderStyles } from './DetailsHeader.styles';\nexport var DetailsHeader = styled(DetailsHeaderBase, getDetailsHeaderStyles, undefined, { scope: 'DetailsHeader' });\n//# sourceMappingURL=DetailsHeader.js.map","import { __assign } from \"tslib\";\nimport { getFocusStyle, focusClear, getGlobalClassNames, HighContrastSelector, hiddenContentStyle, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPANDER_WIDTH } from '../GroupedList/GroupSpacer';\nvar GlobalClassNames = {\n tooltipHost: 'ms-TooltipHost',\n root: 'ms-DetailsHeader',\n cell: 'ms-DetailsHeader-cell',\n cellIsCheck: 'ms-DetailsHeader-cellIsCheck',\n collapseButton: 'ms-DetailsHeader-collapseButton',\n isCollapsed: 'is-collapsed',\n isAllSelected: 'is-allSelected',\n isSelectAllHidden: 'is-selectAllHidden',\n isResizingColumn: 'is-resizingColumn',\n cellSizer: 'ms-DetailsHeader-cellSizer',\n isResizing: 'is-resizing',\n dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',\n dropHintCaretStyle: 'ms-DetailsHeader-dropHintCaretStyle',\n dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',\n cellTitle: 'ms-DetailsHeader-cellTitle',\n cellName: 'ms-DetailsHeader-cellName',\n filterChevron: 'ms-DetailsHeader-filterChevron',\n gripperBarVertical: 'ms-DetailsColumn-gripperBarVertical',\n checkTooltip: 'ms-DetailsHeader-checkTooltip',\n check: 'ms-DetailsHeader-check',\n};\nexport var HEADER_HEIGHT = 42;\nexport var getCellStyles = function (props) {\n var theme = props.theme, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n var semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return [\n classNames.cell,\n getFocusStyle(theme),\n {\n color: semanticColors.bodyText,\n position: 'relative',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: \"0 \".concat(cellStyleProps.cellRightPadding, \"px 0 \").concat(cellStyleProps.cellLeftPadding, \"px\"),\n lineHeight: 'inherit',\n margin: '0',\n height: HEADER_HEIGHT,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'left',\n },\n ];\n};\nexport var getDetailsHeaderStyles = function (props) {\n var _a, _b, _c, _d;\n var theme = props.theme, className = props.className, isAllSelected = props.isAllSelected, isResizingColumn = props.isResizingColumn, isSizing = props.isSizing, isAllCollapsed = props.isAllCollapsed, _e = props.cellStyleProps, cellStyleProps = _e === void 0 ? DEFAULT_CELL_STYLE_PROPS : _e;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n resizerColor: palette.neutralTertiaryAlt,\n };\n var cellSizerFadeInStyles = {\n opacity: 1,\n transition: 'opacity 0.3s linear',\n };\n var cellStyles = getCellStyles(props);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n display: 'inline-block',\n background: colors.headerBackgroundColor,\n position: 'relative',\n minWidth: '100%',\n verticalAlign: 'top',\n height: HEADER_HEIGHT,\n lineHeight: HEADER_HEIGHT,\n whiteSpace: 'nowrap',\n boxSizing: 'content-box',\n paddingBottom: '1px',\n paddingTop: '16px',\n borderBottom: \"1px solid \".concat(semanticColors.bodyDivider),\n cursor: 'default',\n userSelect: 'none',\n selectors: (_a = {},\n _a[\"&:hover .\".concat(classNames.check)] = {\n opacity: 1,\n },\n _a[\"& .\".concat(classNames.tooltipHost, \" .\").concat(classNames.checkTooltip)] = {\n display: 'block',\n },\n _a),\n },\n isAllSelected && classNames.isAllSelected,\n isResizingColumn && classNames.isResizingColumn,\n className,\n ],\n check: [\n classNames.check,\n {\n height: HEADER_HEIGHT,\n },\n {\n selectors: (_b = {},\n _b[\".\".concat(IsFocusVisibleClassName, \" &:focus\")] = {\n opacity: 1,\n },\n _b),\n },\n ],\n cellWrapperPadded: {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding,\n },\n cellIsCheck: [\n cellStyles,\n classNames.cellIsCheck,\n {\n position: 'relative',\n padding: 0,\n margin: 0,\n display: 'inline-flex',\n alignItems: 'center',\n border: 'none',\n },\n isAllSelected && {\n opacity: 1,\n },\n ],\n cellIsGroupExpander: [\n cellStyles,\n {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: fonts.small.fontSize,\n padding: 0,\n border: 'none',\n width: GROUP_EXPANDER_WIDTH,\n color: palette.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: palette.neutralLighter,\n },\n ':active': {\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n cellIsActionable: {\n selectors: {\n ':hover': {\n color: semanticColors.bodyText,\n background: semanticColors.listHeaderBackgroundHovered,\n },\n ':active': {\n background: semanticColors.listHeaderBackgroundPressed,\n },\n },\n },\n cellIsEmpty: {\n textOverflow: 'clip',\n },\n cellSizer: [\n classNames.cellSizer,\n focusClear(),\n {\n display: 'inline-block',\n position: 'relative',\n cursor: 'ew-resize',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 'inherit',\n background: 'transparent',\n zIndex: 1,\n width: 16,\n selectors: (_c = {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: 1,\n background: colors.resizerColor,\n opacity: 0,\n left: '50%',\n },\n ':focus:after': cellSizerFadeInStyles,\n ':hover:after': cellSizerFadeInStyles\n },\n _c[\"&.\".concat(classNames.isResizing, \":after\")] = [\n cellSizerFadeInStyles,\n {\n boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n },\n ],\n _c),\n },\n ],\n cellIsResizing: classNames.isResizing,\n cellSizerStart: {\n margin: '0 -8px',\n },\n cellSizerEnd: {\n margin: 0,\n marginLeft: -16,\n },\n collapseButton: [\n classNames.collapseButton,\n {\n transformOrigin: '50% 50%',\n transition: 'transform .1s linear',\n },\n isAllCollapsed\n ? [\n classNames.isCollapsed,\n {\n transform: 'rotate(0deg)',\n },\n ]\n : {\n transform: getRTL(theme) ? 'rotate(-90deg)' : 'rotate(90deg)',\n },\n ],\n checkTooltip: classNames.checkTooltip,\n sizingOverlay: isSizing && {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n cursor: 'ew-resize',\n background: 'rgba(255, 255, 255, 0)',\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ background: 'transparent' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n accessibleLabel: hiddenContentStyle,\n dropHintCircleStyle: [\n classNames.dropHintCircleStyle,\n {\n display: 'inline-block',\n visibility: 'hidden',\n position: 'absolute',\n bottom: 0,\n height: 9,\n width: 9,\n borderRadius: '50%',\n marginLeft: -5,\n top: 34,\n overflow: 'visible',\n zIndex: 10,\n border: \"1px solid \".concat(palette.themePrimary),\n background: palette.white,\n },\n ],\n dropHintCaretStyle: [\n classNames.dropHintCaretStyle,\n {\n display: 'none',\n position: 'absolute',\n top: -28,\n left: -6.5,\n fontSize: fonts.medium.fontSize,\n color: palette.themePrimary,\n overflow: 'visible',\n zIndex: 10,\n },\n ],\n dropHintLineStyle: [\n classNames.dropHintLineStyle,\n {\n display: 'none',\n position: 'absolute',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 42,\n width: 1,\n background: palette.themePrimary,\n zIndex: 10,\n },\n ],\n dropHintStyle: {\n display: 'inline-block',\n position: 'absolute',\n },\n };\n};\n//# sourceMappingURL=DetailsHeader.styles.js.map","/**\n * {@docCategory DetailsList}\n */\nexport var SelectAllVisibility;\n(function (SelectAllVisibility) {\n SelectAllVisibility[SelectAllVisibility[\"none\"] = 0] = \"none\";\n SelectAllVisibility[SelectAllVisibility[\"hidden\"] = 1] = \"hidden\";\n SelectAllVisibility[SelectAllVisibility[\"visible\"] = 2] = \"visible\";\n})(SelectAllVisibility || (SelectAllVisibility = {}));\n//# sourceMappingURL=DetailsHeader.types.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, FocusRects, Async, KeyCodes, elementContains, getRTLSafeKeyCode, classNamesFunction, css, memoizeFunction, warnMutuallyExclusive, } from '../../Utilities';\nimport { CheckboxVisibility, ColumnActionsMode, ConstrainMode, DetailsListLayoutMode, ColumnDragEndLocation, } from '../DetailsList/DetailsList.types';\nimport { DetailsHeader } from '../DetailsList/DetailsHeader';\nimport { SelectAllVisibility } from '../DetailsList/DetailsHeader.types';\nimport { DetailsRow } from '../DetailsList/DetailsRow';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Selection, SelectionMode, SelectionZone } from '../../Selection';\nimport { DragDropHelper } from '../../DragDrop';\nimport { GroupedList } from '../../GroupedList';\nimport { List } from '../../List';\nimport { withViewport } from '../../utilities/decorators/withViewport';\nimport { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport { CHECK_CELL_WIDTH as CHECKBOX_WIDTH } from './DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPAND_WIDTH } from '../GroupedList/GroupSpacer';\nimport { composeComponentAs, composeRenderFunction, getId } from '@fluentui/utilities';\nimport { useConst } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'DetailsList';\nvar MIN_COLUMN_WIDTH = 100; // this is the global min width\nvar DEFAULT_RENDERED_WINDOWS_AHEAD = 2;\nvar DEFAULT_RENDERED_WINDOWS_BEHIND = 2;\nvar rowFocusZoneAddTabIndexProps = { tabIndex: 0 };\nvar rowFocusZoneNoTabIndexProps = {};\n/**\n * Hooks-based implementation of DetailsList.\n * Since many existing consumers of DetailsList expect `ref` to return a `DetailsList`,\n * this inner component handles rendering while the outer maintains compatibility.\n */\nvar DetailsListInner = function (props) {\n var selection = props.selection;\n var ariaLabelForListHeader = props.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = props.ariaLabelForSelectAllCheckbox, ariaLabelForSelectionColumn = props.ariaLabelForSelectionColumn, className = props.className, checkboxVisibility = props.checkboxVisibility, compact = props.compact, constrainMode = props.constrainMode, dragDropEvents = props.dragDropEvents, groups = props.groups, groupProps = props.groupProps, indentWidth = props.indentWidth, items = props.items, isPlaceholderData = props.isPlaceholderData, isHeaderVisible = props.isHeaderVisible, layoutMode = props.layoutMode, onItemInvoked = props.onItemInvoked, onItemContextMenu = props.onItemContextMenu, onColumnHeaderClick = props.onColumnHeaderClick, onColumnHeaderContextMenu = props.onColumnHeaderContextMenu, _a = props.selectionMode, selectionMode = _a === void 0 ? selection.mode : _a, selectionPreservedOnEmptyClick = props.selectionPreservedOnEmptyClick, selectionZoneProps = props.selectionZoneProps, \n // eslint-disable-next-line deprecation/deprecation\n ariaLabel = props.ariaLabel, ariaLabelForGrid = props.ariaLabelForGrid, rowElementEventMap = props.rowElementEventMap, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.shouldApplyApplicationRole, \n // eslint-disable-next-line deprecation/deprecation\n shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = props.getKey, listProps = props.listProps, usePageCache = props.usePageCache, onShouldVirtualize = props.onShouldVirtualize, viewport = props.viewport, minimumPixelsForDrag = props.minimumPixelsForDrag, getGroupHeight = props.getGroupHeight, styles = props.styles, theme = props.theme, _c = props.cellStyleProps, cellStyleProps = _c === void 0 ? DEFAULT_CELL_STYLE_PROPS : _c, onRenderCheckbox = props.onRenderCheckbox, useFastIcons = props.useFastIcons, dragDropHelper = props.dragDropHelper, adjustedColumns = props.adjustedColumns, isCollapsed = props.isCollapsed, isSizing = props.isSizing, isSomeGroupExpanded = props.isSomeGroupExpanded, version = props.version, rootRef = props.rootRef, listRef = props.listRef, focusZoneRef = props.focusZoneRef, columnReorderOptions = props.columnReorderOptions, groupedListRef = props.groupedListRef, headerRef = props.headerRef, onGroupExpandStateChanged = props.onGroupExpandStateChanged, onColumnIsSizingChanged = props.onColumnIsSizingChanged, onRowDidMount = props.onRowDidMount, onRowWillUnmount = props.onRowWillUnmount, disableSelectionZone = props.disableSelectionZone, _d = props.isSelectedOnFocus, isSelectedOnFocus = _d === void 0 ? true : _d, onColumnResized = props.onColumnResized, onColumnAutoResized = props.onColumnAutoResized, onToggleCollapse = props.onToggleCollapse, onActiveRowChanged = props.onActiveRowChanged, onBlur = props.onBlur, eventsToRegister = props.rowElementEventMap, onRenderMissingItem = props.onRenderMissingItem, onRenderItemColumn = props.onRenderItemColumn, onRenderField = props.onRenderField, getCellValueKey = props.getCellValueKey, getRowAriaLabel = props.getRowAriaLabel, getRowAriaDescribedBy = props.getRowAriaDescribedBy, checkButtonAriaLabel = props.checkButtonAriaLabel, checkButtonGroupAriaLabel = props.checkButtonGroupAriaLabel, checkboxCellClassName = props.checkboxCellClassName, useReducedRowRenderer = props.useReducedRowRenderer, enableUpdateAnimations = props.enableUpdateAnimations, enterModalSelectionOnTouch = props.enterModalSelectionOnTouch, onRenderDefaultRow = props.onRenderDefaultRow, selectionZoneRef = props.selectionZoneRef, focusZoneProps = props.focusZoneProps;\n var defaultRole = 'grid';\n var role = props.role ? props.role : defaultRole;\n var rowId = getId('row');\n var groupNestingDepth = getGroupNestingDepth(groups);\n var groupedDetailsListIndexMap = useGroupedDetailsListIndexMap(groups);\n var additionalListProps = React.useMemo(function () {\n return __assign({ renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD, renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND, getKey: getKey, version: version }, listProps);\n }, [isSizing, getKey, version, listProps]);\n var selectAllVisibility = SelectAllVisibility.none; // for SelectionMode.none\n if (selectionMode === SelectionMode.single) {\n selectAllVisibility = SelectAllVisibility.hidden;\n }\n if (selectionMode === SelectionMode.multiple) {\n // if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups\n var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;\n if (isCollapsedGroupSelectVisible === undefined) {\n isCollapsedGroupSelectVisible = true;\n }\n var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;\n selectAllVisibility = isSelectAllVisible ? SelectAllVisibility.visible : SelectAllVisibility.hidden;\n }\n if (checkboxVisibility === CheckboxVisibility.hidden) {\n selectAllVisibility = SelectAllVisibility.none;\n }\n var defaultOnRenderDetailsHeader = React.useCallback(function (detailsHeaderProps) {\n return React.createElement(DetailsHeader, __assign({}, detailsHeaderProps));\n }, []);\n var defaultOnRenderDetailsFooter = React.useCallback(function () {\n return null;\n }, []);\n var propsOnRenderDetailsHeader = props.onRenderDetailsHeader;\n var onRenderDetailsHeader = React.useMemo(function () {\n return propsOnRenderDetailsHeader\n ? composeRenderFunction(propsOnRenderDetailsHeader, defaultOnRenderDetailsHeader)\n : defaultOnRenderDetailsHeader;\n }, [propsOnRenderDetailsHeader, defaultOnRenderDetailsHeader]);\n var propsOnRenderDetailsFooter = props.onRenderDetailsFooter;\n var onRenderDetailsFooter = React.useMemo(function () {\n return propsOnRenderDetailsFooter\n ? composeRenderFunction(propsOnRenderDetailsFooter, defaultOnRenderDetailsFooter)\n : defaultOnRenderDetailsFooter;\n }, [propsOnRenderDetailsFooter, defaultOnRenderDetailsFooter]);\n var detailsFooterProps = React.useMemo(function () {\n return {\n columns: adjustedColumns,\n groupNestingDepth: groupNestingDepth,\n selection: selection,\n selectionMode: selectionMode,\n viewport: viewport,\n checkboxVisibility: checkboxVisibility,\n indentWidth: indentWidth,\n cellStyleProps: cellStyleProps,\n };\n }, [\n adjustedColumns,\n groupNestingDepth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n indentWidth,\n cellStyleProps,\n ]);\n var columnReorderOnDragEnd = columnReorderOptions && columnReorderOptions.onDragEnd;\n var onColumnDragEnd = React.useCallback(function (_a, event) {\n var dropLocation = _a.dropLocation;\n var finalDropLocation = ColumnDragEndLocation.outside;\n if (columnReorderOnDragEnd) {\n if (dropLocation && dropLocation !== ColumnDragEndLocation.header) {\n finalDropLocation = dropLocation;\n }\n else if (rootRef.current) {\n var clientRect = rootRef.current.getBoundingClientRect();\n if (event.clientX > clientRect.left &&\n event.clientX < clientRect.right &&\n event.clientY > clientRect.top &&\n event.clientY < clientRect.bottom) {\n finalDropLocation = ColumnDragEndLocation.surface;\n }\n }\n columnReorderOnDragEnd(finalDropLocation);\n }\n }, [columnReorderOnDragEnd, rootRef]);\n var columnReorderProps = React.useMemo(function () {\n if (columnReorderOptions) {\n return __assign(__assign({}, columnReorderOptions), { onColumnDragEnd: onColumnDragEnd });\n }\n }, [columnReorderOptions, onColumnDragEnd]);\n var rowCount = (isHeaderVisible ? 1 : 0) +\n (props.onRenderDetailsFooter ? 1 : 0) +\n GetGroupCount(groups) +\n (items ? items.length : 0);\n var colCount = (selectAllVisibility !== SelectAllVisibility.none ? 1 : 0) +\n (adjustedColumns ? adjustedColumns.length : 0) +\n (groups ? 1 : 0);\n var classNames = React.useMemo(function () {\n return getClassNames(styles, {\n theme: theme,\n compact: compact,\n isFixed: layoutMode === DetailsListLayoutMode.fixedColumns,\n isHorizontalConstrained: constrainMode === ConstrainMode.horizontalConstrained,\n className: className,\n });\n }, [styles, theme, compact, layoutMode, constrainMode, className]);\n var onRenderDetailsGroupFooter = groupProps && groupProps.onRenderFooter;\n var finalOnRenderDetailsGroupFooter = React.useMemo(function () {\n return onRenderDetailsGroupFooter\n ? function (groupFooterProps, defaultRender) {\n return onRenderDetailsGroupFooter(__assign(__assign({}, groupFooterProps), { columns: adjustedColumns, groupNestingDepth: groupNestingDepth, indentWidth: indentWidth, selection: selection, selectionMode: selectionMode, viewport: viewport, checkboxVisibility: checkboxVisibility, cellStyleProps: cellStyleProps }), defaultRender);\n }\n : undefined;\n }, [\n onRenderDetailsGroupFooter,\n adjustedColumns,\n groupNestingDepth,\n indentWidth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n ]);\n var onRenderDetailsGroupHeader = groupProps && groupProps.onRenderHeader;\n var finalOnRenderDetailsGroupHeader = React.useMemo(function () {\n return onRenderDetailsGroupHeader\n ? function (groupHeaderProps, defaultRender) {\n var _a, _b;\n var groupIndex = groupHeaderProps.groupIndex;\n var groupKey = groupIndex !== undefined ? (_b = (_a = groupHeaderProps.groups) === null || _a === void 0 ? void 0 : _a[groupIndex]) === null || _b === void 0 ? void 0 : _b.key : undefined;\n var totalRowCount = groupKey !== undefined && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].totalRowCount\n : 0;\n return onRenderDetailsGroupHeader(__assign(__assign({}, groupHeaderProps), { columns: adjustedColumns, groupNestingDepth: groupNestingDepth, indentWidth: indentWidth, selection: selection, selectionMode: checkboxVisibility !== CheckboxVisibility.hidden ? selectionMode : SelectionMode.none, viewport: viewport, checkboxVisibility: checkboxVisibility, cellStyleProps: cellStyleProps, ariaColSpan: adjustedColumns.length, ariaLevel: undefined, ariaPosInSet: undefined, ariaSetSize: undefined, ariaRowCount: undefined, ariaRowIndex: groupIndex !== undefined ? totalRowCount + (isHeaderVisible ? 1 : 0) : undefined }), defaultRender);\n }\n : function (groupHeaderProps, defaultRender) {\n var _a, _b;\n var groupIndex = groupHeaderProps.groupIndex;\n var groupKey = groupIndex !== undefined ? (_b = (_a = groupHeaderProps.groups) === null || _a === void 0 ? void 0 : _a[groupIndex]) === null || _b === void 0 ? void 0 : _b.key : undefined;\n var totalRowCount = groupKey !== undefined && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].totalRowCount\n : 0;\n return defaultRender(__assign(__assign({}, groupHeaderProps), { ariaColSpan: adjustedColumns.length, ariaLevel: undefined, ariaPosInSet: undefined, ariaSetSize: undefined, ariaRowCount: undefined, ariaRowIndex: groupIndex !== undefined ? totalRowCount + (isHeaderVisible ? 1 : 0) : undefined }));\n };\n }, [\n onRenderDetailsGroupHeader,\n adjustedColumns,\n groupNestingDepth,\n indentWidth,\n isHeaderVisible,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n groupedDetailsListIndexMap,\n ]);\n var finalGroupProps = React.useMemo(function () {\n var _a;\n return __assign(__assign({}, groupProps), { role: role === defaultRole ? 'rowgroup' : 'presentation', onRenderFooter: finalOnRenderDetailsGroupFooter, onRenderHeader: finalOnRenderDetailsGroupHeader, \n // pass through custom group header checkbox label\n headerProps: __assign(__assign({}, groupProps === null || groupProps === void 0 ? void 0 : groupProps.headerProps), { selectAllButtonProps: __assign({ 'aria-label': checkButtonGroupAriaLabel }, (_a = groupProps === null || groupProps === void 0 ? void 0 : groupProps.headerProps) === null || _a === void 0 ? void 0 : _a.selectAllButtonProps) }) });\n }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, checkButtonGroupAriaLabel, role]);\n var sumColumnWidths = useConst(function () {\n return memoizeFunction(function (columns) {\n var totalWidth = 0;\n columns.forEach(function (column) { return (totalWidth += column.calculatedWidth || column.minWidth); });\n return totalWidth;\n });\n });\n var collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;\n var rowWidth = React.useMemo(function () {\n return sumColumnWidths(adjustedColumns);\n }, [adjustedColumns, sumColumnWidths]);\n var onRenderCell = React.useCallback(function (nestingDepth, item, index, group) {\n var finalOnRenderRow = props.onRenderRow\n ? composeRenderFunction(props.onRenderRow, onRenderDefaultRow)\n : onRenderDefaultRow;\n var groupKey = group ? group.key : undefined;\n var numOfGroupHeadersBeforeItem = groupKey && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].numOfGroupHeadersBeforeItem\n : 0;\n var rowRole = role === defaultRole ? undefined : 'presentation';\n // add tabindex=\"0\" to first row if no header exists, to ensure the focuszone is in the tab order\n var rowFocusZoneProps = isHeaderVisible || index > 0 ? rowFocusZoneNoTabIndexProps : rowFocusZoneAddTabIndexProps;\n var rowProps = {\n item: item,\n itemIndex: index,\n flatIndexOffset: (isHeaderVisible ? 2 : 1) + numOfGroupHeadersBeforeItem,\n compact: compact,\n columns: adjustedColumns,\n groupNestingDepth: nestingDepth,\n id: \"\".concat(rowId, \"-\").concat(index),\n selectionMode: selectionMode,\n selection: selection,\n onDidMount: onRowDidMount,\n onWillUnmount: onRowWillUnmount,\n onRenderItemColumn: onRenderItemColumn,\n onRenderField: onRenderField,\n getCellValueKey: getCellValueKey,\n eventsToRegister: eventsToRegister,\n dragDropEvents: dragDropEvents,\n dragDropHelper: dragDropHelper,\n viewport: viewport,\n checkboxVisibility: checkboxVisibility,\n collapseAllVisibility: collapseAllVisibility,\n getRowAriaLabel: getRowAriaLabel,\n getRowAriaDescribedBy: getRowAriaDescribedBy,\n checkButtonAriaLabel: checkButtonAriaLabel,\n checkboxCellClassName: checkboxCellClassName,\n useReducedRowRenderer: useReducedRowRenderer,\n indentWidth: indentWidth,\n cellStyleProps: cellStyleProps,\n onRenderDetailsCheckbox: onRenderCheckbox,\n enableUpdateAnimations: enableUpdateAnimations,\n rowWidth: rowWidth,\n useFastIcons: useFastIcons,\n role: rowRole,\n isGridRow: true,\n focusZoneProps: rowFocusZoneProps,\n };\n if (!item) {\n if (onRenderMissingItem) {\n return onRenderMissingItem(index, rowProps);\n }\n return null;\n }\n return finalOnRenderRow(rowProps);\n }, [\n compact,\n adjustedColumns,\n selectionMode,\n selection,\n rowId,\n onRowDidMount,\n onRowWillUnmount,\n onRenderItemColumn,\n onRenderField,\n getCellValueKey,\n eventsToRegister,\n dragDropEvents,\n dragDropHelper,\n viewport,\n checkboxVisibility,\n collapseAllVisibility,\n getRowAriaLabel,\n getRowAriaDescribedBy,\n isHeaderVisible,\n checkButtonAriaLabel,\n checkboxCellClassName,\n useReducedRowRenderer,\n indentWidth,\n cellStyleProps,\n onRenderCheckbox,\n enableUpdateAnimations,\n useFastIcons,\n onRenderDefaultRow,\n onRenderMissingItem,\n props.onRenderRow,\n rowWidth,\n role,\n groupedDetailsListIndexMap,\n ]);\n var onRenderListCell = React.useCallback(function (nestingDepth) {\n return function (item, itemIndex) {\n return onRenderCell(nestingDepth, item, itemIndex);\n };\n }, [onRenderCell]);\n var isRightArrow = React.useCallback(function (event) {\n // eslint-disable-next-line deprecation/deprecation\n return event.which === getRTLSafeKeyCode(KeyCodes.right, theme);\n }, [theme]);\n var focusZoneInnerProps = __assign(__assign({}, focusZoneProps), { componentRef: focusZoneProps && focusZoneProps.componentRef ? focusZoneProps.componentRef : focusZoneRef, className: focusZoneProps && focusZoneProps.className\n ? css(classNames.focusZone, focusZoneProps.className)\n : classNames.focusZone, direction: focusZoneProps ? focusZoneProps.direction : FocusZoneDirection.vertical, shouldEnterInnerZone: focusZoneProps && focusZoneProps.shouldEnterInnerZone ? focusZoneProps.shouldEnterInnerZone : isRightArrow, onActiveElementChanged: focusZoneProps && focusZoneProps.onActiveElementChanged\n ? focusZoneProps.onActiveElementChanged\n : onActiveRowChanged, shouldRaiseClicksOnEnter: false, onBlur: focusZoneProps && focusZoneProps.onBlur ? focusZoneProps.onBlur : onBlur });\n var FinalGroupedList = groups && (groupProps === null || groupProps === void 0 ? void 0 : groupProps.groupedListAs) ? composeComponentAs(groupProps.groupedListAs, GroupedList) : GroupedList;\n var list = groups ? (React.createElement(FinalGroupedList, { focusZoneProps: focusZoneInnerProps, componentRef: groupedListRef, groups: groups, groupProps: finalGroupProps, items: items, onRenderCell: onRenderCell, role: \"presentation\", selection: selection, selectionMode: checkboxVisibility !== CheckboxVisibility.hidden ? selectionMode : SelectionMode.none, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: onGroupExpandStateChanged, usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize, getGroupHeight: getGroupHeight, compact: compact })) : (React.createElement(FocusZone, __assign({}, focusZoneInnerProps),\n React.createElement(List, __assign({ ref: listRef, role: \"presentation\", items: items, onRenderCell: onRenderListCell(0), usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize }, additionalListProps))));\n var onHeaderKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.down) {\n if (focusZoneRef.current && focusZoneRef.current.focus()) {\n // select the first item in list after down arrow key event\n // only if nothing was selected; otherwise start with the already-selected item\n if (isSelectedOnFocus && selection.getSelectedIndices().length === 0) {\n selection.setIndexSelected(0, true, false);\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [selection, focusZoneRef, isSelectedOnFocus]);\n var onContentKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.up && !ev.altKey) {\n if (headerRef.current && headerRef.current.focus()) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [headerRef]);\n return (React.createElement(\"div\", __assign({ ref: rootRef, className: classNames.root, \"data-automationid\": \"DetailsList\", \"data-is-scrollable\": \"false\" }, (shouldApplyApplicationRole ? { role: 'application' } : {})),\n React.createElement(FocusRects, null),\n React.createElement(\"div\", { role: role, \"aria-label\": ariaLabelForGrid || ariaLabel, \"aria-rowcount\": isPlaceholderData ? 0 : rowCount, \"aria-colcount\": colCount, \"aria-busy\": isPlaceholderData },\n React.createElement(\"div\", { onKeyDown: onHeaderKeyDown, role: \"presentation\", className: classNames.headerWrapper }, isHeaderVisible &&\n onRenderDetailsHeader({\n componentRef: headerRef,\n selectionMode: selectionMode,\n layoutMode: layoutMode,\n selection: selection,\n columns: adjustedColumns,\n onColumnClick: onColumnHeaderClick,\n onColumnContextMenu: onColumnHeaderContextMenu,\n onColumnResized: onColumnResized,\n onColumnIsSizingChanged: onColumnIsSizingChanged,\n onColumnAutoResized: onColumnAutoResized,\n groupNestingDepth: groupNestingDepth,\n isAllCollapsed: isCollapsed,\n onToggleCollapseAll: onToggleCollapse,\n ariaLabel: ariaLabelForListHeader,\n ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox,\n ariaLabelForSelectionColumn: ariaLabelForSelectionColumn,\n selectAllVisibility: selectAllVisibility,\n collapseAllVisibility: groupProps && groupProps.collapseAllVisibility,\n viewport: viewport,\n columnReorderProps: columnReorderProps,\n minimumPixelsForDrag: minimumPixelsForDrag,\n cellStyleProps: cellStyleProps,\n checkboxVisibility: checkboxVisibility,\n indentWidth: indentWidth,\n onRenderDetailsCheckbox: onRenderCheckbox,\n rowWidth: sumColumnWidths(adjustedColumns),\n useFastIcons: useFastIcons,\n }, onRenderDetailsHeader)),\n React.createElement(\"div\", { onKeyDown: onContentKeyDown, role: \"presentation\", className: classNames.contentWrapper }, !disableSelectionZone ? (React.createElement(SelectionZone, __assign({ ref: selectionZoneRef, selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, isSelectedOnFocus: isSelectedOnFocus, selectionClearedOnEscapePress: isSelectedOnFocus, toggleWithoutModifierPressed: !isSelectedOnFocus, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu, enterModalOnTouch: enterModalSelectionOnTouch }, (selectionZoneProps || {})), list)) : (list)),\n onRenderDetailsFooter(__assign({}, detailsFooterProps)))));\n};\nvar DetailsListBase = /** @class */ (function (_super) {\n __extends(DetailsListBase, _super);\n function DetailsListBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._header = React.createRef();\n _this._groupedList = React.createRef();\n _this._list = React.createRef();\n _this._focusZone = React.createRef();\n _this._selectionZone = React.createRef();\n _this._onRenderRow = function (props, defaultRender) {\n return React.createElement(DetailsRow, __assign({}, props));\n };\n _this._getDerivedStateFromProps = function (nextProps, previousState) {\n var _a = _this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, _b = _a.selectionMode, selectionMode = _b === void 0 ? _this._selection.mode : _b, columns = _a.columns, viewport = _a.viewport, compact = _a.compact, dragDropEvents = _a.dragDropEvents;\n var _c = (_this.props.groupProps || {}).isAllGroupsCollapsed, isAllGroupsCollapsed = _c === void 0 ? undefined : _c;\n var newViewportWidth = (nextProps.viewport && nextProps.viewport.width) || 0;\n var oldViewportWidth = (viewport && viewport.width) || 0;\n var shouldResetSelection = nextProps.setKey !== setKey || nextProps.setKey === undefined;\n var shouldForceUpdates = false;\n if (nextProps.layoutMode !== _this.props.layoutMode) {\n shouldForceUpdates = true;\n }\n var nextState = previousState;\n if (shouldResetSelection) {\n _this._initialFocusedIndex = nextProps.initialFocusedIndex;\n // reset focusedItemIndex when setKey changes\n nextState = __assign(__assign({}, nextState), { focusedItemIndex: _this._initialFocusedIndex !== undefined ? _this._initialFocusedIndex : -1 });\n }\n if (!_this.props.disableSelectionZone && nextProps.items !== items) {\n _this._selection.setItems(nextProps.items, shouldResetSelection);\n }\n if (nextProps.checkboxVisibility !== checkboxVisibility ||\n nextProps.columns !== columns ||\n newViewportWidth !== oldViewportWidth ||\n nextProps.compact !== compact) {\n shouldForceUpdates = true;\n }\n nextState = __assign(__assign({}, nextState), _this._adjustColumns(nextProps, nextState, true));\n if (nextProps.selectionMode !== selectionMode) {\n shouldForceUpdates = true;\n }\n if (isAllGroupsCollapsed === undefined &&\n nextProps.groupProps &&\n nextProps.groupProps.isAllGroupsCollapsed !== undefined) {\n nextState = __assign(__assign({}, nextState), { isCollapsed: nextProps.groupProps.isAllGroupsCollapsed, isSomeGroupExpanded: !nextProps.groupProps.isAllGroupsCollapsed });\n }\n if (nextProps.dragDropEvents !== dragDropEvents) {\n _this._dragDropHelper && _this._dragDropHelper.dispose();\n _this._dragDropHelper = nextProps.dragDropEvents\n ? new DragDropHelper({\n selection: _this._selection,\n minimumPixelsForDrag: nextProps.minimumPixelsForDrag,\n })\n : undefined;\n shouldForceUpdates = true;\n }\n if (shouldForceUpdates) {\n nextState = __assign(__assign({}, nextState), { version: {} });\n }\n return nextState;\n };\n _this._onGroupExpandStateChanged = function (isSomeGroupExpanded) {\n _this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });\n };\n _this._onColumnIsSizingChanged = function (column, isSizing) {\n _this.setState({ isSizing: isSizing });\n };\n _this._onRowDidMount = function (row) {\n var _a = row.props, item = _a.item, itemIndex = _a.itemIndex;\n var itemKey = _this._getItemKey(item, itemIndex);\n _this._activeRows[itemKey] = row; // this is used for column auto resize\n _this._setFocusToRowIfPending(row);\n var onRowDidMount = _this.props.onRowDidMount;\n if (onRowDidMount) {\n onRowDidMount(item, itemIndex);\n }\n };\n _this._onRowWillUnmount = function (row) {\n var onRowWillUnmount = _this.props.onRowWillUnmount;\n var _a = row.props, item = _a.item, itemIndex = _a.itemIndex;\n var itemKey = _this._getItemKey(item, itemIndex);\n delete _this._activeRows[itemKey];\n if (onRowWillUnmount) {\n onRowWillUnmount(item, itemIndex);\n }\n };\n _this._onToggleCollapse = function (collapsed) {\n _this.setState({\n isCollapsed: collapsed,\n });\n if (_this._groupedList.current) {\n _this._groupedList.current.toggleCollapseAll(collapsed);\n }\n };\n _this._onColumnResized = function (resizingColumn, newWidth, resizingColumnIndex) {\n var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);\n if (_this.props.onColumnResize) {\n _this.props.onColumnResize(resizingColumn, newCalculatedWidth, resizingColumnIndex);\n }\n _this._rememberCalculatedWidth(resizingColumn, newCalculatedWidth);\n _this.setState(__assign(__assign({}, _this._adjustColumns(_this.props, _this.state, true, resizingColumnIndex)), { version: {} }));\n };\n /**\n * Callback function when double clicked on the details header column resizer\n * which will measure the column cells of all the active rows and resize the\n * column to the max cell width.\n *\n * @param column - double clicked column definition\n * @param columnIndex - double clicked column index\n * TODO: min width 100 should be changed to const value and should be consistent with the\n * value used on _onSizerMove method in DetailsHeader\n */\n _this._onColumnAutoResized = function (column, columnIndex) {\n var max = 0;\n var count = 0;\n var totalCount = Object.keys(_this._activeRows).length;\n for (var key in _this._activeRows) {\n if (_this._activeRows.hasOwnProperty(key)) {\n var currentRow = _this._activeRows[key];\n currentRow.measureCell(columnIndex, function (width) {\n max = Math.max(max, width);\n count++;\n if (count === totalCount) {\n _this._onColumnResized(column, max, columnIndex);\n }\n });\n }\n }\n };\n /**\n * Call back function when an element in FocusZone becomes active. It will translate it into item\n * and call onActiveItemChanged callback if specified.\n *\n * @param row - element that became active in Focus Zone\n * @param focus - event from Focus Zone\n */\n _this._onActiveRowChanged = function (el, ev) {\n var _a = _this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged;\n if (!el) {\n return;\n }\n // Check and assign index only if the event was raised from any DetailsRow element\n if (el.getAttribute('data-item-index')) {\n var index = Number(el.getAttribute('data-item-index'));\n if (index >= 0) {\n if (onActiveItemChanged) {\n onActiveItemChanged(items[index], index, ev);\n }\n _this.setState({\n focusedItemIndex: index,\n });\n }\n }\n };\n _this._onBlur = function (event) {\n _this.setState({\n focusedItemIndex: -1,\n });\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._activeRows = {};\n _this._columnOverrides = {};\n _this.state = {\n focusedItemIndex: -1,\n lastWidth: 0,\n adjustedColumns: _this._getAdjustedColumns(props, undefined),\n isSizing: false,\n isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed,\n isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed,\n version: {},\n getDerivedStateFromProps: _this._getDerivedStateFromProps,\n };\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n selection: 'getKey',\n });\n _this._selection =\n props.selection ||\n new Selection({\n onSelectionChanged: undefined,\n getKey: props.getKey,\n selectionMode: props.selectionMode,\n });\n if (!_this.props.disableSelectionZone) {\n _this._selection.setItems(props.items, false);\n }\n _this._dragDropHelper = props.dragDropEvents\n ? new DragDropHelper({\n selection: _this._selection,\n minimumPixelsForDrag: props.minimumPixelsForDrag,\n })\n : undefined;\n _this._initialFocusedIndex = props.initialFocusedIndex;\n return _this;\n }\n DetailsListBase.getDerivedStateFromProps = function (nextProps, previousState) {\n return previousState.getDerivedStateFromProps(nextProps, previousState);\n };\n DetailsListBase.prototype.scrollToIndex = function (index, measureItem, scrollToMode) {\n this._list.current && this._list.current.scrollToIndex(index, measureItem, scrollToMode);\n this._groupedList.current && this._groupedList.current.scrollToIndex(index, measureItem, scrollToMode);\n };\n DetailsListBase.prototype.focusIndex = function (index, forceIntoFirstElement, measureItem, scrollToMode) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n var item = this.props.items[index];\n if (item) {\n this.scrollToIndex(index, measureItem, scrollToMode);\n var itemKey = this._getItemKey(item, index);\n var row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRow(row, forceIntoFirstElement);\n }\n }\n };\n DetailsListBase.prototype.getStartItemIndexInView = function () {\n if (this._list && this._list.current) {\n return this._list.current.getStartItemIndexInView();\n }\n else if (this._groupedList && this._groupedList.current) {\n return this._groupedList.current.getStartItemIndexInView();\n }\n return 0;\n };\n DetailsListBase.prototype.updateColumn = function (column, options) {\n var _a, _b;\n var NO_COLUMNS = [];\n var _c = this.props, _d = _c.columns, columns = _d === void 0 ? NO_COLUMNS : _d, selectionMode = _c.selectionMode, checkboxVisibility = _c.checkboxVisibility, columnReorderOptions = _c.columnReorderOptions;\n var width = options.width, newColumnIndex = options.newColumnIndex;\n var index = columns.findIndex(function (col) { return col.key === column.key; });\n if (width) {\n this._onColumnResized(column, width, index);\n }\n if (newColumnIndex !== undefined && columnReorderOptions) {\n var isCheckboxColumnHidden = selectionMode === SelectionMode.none || checkboxVisibility === CheckboxVisibility.hidden;\n var showCheckbox = checkboxVisibility !== CheckboxVisibility.hidden;\n var columnIndex = (showCheckbox ? 2 : 1) + index;\n var draggedIndex = isCheckboxColumnHidden ? columnIndex - 1 : columnIndex - 2;\n var targetIndex = isCheckboxColumnHidden ? newColumnIndex - 1 : newColumnIndex - 2;\n var frozenColumnCountFromStart = (_a = columnReorderOptions.frozenColumnCountFromStart) !== null && _a !== void 0 ? _a : 0;\n var frozenColumnCountFromEnd = (_b = columnReorderOptions.frozenColumnCountFromEnd) !== null && _b !== void 0 ? _b : 0;\n var isValidTargetIndex = targetIndex >= frozenColumnCountFromStart && targetIndex < columns.length - frozenColumnCountFromEnd;\n if (isValidTargetIndex) {\n if (columnReorderOptions.onColumnDrop) {\n var dragDropDetails = {\n draggedIndex: draggedIndex,\n targetIndex: targetIndex,\n };\n columnReorderOptions.onColumnDrop(dragDropDetails);\n /* eslint-disable deprecation/deprecation */\n }\n else if (columnReorderOptions.handleColumnReorder) {\n columnReorderOptions.handleColumnReorder(draggedIndex, targetIndex);\n /* eslint-enable deprecation/deprecation */\n }\n }\n }\n };\n DetailsListBase.prototype.componentWillUnmount = function () {\n if (this._dragDropHelper) {\n // TODO If the DragDropHelper was passed via props, this will dispose it, which is incorrect behavior.\n this._dragDropHelper.dispose();\n }\n this._async.dispose();\n };\n DetailsListBase.prototype.componentDidUpdate = function (prevProps, prevState) {\n this._notifyColumnsResized();\n if (this._initialFocusedIndex !== undefined) {\n var item = this.props.items[this._initialFocusedIndex];\n if (item) {\n var itemKey = this._getItemKey(item, this._initialFocusedIndex);\n var row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRowIfPending(row);\n }\n }\n }\n if (this.props.items !== prevProps.items &&\n this.props.items.length > 0 &&\n this.state.focusedItemIndex !== -1 &&\n !elementContains(this._root.current, document.activeElement, false)) {\n // Item set has changed and previously-focused item is gone.\n // Set focus to item at index of previously-focused item if it is in range,\n // else set focus to the last item.\n var index = this.state.focusedItemIndex < this.props.items.length\n ? this.state.focusedItemIndex\n : this.props.items.length - 1;\n var item = this.props.items[index];\n var itemKey = this._getItemKey(item, this.state.focusedItemIndex);\n var row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRow(row);\n }\n else {\n this._initialFocusedIndex = index;\n }\n }\n if (this.props.onDidUpdate) {\n this.props.onDidUpdate(this);\n }\n };\n DetailsListBase.prototype.render = function () {\n return (React.createElement(DetailsListInner, __assign({}, this.props, this.state, { selection: this._selection, dragDropHelper: this._dragDropHelper, rootRef: this._root, listRef: this._list, groupedListRef: this._groupedList, focusZoneRef: this._focusZone, headerRef: this._header, selectionZoneRef: this._selectionZone, onGroupExpandStateChanged: this._onGroupExpandStateChanged, onColumnIsSizingChanged: this._onColumnIsSizingChanged, onRowDidMount: this._onRowDidMount, onRowWillUnmount: this._onRowWillUnmount, onColumnResized: this._onColumnResized, onColumnAutoResized: this._onColumnAutoResized, onToggleCollapse: this._onToggleCollapse, onActiveRowChanged: this._onActiveRowChanged, onBlur: this._onBlur, onRenderDefaultRow: this._onRenderRow })));\n };\n DetailsListBase.prototype.forceUpdate = function () {\n _super.prototype.forceUpdate.call(this);\n this._forceListUpdates();\n };\n DetailsListBase.prototype._getGroupNestingDepth = function () {\n var groups = this.props.groups;\n var level = 0;\n var groupsInLevel = groups;\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n return level;\n };\n DetailsListBase.prototype._setFocusToRowIfPending = function (row) {\n var itemIndex = row.props.itemIndex;\n if (this._initialFocusedIndex !== undefined && itemIndex === this._initialFocusedIndex) {\n this._setFocusToRow(row);\n delete this._initialFocusedIndex;\n }\n };\n DetailsListBase.prototype._setFocusToRow = function (row, forceIntoFirstElement) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n if (this._selectionZone.current) {\n this._selectionZone.current.ignoreNextFocus();\n }\n this._async.setTimeout(function () {\n row.focus(forceIntoFirstElement);\n }, 0);\n };\n DetailsListBase.prototype._forceListUpdates = function () {\n if (this._groupedList.current) {\n this._groupedList.current.forceUpdate();\n }\n if (this._list.current) {\n this._list.current.forceUpdate();\n }\n };\n DetailsListBase.prototype._notifyColumnsResized = function () {\n this.state.adjustedColumns.forEach(function (column) {\n if (column.onColumnResize) {\n column.onColumnResize(column.currentWidth);\n }\n });\n };\n DetailsListBase.prototype._adjustColumns = function (newProps, previousState, forceUpdate, resizingColumnIndex) {\n var adjustedColumns = this._getAdjustedColumns(newProps, previousState, forceUpdate, resizingColumnIndex);\n var viewport = this.props.viewport;\n var viewportWidth = viewport && viewport.width ? viewport.width : 0;\n return __assign(__assign({}, previousState), { adjustedColumns: adjustedColumns, lastWidth: viewportWidth });\n };\n /** Returns adjusted columns, given the viewport size and layout mode. */\n DetailsListBase.prototype._getAdjustedColumns = function (newProps, previousState, forceUpdate, resizingColumnIndex) {\n var _this = this;\n var newItems = newProps.items, layoutMode = newProps.layoutMode, selectionMode = newProps.selectionMode, viewport = newProps.viewport;\n var viewportWidth = viewport && viewport.width ? viewport.width : 0;\n var newColumns = newProps.columns;\n var columns = this.props ? this.props.columns : [];\n var lastWidth = previousState ? previousState.lastWidth : -1;\n var lastSelectionMode = previousState ? previousState.lastSelectionMode : undefined;\n if (!forceUpdate &&\n lastWidth === viewportWidth &&\n lastSelectionMode === selectionMode &&\n (!columns || newColumns === columns)) {\n return newColumns || [];\n }\n newColumns = newColumns || buildColumns(newItems, true);\n var adjustedColumns;\n if (layoutMode === DetailsListLayoutMode.fixedColumns) {\n adjustedColumns = this._getFixedColumns(newColumns, viewportWidth, newProps);\n // Preserve adjusted column calculated widths.\n adjustedColumns.forEach(function (column) {\n _this._rememberCalculatedWidth(column, column.calculatedWidth);\n });\n }\n else {\n adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);\n adjustedColumns.forEach(function (column) {\n _this._getColumnOverride(column.key).currentWidth = column.calculatedWidth;\n });\n }\n return adjustedColumns;\n };\n /** Builds a set of columns based on the given columns mixed with the current overrides. */\n DetailsListBase.prototype._getFixedColumns = function (newColumns, viewportWidth, props) {\n var _this = this;\n var _a = this.props, _b = _a.selectionMode, selectionMode = _b === void 0 ? this._selection.mode : _b, checkboxVisibility = _a.checkboxVisibility, flexMargin = _a.flexMargin, skipViewportMeasures = _a.skipViewportMeasures;\n var remainingWidth = viewportWidth - (flexMargin || 0);\n var sumProportionalWidth = 0;\n newColumns.forEach(function (col) {\n if (skipViewportMeasures || !col.flexGrow) {\n remainingWidth -= col.maxWidth || col.minWidth || MIN_COLUMN_WIDTH;\n }\n else {\n remainingWidth -= col.minWidth || MIN_COLUMN_WIDTH;\n sumProportionalWidth += col.flexGrow;\n }\n remainingWidth -= getPaddedWidth(col, props, true);\n });\n var rowCheckWidth = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;\n var groupExpandWidth = this._getGroupNestingDepth() * GROUP_EXPAND_WIDTH;\n remainingWidth -= rowCheckWidth + groupExpandWidth;\n var widthFraction = remainingWidth / sumProportionalWidth;\n // Shrinks proportional columns to their max width and adds the remaining width to distribute to other columns.\n if (!skipViewportMeasures) {\n newColumns.forEach(function (column) {\n var newColumn = __assign(__assign({}, column), _this._columnOverrides[column.key]);\n if (newColumn.flexGrow && newColumn.maxWidth) {\n var fullWidth = newColumn.flexGrow * widthFraction + newColumn.minWidth;\n var shrinkWidth = fullWidth - newColumn.maxWidth;\n if (shrinkWidth > 0) {\n remainingWidth += shrinkWidth;\n sumProportionalWidth -= (shrinkWidth / (fullWidth - newColumn.minWidth)) * newColumn.flexGrow;\n }\n }\n });\n }\n widthFraction = remainingWidth > 0 ? remainingWidth / sumProportionalWidth : 0;\n return newColumns.map(function (column) {\n var newColumn = __assign(__assign({}, column), _this._columnOverrides[column.key]);\n // Delay computation until viewport width is available.\n if (!skipViewportMeasures && newColumn.flexGrow && remainingWidth <= 0) {\n return newColumn;\n }\n if (!newColumn.calculatedWidth) {\n if (!skipViewportMeasures && newColumn.flexGrow) {\n // Assigns the proportion of the remaining extra width after all columns have met minimum widths.\n newColumn.calculatedWidth = newColumn.minWidth + newColumn.flexGrow * widthFraction;\n newColumn.calculatedWidth = Math.min(newColumn.calculatedWidth, newColumn.maxWidth || Number.MAX_VALUE);\n }\n else {\n newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;\n }\n }\n return newColumn;\n });\n };\n /** Builds a set of columns to fix within the viewport width. */\n DetailsListBase.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) {\n var _this = this;\n var _a = props.selectionMode, selectionMode = _a === void 0 ? this._selection.mode : _a, checkboxVisibility = props.checkboxVisibility, skipViewportMeasures = props.skipViewportMeasures;\n var rowCheckWidth = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;\n var groupExpandWidth = this._getGroupNestingDepth() * GROUP_EXPAND_WIDTH;\n var totalWidth = 0; // offset because we have one less inner padding.\n var minimumWidth = 0;\n var availableWidth = viewportWidth - (rowCheckWidth + groupExpandWidth);\n var adjustedColumns = newColumns.map(function (column, i) {\n var baseColumn = __assign(__assign({}, column), { calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH });\n var newColumn = __assign(__assign({}, baseColumn), _this._columnOverrides[column.key]);\n // eslint-disable-next-line deprecation/deprecation\n if (!(baseColumn.isCollapsible || baseColumn.isCollapsable)) {\n minimumWidth += getPaddedWidth(baseColumn, props);\n }\n totalWidth += getPaddedWidth(newColumn, props);\n return newColumn;\n });\n if (skipViewportMeasures) {\n return adjustedColumns;\n }\n var lastIndex = adjustedColumns.length - 1;\n // Shrink or remove collapsable columns.\n while (lastIndex >= 0 && totalWidth > availableWidth) {\n var column = adjustedColumns[lastIndex];\n var minWidth = column.minWidth || MIN_COLUMN_WIDTH;\n var overflowWidth = totalWidth - availableWidth;\n // eslint-disable-next-line deprecation/deprecation\n if (column.calculatedWidth - minWidth >= overflowWidth || !(column.isCollapsible || column.isCollapsable)) {\n var originalWidth = column.calculatedWidth;\n if (minimumWidth < availableWidth) {\n // Only adjust in cases where all the columns fit within the viewport\n column.calculatedWidth = Math.max(column.calculatedWidth - overflowWidth, minWidth);\n }\n totalWidth -= originalWidth - column.calculatedWidth;\n }\n else {\n totalWidth -= getPaddedWidth(column, props);\n adjustedColumns.splice(lastIndex, 1);\n }\n lastIndex--;\n }\n // Then expand columns starting at the beginning, until we've filled the width.\n for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {\n var column = adjustedColumns[i];\n var isLast = i === adjustedColumns.length - 1;\n var overrides = this._columnOverrides[column.key];\n if (overrides && overrides.calculatedWidth && !isLast) {\n continue;\n }\n var spaceLeft = availableWidth - totalWidth;\n var increment = void 0;\n if (isLast) {\n increment = spaceLeft;\n }\n else {\n var maxWidth = column.maxWidth;\n var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;\n increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;\n }\n column.calculatedWidth = column.calculatedWidth + increment;\n totalWidth += increment;\n }\n return adjustedColumns;\n };\n DetailsListBase.prototype._rememberCalculatedWidth = function (column, newCalculatedWidth) {\n var overrides = this._getColumnOverride(column.key);\n overrides.calculatedWidth = newCalculatedWidth;\n overrides.currentWidth = newCalculatedWidth;\n };\n DetailsListBase.prototype._getColumnOverride = function (key) {\n return (this._columnOverrides[key] = this._columnOverrides[key] || {});\n };\n DetailsListBase.prototype._getItemKey = function (item, itemIndex) {\n var getKey = this.props.getKey;\n var itemKey = undefined;\n if (item) {\n itemKey = item.key;\n }\n if (getKey) {\n itemKey = getKey(item, itemIndex);\n }\n if (!itemKey) {\n itemKey = itemIndex;\n }\n return itemKey;\n };\n DetailsListBase.defaultProps = {\n layoutMode: DetailsListLayoutMode.justified,\n selectionMode: SelectionMode.multiple,\n constrainMode: ConstrainMode.horizontalConstrained,\n checkboxVisibility: CheckboxVisibility.onHover,\n isHeaderVisible: true,\n compact: false,\n useFastIcons: true,\n };\n DetailsListBase = __decorate([\n withViewport\n ], DetailsListBase);\n return DetailsListBase;\n}(React.Component));\nexport { DetailsListBase };\nexport function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline, columnActionsMode) {\n var columns = [];\n if (items && items.length) {\n var firstItem = items[0];\n for (var propName in firstItem) {\n if (firstItem.hasOwnProperty(propName)) {\n columns.push({\n key: propName,\n name: propName,\n fieldName: propName,\n minWidth: MIN_COLUMN_WIDTH,\n maxWidth: 300,\n isCollapsible: !!columns.length,\n isMultiline: isMultiline === undefined ? false : isMultiline,\n isSorted: sortedColumnKey === propName,\n isSortedDescending: !!isSortedDescending,\n isRowHeader: false,\n columnActionsMode: columnActionsMode !== null && columnActionsMode !== void 0 ? columnActionsMode : ColumnActionsMode.clickable,\n isResizable: canResizeColumns,\n onColumnClick: onColumnClick,\n isGrouped: groupedColumnKey === propName,\n });\n }\n }\n }\n return columns;\n}\nfunction getPaddedWidth(column, props, paddingOnly) {\n var _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n return ((paddingOnly ? 0 : column.calculatedWidth) +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0));\n}\nfunction getGroupNestingDepth(groups) {\n var level = 0;\n var groupsInLevel = groups;\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n return level;\n}\nfunction useGroupedDetailsListIndexMap(groups) {\n return React.useMemo(function () {\n var indexMap = {};\n if (groups) {\n var rowCount = 1;\n var numGroupHeaders = 1;\n for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {\n var group = groups_1[_i];\n var key = group.key;\n indexMap[key] = { numOfGroupHeadersBeforeItem: numGroupHeaders, totalRowCount: rowCount };\n numGroupHeaders++;\n rowCount += group.count + 1;\n }\n }\n return indexMap;\n }, [groups]);\n}\n//# sourceMappingURL=DetailsList.base.js.map","import { styled } from '../../Utilities';\nimport { DetailsListBase } from './DetailsList.base';\nimport { getDetailsListStyles } from './DetailsList.styles';\nexport var DetailsList = styled(DetailsListBase, getDetailsListStyles, undefined, {\n scope: 'DetailsList',\n});\n//# sourceMappingURL=DetailsList.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DetailsList',\n compact: 'ms-DetailsList--Compact',\n contentWrapper: 'ms-DetailsList-contentWrapper',\n headerWrapper: 'ms-DetailsList-headerWrapper',\n isFixed: 'is-fixed',\n isHorizontalConstrained: 'is-horizontalConstrained',\n listCell: 'ms-List-cell',\n};\nexport var getDetailsListStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, isHorizontalConstrained = props.isHorizontalConstrained, compact = props.compact, isFixed = props.isFixed;\n var semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.small,\n {\n position: 'relative',\n color: semanticColors.listText,\n selectors: (_a = {},\n _a[\"& .\".concat(classNames.listCell)] = {\n minHeight: 38,\n wordBreak: 'break-word',\n },\n _a),\n },\n isFixed && classNames.isFixed,\n compact && [\n classNames.compact,\n {\n selectors: (_b = {},\n _b[\".\".concat(classNames.listCell)] = {\n minHeight: 32,\n },\n _b),\n },\n ],\n isHorizontalConstrained && [\n classNames.isHorizontalConstrained,\n {\n overflowX: 'auto',\n overflowY: 'visible',\n WebkitOverflowScrolling: 'touch',\n },\n ],\n className,\n ],\n focusZone: [\n {\n display: 'inline-block',\n minWidth: '100%',\n minHeight: 1,\n },\n ],\n headerWrapper: classNames.headerWrapper,\n contentWrapper: classNames.contentWrapper,\n };\n};\n//# sourceMappingURL=DetailsList.styles.js.map","/**\n * Enum to describe how a particular column header behaves.\n * This is used to to specify the property `IColumn.columnActionsMode`.\n * If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`.\n * {@docCategory DetailsList}\n */\nexport var ColumnActionsMode;\n(function (ColumnActionsMode) {\n /** Renders the column header as disabled. */\n ColumnActionsMode[ColumnActionsMode[\"disabled\"] = 0] = \"disabled\";\n /** Renders the column header as clickable. Default value. */\n ColumnActionsMode[ColumnActionsMode[\"clickable\"] = 1] = \"clickable\";\n /** Renders the column header as clickable and displays the dropdown chevron. */\n ColumnActionsMode[ColumnActionsMode[\"hasDropdown\"] = 2] = \"hasDropdown\";\n})(ColumnActionsMode || (ColumnActionsMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var ConstrainMode;\n(function (ConstrainMode) {\n /** Lets the content grow which allows the page to manage scrolling. */\n ConstrainMode[ConstrainMode[\"unconstrained\"] = 0] = \"unconstrained\";\n /** Constrains the list to the given layout space. */\n ConstrainMode[ConstrainMode[\"horizontalConstrained\"] = 1] = \"horizontalConstrained\";\n})(ConstrainMode || (ConstrainMode = {}));\n/**\n * Enum to describe where the column has been dropped, after starting the drag\n * {@docCategory DetailsList}\n */\nexport var ColumnDragEndLocation;\n(function (ColumnDragEndLocation) {\n /** Drag ended outside of current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"outside\"] = 0] = \"outside\";\n /** Drag ended within current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"surface\"] = 1] = \"surface\";\n /** Drag ended on header */\n ColumnDragEndLocation[ColumnDragEndLocation[\"header\"] = 2] = \"header\";\n})(ColumnDragEndLocation || (ColumnDragEndLocation = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var DetailsListLayoutMode;\n(function (DetailsListLayoutMode) {\n /**\n * Lets the user resize columns and makes not attempt to fit them.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"fixedColumns\"] = 0] = \"fixedColumns\";\n /**\n * Manages which columns are visible, tries to size them according to their min/max rules and drops\n * off columns that can't fit and have isCollapsible set.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"justified\"] = 1] = \"justified\";\n})(DetailsListLayoutMode || (DetailsListLayoutMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var CheckboxVisibility;\n(function (CheckboxVisibility) {\n /** Visible on hover. */\n CheckboxVisibility[CheckboxVisibility[\"onHover\"] = 0] = \"onHover\";\n /** Visible always. */\n CheckboxVisibility[CheckboxVisibility[\"always\"] = 1] = \"always\";\n /** Hide checkboxes. */\n CheckboxVisibility[CheckboxVisibility[\"hidden\"] = 2] = \"hidden\";\n})(CheckboxVisibility || (CheckboxVisibility = {}));\n//# sourceMappingURL=DetailsList.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, EventGroup, css, shallowCompare, getNativeProps, divProperties, composeComponentAs, } from '../../Utilities';\nimport { CheckboxVisibility } from './DetailsList.types';\nimport { DetailsRowCheck } from './DetailsRowCheck';\nimport { GroupSpacer } from '../GroupedList/GroupSpacer';\nimport { DetailsRowFields } from './DetailsRowFields';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { SelectionMode, SELECTION_CHANGE } from '../../Selection';\nimport { classNamesFunction } from '../../Utilities';\nimport { getId } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';\nvar NO_COLUMNS = [];\nvar DetailsRowBase = /** @class */ (function (_super) {\n __extends(DetailsRowBase, _super);\n function DetailsRowBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._cellMeasurer = React.createRef();\n _this._focusZone = React.createRef();\n _this._onSelectionChanged = function () {\n var selectionState = getSelectionState(_this.props);\n if (!shallowCompare(selectionState, _this.state.selectionState)) {\n _this.setState({ selectionState: selectionState });\n }\n };\n /**\n * update isDropping state based on the input value, which is used to change style during drag and drop\n *\n * when change to true, that means drag enter. we will add default dropping class name\n * or the custom dropping class name (return result from onDragEnter) to the root elemet.\n *\n * when change to false, that means drag leave. we will remove the dropping class name from root element.\n *\n * @param newValue - New isDropping state value\n * @param event - The event trigger dropping state change which can be dragenter, dragleave etc\n */\n _this._updateDroppingState = function (newValue, event) {\n var isDropping = _this.state.isDropping;\n var _a = _this.props, dragDropEvents = _a.dragDropEvents, item = _a.item;\n if (!newValue) {\n if (dragDropEvents.onDragLeave) {\n dragDropEvents.onDragLeave(item, event);\n }\n }\n else if (dragDropEvents.onDragEnter) {\n _this._droppingClassNames = dragDropEvents.onDragEnter(item, event);\n }\n if (isDropping !== newValue) {\n _this.setState({ isDropping: newValue });\n }\n };\n initializeComponentRef(_this);\n _this._events = new EventGroup(_this);\n _this.state = {\n selectionState: getSelectionState(props),\n columnMeasureInfo: undefined,\n isDropping: false,\n };\n _this._droppingClassNames = '';\n return _this;\n }\n DetailsRowBase.getDerivedStateFromProps = function (nextProps, previousState) {\n return __assign(__assign({}, previousState), { selectionState: getSelectionState(nextProps) });\n };\n DetailsRowBase.prototype.componentDidMount = function () {\n var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection, item = _a.item, onDidMount = _a.onDidMount;\n if (dragDropHelper && this._root.current) {\n this._dragDropSubscription = dragDropHelper.subscribe(this._root.current, this._events, this._getRowDragDropOptions());\n }\n if (selection) {\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);\n }\n if (onDidMount && item) {\n // If the item appears later, we should wait for it before calling this method.\n this._onDidMountCalled = true;\n onDidMount(this);\n }\n };\n DetailsRowBase.prototype.componentDidUpdate = function (previousProps) {\n var state = this.state;\n var _a = this.props, item = _a.item, onDidMount = _a.onDidMount;\n var columnMeasureInfo = state.columnMeasureInfo;\n if (this.props.itemIndex !== previousProps.itemIndex ||\n this.props.item !== previousProps.item ||\n this.props.dragDropHelper !== previousProps.dragDropHelper) {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n if (this.props.dragDropHelper && this._root.current) {\n this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getRowDragDropOptions());\n }\n }\n if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) {\n var newWidth = this._cellMeasurer.current.getBoundingClientRect().width;\n columnMeasureInfo.onMeasureDone(newWidth);\n this.setState({\n columnMeasureInfo: undefined,\n });\n }\n if (item && onDidMount && !this._onDidMountCalled) {\n this._onDidMountCalled = true;\n onDidMount(this);\n }\n };\n DetailsRowBase.prototype.componentWillUnmount = function () {\n var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount;\n // Only call the onWillUnmount callback if we have an item.\n if (onWillUnmount && item) {\n onWillUnmount(this);\n }\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n this._events.dispose();\n };\n DetailsRowBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {\n if (this.props.useReducedRowRenderer) {\n var newSelectionState = getSelectionState(nextProps);\n if (this.state.selectionState.isSelected !== newSelectionState.isSelected) {\n return true;\n }\n return !shallowCompare(this.props, nextProps);\n }\n else {\n return true;\n }\n };\n DetailsRowBase.prototype.render = function () {\n var _a;\n var _b = this.props, className = _b.className, _c = _b.columns, columns = _c === void 0 ? NO_COLUMNS : _c, dragDropEvents = _b.dragDropEvents, item = _b.item, itemIndex = _b.itemIndex, id = _b.id, _d = _b.flatIndexOffset, flatIndexOffset = _d === void 0 ? 2 : _d, _e = _b.onRenderCheck, onRenderCheck = _e === void 0 ? this._onRenderCheck : _e, onRenderDetailsCheckbox = _b.onRenderDetailsCheckbox, onRenderItemColumn = _b.onRenderItemColumn, onRenderField = _b.onRenderField, getCellValueKey = _b.getCellValueKey, selectionMode = _b.selectionMode, checkboxVisibility = _b.checkboxVisibility, getRowAriaLabel = _b.getRowAriaLabel, getRowAriaDescription = _b.getRowAriaDescription, getRowAriaDescribedBy = _b.getRowAriaDescribedBy, isGridRow = _b.isGridRow, checkButtonAriaLabel = _b.checkButtonAriaLabel, checkboxCellClassName = _b.checkboxCellClassName, \n /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */\n rowFieldsAs = _b.rowFieldsAs, selection = _b.selection, indentWidth = _b.indentWidth, enableUpdateAnimations = _b.enableUpdateAnimations, compact = _b.compact, theme = _b.theme, styles = _b.styles, cellsByColumn = _b.cellsByColumn, groupNestingDepth = _b.groupNestingDepth, _f = _b.useFastIcons, useFastIcons = _f === void 0 ? true : _f, cellStyleProps = _b.cellStyleProps, group = _b.group, focusZoneProps = _b.focusZoneProps, _g = _b.disabled, disabled = _g === void 0 ? false : _g;\n var _h = this.state, columnMeasureInfo = _h.columnMeasureInfo, isDropping = _h.isDropping;\n var _j = this.state.selectionState, _k = _j.isSelected, isSelected = _k === void 0 ? false : _k, _l = _j.isSelectionModal, isSelectionModal = _l === void 0 ? false : _l;\n var isDraggable = dragDropEvents ? !!(dragDropEvents.canDrag && dragDropEvents.canDrag(item)) : undefined;\n var droppingClassName = isDropping ? this._droppingClassNames || DEFAULT_DROPPING_CSS_CLASS : '';\n var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;\n var ariaRowDescription = getRowAriaDescription ? getRowAriaDescription(item) : undefined;\n var ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;\n var canSelect = !!selection && selection.canSelectItem(item, itemIndex) && !disabled;\n var isContentUnselectable = selectionMode === SelectionMode.multiple;\n var showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;\n var ariaSelected = selectionMode === SelectionMode.none ? undefined : isSelected;\n var ariaPositionInSet = group ? itemIndex - group.startIndex + 1 : undefined;\n var ariaSetSize = group ? group.count : undefined;\n var focusZoneDirection = focusZoneProps ? focusZoneProps.direction : FocusZoneDirection.horizontal;\n this._classNames = __assign(__assign({}, this._classNames), getClassNames(styles, {\n theme: theme,\n isSelected: isSelected,\n canSelect: !isContentUnselectable,\n anySelected: isSelectionModal,\n checkboxCellClassName: checkboxCellClassName,\n droppingClassName: droppingClassName,\n className: className,\n compact: compact,\n enableUpdateAnimations: enableUpdateAnimations,\n cellStyleProps: cellStyleProps,\n disabled: disabled,\n }));\n var rowClassNames = {\n isMultiline: this._classNames.isMultiline,\n isRowHeader: this._classNames.isRowHeader,\n cell: this._classNames.cell,\n cellAnimation: this._classNames.cellAnimation,\n cellPadded: this._classNames.cellPadded,\n cellUnpadded: this._classNames.cellUnpadded,\n fields: this._classNames.fields,\n };\n // Only re-assign rowClassNames when classNames have changed.\n // Otherwise, they will cause DetailsRowFields to unnecessarily\n // re-render, see https://github.com/microsoft/fluentui/pull/8799.\n // Refactor DetailsRowFields to generate own styles to remove need for this.\n if (!shallowCompare(this._rowClassNames || {}, rowClassNames)) {\n this._rowClassNames = rowClassNames;\n }\n var RowFields = rowFieldsAs ? composeComponentAs(rowFieldsAs, DetailsRowFields) : DetailsRowFields;\n var rowFields = (React.createElement(RowFields, { rowClassNames: this._rowClassNames, rowHeaderId: \"\".concat(id, \"-header\"), cellsByColumn: cellsByColumn, columns: columns, item: item, itemIndex: itemIndex, isSelected: isSelected, columnStartIndex: (showCheckbox ? 1 : 0) + (groupNestingDepth ? 1 : 0), onRenderItemColumn: onRenderItemColumn, onRenderField: onRenderField, getCellValueKey: getCellValueKey, enableUpdateAnimations: enableUpdateAnimations, cellStyleProps: cellStyleProps }));\n var defaultRole = 'row';\n var role = this.props.role ? this.props.role : defaultRole;\n this._ariaRowDescriptionId = getId('DetailsRow-description');\n // When the user does not specify any column is a row-header in the columns props,\n // The aria-labelledby of the checkbox does not specify {id}-header.\n var hasRowHeader = columns.some(function (column) {\n return !!column.isRowHeader;\n });\n var ariaLabelledby = \"\".concat(id, \"-checkbox\") + (hasRowHeader ? \" \".concat(id, \"-header\") : '');\n // additional props for rows within a GroupedList\n // these are needed for treegrid row semantics, but not grid row semantics\n var groupedListRowProps = isGridRow\n ? {}\n : {\n 'aria-level': (groupNestingDepth && groupNestingDepth + 1) || undefined,\n 'aria-posinset': ariaPositionInSet,\n 'aria-setsize': ariaSetSize,\n };\n return (React.createElement(FocusZone, __assign({ \"data-is-focusable\": true }, getNativeProps(this.props, divProperties), (typeof isDraggable === 'boolean'\n ? {\n 'data-is-draggable': isDraggable,\n draggable: isDraggable,\n }\n : {}), focusZoneProps, groupedListRowProps, { direction: focusZoneDirection, elementRef: this._root, componentRef: this._focusZone, role: role, \"aria-label\": ariaLabel, \"aria-disabled\": disabled || undefined, \"aria-describedby\": ariaRowDescription ? this._ariaRowDescriptionId : ariaDescribedBy, className: this._classNames.root, \"data-selection-index\": itemIndex, \"data-selection-touch-invoke\": true, \"data-selection-disabled\": (_a = this.props['data-selection-disabled']) !== null && _a !== void 0 ? _a : (disabled || undefined), \"data-item-index\": itemIndex, \"aria-rowindex\": ariaPositionInSet === undefined ? itemIndex + flatIndexOffset : undefined, \"data-automationid\": \"DetailsRow\", \"aria-selected\": ariaSelected, allowFocusRoot: true }),\n ariaRowDescription ? (React.createElement(\"span\", { key: \"description\", role: \"presentation\", hidden: true, id: this._ariaRowDescriptionId }, ariaRowDescription)) : null,\n showCheckbox && (React.createElement(\"div\", { role: \"gridcell\", \"data-selection-toggle\": true, className: this._classNames.checkCell }, onRenderCheck({\n id: id ? \"\".concat(id, \"-checkbox\") : undefined,\n selected: isSelected,\n selectionMode: selectionMode,\n anySelected: isSelectionModal,\n 'aria-label': checkButtonAriaLabel,\n 'aria-labelledby': id ? ariaLabelledby : undefined,\n canSelect: canSelect,\n compact: compact,\n className: this._classNames.check,\n theme: theme,\n isVisible: checkboxVisibility === CheckboxVisibility.always,\n onRenderDetailsCheckbox: onRenderDetailsCheckbox,\n useFastIcons: useFastIcons,\n }))),\n React.createElement(GroupSpacer, { indentWidth: indentWidth, role: \"gridcell\", count: groupNestingDepth === 0 ? -1 : groupNestingDepth }),\n item && rowFields,\n columnMeasureInfo && (React.createElement(\"span\", { role: \"presentation\", className: css(this._classNames.cellMeasurer, this._classNames.cell), ref: this._cellMeasurer },\n React.createElement(RowFields, { rowClassNames: this._rowClassNames, rowHeaderId: \"\".concat(id, \"-header\"), columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, columnStartIndex: (showCheckbox ? 1 : 0) + (groupNestingDepth ? 1 : 0) + columns.length, onRenderItemColumn: onRenderItemColumn, getCellValueKey: getCellValueKey })))));\n };\n /**\n * measure cell at index. and call the call back with the measured cell width when finish measure\n *\n * @param index - The cell index\n * @param onMeasureDone - The call back function when finish measure\n */\n DetailsRowBase.prototype.measureCell = function (index, onMeasureDone) {\n var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n var column = __assign({}, columns[index]);\n column.minWidth = 0;\n column.maxWidth = 999999;\n delete column.calculatedWidth;\n this.setState({\n columnMeasureInfo: {\n index: index,\n column: column,\n onMeasureDone: onMeasureDone,\n },\n });\n };\n DetailsRowBase.prototype.focus = function (forceIntoFirstElement) {\n var _a;\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n return !!((_a = this._focusZone.current) === null || _a === void 0 ? void 0 : _a.focus(forceIntoFirstElement));\n };\n DetailsRowBase.prototype._onRenderCheck = function (props) {\n return React.createElement(DetailsRowCheck, __assign({}, props));\n };\n DetailsRowBase.prototype._getRowDragDropOptions = function () {\n var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;\n var options = {\n eventMap: eventsToRegister,\n selectionIndex: itemIndex,\n context: { data: item, index: itemIndex },\n canDrag: dragDropEvents.canDrag,\n canDrop: dragDropEvents.canDrop,\n onDragStart: dragDropEvents.onDragStart,\n updateDropState: this._updateDroppingState,\n onDrop: dragDropEvents.onDrop,\n onDragEnd: dragDropEvents.onDragEnd,\n onDragOver: dragDropEvents.onDragOver,\n };\n return options;\n };\n return DetailsRowBase;\n}(React.Component));\nexport { DetailsRowBase };\nfunction getSelectionState(props) {\n var _a;\n var itemIndex = props.itemIndex, selection = props.selection;\n return {\n isSelected: !!(selection === null || selection === void 0 ? void 0 : selection.isIndexSelected(itemIndex)),\n isSelectionModal: !!((_a = selection === null || selection === void 0 ? void 0 : selection.isModal) === null || _a === void 0 ? void 0 : _a.call(selection)),\n };\n}\n//# sourceMappingURL=DetailsRow.base.js.map","import { styled } from '../../Utilities';\nimport { DetailsRowBase } from './DetailsRow.base';\nimport { getDetailsRowStyles } from './DetailsRow.styles';\nexport var DetailsRow = styled(DetailsRowBase, getDetailsRowStyles, undefined, {\n scope: 'DetailsRow',\n});\n//# sourceMappingURL=DetailsRow.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, AnimationStyles, HighContrastSelector, getFocusStyle, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { GlobalClassNames as LinkGlobalClassNames } from '../../components/Link/Link.styles';\nexport var DetailsRowGlobalClassNames = {\n root: 'ms-DetailsRow',\n // TODO: in Fabric 7.0 lowercase the 'Compact' for consistency across other components.\n compact: 'ms-DetailsList--Compact',\n cell: 'ms-DetailsRow-cell',\n cellAnimation: 'ms-DetailsRow-cellAnimation',\n cellCheck: 'ms-DetailsRow-cellCheck',\n check: 'ms-DetailsRow-check',\n cellMeasurer: 'ms-DetailsRow-cellMeasurer',\n listCellFirstChild: 'ms-List-cell:first-child',\n isContentUnselectable: 'is-contentUnselectable',\n isSelected: 'is-selected',\n isCheckVisible: 'is-check-visible',\n isRowHeader: 'is-row-header',\n fields: 'ms-DetailsRow-fields',\n};\nvar IsFocusableSelector = \"[data-is-focusable='true']\";\nexport var DEFAULT_CELL_STYLE_PROPS = {\n cellLeftPadding: 12,\n cellRightPadding: 8,\n cellExtraRightPadding: 24,\n};\n// Source of default row heights to share.\nexport var DEFAULT_ROW_HEIGHTS = {\n rowHeight: 42,\n compactRowHeight: 32,\n};\n// Constant values\nvar values = __assign(__assign({}, DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });\nexport var getDetailsRowStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _q = props.cellStyleProps, cellStyleProps = _q === void 0 ? DEFAULT_CELL_STYLE_PROPS : _q, enableUpdateAnimations = props.enableUpdateAnimations, disabled = props.disabled;\n var palette = theme.palette, fonts = theme.fonts;\n var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;\n var _r = theme.semanticColors, focusBorder = _r.focusBorder, focusedLinkColor = _r.linkHovered;\n var classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme);\n var colors = {\n // Default\n defaultHeaderText: neutralPrimary,\n defaultMetaText: neutralSecondary,\n defaultBackground: white,\n // Default Hover\n defaultHoverHeaderText: neutralDark,\n defaultHoverMetaText: neutralPrimary,\n defaultHoverBackground: neutralLighter,\n // Selected\n selectedHeaderText: neutralDark,\n selectedMetaText: neutralPrimary,\n selectedBackground: neutralLight,\n // Selected Hover\n selectedHoverHeaderText: neutralDark,\n selectedHoverMetaText: neutralPrimary,\n selectedHoverBackground: neutralQuaternaryAlt,\n // Focus\n focusHeaderText: neutralDark,\n focusMetaText: neutralPrimary,\n focusBackground: neutralLight,\n focusHoverBackground: neutralQuaternaryAlt,\n };\n var rowHighContrastFocus = {\n top: 2,\n right: 2,\n bottom: 2,\n left: 2,\n };\n // Selected row styles\n var selectedStyles = [\n getFocusStyle(theme, {\n inset: -1,\n borderColor: focusBorder,\n outlineColor: white,\n highContrastStyle: rowHighContrastFocus,\n pointerEvents: 'none',\n }),\n classNames.isSelected,\n {\n color: colors.selectedMetaText,\n background: colors.selectedBackground,\n borderBottom: \"1px solid \".concat(white),\n selectors: (_a = {\n '&:before': {\n position: 'absolute',\n display: 'block',\n top: -1,\n height: 1,\n bottom: 0,\n left: 0,\n right: 0,\n content: '',\n borderTop: \"1px solid \".concat(white),\n }\n },\n _a[\".\".concat(classNames.cell, \" > .\").concat(LinkGlobalClassNames.root)] = {\n color: focusedLinkColor,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _b),\n },\n // Selected State hover\n _a['&:hover'] = {\n background: colors.selectedHoverBackground,\n color: colors.selectedHoverMetaText,\n selectors: (_c = {},\n // Selected State hover meta cell\n _c[HighContrastSelector] = {\n background: 'Highlight',\n selectors: (_d = {},\n _d[\".\".concat(classNames.cell)] = {\n color: 'HighlightText',\n },\n _d[\".\".concat(classNames.cell, \" > .\").concat(LinkGlobalClassNames.root)] = {\n forcedColorAdjust: 'none',\n color: 'HighlightText',\n },\n _d),\n },\n // Selected State hover Header cell\n _c[\".\".concat(classNames.isRowHeader)] = {\n color: colors.selectedHoverHeaderText,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _e),\n },\n _c),\n },\n // Focus state\n _a['&:focus'] = {\n background: colors.focusBackground,\n selectors: (_f = {},\n // Selected State hover meta cell\n _f[\".\".concat(classNames.cell)] = {\n color: colors.focusMetaText,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText',\n },\n },\n },\n _g),\n },\n // Row header cell\n _f[\".\".concat(classNames.isRowHeader)] = {\n color: colors.focusHeaderText,\n selectors: (_h = {},\n _h[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _h),\n },\n // Ensure high-contrast mode overrides default focus background\n _f[HighContrastSelector] = {\n background: 'Highlight',\n },\n _f),\n },\n _a[HighContrastSelector] = __assign(__assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()), { selectors: {\n a: {\n color: 'HighlightText',\n },\n } }),\n // Focus and hover state\n _a['&:focus:hover'] = {\n background: colors.focusHoverBackground,\n },\n _a),\n },\n ];\n var cannotSelectStyles = [\n classNames.isContentUnselectable,\n {\n userSelect: 'none',\n cursor: 'default',\n },\n ];\n var rootCompactStyles = {\n minHeight: values.compactRowHeight,\n border: 0,\n };\n var cellCompactStyles = {\n minHeight: values.compactRowHeight,\n paddingTop: values.compactRowVerticalPadding,\n paddingBottom: values.compactRowVerticalPadding,\n paddingLeft: \"\".concat(cellStyleProps.cellLeftPadding, \"px\"),\n };\n var defaultCellStyles = [\n getFocusStyle(theme, { inset: -1 }),\n classNames.cell,\n {\n display: 'inline-block',\n position: 'relative',\n boxSizing: 'border-box',\n minHeight: values.rowHeight,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n paddingTop: values.rowVerticalPadding,\n paddingBottom: values.rowVerticalPadding,\n paddingLeft: \"\".concat(cellStyleProps.cellLeftPadding, \"px\"),\n selectors: (_j = {\n '& > button': {\n maxWidth: '100%',\n }\n },\n _j[IsFocusableSelector] = getFocusStyle(theme, { inset: -1, borderColor: neutralSecondary, outlineColor: white }),\n _j),\n },\n isSelected && {\n selectors: (_k = {},\n _k[HighContrastSelector] = __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _k),\n },\n compact && cellCompactStyles,\n disabled && { opacity: 0.5 },\n ];\n return {\n root: [\n classNames.root,\n AnimationClassNames.fadeIn400,\n droppingClassName,\n theme.fonts.small,\n isCheckVisible && classNames.isCheckVisible,\n getFocusStyle(theme, { borderColor: focusBorder, outlineColor: white }),\n {\n borderBottom: \"1px solid \".concat(neutralLighter),\n background: colors.defaultBackground,\n color: colors.defaultMetaText,\n // This ensures that the row always tries to consume is minimum width and does not compress.\n display: 'inline-flex',\n minWidth: '100%',\n minHeight: values.rowHeight,\n whiteSpace: 'nowrap',\n padding: 0,\n boxSizing: 'border-box',\n verticalAlign: 'top',\n textAlign: 'left',\n selectors: (_l = {},\n _l[\".\".concat(classNames.listCellFirstChild, \" &:before\")] = {\n display: 'none',\n },\n _l['&:hover'] = {\n background: colors.defaultHoverBackground,\n color: colors.defaultHoverMetaText,\n selectors: (_m = {},\n _m[\".\".concat(classNames.isRowHeader)] = {\n color: colors.defaultHoverHeaderText,\n },\n _m[\".\".concat(classNames.cell, \" > .\").concat(LinkGlobalClassNames.root)] = {\n color: focusedLinkColor,\n },\n _m),\n },\n _l[\"&:hover .\".concat(classNames.check)] = {\n opacity: 1,\n },\n _l[\".\".concat(IsFocusVisibleClassName, \" &:focus .\").concat(classNames.check)] = {\n opacity: 1,\n },\n _l['.ms-GroupSpacer'] = {\n flexShrink: 0,\n flexGrow: 0,\n },\n _l),\n },\n isSelected && selectedStyles,\n !canSelect && cannotSelectStyles,\n compact && rootCompactStyles,\n className,\n ],\n cellUnpadded: {\n paddingRight: \"\".concat(cellStyleProps.cellRightPadding, \"px\"),\n },\n cellPadded: {\n paddingRight: \"\".concat(cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding, \"px\"),\n selectors: (_o = {},\n _o[\"&.\".concat(classNames.cellCheck)] = {\n paddingRight: 0,\n },\n _o),\n },\n cell: defaultCellStyles,\n cellAnimation: enableUpdateAnimations && AnimationStyles.slideLeftIn40,\n cellMeasurer: [\n classNames.cellMeasurer,\n {\n overflow: 'visible',\n whiteSpace: 'nowrap',\n },\n ],\n checkCell: [\n defaultCellStyles,\n classNames.cellCheck,\n checkboxCellClassName,\n {\n padding: 0,\n // Ensure that the check cell covers the top border of the cell.\n // This ensures the click target does not leave a spot which would\n // cause other items to be deselected.\n paddingTop: 1,\n marginTop: -1,\n flexShrink: 0,\n },\n ],\n fields: [\n classNames.fields,\n {\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n isRowHeader: [\n classNames.isRowHeader,\n {\n color: colors.defaultHeaderText,\n fontSize: fonts.medium.fontSize,\n },\n isSelected && {\n color: colors.selectedHeaderText,\n fontWeight: FontWeights.semibold,\n selectors: (_p = {},\n _p[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _p),\n },\n ],\n isMultiline: [\n defaultCellStyles,\n {\n whiteSpace: 'normal',\n wordBreak: 'break-word',\n textOverflow: 'clip',\n },\n ],\n check: [classNames.check],\n };\n};\n//# sourceMappingURL=DetailsRow.styles.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { css, styled, classNamesFunction, composeRenderFunction, getNativeElementProps } from '../../Utilities';\nimport { Check } from '../../Check';\nimport { getDetailsRowCheckStyles } from './DetailsRowCheck.styles';\nimport { SelectionMode } from '../../Selection';\nvar getClassNames = classNamesFunction();\nvar DetailsRowCheckBase = function (props) {\n var _a = props.isVisible, isVisible = _a === void 0 ? false : _a, _b = props.canSelect, canSelect = _b === void 0 ? false : _b, _c = props.anySelected, anySelected = _c === void 0 ? false : _c, _d = props.selected, selected = _d === void 0 ? false : _d, selectionMode = props.selectionMode, _e = props.isHeader, isHeader = _e === void 0 ? false : _e, className = props.className, checkClassName = props.checkClassName, styles = props.styles, theme = props.theme, compact = props.compact, onRenderDetailsCheckbox = props.onRenderDetailsCheckbox, _f = props.useFastIcons, useFastIcons = _f === void 0 ? true : _f, // must be removed from buttonProps\n buttonProps = __rest(props, [\"isVisible\", \"canSelect\", \"anySelected\", \"selected\", \"selectionMode\", \"isHeader\", \"className\", \"checkClassName\", \"styles\", \"theme\", \"compact\", \"onRenderDetailsCheckbox\", \"useFastIcons\"]);\n var defaultCheckboxRender = useFastIcons ? _fastDefaultCheckboxRender : _defaultCheckboxRender;\n var onRenderCheckbox = onRenderDetailsCheckbox\n ? composeRenderFunction(onRenderDetailsCheckbox, defaultCheckboxRender)\n : defaultCheckboxRender;\n var classNames = getClassNames(styles, {\n theme: theme,\n canSelect: canSelect,\n selected: selected,\n anySelected: anySelected,\n className: className,\n isHeader: isHeader,\n isVisible: isVisible,\n compact: compact,\n });\n var detailsCheckboxProps = {\n checked: selected,\n theme: theme,\n };\n var divProps = getNativeElementProps('div', buttonProps, ['aria-label', 'aria-labelledby', 'aria-describedby']);\n var checkRole = selectionMode === SelectionMode.single ? 'radio' : 'checkbox';\n return canSelect ? (React.createElement(\"div\", __assign({}, buttonProps, { role: checkRole, \n // eslint-disable-next-line deprecation/deprecation\n className: css(classNames.root, classNames.check), \"aria-checked\": selected, \"data-selection-toggle\": true, \"data-automationid\": \"DetailsRowCheck\", tabIndex: -1 }), onRenderCheckbox(detailsCheckboxProps))) : (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", __assign({}, divProps, { className: css(classNames.root, classNames.check) })));\n};\nvar FastCheck = React.memo(function (props) {\n return React.createElement(Check, { theme: props.theme, checked: props.checked, className: props.className, useFastIcons: true });\n});\nfunction _defaultCheckboxRender(checkboxProps) {\n return React.createElement(Check, { checked: checkboxProps.checked });\n}\nfunction _fastDefaultCheckboxRender(checkboxProps) {\n return React.createElement(FastCheck, { theme: checkboxProps.theme, checked: checkboxProps.checked });\n}\nexport var DetailsRowCheck = styled(DetailsRowCheckBase, getDetailsRowCheckStyles, undefined, { scope: 'DetailsRowCheck' }, true);\n//# sourceMappingURL=DetailsRowCheck.js.map","import { getGlobalClassNames, getFocusStyle } from '../../Styling';\nimport { DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles';\nimport { HEADER_HEIGHT } from './DetailsHeader.styles';\nimport { CheckGlobalClassNames } from '../../components/Check/Check.styles';\nvar GlobalClassNames = {\n root: 'ms-DetailsRow-check',\n isDisabled: 'ms-DetailsRow-check--isDisabled',\n isHeader: 'ms-DetailsRow-check--isHeader',\n};\nexport var CHECK_CELL_WIDTH = 48;\nexport var getDetailsRowCheckStyles = function (props) {\n var theme = props.theme, className = props.className, isHeader = props.isHeader, selected = props.selected, anySelected = props.anySelected, canSelect = props.canSelect, compact = props.compact, isVisible = props.isVisible;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var rowHeight = DEFAULT_ROW_HEIGHTS.rowHeight, compactRowHeight = DEFAULT_ROW_HEIGHTS.compactRowHeight;\n var height = isHeader ? HEADER_HEIGHT : compact ? compactRowHeight : rowHeight;\n var isCheckVisible = isVisible || selected || anySelected;\n return {\n root: [classNames.root, className],\n check: [\n !canSelect && classNames.isDisabled,\n isHeader && classNames.isHeader,\n getFocusStyle(theme),\n theme.fonts.small,\n CheckGlobalClassNames.checkHost,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'default',\n boxSizing: 'border-box',\n verticalAlign: 'top',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n opacity: isCheckVisible ? 1 : 0,\n height: height,\n width: CHECK_CELL_WIDTH,\n padding: 0,\n margin: 0,\n },\n ],\n isDisabled: [],\n };\n};\n//# sourceMappingURL=DetailsRowCheck.styles.js.map","import * as React from 'react';\nimport { composeRenderFunction, css } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nvar getCellText = function (item, column) {\n var value = item && column && column.fieldName ? item[column.fieldName] : '';\n if (value === null || value === undefined) {\n value = '';\n }\n if (typeof value === 'boolean') {\n return value.toString();\n }\n return value;\n};\n/**\n * Component for rendering a row's cells in a `DetailsList`.\n *\n * {@docCategory DetailsList}\n */\nexport var DetailsRowFields = function (props) {\n var columns = props.columns, rowClassNames = props.rowClassNames, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a, item = props.item, itemIndex = props.itemIndex, isSelected = props.isSelected, onRenderItemColumn = props.onRenderItemColumn, getCellValueKey = props.getCellValueKey, propsOnRenderField = props.onRenderField, cellsByColumn = props.cellsByColumn, enableUpdateAnimations = props.enableUpdateAnimations, rowHeaderId = props.rowHeaderId;\n var cellValueKeysRef = React.useRef();\n var cellValueKeys = cellValueKeysRef.current || (cellValueKeysRef.current = {});\n var defaultOnRenderField = React.useCallback(function (fieldProps) {\n var column = fieldProps.column, cellValueKey = fieldProps.cellValueKey, className = fieldProps.className, onRender = fieldProps.onRender, fieldItem = fieldProps.item, fieldItemIndex = fieldProps.itemIndex;\n var width = typeof column.calculatedWidth === 'undefined'\n ? 'auto'\n : column.calculatedWidth +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);\n var key = \"\".concat(column.key).concat(cellValueKey !== undefined ? \"-\".concat(cellValueKey) : '');\n return (React.createElement(\"div\", { key: key, id: column.isRowHeader ? rowHeaderId : undefined, role: column.isRowHeader ? 'rowheader' : 'gridcell', className: css(column.className, column.isMultiline && rowClassNames.isMultiline, column.isRowHeader && rowClassNames.isRowHeader, rowClassNames.cell, column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded, className), style: { width: width }, \"data-automationid\": \"DetailsRowCell\", \"data-automation-key\": column.key }, onRender(fieldItem, fieldItemIndex, column)));\n }, [rowClassNames, cellStyleProps, rowHeaderId]);\n return (React.createElement(\"div\", { className: rowClassNames.fields, \"data-automationid\": \"DetailsRowFields\", role: \"presentation\" }, columns.map(function (column) {\n var _a = column.getValueKey, getValueKey = _a === void 0 ? getCellValueKey : _a;\n var onRender = (cellsByColumn && column.key in cellsByColumn && (function () { return cellsByColumn[column.key]; })) ||\n column.onRender ||\n onRenderItemColumn ||\n defaultOnRender;\n var onRenderField = defaultOnRenderField;\n if (column.onRenderField) {\n onRenderField = composeRenderFunction(column.onRenderField, onRenderField);\n }\n if (propsOnRenderField) {\n onRenderField = composeRenderFunction(propsOnRenderField, onRenderField);\n }\n var previousValueKey = cellValueKeys[column.key];\n var cellValueKey = enableUpdateAnimations && getValueKey ? getValueKey(item, itemIndex, column) : undefined;\n var showAnimation = false;\n if (cellValueKey !== undefined && previousValueKey !== undefined && cellValueKey !== previousValueKey) {\n showAnimation = true;\n }\n cellValueKeys[column.key] = cellValueKey;\n return onRenderField({\n item: item,\n itemIndex: itemIndex,\n isSelected: isSelected,\n column: column,\n cellValueKey: cellValueKey,\n className: showAnimation ? rowClassNames.cellAnimation : undefined,\n onRender: onRender,\n });\n })));\n};\nfunction defaultOnRender(item, index, column) {\n if (!item || !column) {\n return null;\n }\n return getCellText(item, column);\n}\n//# sourceMappingURL=DetailsRowFields.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css } from '../../Utilities';\nimport { SelectionMode } from '../../Selection';\nimport { DetailsList } from './DetailsList';\nimport { Shimmer, ShimmerElementsGroup, ShimmerElementType } from '../../Shimmer';\nimport { CheckboxVisibility } from './DetailsList.types';\nimport { DEFAULT_CELL_STYLE_PROPS, DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles';\nvar getClassNames = classNamesFunction();\nvar SHIMMER_INITIAL_ITEMS = 10;\nvar DEFAULT_SHIMMER_HEIGHT = 7;\nvar SHIMMER_LINE_VS_CELL_WIDTH_RATIO = 0.95;\nvar ShimmeredDetailsListBase = /** @class */ (function (_super) {\n __extends(ShimmeredDetailsListBase, _super);\n function ShimmeredDetailsListBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onRenderShimmerPlaceholder = function (index, rowProps) {\n var onRenderCustomPlaceholder = _this.props.onRenderCustomPlaceholder;\n var placeholderElements = onRenderCustomPlaceholder\n ? onRenderCustomPlaceholder(rowProps, index, _this._renderDefaultShimmerPlaceholder)\n : _this._renderDefaultShimmerPlaceholder(rowProps);\n return React.createElement(Shimmer, { customElementsGroup: placeholderElements });\n };\n _this._renderDefaultShimmerPlaceholder = function (rowProps) {\n var columns = rowProps.columns, compact = rowProps.compact, selectionMode = rowProps.selectionMode, checkboxVisibility = rowProps.checkboxVisibility, _a = rowProps.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n var rowHeight = DEFAULT_ROW_HEIGHTS.rowHeight, compactRowHeight = DEFAULT_ROW_HEIGHTS.compactRowHeight;\n // 1px to take into account the border-bottom of DetailsRow.\n var gapHeight = compact ? compactRowHeight : rowHeight + 1;\n var shimmerElementsRow = [];\n var showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;\n if (showCheckbox) {\n shimmerElementsRow.push(React.createElement(ShimmerElementsGroup, { key: 'checkboxGap', shimmerElements: [{ type: ShimmerElementType.gap, width: '40px', height: gapHeight }] }));\n }\n columns.forEach(function (column, columnIdx) {\n var shimmerElements = [];\n var groupWidth = cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n column.calculatedWidth +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);\n shimmerElements.push({\n type: ShimmerElementType.gap,\n width: cellStyleProps.cellLeftPadding,\n height: gapHeight,\n });\n if (column.isIconOnly) {\n shimmerElements.push({\n type: ShimmerElementType.line,\n width: column.calculatedWidth,\n height: column.calculatedWidth,\n });\n shimmerElements.push({\n type: ShimmerElementType.gap,\n width: cellStyleProps.cellRightPadding,\n height: gapHeight,\n });\n }\n else {\n shimmerElements.push({\n type: ShimmerElementType.line,\n width: column.calculatedWidth * SHIMMER_LINE_VS_CELL_WIDTH_RATIO,\n height: DEFAULT_SHIMMER_HEIGHT,\n });\n shimmerElements.push({\n type: ShimmerElementType.gap,\n width: cellStyleProps.cellRightPadding +\n (column.calculatedWidth - column.calculatedWidth * SHIMMER_LINE_VS_CELL_WIDTH_RATIO) +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),\n height: gapHeight,\n });\n }\n shimmerElementsRow.push(React.createElement(ShimmerElementsGroup, { key: columnIdx, width: \"\".concat(groupWidth, \"px\"), shimmerElements: shimmerElements }));\n });\n // When resizing the window from narrow to wider, we need to cover the exposed Shimmer wave\n // until the column resizing logic is done.\n shimmerElementsRow.push(React.createElement(ShimmerElementsGroup, { key: 'endGap', width: '100%', shimmerElements: [{ type: ShimmerElementType.gap, width: '100%', height: gapHeight }] }));\n return React.createElement(\"div\", { style: { display: 'flex' } }, shimmerElementsRow);\n };\n _this._shimmerItems = props.shimmerLines ? new Array(props.shimmerLines) : new Array(SHIMMER_INITIAL_ITEMS);\n return _this;\n }\n ShimmeredDetailsListBase.prototype.render = function () {\n var _a = this.props, detailsListStyles = _a.detailsListStyles, enableShimmer = _a.enableShimmer, items = _a.items, listProps = _a.listProps, onRenderCustomPlaceholder = _a.onRenderCustomPlaceholder, removeFadingOverlay = _a.removeFadingOverlay, shimmerLines = _a.shimmerLines, styles = _a.styles, theme = _a.theme, ariaLabelForGrid = _a.ariaLabelForGrid, ariaLabelForShimmer = _a.ariaLabelForShimmer, restProps = __rest(_a, [\"detailsListStyles\", \"enableShimmer\", \"items\", \"listProps\", \"onRenderCustomPlaceholder\", \"removeFadingOverlay\", \"shimmerLines\", \"styles\", \"theme\", \"ariaLabelForGrid\", \"ariaLabelForShimmer\"]);\n var listClassName = listProps && listProps.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n });\n var newListProps = __assign(__assign({}, listProps), { \n // Adds to the optional listProp className a fading out overlay className only when `enableShimmer` toggled on\n // and the overlay is not disabled by `removeFadingOverlay` prop.\n className: enableShimmer && !removeFadingOverlay ? css(this._classNames.root, listClassName) : listClassName });\n return (React.createElement(DetailsList, __assign({}, restProps, { styles: detailsListStyles, items: enableShimmer ? this._shimmerItems : items, isPlaceholderData: enableShimmer, ariaLabelForGrid: (enableShimmer && ariaLabelForShimmer) || ariaLabelForGrid, onRenderMissingItem: this._onRenderShimmerPlaceholder, listProps: newListProps })));\n };\n return ShimmeredDetailsListBase;\n}(React.Component));\nexport { ShimmeredDetailsListBase };\n//# sourceMappingURL=ShimmeredDetailsList.base.js.map","import { styled } from '../../Utilities';\nimport { ShimmeredDetailsListBase } from './ShimmeredDetailsList.base';\nimport { getShimmeredDetailsListStyles } from './ShimmeredDetailsList.styles';\nexport var ShimmeredDetailsList = styled(ShimmeredDetailsListBase, getShimmeredDetailsListStyles, undefined, { scope: 'ShimmeredDetailsList' });\n//# sourceMappingURL=ShimmeredDetailsList.js.map","export var getShimmeredDetailsListStyles = function (props) {\n var theme = props.theme;\n var palette = theme.palette;\n return {\n root: {\n position: 'relative',\n selectors: {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n // eslint-disable-next-line @fluentui/max-len\n backgroundImage: \"linear-gradient(to bottom, transparent 30%, \".concat(palette.whiteTranslucent40, \" 65%,\").concat(palette.white, \" 100%)\"),\n },\n },\n },\n };\n};\n//# sourceMappingURL=ShimmeredDetailsList.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { warnDeprecations, classNamesFunction, getId } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { Modal } from '../../Modal';\nimport { withResponsiveMode } from '../../ResponsiveMode';\nvar getClassNames = classNamesFunction();\nimport { DialogContent } from './DialogContent';\nvar DefaultModalProps = {\n isDarkOverlay: false,\n isBlocking: false,\n className: '',\n containerClassName: '',\n topOffsetFixed: false,\n enableAriaHiddenSiblings: true,\n};\nvar DefaultDialogContentProps = {\n type: DialogType.normal,\n className: '',\n topButtonsProps: [],\n};\n// eslint-disable-next-line deprecation/deprecation\nvar DialogBase = /** @class */ (function (_super) {\n __extends(DialogBase, _super);\n function DialogBase(props) {\n var _this = _super.call(this, props) || this;\n _this._getSubTextId = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, ariaDescribedById = _a.ariaDescribedById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, subText = _a.subText;\n var id = (modalProps && modalProps.subtitleAriaId) || ariaDescribedById;\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.subText) || subText) && _this._defaultSubTextId;\n }\n return id;\n };\n _this._getTitleTextId = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, ariaLabelledById = _a.ariaLabelledById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, title = _a.title;\n var id = (modalProps && modalProps.titleAriaId) || ariaLabelledById;\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.title) || title) && _this._defaultTitleTextId;\n }\n return id;\n };\n _this._id = getId('Dialog');\n _this._defaultTitleTextId = _this._id + '-title';\n _this._defaultSubTextId = _this._id + '-subText';\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('Dialog', props, {\n isOpen: 'hidden',\n type: 'dialogContentProps.type',\n subText: 'dialogContentProps.subText',\n contentClassName: 'dialogContentProps.className',\n topButtonsProps: 'dialogContentProps.topButtonsProps',\n className: 'modalProps.className',\n isDarkOverlay: 'modalProps.isDarkOverlay',\n isBlocking: 'modalProps.isBlocking',\n containerClassName: 'modalProps.containerClassName',\n onDismissed: 'modalProps.onDismissed',\n onLayerDidMount: 'modalProps.layerProps.onLayerDidMount',\n ariaDescribedById: 'modalProps.subtitleAriaId',\n ariaLabelledById: 'modalProps.titleAriaId',\n });\n }\n return _this;\n }\n DialogBase.prototype.render = function () {\n var _a, _b, _c;\n var props = this.props;\n var \n /* eslint-disable deprecation/deprecation */\n className = props.className, containerClassName = props.containerClassName, contentClassName = props.contentClassName, elementToFocusOnDismiss = props.elementToFocusOnDismiss, firstFocusableSelector = props.firstFocusableSelector, forceFocusInsideTrap = props.forceFocusInsideTrap, styles = props.styles, hidden = props.hidden, _d = props.disableRestoreFocus, disableRestoreFocus = _d === void 0 ? props.ignoreExternalFocusing : _d, isBlocking = props.isBlocking, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, isDarkOverlay = props.isDarkOverlay, _e = props.isOpen, isOpen = _e === void 0 ? !hidden : _e, onDismiss = props.onDismiss, onDismissed = props.onDismissed, onLayerDidMount = props.onLayerDidMount, responsiveMode = props.responsiveMode, subText = props.subText, theme = props.theme, title = props.title, topButtonsProps = props.topButtonsProps, type = props.type, \n /* eslint-enable deprecation/deprecation */\n minWidth = props.minWidth, maxWidth = props.maxWidth, modalProps = props.modalProps;\n var mergedLayerProps = __assign({ onLayerDidMount: onLayerDidMount }, modalProps === null || modalProps === void 0 ? void 0 : modalProps.layerProps);\n var dialogDraggableClassName;\n var dragOptions;\n // If dragOptions are provided, but no drag handle is specified, we supply a drag handle,\n // and inform dialog contents to add class to draggable class to the header\n if ((modalProps === null || modalProps === void 0 ? void 0 : modalProps.dragOptions) && !((_a = modalProps.dragOptions) === null || _a === void 0 ? void 0 : _a.dragHandleSelector)) {\n // spread options to avoid mutating props\n dragOptions = __assign({}, modalProps.dragOptions);\n dialogDraggableClassName = 'ms-Dialog-draggable-header';\n dragOptions.dragHandleSelector = \".\".concat(dialogDraggableClassName);\n }\n var mergedModalProps = __assign(__assign(__assign(__assign({}, DefaultModalProps), { elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, disableRestoreFocus: disableRestoreFocus, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, responsiveMode: responsiveMode, className: className, containerClassName: containerClassName, isBlocking: isBlocking, isDarkOverlay: isDarkOverlay, onDismissed: onDismissed }), modalProps), { dragOptions: dragOptions, layerProps: mergedLayerProps, isOpen: isOpen });\n var dialogContentProps = __assign(__assign(__assign({ className: contentClassName, subText: subText, title: title, topButtonsProps: topButtonsProps, type: type }, DefaultDialogContentProps), props.dialogContentProps), { draggableHeaderClassName: dialogDraggableClassName, titleProps: __assign({ \n // eslint-disable-next-line deprecation/deprecation\n id: ((_b = props.dialogContentProps) === null || _b === void 0 ? void 0 : _b.titleId) || this._defaultTitleTextId }, (_c = props.dialogContentProps) === null || _c === void 0 ? void 0 : _c.titleProps) });\n var classNames = getClassNames(styles, {\n theme: theme,\n className: mergedModalProps.className,\n containerClassName: mergedModalProps.containerClassName,\n hidden: hidden,\n dialogDefaultMinWidth: minWidth,\n dialogDefaultMaxWidth: maxWidth,\n });\n return (React.createElement(Modal, __assign({}, mergedModalProps, { className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss || mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),\n React.createElement(DialogContent, __assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), props.children)));\n };\n DialogBase.defaultProps = {\n hidden: true,\n };\n DialogBase = __decorate([\n withResponsiveMode\n ], DialogBase);\n return DialogBase;\n}(React.Component));\nexport { DialogBase };\n//# sourceMappingURL=Dialog.base.js.map","import { styled } from '../../Utilities';\nimport { DialogBase } from './Dialog.base';\nimport { getStyles } from './Dialog.styles';\nexport var Dialog = styled(DialogBase, getStyles, undefined, { scope: 'Dialog' });\nDialog.displayName = 'Dialog';\n//# sourceMappingURL=Dialog.js.map","import { ScreenWidthMinMedium, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Dialog',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, containerClassName = props.containerClassName, // eslint-disable-line deprecation/deprecation\n _b = props.dialogDefaultMinWidth, // eslint-disable-line deprecation/deprecation\n dialogDefaultMinWidth = _b === void 0 ? '288px' : _b, _c = props.dialogDefaultMaxWidth, dialogDefaultMaxWidth = _c === void 0 ? '340px' : _c, hidden = props.hidden, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [classNames.root, theme.fonts.medium, className],\n main: [\n {\n width: dialogDefaultMinWidth,\n outline: '3px solid transparent',\n selectors: (_a = {},\n _a[\"@media (min-width: \".concat(ScreenWidthMinMedium, \"px)\")] = {\n width: 'auto',\n maxWidth: dialogDefaultMaxWidth,\n minWidth: dialogDefaultMinWidth,\n },\n _a),\n },\n !hidden && { display: 'flex' },\n containerClassName,\n ],\n };\n};\n//# sourceMappingURL=Dialog.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, warnDeprecations, initializeComponentRef } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { IconButton } from '../../Button';\nimport { DialogFooter } from './DialogFooter';\nimport { withResponsiveMode } from '../../ResponsiveMode';\nvar getClassNames = classNamesFunction();\nvar DialogFooterType = (React.createElement(DialogFooter, null)).type;\nvar COMPONENT_NAME = 'DialogContent';\n// eslint-disable-next-line deprecation/deprecation\nvar DialogContentBase = /** @class */ (function (_super) {\n __extends(DialogContentBase, _super);\n function DialogContentBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n titleId: 'titleProps.id',\n });\n return _this;\n }\n DialogContentBase.prototype.render = function () {\n var _a = this.props, showCloseButton = _a.showCloseButton, className = _a.className, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subTextId = _a.subTextId, subText = _a.subText, _b = _a.titleProps, titleProps = _b === void 0 ? {} : _b, \n // eslint-disable-next-line deprecation/deprecation\n titleId = _a.titleId, title = _a.title, type = _a.type, styles = _a.styles, theme = _a.theme, draggableHeaderClassName = _a.draggableHeaderClassName;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isLargeHeader: type === DialogType.largeHeader,\n isClose: type === DialogType.close,\n draggableHeaderClassName: draggableHeaderClassName,\n });\n var groupings = this._groupChildren();\n var subTextContent;\n if (subText) {\n subTextContent = (React.createElement(\"p\", { className: classNames.subText, id: subTextId }, subText));\n }\n return (React.createElement(\"div\", { className: classNames.content },\n React.createElement(\"div\", { className: classNames.header },\n React.createElement(\"div\", __assign({ id: titleId, role: \"heading\", \"aria-level\": 1 }, titleProps, { className: css(classNames.title, titleProps.className) }), title),\n React.createElement(\"div\", { className: classNames.topButton },\n this.props.topButtonsProps.map(function (props, index) { return (React.createElement(IconButton, __assign({ key: props.uniqueId || index }, props))); }),\n (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) && (React.createElement(IconButton, { className: classNames.button, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss })))),\n React.createElement(\"div\", { className: classNames.inner },\n React.createElement(\"div\", { className: classNames.innerContent },\n subTextContent,\n groupings.contents),\n groupings.footers)));\n };\n // @TODO - typing the footers as an array of DialogFooter is difficult because\n // casing \"child as DialogFooter\" causes a problem because\n // \"Neither type 'ReactElement' nor type 'DialogFooter' is assignable to the other.\"\n DialogContentBase.prototype._groupChildren = function () {\n var groupings = {\n footers: [],\n contents: [],\n };\n React.Children.map(this.props.children, function (child) {\n if (typeof child === 'object' && child !== null && child.type === DialogFooterType) {\n groupings.footers.push(child);\n }\n else {\n groupings.contents.push(child);\n }\n });\n return groupings;\n };\n DialogContentBase.defaultProps = {\n showCloseButton: false,\n className: '',\n topButtonsProps: [],\n closeButtonAriaLabel: 'Close',\n };\n DialogContentBase = __decorate([\n withResponsiveMode\n ], DialogContentBase);\n return DialogContentBase;\n}(React.Component));\nexport { DialogContentBase };\n//# sourceMappingURL=DialogContent.base.js.map","import { styled } from '../../Utilities';\nimport { DialogContentBase } from './DialogContent.base';\nimport { getStyles } from './DialogContent.styles';\nexport var DialogContent = styled(DialogContentBase, getStyles, undefined, { scope: 'DialogContent' });\nDialogContent.displayName = 'DialogContent';\n//# sourceMappingURL=DialogContent.js.map","import { FontWeights, getGlobalClassNames, IconFontSizes, ScreenWidthMinSmall, ScreenWidthMaxSmall, } from '../../Styling';\nvar GlobalClassNames = {\n contentLgHeader: 'ms-Dialog-lgHeader',\n close: 'ms-Dialog--close',\n subText: 'ms-Dialog-subText',\n header: 'ms-Dialog-header',\n headerLg: 'ms-Dialog--lgHeader',\n button: 'ms-Dialog-button ms-Dialog-button--close',\n inner: 'ms-Dialog-inner',\n content: 'ms-Dialog-content',\n title: 'ms-Dialog-title',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c;\n var className = props.className, theme = props.theme, isLargeHeader = props.isLargeHeader, isClose = props.isClose, hidden = props.hidden, isMultiline = props.isMultiline, draggableHeaderClassName = props.draggableHeaderClassName;\n var palette = theme.palette, fonts = theme.fonts, effects = theme.effects, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n content: [\n isLargeHeader && [\n classNames.contentLgHeader,\n {\n borderTop: \"4px solid \".concat(palette.themePrimary),\n },\n ],\n isClose && classNames.close,\n {\n flexGrow: 1,\n overflowY: 'hidden', // required for allowScrollOnElement\n },\n className,\n ],\n subText: [\n classNames.subText,\n fonts.medium,\n {\n margin: '0 0 24px 0',\n color: semanticColors.bodySubtext,\n lineHeight: '1.5',\n wordWrap: 'break-word',\n fontWeight: FontWeights.regular,\n },\n ],\n header: [\n classNames.header,\n {\n position: 'relative',\n width: '100%',\n boxSizing: 'border-box',\n },\n isClose && classNames.close,\n draggableHeaderClassName && [\n draggableHeaderClassName,\n {\n cursor: 'move',\n },\n ],\n ],\n button: [\n classNames.button,\n hidden && {\n selectors: {\n '.ms-Icon.ms-Icon--Cancel': {\n color: semanticColors.buttonText,\n fontSize: IconFontSizes.medium,\n },\n },\n },\n ],\n inner: [\n classNames.inner,\n {\n padding: '0 24px 24px',\n selectors: (_a = {},\n _a[\"@media (min-width: \".concat(ScreenWidthMinSmall, \"px) and (max-width: \").concat(ScreenWidthMaxSmall, \"px)\")] = {\n padding: '0 16px 16px',\n },\n _a),\n },\n ],\n innerContent: [\n classNames.content,\n {\n position: 'relative',\n width: '100%',\n },\n ],\n title: [\n classNames.title,\n fonts.xLarge,\n {\n color: semanticColors.bodyText,\n margin: '0',\n minHeight: fonts.xLarge.fontSize,\n padding: '16px 46px 20px 24px',\n lineHeight: 'normal',\n selectors: (_b = {},\n _b[\"@media (min-width: \".concat(ScreenWidthMinSmall, \"px) and (max-width: \").concat(ScreenWidthMaxSmall, \"px)\")] = {\n padding: '16px 46px 16px 16px',\n },\n _b),\n },\n isLargeHeader && {\n color: semanticColors.menuHeader,\n },\n isMultiline && { fontSize: fonts.xxLarge.fontSize },\n ],\n topButton: [\n {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'nowrap',\n position: 'absolute',\n top: '0',\n right: '0',\n padding: '15px 15px 0 0',\n selectors: (_c = {\n '> *': {\n flex: '0 0 auto',\n },\n '.ms-Dialog-button': {\n color: semanticColors.buttonText,\n },\n '.ms-Dialog-button:hover': {\n color: semanticColors.buttonTextHovered,\n borderRadius: effects.roundedCorner2,\n }\n },\n _c[\"@media (min-width: \".concat(ScreenWidthMinSmall, \"px) and (max-width: \").concat(ScreenWidthMaxSmall, \"px)\")] = {\n padding: '15px 8px 0 0',\n },\n _c),\n },\n ],\n };\n};\n//# sourceMappingURL=DialogContent.styles.js.map","/**\n * {@docCategory Dialog}\n */\nexport var DialogType;\n(function (DialogType) {\n /** Standard dialog */\n DialogType[DialogType[\"normal\"] = 0] = \"normal\";\n /** Dialog with large header banner */\n DialogType[DialogType[\"largeHeader\"] = 1] = \"largeHeader\";\n /** Dialog with an 'x' close button in the upper-right corner */\n DialogType[DialogType[\"close\"] = 2] = \"close\";\n})(DialogType || (DialogType = {}));\n//# sourceMappingURL=DialogContent.types.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DialogFooterBase = /** @class */ (function (_super) {\n __extends(DialogFooterBase, _super);\n function DialogFooterBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DialogFooterBase.prototype.render = function () {\n var _a = this.props, className = _a.className, styles = _a.styles, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.actions },\n React.createElement(\"div\", { className: this._classNames.actionsRight }, this._renderChildrenAsActions())));\n };\n DialogFooterBase.prototype._renderChildrenAsActions = function () {\n var _this = this;\n return React.Children.map(this.props.children, function (child) {\n return child ? React.createElement(\"span\", { className: _this._classNames.action }, child) : null;\n });\n };\n return DialogFooterBase;\n}(React.Component));\nexport { DialogFooterBase };\n//# sourceMappingURL=DialogFooter.base.js.map","import { styled } from '../../Utilities';\nimport { DialogFooterBase } from './DialogFooter.base';\nimport { getStyles } from './DialogFooter.styles';\nexport var DialogFooter = styled(DialogFooterBase, getStyles, undefined, { scope: 'DialogFooter' });\nDialogFooter.displayName = 'DialogFooter';\n//# sourceMappingURL=DialogFooter.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n actions: 'ms-Dialog-actions',\n action: 'ms-Dialog-action',\n actionsRight: 'ms-Dialog-actionsRight',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n actions: [\n classNames.actions,\n {\n position: 'relative',\n width: '100%',\n minHeight: '24px',\n lineHeight: '24px',\n margin: '16px 0 0',\n fontSize: '0',\n selectors: {\n '.ms-Button': {\n lineHeight: 'normal',\n verticalAlign: 'middle',\n },\n },\n },\n className,\n ],\n action: [\n classNames.action,\n {\n margin: '0 4px',\n },\n ],\n actionsRight: [\n classNames.actionsRight,\n {\n alignItems: 'center',\n display: 'flex',\n fontSize: '0',\n justifyContent: 'flex-end',\n marginRight: '-4px',\n },\n ],\n };\n};\n//# sourceMappingURL=DialogFooter.styles.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var VerticalDividerBase = React.forwardRef(function (props, ref) {\n // eslint-disable-next-line deprecation/deprecation\n var styles = props.styles, theme = props.theme, deprecatedGetClassNames = props.getClassNames, className = props.className;\n var classNames = getClassNames(styles, { theme: theme, getClassNames: deprecatedGetClassNames, className: className });\n return (React.createElement(\"span\", { className: classNames.wrapper, ref: ref },\n React.createElement(\"span\", { className: classNames.divider })));\n});\nVerticalDividerBase.displayName = 'VerticalDividerBase';\n//# sourceMappingURL=VerticalDivider.base.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyleSets } from '../../Styling';\n/**\n * @deprecated use getStyles exported from VerticalDivider.styles.ts\n */\nexport var getDividerClassNames = memoizeFunction(\n// eslint-disable-next-line deprecation/deprecation\nfunction (theme) {\n return mergeStyleSets({\n wrapper: {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n divider: {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n });\n});\n//# sourceMappingURL=VerticalDivider.classNames.js.map","import { getStyles } from './VerticalDivider.styles';\nimport { VerticalDividerBase } from './VerticalDivider.base';\nimport { styled } from '../../Utilities';\nexport var VerticalDivider = styled(VerticalDividerBase, getStyles, undefined, {\n scope: 'VerticalDivider',\n});\n//# sourceMappingURL=VerticalDivider.js.map","export var getStyles = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var theme = props.theme, getClassNames = props.getClassNames, className = props.className;\n if (!theme) {\n throw new Error('Theme is undefined or null.');\n }\n if (getClassNames) {\n var names = getClassNames(theme);\n return {\n wrapper: [names.wrapper],\n divider: [names.divider],\n };\n }\n return {\n wrapper: [\n {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n className,\n ],\n divider: [\n {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n ],\n };\n};\n//# sourceMappingURL=VerticalDivider.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, KeyCodes, getNativeProps, divProperties, warnDeprecations, initializeComponentRef, } from '../../Utilities';\nimport { DocumentCardType } from './DocumentCard.types';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'DocumentCard';\nexport var DocumentCardContext = React.createContext({});\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardBase = /** @class */ (function (_super) {\n __extends(DocumentCardBase, _super);\n function DocumentCardBase(props) {\n var _this = _super.call(this, props) || this;\n _this._rootElement = React.createRef();\n _this._onClick = function (ev) {\n _this._onAction(ev);\n };\n _this._onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n _this._onAction(ev);\n }\n };\n _this._onAction = function (ev) {\n var _a = _this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, onClickTarget = _a.onClickTarget;\n if (onClick) {\n onClick(ev);\n }\n else if (!onClick && onClickHref) {\n // If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref\n if (onClickTarget) {\n window.open(onClickHref, onClickTarget, 'noreferrer noopener nofollow');\n }\n else {\n window.location.href = onClickHref;\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n accentColor: undefined,\n });\n return _this;\n }\n DocumentCardBase.prototype.render = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, type = _a.type, accentColor = _a.accentColor, styles = _a.styles, theme = _a.theme, className = _a.className;\n var nativeProps = getNativeProps(this.props, divProperties, [\n 'className',\n 'onClick',\n 'type',\n 'role',\n ]);\n var actionable = onClick || onClickHref ? true : false;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n actionable: actionable,\n compact: type === DocumentCardType.compact ? true : false,\n });\n // Override the border color if an accent color was provided (compact card only)\n var style;\n if (type === DocumentCardType.compact && accentColor) {\n style = {\n borderBottomColor: accentColor,\n };\n }\n // if this element is actionable it should have an aria role\n var role = this.props.role || (actionable ? (onClick ? 'button' : 'link') : undefined);\n var tabIndex = actionable ? 0 : undefined;\n var documentCardContextValue = { role: role, tabIndex: tabIndex };\n return (React.createElement(\"div\", __assign({ ref: this._rootElement, role: 'group', className: this._classNames.root, onKeyDown: actionable ? this._onKeyDown : undefined, onClick: actionable ? this._onClick : undefined, style: style }, nativeProps),\n React.createElement(DocumentCardContext.Provider, { value: documentCardContextValue }, children)));\n };\n DocumentCardBase.prototype.focus = function () {\n if (this._rootElement.current) {\n this._rootElement.current.focus();\n }\n };\n DocumentCardBase.defaultProps = {\n type: DocumentCardType.normal,\n };\n return DocumentCardBase;\n}(React.Component));\nexport { DocumentCardBase };\n//# sourceMappingURL=DocumentCard.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardBase } from './DocumentCard.base';\nimport { getStyles } from './DocumentCard.styles';\nexport var DocumentCard = styled(DocumentCardBase, getStyles, undefined, { scope: 'DocumentCard' });\n//# sourceMappingURL=DocumentCard.js.map","import { getGlobalClassNames, getInputFocusStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { DocumentCardPreviewGlobalClassNames as previewClassNames } from './DocumentCardPreview.styles';\nimport { DocumentCardActivityGlobalClassNames as activityClassNames } from './DocumentCardActivity.styles';\nimport { DocumentCardTitleGlobalClassNames as titleClassNames } from './DocumentCardTitle.styles';\nimport { DocumentCardLocationGlobalClassNames as locationClassNames } from './DocumentCardLocation.styles';\nvar GlobalClassNames = {\n root: 'ms-DocumentCard',\n rootActionable: 'ms-DocumentCard--actionable',\n rootCompact: 'ms-DocumentCard--compact',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var className = props.className, theme = props.theme, actionable = props.actionable, compact = props.compact;\n var palette = theme.palette, fonts = theme.fonts, effects = theme.effects;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n WebkitFontSmoothing: 'antialiased',\n backgroundColor: palette.white,\n border: \"1px solid \".concat(palette.neutralLight),\n maxWidth: '320px',\n minWidth: '206px',\n userSelect: 'none',\n position: 'relative',\n selectors: (_a = {\n ':focus': {\n outline: '0px solid',\n }\n },\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus\")] = getInputFocusStyle(palette.neutralSecondary, effects.roundedCorner2),\n _a[\".\".concat(locationClassNames.root, \" + .\").concat(titleClassNames.root)] = {\n paddingTop: '4px',\n },\n _a),\n },\n actionable && [\n classNames.rootActionable,\n {\n selectors: {\n ':hover': {\n cursor: 'pointer',\n borderColor: palette.neutralTertiaryAlt,\n },\n ':hover:after': {\n content: '\" \"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n border: \"1px solid \".concat(palette.neutralTertiaryAlt),\n pointerEvents: 'none',\n },\n },\n },\n ],\n compact && [\n classNames.rootCompact,\n {\n display: 'flex',\n maxWidth: '480px',\n height: '108px',\n selectors: (_b = {},\n _b[\".\".concat(previewClassNames.root)] = {\n borderRight: \"1px solid \".concat(palette.neutralLight),\n borderBottom: 0,\n maxHeight: '106px',\n maxWidth: '144px',\n },\n _b[\".\".concat(previewClassNames.icon)] = {\n maxHeight: '32px',\n maxWidth: '32px',\n },\n _b[\".\".concat(activityClassNames.root)] = {\n paddingBottom: '12px',\n },\n _b[\".\".concat(titleClassNames.root)] = {\n paddingBottom: '12px 16px 8px 16px',\n fontSize: fonts.mediumPlus.fontSize,\n lineHeight: '16px',\n },\n _b),\n },\n ],\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCard.styles.js.map","/**\n * {@docCategory DocumentCard}\n */\nexport var DocumentCardType;\n(function (DocumentCardType) {\n /**\n * Standard DocumentCard.\n */\n DocumentCardType[DocumentCardType[\"normal\"] = 0] = \"normal\";\n /**\n * Compact layout. Displays the preview beside the details, rather than above.\n */\n DocumentCardType[DocumentCardType[\"compact\"] = 1] = \"compact\";\n})(DocumentCardType || (DocumentCardType = {}));\n//# sourceMappingURL=DocumentCard.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nimport { IconButton } from '../../Button';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardActionsBase = /** @class */ (function (_super) {\n __extends(DocumentCardActionsBase, _super);\n function DocumentCardActionsBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardActionsBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, actions = _a.actions, views = _a.views, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.root },\n actions &&\n actions.map(function (action, index) {\n return (React.createElement(\"div\", { className: _this._classNames.action, key: index },\n React.createElement(IconButton, __assign({}, action))));\n }),\n views > 0 && (React.createElement(\"div\", { className: this._classNames.views },\n React.createElement(Icon, { iconName: \"View\", className: this._classNames.viewsIcon }),\n views))));\n };\n return DocumentCardActionsBase;\n}(React.Component));\nexport { DocumentCardActionsBase };\n//# sourceMappingURL=DocumentCardActions.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardActionsBase } from './DocumentCardActions.base';\nimport { getStyles } from './DocumentCardActions.styles';\nexport var DocumentCardActions = styled(DocumentCardActionsBase, getStyles, undefined, { scope: 'DocumentCardActions' });\n//# sourceMappingURL=DocumentCardActions.js.map","import { getGlobalClassNames } from '../../Styling';\nvar ACTION_SIZE = 34;\nvar HORIZONTAL_PADDING = 12;\nvar VERTICAL_PADDING = 4;\nvar GlobalClassNames = {\n root: 'ms-DocumentCardActions',\n action: 'ms-DocumentCardActions-action',\n views: 'ms-DocumentCardActions-views',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n height: \"\".concat(ACTION_SIZE, \"px\"),\n padding: \"\".concat(VERTICAL_PADDING, \"px \").concat(HORIZONTAL_PADDING, \"px\"),\n position: 'relative',\n },\n className,\n ],\n action: [\n classNames.action,\n {\n float: 'left',\n marginRight: '4px',\n color: palette.neutralSecondary,\n cursor: 'pointer',\n selectors: {\n '.ms-Button': {\n fontSize: fonts.mediumPlus.fontSize,\n height: ACTION_SIZE,\n width: ACTION_SIZE,\n },\n '.ms-Button:hover .ms-Button-icon': {\n color: theme.semanticColors.buttonText,\n cursor: 'pointer',\n },\n },\n },\n ],\n views: [\n classNames.views,\n {\n textAlign: 'right',\n lineHeight: ACTION_SIZE,\n },\n ],\n viewsIcon: {\n marginRight: '8px',\n fontSize: fonts.medium.fontSize,\n verticalAlign: 'top',\n },\n };\n};\n//# sourceMappingURL=DocumentCardActions.styles.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport { PersonaSize } from '../../Persona';\nimport { PersonaCoin } from '../../PersonaCoin';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardActivityBase = /** @class */ (function (_super) {\n __extends(DocumentCardActivityBase, _super);\n function DocumentCardActivityBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardActivityBase.prototype.render = function () {\n var _a = this.props, activity = _a.activity, people = _a.people, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n multiplePeople: people.length > 1,\n });\n if (!people || people.length === 0) {\n return null;\n }\n return (React.createElement(\"div\", { className: this._classNames.root },\n this._renderAvatars(people),\n React.createElement(\"div\", { className: this._classNames.details },\n React.createElement(\"span\", { className: this._classNames.name }, this._getNameString(people)),\n React.createElement(\"span\", { className: this._classNames.activity }, activity))));\n };\n DocumentCardActivityBase.prototype._renderAvatars = function (people) {\n return (React.createElement(\"div\", { className: this._classNames.avatars },\n people.length > 1 ? this._renderAvatar(people[1]) : null,\n this._renderAvatar(people[0])));\n };\n DocumentCardActivityBase.prototype._renderAvatar = function (person) {\n return (React.createElement(\"div\", { className: this._classNames.avatar },\n React.createElement(PersonaCoin, { imageInitials: person.initials, text: person.name, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, allowPhoneInitials: person.allowPhoneInitials, role: \"presentation\", size: PersonaSize.size32 })));\n };\n DocumentCardActivityBase.prototype._getNameString = function (people) {\n var nameString = people[0].name;\n if (people.length >= 2) {\n nameString += ' +' + (people.length - 1);\n }\n return nameString;\n };\n return DocumentCardActivityBase;\n}(React.Component));\nexport { DocumentCardActivityBase };\n//# sourceMappingURL=DocumentCardActivity.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardActivityBase } from './DocumentCardActivity.base';\nimport { getStyles } from './DocumentCardActivity.styles';\nexport var DocumentCardActivity = styled(DocumentCardActivityBase, getStyles, undefined, { scope: 'DocumentCardActivity' });\n//# sourceMappingURL=DocumentCardActivity.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nvar VERTICAL_PADDING = 8;\nvar HORIZONTAL_PADDING = 16;\nvar IMAGE_SIZE = 32;\nvar PERSONA_TEXT_GUTTER = 8;\nexport var DocumentCardActivityGlobalClassNames = {\n root: 'ms-DocumentCardActivity',\n multiplePeople: 'ms-DocumentCardActivity--multiplePeople',\n details: 'ms-DocumentCardActivity-details',\n name: 'ms-DocumentCardActivity-name',\n activity: 'ms-DocumentCardActivity-activity',\n avatars: 'ms-DocumentCardActivity-avatars',\n avatar: 'ms-DocumentCardActivity-avatar',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, multiplePeople = props.multiplePeople;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardActivityGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n multiplePeople && classNames.multiplePeople,\n {\n padding: \"\".concat(VERTICAL_PADDING, \"px \").concat(HORIZONTAL_PADDING, \"px\"),\n position: 'relative',\n },\n className,\n ],\n avatars: [\n classNames.avatars,\n {\n marginLeft: '-2px',\n height: '32px',\n },\n ],\n avatar: [\n classNames.avatar,\n {\n display: 'inline-block',\n verticalAlign: 'top',\n position: 'relative',\n textAlign: 'center',\n width: IMAGE_SIZE,\n height: IMAGE_SIZE,\n selectors: {\n '&:after': {\n content: '\" \"',\n position: 'absolute',\n left: '-1px',\n top: '-1px',\n right: '-1px',\n bottom: '-1px',\n border: \"2px solid \".concat(palette.white),\n borderRadius: '50%',\n },\n ':nth-of-type(2)': multiplePeople && {\n marginLeft: '-16px',\n },\n },\n },\n ],\n details: [\n classNames.details,\n {\n left: multiplePeople\n ? \"\".concat(HORIZONTAL_PADDING + IMAGE_SIZE * 1.5 + PERSONA_TEXT_GUTTER, \"px\")\n : \"\".concat(HORIZONTAL_PADDING + IMAGE_SIZE + PERSONA_TEXT_GUTTER, \"px\"),\n height: IMAGE_SIZE,\n position: 'absolute',\n top: VERTICAL_PADDING,\n width: \"calc(100% - \".concat(HORIZONTAL_PADDING + IMAGE_SIZE + PERSONA_TEXT_GUTTER + HORIZONTAL_PADDING, \"px)\"),\n },\n ],\n name: [\n classNames.name,\n {\n display: 'block',\n fontSize: fonts.small.fontSize,\n lineHeight: '15px',\n height: '15px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n color: palette.neutralPrimary,\n fontWeight: FontWeights.semibold,\n },\n ],\n activity: [\n classNames.activity,\n {\n display: 'block',\n fontSize: fonts.small.fontSize,\n lineHeight: '15px',\n height: '15px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n color: palette.neutralSecondary,\n },\n ],\n };\n};\n//# sourceMappingURL=DocumentCardActivity.styles.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardDetailsBase = /** @class */ (function (_super) {\n __extends(DocumentCardDetailsBase, _super);\n function DocumentCardDetailsBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardDetailsBase.prototype.render = function () {\n var _a = this.props, children = _a.children, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return React.createElement(\"div\", { className: this._classNames.root }, children);\n };\n return DocumentCardDetailsBase;\n}(React.Component));\nexport { DocumentCardDetailsBase };\n//# sourceMappingURL=DocumentCardDetails.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardDetailsBase } from './DocumentCardDetails.base';\nimport { getStyles } from './DocumentCardDetails.styles';\nexport var DocumentCardDetails = styled(DocumentCardDetailsBase, getStyles, undefined, { scope: 'DocumentCardDetails' });\n//# sourceMappingURL=DocumentCardDetails.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DocumentCardDetails',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n justifyContent: 'space-between',\n overflow: 'hidden',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardDetails.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { Image } from '../../Image';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardImageBase = /** @class */ (function (_super) {\n __extends(DocumentCardImageBase, _super);\n function DocumentCardImageBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onImageLoad = function () {\n _this.setState({ imageHasLoaded: true });\n };\n initializeComponentRef(_this);\n _this.state = { imageHasLoaded: false };\n return _this;\n }\n DocumentCardImageBase.prototype.render = function () {\n var _a = this.props, styles = _a.styles, width = _a.width, height = _a.height, imageFit = _a.imageFit, imageSrc = _a.imageSrc;\n this._classNames = getClassNames(styles, this.props);\n return (React.createElement(\"div\", { className: this._classNames.root },\n imageSrc && (React.createElement(Image, { width: width, height: height, imageFit: imageFit, src: imageSrc, role: \"presentation\", alt: \"\", onLoad: this._onImageLoad })),\n this.state.imageHasLoaded ? this._renderCornerIcon() : this._renderCenterIcon()));\n };\n DocumentCardImageBase.prototype._renderCenterIcon = function () {\n var iconProps = this.props.iconProps;\n return (React.createElement(\"div\", { className: this._classNames.centeredIconWrapper },\n React.createElement(Icon, __assign({ className: this._classNames.centeredIcon }, iconProps))));\n };\n DocumentCardImageBase.prototype._renderCornerIcon = function () {\n var iconProps = this.props.iconProps;\n return React.createElement(Icon, __assign({ className: this._classNames.cornerIcon }, iconProps));\n };\n return DocumentCardImageBase;\n}(React.Component));\nexport { DocumentCardImageBase };\n//# sourceMappingURL=DocumentCardImage.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardImageBase } from './DocumentCardImage.base';\nimport { getStyles } from './DocumentCardImage.styles';\nexport var DocumentCardImage = styled(DocumentCardImageBase, getStyles, undefined, { scope: 'DocumentCardImage' });\n//# sourceMappingURL=DocumentCardImage.js.map","var centeredIconSize = '42px';\nvar cornerIconSize = '32px';\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, height = props.height, width = props.width;\n var palette = theme.palette;\n return {\n root: [\n {\n borderBottom: \"1px solid \".concat(palette.neutralLight),\n position: 'relative',\n backgroundColor: palette.neutralLighterAlt,\n overflow: \"hidden\",\n height: height && \"\".concat(height, \"px\"),\n width: width && \"\".concat(width, \"px\"),\n },\n className,\n ],\n centeredIcon: [\n {\n height: centeredIconSize,\n width: centeredIconSize,\n fontSize: centeredIconSize,\n },\n ],\n centeredIconWrapper: [\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n width: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n },\n ],\n cornerIcon: [\n {\n left: '10px',\n bottom: '10px',\n height: cornerIconSize,\n width: cornerIconSize,\n fontSize: cornerIconSize,\n position: 'absolute',\n overflow: 'visible',\n },\n ],\n };\n};\n//# sourceMappingURL=DocumentCardImage.styles.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardLocationBase = /** @class */ (function (_super) {\n __extends(DocumentCardLocationBase, _super);\n function DocumentCardLocationBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardLocationBase.prototype.render = function () {\n var _a = this.props, location = _a.location, locationHref = _a.locationHref, ariaLabel = _a.ariaLabel, onClick = _a.onClick, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"a\", { className: this._classNames.root, href: locationHref, onClick: onClick, \"aria-label\": ariaLabel }, location));\n };\n return DocumentCardLocationBase;\n}(React.Component));\nexport { DocumentCardLocationBase };\n//# sourceMappingURL=DocumentCardLocation.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardLocationBase } from './DocumentCardLocation.base';\nimport { getStyles } from './DocumentCardLocation.styles';\nexport var DocumentCardLocation = styled(DocumentCardLocationBase, getStyles, undefined, { scope: 'DocumentCardLocation' });\n//# sourceMappingURL=DocumentCardLocation.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nexport var DocumentCardLocationGlobalClassNames = {\n root: 'ms-DocumentCardLocation',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardLocationGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n color: palette.themePrimary,\n display: 'block',\n fontWeight: FontWeights.semibold,\n overflow: 'hidden',\n padding: '8px 16px',\n position: 'relative',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n selectors: {\n ':hover': {\n color: palette.themePrimary,\n cursor: 'pointer',\n },\n },\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardLocation.styles.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardLogoBase = /** @class */ (function (_super) {\n __extends(DocumentCardLogoBase, _super);\n function DocumentCardLogoBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardLogoBase.prototype.render = function () {\n var _a = this.props, logoIcon = _a.logoIcon, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.root },\n React.createElement(Icon, { iconName: logoIcon })));\n };\n return DocumentCardLogoBase;\n}(React.Component));\nexport { DocumentCardLogoBase };\n//# sourceMappingURL=DocumentCardLogo.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardLogoBase } from './DocumentCardLogo.base';\nimport { getStyles } from './DocumentCardLogo.styles';\nexport var DocumentCardLogo = styled(DocumentCardLogoBase, getStyles, undefined, { scope: 'DocumentCardLogo' });\n//# sourceMappingURL=DocumentCardLogo.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DocumentCardLogo',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n // eslint-disable-next-line deprecation/deprecation\n fontSize: fonts.xxLargePlus.fontSize,\n color: palette.themePrimary,\n display: 'block',\n padding: '16px 16px 0 16px',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardLogo.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { Image } from '../../Image';\nimport { Link } from '../../Link';\nimport { classNamesFunction, css, initializeComponentRef } from '../../Utilities';\nvar DEFAULT_DISPLAY_COUNT = 3;\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardPreviewBase = /** @class */ (function (_super) {\n __extends(DocumentCardPreviewBase, _super);\n function DocumentCardPreviewBase(props) {\n var _this = _super.call(this, props) || this;\n _this._renderPreviewList = function (previewImages) {\n var _a = _this.props, getOverflowDocumentCountText = _a.getOverflowDocumentCountText, _b = _a.maxDisplayCount, maxDisplayCount = _b === void 0 ? DEFAULT_DISPLAY_COUNT : _b;\n // Determine how many documents we won't be showing\n var overflowDocumentCount = previewImages.length - maxDisplayCount;\n // Determine the overflow text that will be rendered after the preview list.\n var overflowText = overflowDocumentCount\n ? getOverflowDocumentCountText\n ? getOverflowDocumentCountText(overflowDocumentCount)\n : '+' + overflowDocumentCount\n : null;\n // Create list items for the documents to be shown\n var fileListItems = previewImages.slice(0, maxDisplayCount).map(function (file, fileIndex) { return (React.createElement(\"li\", { key: fileIndex },\n React.createElement(Image, { className: _this._classNames.fileListIcon, src: file.iconSrc, role: \"presentation\", alt: \"\", width: \"16px\", height: \"16px\" }),\n React.createElement(Link, __assign({ className: _this._classNames.fileListLink, \n // eslint-disable-next-line deprecation/deprecation\n href: file.url }, file.linkProps), file.name))); });\n return (React.createElement(\"div\", null,\n React.createElement(\"ul\", { className: _this._classNames.fileList }, fileListItems),\n overflowText && React.createElement(\"span\", { className: _this._classNames.fileListOverflowText }, overflowText)));\n };\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardPreviewBase.prototype.render = function () {\n var _a = this.props, previewImages = _a.previewImages, styles = _a.styles, theme = _a.theme, className = _a.className;\n var style;\n var preview;\n var isFileList = previewImages.length > 1;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isFileList: isFileList,\n });\n if (previewImages.length > 1) {\n // Render a list of files\n preview = this._renderPreviewList(previewImages);\n }\n else if (previewImages.length === 1) {\n // Render a single preview\n preview = this._renderPreviewImage(previewImages[0]);\n // Override the border color if an accent color was provided\n /* eslint-disable deprecation/deprecation */\n if (previewImages[0].accentColor) {\n style = {\n borderBottomColor: previewImages[0].accentColor,\n };\n }\n /* eslint-enable deprecation/deprecation */\n }\n return (React.createElement(\"div\", { className: this._classNames.root, style: style }, preview));\n };\n DocumentCardPreviewBase.prototype._renderPreviewImage = function (previewImage) {\n var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit, previewIconProps = previewImage.previewIconProps, previewIconContainerClass = previewImage.previewIconContainerClass;\n if (previewIconProps) {\n return (React.createElement(\"div\", { className: css(this._classNames.previewIcon, previewIconContainerClass), style: { width: width, height: height } },\n React.createElement(Icon, __assign({}, previewIconProps))));\n }\n var image = (React.createElement(Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: \"presentation\", alt: \"\" }));\n var icon;\n if (previewImage.iconSrc) {\n icon = React.createElement(Image, { className: this._classNames.icon, src: previewImage.iconSrc, role: \"presentation\", alt: \"\" });\n }\n return (React.createElement(\"div\", null,\n image,\n icon));\n };\n return DocumentCardPreviewBase;\n}(React.Component));\nexport { DocumentCardPreviewBase };\n//# sourceMappingURL=DocumentCardPreview.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardPreviewBase } from './DocumentCardPreview.base';\nimport { getStyles } from './DocumentCardPreview.styles';\nexport var DocumentCardPreview = styled(DocumentCardPreviewBase, getStyles, undefined, { scope: 'DocumentCardPreview' });\n//# sourceMappingURL=DocumentCardPreview.js.map","import { getFocusStyle, getGlobalClassNames, HighContrastSelector } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nexport var DocumentCardPreviewGlobalClassNames = {\n root: 'ms-DocumentCardPreview',\n icon: 'ms-DocumentCardPreview-icon',\n iconContainer: 'ms-DocumentCardPreview-iconContainer',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, isFileList = props.isFileList;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardPreviewGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n backgroundColor: isFileList ? palette.white : palette.neutralLighterAlt,\n borderBottom: \"1px solid \".concat(palette.neutralLight),\n overflow: \"hidden\",\n position: 'relative',\n },\n className,\n ],\n previewIcon: [\n classNames.iconContainer,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n },\n ],\n icon: [\n classNames.icon,\n {\n left: '10px',\n bottom: '10px',\n position: 'absolute',\n },\n ],\n fileList: {\n padding: '16px 16px 0 16px',\n listStyleType: 'none',\n margin: 0,\n selectors: {\n li: {\n height: '16px',\n lineHeight: '16px',\n display: 'flex',\n flexWrap: 'nowrap',\n alignItems: 'center',\n marginBottom: '8px',\n overflow: 'hidden',\n },\n },\n },\n fileListIcon: {\n display: 'inline-block',\n flexShrink: 0,\n marginRight: '8px',\n },\n fileListLink: [\n getFocusStyle(theme, {\n highContrastStyle: {\n border: '1px solid WindowText',\n outline: 'none',\n },\n }),\n {\n boxSizing: 'border-box',\n color: palette.neutralDark,\n flexGrow: 1,\n overflow: 'hidden',\n display: 'inline-block',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n selectors: (_a = {\n ':hover': {\n color: palette.themePrimary,\n }\n },\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus\")] = {\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n outline: 'none',\n },\n _b),\n },\n _a),\n },\n ],\n fileListOverflowText: {\n padding: '0px 16px 8px 16px',\n display: 'block',\n },\n };\n};\n//# sourceMappingURL=DocumentCardPreview.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardStatusBase = /** @class */ (function (_super) {\n __extends(DocumentCardStatusBase, _super);\n function DocumentCardStatusBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardStatusBase.prototype.render = function () {\n var _a = this.props, statusIcon = _a.statusIcon, status = _a.status, styles = _a.styles, theme = _a.theme, className = _a.className;\n var iconProps = {\n iconName: statusIcon,\n styles: {\n root: { padding: '8px' },\n },\n };\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.root },\n statusIcon && React.createElement(Icon, __assign({}, iconProps)),\n status));\n };\n return DocumentCardStatusBase;\n}(React.Component));\nexport { DocumentCardStatusBase };\n//# sourceMappingURL=DocumentCardStatus.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardStatusBase } from './DocumentCardStatus.base';\nimport { getStyles } from './DocumentCardStatus.styles';\nexport var DocumentCardStatus = styled(DocumentCardStatusBase, getStyles, undefined, { scope: 'DocumentCardStatus' });\n//# sourceMappingURL=DocumentCardStatus.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DocumentCardStatus',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n margin: '8px 16px',\n color: palette.neutralPrimary,\n backgroundColor: palette.neutralLighter,\n height: '32px',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardStatus.styles.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, classNamesFunction } from '../../Utilities';\nimport { initializeComponentRef } from '@fluentui/utilities';\nimport { DocumentCardContext } from './DocumentCard.base';\nvar getClassNames = classNamesFunction();\nvar TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardTitleBase = /** @class */ (function (_super) {\n __extends(DocumentCardTitleBase, _super);\n function DocumentCardTitleBase(props) {\n var _this = _super.call(this, props) || this;\n _this._titleElement = React.createRef();\n // Truncate logic here way can't handle the case that chars with different widths are mixed very well.\n // Let _shrinkTitle take care of that.\n _this._truncateTitle = function () {\n if (!_this._needMeasurement) {\n return;\n }\n _this._async.requestAnimationFrame(_this._truncateWhenInAnimation);\n };\n _this._truncateWhenInAnimation = function () {\n var originalTitle = _this.props.title;\n var element = _this._titleElement.current;\n if (element) {\n var style = getComputedStyle(element);\n if (style.width && style.lineHeight && style.height) {\n var clientWidth = element.clientWidth, scrollWidth = element.scrollWidth;\n _this._clientWidth = clientWidth;\n var lines = Math.floor((parseInt(style.height, 10) + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD) / parseInt(style.lineHeight, 10));\n element.style.whiteSpace = '';\n // Use overflow to predict truncated length.\n // Take an example.The text is: A text with A very long text that need to be truncated.ppt\n // if container is like\n // |A text with A very| long text that need to be truncated.ppt\n // The scroll width is 58, (take two | out of length)\n // The client width is 18\n // the overflow rate is scrollWidth/clientWidth which should be close to length(overflowText)/length(visualText)\n // And the length of remaining text should be truncated is (original Length)/(58/18) -3 = 15.\n // So that the logic can predict truncated text well.\n // first piece will be `A text `, * second piece will be `ated.ppt`\n // |A text ...ated.ppt|\n var overFlowRate = scrollWidth / (parseInt(style.width, 10) * lines);\n if (overFlowRate > 1) {\n var truncatedLength = originalTitle.length / overFlowRate - 3; /** Saved for separator */\n return _this.setState({\n truncatedTitleFirstPiece: originalTitle.slice(0, truncatedLength / 2),\n truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - truncatedLength / 2),\n });\n }\n }\n }\n };\n _this._shrinkTitle = function () {\n var _a = _this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece;\n if (truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n var titleElement = _this._titleElement.current;\n if (!titleElement) {\n return;\n }\n if (titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD ||\n titleElement.scrollWidth > titleElement.clientWidth) {\n _this.setState({\n truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),\n truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1),\n });\n }\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._clientWidth = undefined;\n _this.state = {\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n };\n return _this;\n }\n DocumentCardTitleBase.prototype.componentDidUpdate = function (prevProps) {\n var _this = this;\n if (this.props.title !== prevProps.title) {\n this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n });\n }\n if (prevProps.shouldTruncate !== this.props.shouldTruncate) {\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n this._async.requestAnimationFrame(this._shrinkTitle);\n this._events.on(window, 'resize', this._updateTruncation);\n }\n else {\n this._events.off(window, 'resize', this._updateTruncation);\n }\n }\n else if (this._needMeasurement) {\n this._async.requestAnimationFrame(function () {\n _this._truncateWhenInAnimation();\n _this._shrinkTitle();\n });\n }\n };\n DocumentCardTitleBase.prototype.componentDidMount = function () {\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n this._events.on(window, 'resize', this._updateTruncation);\n }\n };\n DocumentCardTitleBase.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n };\n DocumentCardTitleBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate, showAsSecondaryTitle = _a.showAsSecondaryTitle, styles = _a.styles, theme = _a.theme, className = _a.className;\n var _b = this.state, truncatedTitleFirstPiece = _b.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _b.truncatedTitleSecondPiece;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n showAsSecondaryTitle: showAsSecondaryTitle,\n });\n if (shouldTruncate && truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n return (React.createElement(DocumentCardContext.Consumer, null, function (_a) {\n var role = _a.role, tabIndex = _a.tabIndex;\n return (React.createElement(\"div\", { className: _this._classNames.root, ref: _this._titleElement, title: title, tabIndex: tabIndex, role: role },\n truncatedTitleFirstPiece,\n \"\\u2026\",\n truncatedTitleSecondPiece));\n }));\n }\n else {\n return (React.createElement(DocumentCardContext.Consumer, null, function (_a) {\n var role = _a.role, tabIndex = _a.tabIndex;\n return (React.createElement(\"div\", { className: _this._classNames.root, ref: _this._titleElement, title: title, tabIndex: tabIndex, role: role, style: _this._needMeasurement ? { whiteSpace: 'nowrap' } : undefined }, title));\n }));\n }\n };\n Object.defineProperty(DocumentCardTitleBase.prototype, \"_needMeasurement\", {\n /**\n * In measuring, it will render a same style text with whiteSpace: 'nowrap', to get overflow rate.\n * So that the logic can predict truncated text well.\n */\n get: function () {\n return !!this.props.shouldTruncate && this._clientWidth === undefined;\n },\n enumerable: false,\n configurable: true\n });\n DocumentCardTitleBase.prototype._updateTruncation = function () {\n var _this = this;\n if (this._timerId) {\n return;\n }\n this._timerId = this._async.setTimeout(function () {\n delete _this._timerId;\n _this._clientWidth = undefined;\n _this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n });\n }, 250);\n };\n return DocumentCardTitleBase;\n}(React.Component));\nexport { DocumentCardTitleBase };\n//# sourceMappingURL=DocumentCardTitle.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardTitleBase } from './DocumentCardTitle.base';\nimport { getStyles } from './DocumentCardTitle.styles';\nexport var DocumentCardTitle = styled(DocumentCardTitleBase, getStyles, undefined, { scope: 'DocumentCardTitle' });\n//# sourceMappingURL=DocumentCardTitle.js.map","import { getGlobalClassNames, getInputFocusStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nexport var DocumentCardTitleGlobalClassNames = {\n root: 'ms-DocumentCardTitle',\n};\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, showAsSecondaryTitle = props.showAsSecondaryTitle;\n var palette = theme.palette, fonts = theme.fonts, effects = theme.effects;\n var classNames = getGlobalClassNames(DocumentCardTitleGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n showAsSecondaryTitle ? fonts.medium : fonts.large,\n {\n padding: '8px 16px',\n display: 'block',\n overflow: 'hidden',\n position: 'relative',\n wordWrap: 'break-word',\n height: showAsSecondaryTitle ? '45px' : '38px',\n lineHeight: showAsSecondaryTitle ? '18px' : '21px',\n color: showAsSecondaryTitle ? palette.neutralSecondary : palette.neutralPrimary,\n selectors: (_a = {\n ':focus': {\n outline: '0px solid',\n }\n },\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus\")] = getInputFocusStyle(palette.neutralSecondary, effects.roundedCorner2),\n _a),\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardTitle.styles.js.map","import { __assign, __extends, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { css, KeyCodes, classNamesFunction, divProperties, findIndex, getDocument, getFirstFocusable, getId, getLastFocusable, getNativeProps, initializeComponentRef, isIOS, isMac, mergeAriaAttributeValues, safeRequestAnimationFrame, warn, warnDeprecations, warnMutuallyExclusive, } from '../../Utilities';\nimport { Callout, DirectionalHint } from '../../Callout';\nimport { CommandButton } from '../../Button';\nimport { DropdownMenuItemType } from './Dropdown.types';\nimport { DropdownSizePosCache } from './utilities/DropdownSizePosCache';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Icon } from '../../Icon';\nimport { Label } from '../../Label';\nimport { Panel } from '../../Panel';\nimport { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode';\nimport { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption';\n// import and use V7 Checkbox to ensure no breaking changes.\nimport { Checkbox } from '../../Checkbox';\nimport { getNextElement, getPreviousElement, getPropsWithDefaults } from '@fluentui/utilities';\nimport { useMergedRefs, usePrevious } from '@fluentui/react-hooks';\nvar COMPONENT_NAME = 'Dropdown';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n options: [],\n};\nfunction useSelectedItemsState(_a) {\n var defaultSelectedKeys = _a.defaultSelectedKeys, selectedKeys = _a.selectedKeys, defaultSelectedKey = _a.defaultSelectedKey, selectedKey = _a.selectedKey, options = _a.options, multiSelect = _a.multiSelect;\n var oldOptions = usePrevious(options);\n var _b = React.useState([]), selectedIndices = _b[0], setSelectedIndices = _b[1];\n // In controlled component usage where selectedKey is provided, update the selectedIndex\n // state if the key or options change.\n var selectedKeyPropToUse;\n // this does a shallow compare (assumes options are pure), for the purposes of determining whether\n // defaultSelectedKey/defaultSelectedKeys are respected.\n var didOptionsChange = options !== oldOptions;\n if (multiSelect) {\n if (didOptionsChange && defaultSelectedKeys !== undefined) {\n selectedKeyPropToUse = defaultSelectedKeys;\n }\n else {\n selectedKeyPropToUse = selectedKeys;\n }\n }\n else {\n if (didOptionsChange && defaultSelectedKey !== undefined) {\n selectedKeyPropToUse = defaultSelectedKey;\n }\n else {\n selectedKeyPropToUse = selectedKey;\n }\n }\n var oldSelectedKeyProp = usePrevious(selectedKeyPropToUse);\n React.useEffect(function () {\n /** Get all selected indexes for multi-select mode */\n var getSelectedIndexes = function () {\n if (selectedKeyPropToUse === undefined) {\n if (multiSelect) {\n return getAllSelectedIndices();\n }\n var selectedIndex = getSelectedIndex(null);\n return selectedIndex !== -1 ? [selectedIndex] : [];\n }\n else if (!Array.isArray(selectedKeyPropToUse)) {\n var selectedIndex = getSelectedIndex(selectedKeyPropToUse);\n return selectedIndex !== -1 ? [selectedIndex] : [];\n }\n var returnValue = [];\n for (var _i = 0, selectedKeyPropToUse_1 = selectedKeyPropToUse; _i < selectedKeyPropToUse_1.length; _i++) {\n var key = selectedKeyPropToUse_1[_i];\n var selectedIndex = getSelectedIndex(key);\n selectedIndex !== -1 && returnValue.push(selectedIndex);\n }\n return returnValue;\n };\n var getAllSelectedIndices = function () {\n return options\n .map(function (option, index) { return (option.selected ? index : -1); })\n .filter(function (index) { return index !== -1; });\n };\n var getSelectedIndex = function (searchKey) {\n return findIndex(options, function (option) {\n // eslint-disable-next-line eqeqeq\n if (searchKey != null) {\n return option.key === searchKey;\n }\n else {\n // eslint-disable-next-line deprecation/deprecation\n return !!option.selected || !!option.isSelected;\n }\n });\n };\n if ((selectedKeyPropToUse !== undefined || !oldOptions) &&\n (selectedKeyPropToUse !== oldSelectedKeyProp || didOptionsChange)) {\n setSelectedIndices(getSelectedIndexes());\n }\n }, [didOptionsChange, multiSelect, oldOptions, oldSelectedKeyProp, options, selectedKeyPropToUse]);\n return [selectedIndices, setSelectedIndices];\n}\nexport var DropdownBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n var responsiveMode = useResponsiveMode(rootRef, props.responsiveMode);\n var _a = useSelectedItemsState(props), selectedIndices = _a[0], setSelectedIndices = _a[1];\n return (React.createElement(DropdownInternal, __assign({}, props, { responsiveMode: responsiveMode, hoisted: { rootRef: mergedRootRef, selectedIndices: selectedIndices, setSelectedIndices: setSelectedIndices } })));\n});\nDropdownBase.displayName = 'DropdownBase';\nvar DropdownInternal = /** @class */ (function (_super) {\n __extends(DropdownInternal, _super);\n function DropdownInternal(props) {\n var _this = _super.call(this, props) || this;\n _this._host = React.createRef();\n _this._focusZone = React.createRef();\n _this._dropDown = React.createRef();\n _this._scrollIdleDelay = 250 /* ms */;\n _this._sizePosCache = new DropdownSizePosCache();\n _this._requestAnimationFrame = safeRequestAnimationFrame(_this);\n /**\n * Close menu callout if it is open\n */\n _this.dismissMenu = function () {\n var isOpen = _this.state.isOpen;\n isOpen && _this.setState({ isOpen: false });\n };\n _this._onChange = function (event, options, index, checked, multiSelect) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, onChange = _a.onChange, onChanged = _a.onChanged;\n if (onChange || onChanged) {\n // for single-select, option passed in will always be selected.\n // for multi-select, flip the checked value\n var changedOpt = multiSelect ? __assign(__assign({}, options[index]), { selected: !checked }) : options[index];\n onChange && onChange(__assign(__assign({}, event), { target: _this._dropDown.current }), changedOpt, index);\n onChanged && onChanged(changedOpt, index);\n }\n };\n /** Get either props.placeholder (new name) or props.placeHolder (old name) */\n _this._getPlaceholder = function () {\n // eslint-disable-next-line deprecation/deprecation\n return _this.props.placeholder || _this.props.placeHolder;\n };\n /** Get text in dropdown input as a string */\n _this._getTitle = function (items, _unused) {\n var _a = _this.props.multiSelectDelimiter, multiSelectDelimiter = _a === void 0 ? ', ' : _a;\n return items.map(function (i) { return i.text; }).join(multiSelectDelimiter);\n };\n /** Render text in dropdown input */\n _this._onRenderTitle = function (items) {\n return React.createElement(React.Fragment, null, _this._getTitle(items));\n };\n /** Render placeholder text in dropdown input */\n _this._onRenderPlaceholder = function (props) {\n if (!_this._getPlaceholder()) {\n return null;\n }\n return React.createElement(React.Fragment, null, _this._getPlaceholder());\n };\n /** Render Callout or Panel container and pass in list */\n _this._onRenderContainer = function (props) {\n var calloutProps = props.calloutProps, panelProps = props.panelProps;\n var _a = _this.props, responsiveMode = _a.responsiveMode, dropdownWidth = _a.dropdownWidth;\n var isSmall = responsiveMode <= ResponsiveMode.medium;\n var focusTrapZoneProps = { firstFocusableTarget: \"#\".concat(_this._listId, \"1\") };\n var panelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.panel\n : undefined;\n var calloutWidth = undefined;\n var calloutMinWidth = undefined;\n if (dropdownWidth === 'auto') {\n calloutMinWidth = _this._dropDown.current ? _this._dropDown.current.clientWidth : 0;\n }\n else {\n calloutWidth = dropdownWidth || (_this._dropDown.current ? _this._dropDown.current.clientWidth : 0);\n }\n return isSmall ? (React.createElement(Panel, __assign({ closeButtonAriaLabel: \"Close\", focusTrapZoneProps: focusTrapZoneProps, hasCloseButton: true, isOpen: true, isLightDismiss: true, onDismiss: _this._onDismiss, styles: panelStyles }, panelProps), _this._renderFocusableList(props))) : (React.createElement(Callout, __assign({ isBeakVisible: false, gapSpace: 0, doNotLayer: false, directionalHintFixed: false, directionalHint: DirectionalHint.bottomLeftEdge, calloutWidth: calloutWidth, calloutMinWidth: calloutMinWidth }, calloutProps, { className: _this._classNames.callout, target: _this._dropDown.current, onDismiss: _this._onDismiss, onScroll: _this._onScroll, onPositioned: _this._onPositioned }), _this._renderFocusableList(props)));\n };\n /** Render Caret Down Icon */\n _this._onRenderCaretDown = function (props) {\n return React.createElement(Icon, { className: _this._classNames.caretDown, iconName: \"ChevronDown\", \"aria-hidden\": true });\n };\n /** Render List of items */\n _this._onRenderList = function (props) {\n var _a = props.onRenderItem, onRenderItem = _a === void 0 ? _this._onRenderItem : _a;\n var queue = { items: [] };\n var renderedList = [];\n var emptyQueue = function () {\n var newGroup = queue.id\n ? [\n React.createElement(\"div\", { role: \"group\", key: queue.id, \"aria-labelledby\": queue.id }, queue.items),\n ]\n : queue.items;\n renderedList = __spreadArray(__spreadArray([], renderedList, true), newGroup, true);\n // Flush items and id\n queue = { items: [] };\n };\n var placeRenderedOptionIntoQueue = function (item, index) {\n /*\n Case Header\n empty queue if it's not already empty\n ensure unique ID for header and set queue ID\n push header into queue\n Case Divider\n push divider into queue if not first item\n empty queue if not already empty\n Default\n push item into queue\n */\n switch (item.itemType) {\n case SelectableOptionMenuItemType.Header:\n queue.items.length > 0 && emptyQueue();\n var id = _this._id + item.key;\n queue.items.push(onRenderItem(__assign(__assign({ id: id }, item), { index: index }), _this._onRenderItem));\n queue.id = id;\n break;\n case SelectableOptionMenuItemType.Divider:\n index > 0 && queue.items.push(onRenderItem(__assign(__assign({}, item), { index: index }), _this._onRenderItem));\n queue.items.length > 0 && emptyQueue();\n break;\n default:\n queue.items.push(onRenderItem(__assign(__assign({}, item), { index: index }), _this._onRenderItem));\n }\n };\n // Place options into the queue. Queue will be emptied anytime a Header or Divider is encountered\n props.options.forEach(function (item, index) {\n placeRenderedOptionIntoQueue(item, index);\n });\n // Push remaining items into all renderedList\n queue.items.length > 0 && emptyQueue();\n return React.createElement(React.Fragment, null, renderedList);\n };\n _this._onRenderItem = function (item) {\n switch (item.itemType) {\n case SelectableOptionMenuItemType.Divider:\n return _this._renderSeparator(item);\n case SelectableOptionMenuItemType.Header:\n return _this._renderHeader(item);\n default:\n return _this._renderOption(item);\n }\n };\n _this._renderOption = function (item) {\n var _a;\n var _b = _this.props, _c = _b.onRenderOption, onRenderOption = _c === void 0 ? _this._onRenderOption : _c, _d = _b.hoisted.selectedIndices, selectedIndices = _d === void 0 ? [] : _d;\n var isItemSelected = item.index !== undefined && selectedIndices ? selectedIndices.indexOf(item.index) > -1 : false;\n // select the right className based on the combination of selected/disabled\n var itemClassName = item.hidden // predicate: item hidden\n ? _this._classNames.dropdownItemHidden\n : isItemSelected && item.disabled === true // predicate: both selected and disabled\n ? _this._classNames.dropdownItemSelectedAndDisabled\n : isItemSelected // predicate: selected only\n ? _this._classNames.dropdownItemSelected\n : item.disabled === true // predicate: disabled only\n ? _this._classNames.dropdownItemDisabled\n : _this._classNames.dropdownItem;\n var title = item.title;\n // define the id and label id (for multiselect checkboxes)\n var id = _this._listId + item.index;\n var labelId = (_a = item.id) !== null && _a !== void 0 ? _a : id + '-label';\n var multiSelectItemStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.multiSelectItem\n : undefined;\n return !_this.props.multiSelect ? (React.createElement(CommandButton, { id: id, key: item.key, \"data-index\": item.index, \"data-is-focusable\": !item.disabled, disabled: item.disabled, className: itemClassName, onClick: _this._onItemClick(item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseEnter: _this._onItemMouseEnter.bind(_this, item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseLeave: _this._onMouseItemLeave.bind(_this, item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseMove: _this._onItemMouseMove.bind(_this, item), role: \"option\", \"aria-selected\": isItemSelected ? 'true' : 'false', ariaLabel: item.ariaLabel, title: title, \"aria-posinset\": _this._sizePosCache.positionInSet(item.index), \"aria-setsize\": _this._sizePosCache.optionSetSize }, onRenderOption(item, _this._onRenderOption))) : (React.createElement(Checkbox, { id: id, key: item.key, disabled: item.disabled, onChange: _this._onItemClick(item), inputProps: __assign({ 'aria-selected': isItemSelected, onMouseEnter: _this._onItemMouseEnter.bind(_this, item), onMouseLeave: _this._onMouseItemLeave.bind(_this, item), onMouseMove: _this._onItemMouseMove.bind(_this, item), role: 'option' }, {\n 'data-index': item.index,\n 'data-is-focusable': !(item.disabled || item.hidden),\n }), label: item.text, title: title, \n // eslint-disable-next-line react/jsx-no-bind\n onRenderLabel: _this._onRenderItemLabel.bind(_this, __assign(__assign({}, item), { id: labelId })), className: css(itemClassName, 'is-multi-select'), checked: isItemSelected, styles: multiSelectItemStyles, ariaPositionInSet: !item.hidden ? _this._sizePosCache.positionInSet(item.index) : undefined, ariaSetSize: !item.hidden ? _this._sizePosCache.optionSetSize : undefined, ariaLabel: item.ariaLabel, ariaLabelledBy: item.ariaLabel ? undefined : labelId }));\n };\n /** Render content of item (i.e. text/icon inside of button) */\n _this._onRenderOption = function (item) {\n return React.createElement(\"span\", { className: _this._classNames.dropdownOptionText }, item.text);\n };\n /*\n * Render content of a multiselect item label.\n * Text within the label is aria-hidden, to prevent duplicate input/label exposure\n */\n _this._onRenderMultiselectOption = function (item) {\n return (React.createElement(\"span\", { id: item.id, \"aria-hidden\": \"true\", className: _this._classNames.dropdownOptionText }, item.text));\n };\n /** Render custom label for multiselect checkbox items */\n _this._onRenderItemLabel = function (item) {\n var _a = _this.props.onRenderOption, onRenderOption = _a === void 0 ? _this._onRenderMultiselectOption : _a;\n return onRenderOption(item, _this._onRenderMultiselectOption);\n };\n _this._onPositioned = function (positions) {\n if (_this._focusZone.current) {\n // Focusing an element can trigger a reflow. Making this wait until there is an animation\n // frame can improve perf significantly.\n _this._requestAnimationFrame(function () {\n var selectedIndices = _this.props.hoisted.selectedIndices;\n if (_this._focusZone.current) {\n if (!_this._hasBeenPositioned &&\n selectedIndices &&\n selectedIndices[0] &&\n !_this.props.options[selectedIndices[0]].disabled) {\n var element = getDocument().getElementById(\"\".concat(_this._id, \"-list\").concat(selectedIndices[0]));\n if (element) {\n _this._focusZone.current.focusElement(element);\n }\n _this._hasBeenPositioned = true;\n }\n else {\n _this._focusZone.current.focus();\n }\n }\n });\n }\n if (!_this.state.calloutRenderEdge || _this.state.calloutRenderEdge !== positions.targetEdge) {\n _this.setState({\n calloutRenderEdge: positions.targetEdge,\n });\n }\n };\n _this._onItemClick = function (item) {\n return function (event) {\n if (!item.disabled) {\n _this.setSelectedIndex(event, item.index);\n if (!_this.props.multiSelect) {\n // only close the callout when it's in single-select mode\n _this.setState({\n isOpen: false,\n });\n }\n }\n };\n };\n /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n _this._onScroll = function () {\n if (!_this._isScrollIdle && _this._scrollIdleTimeoutId !== undefined) {\n clearTimeout(_this._scrollIdleTimeoutId);\n _this._scrollIdleTimeoutId = undefined;\n }\n else {\n _this._isScrollIdle = false;\n }\n _this._scrollIdleTimeoutId = window.setTimeout(function () {\n _this._isScrollIdle = true;\n }, _this._scrollIdleDelay);\n };\n _this._onMouseItemLeave = function (item, ev) {\n if (_this._shouldIgnoreMouseEvent()) {\n return;\n }\n /**\n * IE11 focus() method forces parents to scroll to top of element.\n * Edge and IE expose a setActive() function for focusable divs that\n * sets the page focus but does not scroll the parent element.\n */\n if (_this._host.current) {\n if (_this._host.current.setActive) {\n try {\n _this._host.current.setActive();\n }\n catch (e) {\n /* no-op */\n }\n }\n else {\n _this._host.current.focus();\n }\n }\n };\n _this._onDismiss = function () {\n _this.setState({ isOpen: false });\n };\n _this._onDropdownBlur = function (ev) {\n // If Dropdown disabled do not proceed with this logic.\n var disabled = _this._isDisabled();\n if (disabled) {\n return;\n }\n if (_this.state.isOpen) {\n // Do not call onBlur or update focus state when the callout is opened\n return;\n }\n _this.setState({ hasFocus: false });\n if (_this.props.onBlur) {\n _this.props.onBlur(ev);\n }\n };\n _this._onDropdownKeyDown = function (ev) {\n // If Dropdown disabled do not process any keyboard events.\n var disabled = _this._isDisabled();\n if (disabled) {\n return;\n }\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in _shouldHandleKeyUp for reasoning.\n _this._lastKeyDownWasAltOrMeta = _this._isAltOrMeta(ev);\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n var newIndex;\n var selectedIndex = _this.props.hoisted.selectedIndices.length ? _this.props.hoisted.selectedIndices[0] : -1;\n var containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n var isOpen = _this.state.isOpen;\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n _this.setState({\n isOpen: !isOpen,\n });\n break;\n case KeyCodes.escape:\n if (!isOpen) {\n return;\n }\n _this.setState({\n isOpen: false,\n });\n break;\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n if (isOpen) {\n _this.setState({ isOpen: false });\n break;\n }\n return;\n }\n if (_this.props.multiSelect) {\n _this.setState({ isOpen: true });\n }\n else if (!_this._isDisabled()) {\n newIndex = _this._moveIndex(ev, -1, selectedIndex - 1, selectedIndex);\n }\n break;\n case KeyCodes.down:\n if (containsExpandCollapseModifier) {\n ev.stopPropagation();\n ev.preventDefault();\n }\n if ((containsExpandCollapseModifier && !isOpen) || _this.props.multiSelect) {\n _this.setState({ isOpen: true });\n }\n else if (!_this._isDisabled()) {\n newIndex = _this._moveIndex(ev, 1, selectedIndex + 1, selectedIndex);\n }\n break;\n case KeyCodes.home:\n if (!_this.props.multiSelect) {\n newIndex = _this._moveIndex(ev, 1, 0, selectedIndex);\n }\n break;\n case KeyCodes.end:\n if (!_this.props.multiSelect) {\n newIndex = _this._moveIndex(ev, -1, _this.props.options.length - 1, selectedIndex);\n }\n break;\n case KeyCodes.space:\n // event handled in _onDropdownKeyUp\n break;\n default:\n return;\n }\n if (newIndex !== selectedIndex) {\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n _this._onDropdownKeyUp = function (ev) {\n // If Dropdown disabled do not process any keyboard events.\n var disabled = _this._isDisabled();\n if (disabled) {\n return;\n }\n var shouldHandleKey = _this._shouldHandleKeyUp(ev);\n var isOpen = _this.state.isOpen;\n if (_this.props.onKeyUp) {\n _this.props.onKeyUp(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.space:\n _this.setState({\n isOpen: !isOpen,\n });\n break;\n default:\n if (shouldHandleKey && isOpen) {\n _this.setState({ isOpen: false });\n }\n return;\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this._onZoneKeyDown = function (ev) {\n var _a, _b;\n var elementToFocus;\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in _shouldHandleKeyUp for reasoning.\n _this._lastKeyDownWasAltOrMeta = _this._isAltOrMeta(ev);\n var containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n _this.setState({ isOpen: false });\n }\n else {\n if (_this._host.current) {\n elementToFocus = getLastFocusable(_this._host.current, _this._host.current.lastChild, true);\n }\n }\n break;\n // All directional keystrokes should be canceled when the zone is rendered.\n // This avoids the body scroll from reacting and thus dismissing the dropdown.\n case KeyCodes.home:\n case KeyCodes.end:\n case KeyCodes.pageUp:\n case KeyCodes.pageDown:\n break;\n case KeyCodes.down:\n if (!containsExpandCollapseModifier && _this._host.current) {\n elementToFocus = getFirstFocusable(_this._host.current, _this._host.current.firstChild, true);\n }\n break;\n case KeyCodes.escape:\n _this.setState({ isOpen: false });\n break;\n case KeyCodes.tab:\n _this.setState({ isOpen: false });\n var document_1 = getDocument();\n if (document_1) {\n if (ev.shiftKey) {\n (_a = getPreviousElement(document_1.body, _this._dropDown.current, false, false, true, true)) === null || _a === void 0 ? void 0 : _a.focus();\n }\n else {\n (_b = getNextElement(document_1.body, _this._dropDown.current, false, false, true, true)) === null || _b === void 0 ? void 0 : _b.focus();\n }\n }\n break;\n default:\n return;\n }\n if (elementToFocus) {\n elementToFocus.focus();\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this._onZoneKeyUp = function (ev) {\n var shouldHandleKey = _this._shouldHandleKeyUp(ev);\n if (shouldHandleKey && _this.state.isOpen) {\n _this.setState({ isOpen: false });\n ev.preventDefault();\n }\n };\n _this._onDropdownClick = function (ev) {\n if (_this.props.onClick) {\n _this.props.onClick(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n var isOpen = _this.state.isOpen;\n var disabled = _this._isDisabled();\n if (!disabled && !_this._shouldOpenOnFocus()) {\n _this.setState({\n isOpen: !isOpen,\n });\n }\n _this._isFocusedByClick = false; // reset\n };\n _this._onDropdownMouseDown = function () {\n _this._isFocusedByClick = true;\n };\n _this._onFocus = function (ev) {\n var disabled = _this._isDisabled();\n if (!disabled) {\n if (_this.props.onFocus) {\n _this.props.onFocus(ev);\n }\n var state = { hasFocus: true };\n if (_this._shouldOpenOnFocus()) {\n state.isOpen = true;\n }\n _this.setState(state);\n }\n };\n /**\n * Because the isDisabled prop is deprecated, we have had to repeat this logic all over the place.\n * This helper method avoids all the repetition.\n */\n _this._isDisabled = function () {\n var disabled = _this.props.disabled;\n // eslint-disable-next-line deprecation/deprecation\n var isDisabled = _this.props.isDisabled;\n // Remove this deprecation workaround at 1.0.0\n if (disabled === undefined) {\n disabled = isDisabled;\n }\n return disabled;\n };\n _this._onRenderLabel = function (props) {\n var label = props.label, required = props.required, disabled = props.disabled;\n var labelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.label\n : undefined;\n return label ? (React.createElement(Label, { className: _this._classNames.label, id: _this._labelId, required: required, styles: labelStyles, disabled: disabled }, label)) : null;\n };\n initializeComponentRef(_this);\n var multiSelect = props.multiSelect, selectedKey = props.selectedKey, selectedKeys = props.selectedKeys, defaultSelectedKey = props.defaultSelectedKey, defaultSelectedKeys = props.defaultSelectedKeys, options = props.options;\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations(COMPONENT_NAME, props, {\n isDisabled: 'disabled',\n onChanged: 'onChange',\n placeHolder: 'placeholder',\n onRenderPlaceHolder: 'onRenderPlaceholder',\n });\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n defaultSelectedKey: 'selectedKey',\n defaultSelectedKeys: 'selectedKeys',\n selectedKeys: 'selectedKey',\n });\n if (multiSelect) {\n var warnMultiSelect = function (prop) {\n return warn(\"Dropdown property '\".concat(prop, \"' cannot be used when 'multiSelect' is true. Use '\").concat(prop, \"s' instead.\"));\n };\n if (selectedKey !== undefined) {\n warnMultiSelect('selectedKey');\n }\n if (defaultSelectedKey !== undefined) {\n warnMultiSelect('defaultSelectedKey');\n }\n }\n else {\n var warnNotMultiSelect = function (prop) {\n return warn(\"Dropdown property '\".concat(prop, \"s' cannot be used when 'multiSelect' is false/unset. Use '\").concat(prop, \"' instead.\"));\n };\n if (selectedKeys !== undefined) {\n warnNotMultiSelect('selectedKey');\n }\n if (defaultSelectedKeys !== undefined) {\n warnNotMultiSelect('defaultSelectedKey');\n }\n }\n }\n _this._id = props.id || getId('Dropdown');\n _this._labelId = _this._id + '-label';\n _this._listId = _this._id + '-list';\n _this._optionId = _this._id + '-option';\n _this._isScrollIdle = true;\n _this._hasBeenPositioned = false;\n _this._sizePosCache.updateOptions(options);\n _this.state = {\n isOpen: false,\n hasFocus: false,\n calloutRenderEdge: undefined,\n };\n return _this;\n }\n Object.defineProperty(DropdownInternal.prototype, \"selectedOptions\", {\n /**\n * All selected options\n */\n get: function () {\n var _a = this.props, options = _a.options, selectedIndices = _a.hoisted.selectedIndices;\n return getAllSelectedOptions(options, selectedIndices);\n },\n enumerable: false,\n configurable: true\n });\n DropdownInternal.prototype.componentWillUnmount = function () {\n clearTimeout(this._scrollIdleTimeoutId);\n };\n DropdownInternal.prototype.componentDidUpdate = function (prevProps, prevState) {\n if (prevState.isOpen === true && this.state.isOpen === false) {\n this._gotMouseMove = false;\n this._hasBeenPositioned = false;\n if (this.props.onDismiss) {\n this.props.onDismiss();\n }\n }\n };\n DropdownInternal.prototype.render = function () {\n var id = this._id;\n var props = this.props;\n var className = props.className, label = props.label, options = props.options, ariaLabel = props.ariaLabel, required = props.required, errorMessage = props.errorMessage, propStyles = props.styles, theme = props.theme, panelProps = props.panelProps, calloutProps = props.calloutProps, _a = props.onRenderTitle, onRenderTitle = _a === void 0 ? this._getTitle : _a, _b = props.onRenderContainer, onRenderContainer = _b === void 0 ? this._onRenderContainer : _b, _c = props.onRenderCaretDown, onRenderCaretDown = _c === void 0 ? this._onRenderCaretDown : _c, _d = props.onRenderLabel, onRenderLabel = _d === void 0 ? this._onRenderLabel : _d, _e = props.onRenderItem, onRenderItem = _e === void 0 ? this._onRenderItem : _e, selectedIndices = props.hoisted.selectedIndices;\n var _f = this.state, isOpen = _f.isOpen, calloutRenderEdge = _f.calloutRenderEdge, hasFocus = _f.hasFocus;\n // eslint-disable-next-line deprecation/deprecation\n var onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._getPlaceholder;\n // If our cached options are out of date update our cache\n if (options !== this._sizePosCache.cachedOptions) {\n this._sizePosCache.updateOptions(options);\n }\n var selectedOptions = getAllSelectedOptions(options, selectedIndices);\n var divProps = getNativeProps(props, divProperties);\n var disabled = this._isDisabled();\n var errorMessageId = id + '-errorMessage';\n this._classNames = getClassNames(propStyles, {\n theme: theme,\n className: className,\n hasError: !!(errorMessage && errorMessage.length > 0),\n hasLabel: !!label,\n isOpen: isOpen,\n required: required,\n disabled: disabled,\n isRenderingPlaceholder: !selectedOptions.length,\n panelClassName: panelProps ? panelProps.className : undefined,\n calloutClassName: calloutProps ? calloutProps.className : undefined,\n calloutRenderEdge: calloutRenderEdge,\n });\n var hasErrorMessage = !!errorMessage && errorMessage.length > 0;\n return (React.createElement(\"div\", { className: this._classNames.root, ref: this.props.hoisted.rootRef, \"aria-owns\": isOpen ? this._listId : undefined },\n onRenderLabel(this.props, this._onRenderLabel),\n React.createElement(\"div\", __assign({ \"data-is-focusable\": !disabled, \"data-ktp-target\": true, ref: this._dropDown, id: id, tabIndex: disabled ? -1 : 0, role: \"combobox\", \"aria-haspopup\": \"listbox\", \"aria-expanded\": isOpen ? 'true' : 'false', \"aria-label\": ariaLabel, \"aria-labelledby\": label && !ariaLabel ? mergeAriaAttributeValues(this._labelId, this._optionId) : undefined, \"aria-describedby\": hasErrorMessage ? this._id + '-errorMessage' : undefined, \"aria-required\": required, \"aria-disabled\": disabled, \"aria-controls\": isOpen ? this._listId : undefined }, divProps, { className: this._classNames.dropdown, onBlur: this._onDropdownBlur, onKeyDown: this._onDropdownKeyDown, onKeyUp: this._onDropdownKeyUp, onClick: this._onDropdownClick, onMouseDown: this._onDropdownMouseDown, onFocus: this._onFocus }),\n React.createElement(\"span\", { id: this._optionId, className: this._classNames.title, \"aria-live\": hasFocus ? 'polite' : undefined, \"aria-atomic\": hasFocus ? true : undefined, \"aria-invalid\": hasErrorMessage }, \n // If option is selected render title, otherwise render the placeholder text\n selectedOptions.length\n ? onRenderTitle(selectedOptions, this._onRenderTitle)\n : onRenderPlaceholder(props, this._onRenderPlaceholder)),\n React.createElement(\"span\", { className: this._classNames.caretDownWrapper }, onRenderCaretDown(props, this._onRenderCaretDown))),\n isOpen &&\n onRenderContainer(__assign(__assign({}, props), { onDismiss: this._onDismiss, onRenderItem: onRenderItem }), this._onRenderContainer),\n hasErrorMessage && (React.createElement(\"div\", { role: \"alert\", id: errorMessageId, className: this._classNames.errorMessage }, errorMessage))));\n };\n DropdownInternal.prototype.focus = function (shouldOpenOnFocus) {\n if (this._dropDown.current) {\n this._dropDown.current.focus();\n if (shouldOpenOnFocus) {\n this.setState({\n isOpen: true,\n });\n }\n }\n };\n DropdownInternal.prototype.setSelectedIndex = function (event, index) {\n var _a = this.props, options = _a.options, selectedKey = _a.selectedKey, selectedKeys = _a.selectedKeys, multiSelect = _a.multiSelect, notifyOnReselect = _a.notifyOnReselect, _b = _a.hoisted.selectedIndices, selectedIndices = _b === void 0 ? [] : _b;\n var checked = selectedIndices ? selectedIndices.indexOf(index) > -1 : false;\n var newIndexes = [];\n index = Math.max(0, Math.min(options.length - 1, index));\n // If this is a controlled component then no state change should take place.\n if (selectedKey !== undefined || selectedKeys !== undefined) {\n this._onChange(event, options, index, checked, multiSelect);\n return;\n }\n if (!multiSelect && !notifyOnReselect && index === selectedIndices[0]) {\n return;\n }\n else if (multiSelect) {\n newIndexes = selectedIndices ? this._copyArray(selectedIndices) : [];\n if (checked) {\n var position = newIndexes.indexOf(index);\n if (position > -1) {\n // unchecked the current one\n newIndexes.splice(position, 1);\n }\n }\n else {\n // add the new selected index into the existing one\n newIndexes.push(index);\n }\n }\n else {\n // Set the selected option if this is an uncontrolled component\n newIndexes = [index];\n }\n event.persist();\n // Call onChange after state is updated\n this.props.hoisted.setSelectedIndices(newIndexes);\n this._onChange(event, options, index, checked, multiSelect);\n };\n DropdownInternal.prototype._copyArray = function (array) {\n var newArray = [];\n for (var _i = 0, array_1 = array; _i < array_1.length; _i++) {\n var element = array_1[_i];\n newArray.push(element);\n }\n return newArray;\n };\n /**\n * Finds the next valid Dropdown option and sets the selected index to it.\n * @param stepValue - Value of how many items the function should traverse. Should be -1 or 1.\n * @param index - Index of where the search should start\n * @param selectedIndex - The selectedIndex Dropdown's state\n * @returns The next valid dropdown option's index\n */\n DropdownInternal.prototype._moveIndex = function (event, stepValue, index, selectedIndex) {\n var options = this.props.options;\n // Return selectedIndex if nothing has changed or options is empty\n if (selectedIndex === index || options.length === 0) {\n return selectedIndex;\n }\n // If the user is pressing the up or down key we want to make\n // sure that the dropdown cycles through the options without\n // causing the screen to scroll. In _onDropdownKeyDown\n // at the very end is a check to see if newIndex !== selectedIndex.\n // If the index is less than 0 and we set it back to 0, then\n // newIndex will equal selectedIndex and not stop the action\n // of the key press happening and vice versa for indexes greater\n // than or equal to the options length.\n if (index >= options.length) {\n index = 0;\n }\n else if (index < 0) {\n index = options.length - 1;\n }\n var stepCounter = 0;\n // If current index is a header or divider, or disabled, increment by step\n while (options[index].itemType === DropdownMenuItemType.Header ||\n options[index].itemType === DropdownMenuItemType.Divider ||\n options[index].disabled) {\n // If stepCounter exceeds length of options, then return selectedIndex (-1)\n if (stepCounter >= options.length) {\n return selectedIndex;\n }\n // If index + stepValue is out of bounds, wrap around\n if (index + stepValue < 0) {\n index = options.length;\n }\n else if (index + stepValue >= options.length) {\n index = -1;\n }\n index = index + stepValue;\n stepCounter++;\n }\n this.setSelectedIndex(event, index);\n return index;\n };\n /** Wrap item list in a FocusZone */\n DropdownInternal.prototype._renderFocusableList = function (props) {\n var _a = props.onRenderList, onRenderList = _a === void 0 ? this._onRenderList : _a, label = props.label, ariaLabel = props.ariaLabel, multiSelect = props.multiSelect;\n return (React.createElement(\"div\", { className: this._classNames.dropdownItemsWrapper, onKeyDown: this._onZoneKeyDown, onKeyUp: this._onZoneKeyUp, ref: this._host, tabIndex: 0 },\n React.createElement(FocusZone, { ref: this._focusZone, direction: FocusZoneDirection.vertical, id: this._listId, className: this._classNames.dropdownItems, role: \"listbox\", \"aria-label\": ariaLabel, \"aria-labelledby\": label && !ariaLabel ? this._labelId : undefined, \"aria-multiselectable\": multiSelect }, onRenderList(props, this._onRenderList))));\n };\n DropdownInternal.prototype._renderSeparator = function (item) {\n var index = item.index, key = item.key;\n var separatorClassName = item.hidden ? this._classNames.dropdownDividerHidden : this._classNames.dropdownDivider;\n if (index > 0) {\n return React.createElement(\"div\", { role: \"presentation\", key: key, className: separatorClassName });\n }\n return null;\n };\n DropdownInternal.prototype._renderHeader = function (item) {\n var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;\n var key = item.key, id = item.id;\n var headerClassName = item.hidden\n ? this._classNames.dropdownItemHeaderHidden\n : this._classNames.dropdownItemHeader;\n return (React.createElement(\"div\", { id: id, key: key, className: headerClassName }, onRenderOption(item, this._onRenderOption)));\n };\n DropdownInternal.prototype._onItemMouseEnter = function (item, ev) {\n if (this._shouldIgnoreMouseEvent()) {\n return;\n }\n var targetElement = ev.currentTarget;\n targetElement.focus();\n };\n DropdownInternal.prototype._onItemMouseMove = function (item, ev) {\n var targetElement = ev.currentTarget;\n this._gotMouseMove = true;\n if (!this._isScrollIdle || document.activeElement === targetElement) {\n return;\n }\n targetElement.focus();\n };\n DropdownInternal.prototype._shouldIgnoreMouseEvent = function () {\n return !this._isScrollIdle || !this._gotMouseMove;\n };\n /**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\n DropdownInternal.prototype._isAltOrMeta = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n };\n /**\n * We close the menu on key up only if ALL of the following are true:\n * - Most recent key down was alt or meta (command)\n * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to\n * expand/collapse the menu)\n * - We're not on a Mac (or iOS)\n *\n * This is because on Windows, pressing alt moves focus to the application menu bar or similar,\n * closing any open context menus. There is not a similar behavior on Macs.\n */\n DropdownInternal.prototype._shouldHandleKeyUp = function (ev) {\n var keyPressIsAltOrMetaAlone = this._lastKeyDownWasAltOrMeta && this._isAltOrMeta(ev);\n this._lastKeyDownWasAltOrMeta = false;\n return !!keyPressIsAltOrMetaAlone && !(isMac() || isIOS());\n };\n /**\n * Returns true if dropdown should set to open on focus.\n * Otherwise, isOpen state should be toggled on click\n */\n DropdownInternal.prototype._shouldOpenOnFocus = function () {\n var hasFocus = this.state.hasFocus;\n var openOnKeyboardFocus = this.props.openOnKeyboardFocus;\n return !this._isFocusedByClick && openOnKeyboardFocus === true && !hasFocus;\n };\n DropdownInternal.defaultProps = {\n options: [],\n };\n return DropdownInternal;\n}(React.Component));\n//# sourceMappingURL=Dropdown.base.js.map","import { styled } from '../../Utilities';\nimport { DropdownBase } from './Dropdown.base';\nimport { getStyles } from './Dropdown.styles';\nexport var Dropdown = styled(DropdownBase, getStyles, undefined, {\n scope: 'Dropdown',\n});\nDropdown.displayName = 'Dropdown';\n//# sourceMappingURL=Dropdown.js.map","var _a, _b, _c, _d;\nimport { __assign, __spreadArray } from \"tslib\";\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { RectangleEdge } from '../../Positioning';\nimport { FontWeights, HighContrastSelector, getGlobalClassNames, normalize, HighContrastSelectorWhite, getScreenSelector, ScreenWidthMinMedium, getHighContrastNoAdjustStyle, } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Dropdown-container',\n label: 'ms-Dropdown-label',\n dropdown: 'ms-Dropdown',\n title: 'ms-Dropdown-title',\n caretDownWrapper: 'ms-Dropdown-caretDownWrapper',\n caretDown: 'ms-Dropdown-caretDown',\n callout: 'ms-Dropdown-callout',\n panel: 'ms-Dropdown-panel',\n dropdownItems: 'ms-Dropdown-items',\n dropdownItem: 'ms-Dropdown-item',\n dropdownDivider: 'ms-Dropdown-divider',\n dropdownOptionText: 'ms-Dropdown-optionText',\n dropdownItemHeader: 'ms-Dropdown-header',\n titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',\n titleHasError: 'ms-Dropdown-title--hasError',\n};\nvar DROPDOWN_HEIGHT = 32;\nvar DROPDOWN_ITEM_HEIGHT = 36;\nvar highContrastAdjustMixin = (_a = {},\n _a[\"\".concat(HighContrastSelector, \", \").concat(HighContrastSelectorWhite.replace('@media ', ''))] = __assign({}, getHighContrastNoAdjustStyle()),\n _a);\nvar highContrastItemAndTitleStateMixin = {\n selectors: __assign((_b = {}, _b[HighContrastSelector] = {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n }, _b['.ms-Checkbox-checkbox'] = (_c = {},\n _c[HighContrastSelector] = {\n borderColor: 'HighlightText',\n },\n _c), _b), highContrastAdjustMixin),\n};\nvar highContrastBorderState = {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n borderColor: 'Highlight',\n },\n _d),\n};\nvar MinimumScreenSelector = getScreenSelector(0, ScreenWidthMinMedium);\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n var theme = props.theme, hasError = props.hasError, hasLabel = props.hasLabel, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName, calloutRenderEdge = props.calloutRenderEdge;\n if (!theme) {\n throw new Error('theme is undefined or null in base Dropdown getStyles function.');\n }\n var globalClassnames = getGlobalClassNames(GlobalClassNames, theme);\n var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var rootHoverFocusActiveSelectorNeutralDarkMixin = {\n color: semanticColors.menuItemTextHovered,\n };\n var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {\n color: semanticColors.menuItemText,\n };\n var borderColorError = {\n borderColor: semanticColors.errorText,\n };\n var dropdownItemStyle = [\n globalClassnames.dropdownItem,\n {\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n padding: '0 8px',\n width: '100%',\n minHeight: DROPDOWN_ITEM_HEIGHT,\n lineHeight: 20,\n height: 0,\n position: 'relative',\n border: '1px solid transparent',\n borderRadius: 0,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n textAlign: 'left',\n '.ms-Button-flexContainer': {\n width: '100%',\n },\n },\n ];\n var dropdownHeaderStyle = [\n globalClassnames.dropdownItemHeader,\n __assign(__assign({}, fonts.medium), { fontWeight: FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0 8px', userSelect: 'none', textAlign: 'left', selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _a) }),\n ];\n var selectedItemBackgroundColor = semanticColors.menuItemBackgroundPressed;\n var itemSelectors = function (isSelected) {\n var _a, _b;\n if (isSelected === void 0) { isSelected = false; }\n return {\n selectors: (_a = {\n '&:hover': [\n {\n color: semanticColors.menuItemTextHovered,\n backgroundColor: !isSelected ? semanticColors.menuItemBackgroundHovered : selectedItemBackgroundColor,\n },\n highContrastItemAndTitleStateMixin,\n ],\n '&.is-multi-select:hover': [\n { backgroundColor: !isSelected ? 'transparent' : selectedItemBackgroundColor },\n highContrastItemAndTitleStateMixin,\n ],\n '&:active:hover': [\n {\n color: semanticColors.menuItemTextHovered,\n backgroundColor: !isSelected\n ? semanticColors.menuItemBackgroundPressed\n : semanticColors.menuItemBackgroundHovered,\n },\n highContrastItemAndTitleStateMixin,\n ]\n },\n _a[\".\".concat(IsFocusVisibleClassName, \" &:focus:after\")] = (_b = {\n left: 0,\n top: 0,\n bottom: 0,\n right: 0\n },\n _b[HighContrastSelector] = {\n inset: '2px',\n },\n _b),\n _a[HighContrastSelector] = {\n border: 'none',\n },\n _a),\n };\n };\n var dropdownItemSelected = __spreadArray(__spreadArray([], dropdownItemStyle, true), [\n {\n backgroundColor: selectedItemBackgroundColor,\n color: semanticColors.menuItemTextHovered,\n },\n itemSelectors(true),\n highContrastItemAndTitleStateMixin,\n ], false);\n var dropdownItemDisabled = __spreadArray(__spreadArray([], dropdownItemStyle, true), [\n {\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n border: 'none',\n },\n _b),\n },\n ], false);\n var titleOpenBorderRadius = calloutRenderEdge === RectangleEdge.bottom\n ? \"\".concat(effects.roundedCorner2, \" \").concat(effects.roundedCorner2, \" 0 0\")\n : \"0 0 \".concat(effects.roundedCorner2, \" \").concat(effects.roundedCorner2);\n var calloutOpenBorderRadius = calloutRenderEdge === RectangleEdge.bottom\n ? \"0 0 \".concat(effects.roundedCorner2, \" \").concat(effects.roundedCorner2)\n : \"\".concat(effects.roundedCorner2, \" \").concat(effects.roundedCorner2, \" 0 0\");\n return {\n root: [globalClassnames.root, className],\n label: globalClassnames.label,\n dropdown: [\n globalClassnames.dropdown,\n normalize,\n fonts.medium,\n {\n color: semanticColors.menuItemText,\n borderColor: semanticColors.focusBorder,\n position: 'relative',\n outline: 0,\n userSelect: 'none',\n selectors: (_c = {},\n _c['&:hover .' + globalClassnames.title] = [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { borderColor: isOpen ? palette.neutralSecondary : palette.neutralPrimary },\n highContrastBorderState,\n ],\n _c['&:focus .' + globalClassnames.title] = [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { selectors: (_d = {}, _d[HighContrastSelector] = { color: 'Highlight' }, _d) },\n ],\n _c['&:focus:after'] = [\n {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n boxSizing: 'border-box',\n top: '0px',\n left: '0px',\n width: '100%',\n height: '100%',\n // see https://github.com/microsoft/fluentui/pull/9182 for semantic color disc\n border: !disabled ? \"2px solid \".concat(palette.themePrimary) : 'none',\n borderRadius: '2px',\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'Highlight',\n },\n _e),\n },\n ],\n _c['&:active .' + globalClassnames.title] = [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { borderColor: palette.themePrimary },\n highContrastBorderState,\n ],\n _c['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _c['&:focus .' + globalClassnames.caretDown] = [\n !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n { selectors: (_f = {}, _f[HighContrastSelector] = { color: 'Highlight' }, _f) },\n ],\n _c['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _c['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _c['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _c['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _c['&:hover .' + globalClassnames.titleHasError] = borderColorError,\n _c['&:active .' + globalClassnames.titleHasError] = borderColorError,\n _c),\n },\n isOpen && 'is-open',\n disabled && 'is-disabled',\n required && 'is-required',\n required &&\n !hasLabel && {\n selectors: (_g = {\n ':before': {\n content: \"'*'\",\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n }\n },\n _g[HighContrastSelector] = {\n selectors: {\n ':after': {\n right: -14, // moving the * 4 pixel to right to alleviate border clipping in HC mode.\n },\n },\n },\n _g),\n },\n ],\n title: [\n globalClassnames.title,\n normalize,\n {\n backgroundColor: semanticColors.inputBackground,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: semanticColors.inputBorder,\n borderRadius: isOpen ? titleOpenBorderRadius : effects.roundedCorner2,\n cursor: 'pointer',\n display: 'block',\n height: DROPDOWN_HEIGHT,\n lineHeight: DROPDOWN_HEIGHT - 2,\n padding: \"0 28px 0 8px\",\n position: 'relative',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n },\n isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],\n hasError && [globalClassnames.titleHasError, borderColorError],\n disabled && {\n backgroundColor: semanticColors.disabledBackground,\n border: 'none',\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: (_h = {},\n _h[HighContrastSelector] = __assign({ border: '1px solid GrayText', color: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _h),\n },\n ],\n caretDownWrapper: [\n globalClassnames.caretDownWrapper,\n {\n height: DROPDOWN_HEIGHT,\n lineHeight: DROPDOWN_HEIGHT - 2,\n paddingTop: 1,\n position: 'absolute',\n right: 8,\n top: 0,\n },\n !disabled && {\n cursor: 'pointer',\n },\n ],\n caretDown: [\n globalClassnames.caretDown,\n { color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },\n disabled && {\n color: semanticColors.disabledText,\n selectors: (_j = {},\n _j[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _j),\n },\n ],\n errorMessage: __assign(__assign({ color: semanticColors.errorText }, theme.fonts.small), { paddingTop: 5 }),\n callout: [\n globalClassnames.callout,\n {\n boxShadow: effects.elevation8,\n borderRadius: calloutOpenBorderRadius,\n selectors: (_k = {},\n _k['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },\n _k),\n },\n calloutClassName,\n ],\n dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },\n dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],\n dropdownItem: __spreadArray(__spreadArray([], dropdownItemStyle, true), [itemSelectors()], false),\n dropdownItemSelected: dropdownItemSelected,\n dropdownItemDisabled: dropdownItemDisabled,\n dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],\n dropdownItemHidden: __spreadArray(__spreadArray([], dropdownItemStyle, true), [{ display: 'none' }], false),\n dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],\n dropdownDividerHidden: [globalClassnames.dropdownDivider, { display: 'none' }],\n dropdownOptionText: [\n globalClassnames.dropdownOptionText,\n {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n minWidth: 0,\n maxWidth: '100%',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n margin: '1px',\n },\n ],\n dropdownItemHeader: dropdownHeaderStyle,\n dropdownItemHeaderHidden: __spreadArray(__spreadArray([], dropdownHeaderStyle, true), [{ display: 'none' }], false),\n subComponentStyles: {\n label: { root: { display: 'inline-block' } },\n multiSelectItem: {\n root: {\n padding: 0,\n },\n label: {\n alignSelf: 'stretch',\n padding: '0 8px',\n width: '100%',\n },\n input: {\n selectors: (_l = {},\n _l[\".\".concat(IsFocusVisibleClassName, \" &:focus + label::before\")] = {\n outlineOffset: '0px',\n },\n _l),\n },\n },\n panel: {\n root: [panelClassName],\n main: {\n selectors: (_m = {},\n // In case of extra small screen sizes\n _m[MinimumScreenSelector] = {\n // panelWidth xs\n width: 272,\n },\n _m),\n },\n contentInner: { padding: '0 0 20px' },\n },\n },\n };\n};\n//# sourceMappingURL=Dropdown.styles.js.map","import { __spreadArray } from \"tslib\";\nimport { DropdownMenuItemType } from '../Dropdown.types';\n/**\n * A utility class to cache size and position in cache.\n *\n * Dropdown options has non-selectable display types. It is therefore not cheap to determine\n * the total number of actual selectable options as well as the position an option is in the\n * list of options - O(n) cost for each lookup.\n *\n * Given that we potentially have to make this determination on every single render pass, this\n * cache should provide a little bit of relief.\n */\nvar DropdownSizePosCache = /** @class */ (function () {\n function DropdownSizePosCache() {\n this._size = 0;\n }\n /**\n * Invalidates the cache and recalculate the size of selectable options.\n */\n DropdownSizePosCache.prototype.updateOptions = function (options) {\n var displayOnlyOptionsCache = [];\n var notSelectableOptionsCache = [];\n var size = 0;\n for (var i = 0; i < options.length; i++) {\n var _a = options[i], itemType = _a.itemType, hidden = _a.hidden;\n if (itemType === DropdownMenuItemType.Divider || itemType === DropdownMenuItemType.Header) {\n displayOnlyOptionsCache.push(i);\n notSelectableOptionsCache.push(i);\n }\n else if (hidden) {\n notSelectableOptionsCache.push(i);\n }\n else {\n size++;\n }\n }\n this._size = size;\n this._displayOnlyOptionsCache = displayOnlyOptionsCache;\n this._notSelectableOptionsCache = notSelectableOptionsCache;\n this._cachedOptions = __spreadArray([], options, true);\n };\n Object.defineProperty(DropdownSizePosCache.prototype, \"optionSetSize\", {\n /**\n * The size of all the selectable options.\n */\n get: function () {\n return this._size;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(DropdownSizePosCache.prototype, \"cachedOptions\", {\n /**\n * The chached options array.\n */\n get: function () {\n return this._cachedOptions;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Returns the position of this option element relative to the full set of selectable option elements.\n * Note: the first selectable element is position 1 in the set.\n * @param index The raw index of the option element.\n */\n DropdownSizePosCache.prototype.positionInSet = function (index) {\n if (index === undefined) {\n return undefined;\n }\n // we could possibly memoize this too but this should be good enough, most of the time (the expectation is that\n // when you have a lot of options, the selectable options will heavily dominate over the non-selectable options.\n var offset = 0;\n while (index > this._notSelectableOptionsCache[offset]) {\n offset++;\n }\n if (this._displayOnlyOptionsCache[offset] === index) {\n throw new Error(\"Unexpected: Option at index \".concat(index, \" is not a selectable element.\"));\n }\n if (this._notSelectableOptionsCache[offset] === index) {\n return undefined;\n }\n return index - offset + 1;\n };\n return DropdownSizePosCache;\n}());\nexport { DropdownSizePosCache };\n//# sourceMappingURL=DropdownSizePosCache.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, css, initializeComponentRef } from '../../Utilities';\nimport { Autofill } from '../../Autofill';\nimport * as stylesImport from './BaseExtendedPicker.scss';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Selection, SelectionMode, SelectionZone } from '../../Selection';\nvar styles = stylesImport;\nvar BaseExtendedPicker = /** @class */ (function (_super) {\n __extends(BaseExtendedPicker, _super);\n function BaseExtendedPicker(basePickerProps) {\n var _this = _super.call(this, basePickerProps) || this;\n _this.floatingPicker = React.createRef();\n _this.selectedItemsList = React.createRef();\n _this.root = React.createRef();\n _this.input = React.createRef();\n _this.onSelectionChange = function () {\n _this.forceUpdate();\n };\n _this.onInputChange = function (value, composing) {\n // We don't want to update the picker's suggestions when the input is still being composed\n if (!composing) {\n _this.setState({ queryString: value });\n if (_this.floatingPicker.current) {\n _this.floatingPicker.current.onQueryStringChanged(value);\n }\n }\n };\n _this.onInputFocus = function (ev) {\n if (_this.selectedItemsList.current) {\n _this.selectedItemsList.current.unselectAll();\n }\n if (_this.props.inputProps && _this.props.inputProps.onFocus) {\n _this.props.inputProps.onFocus(ev);\n }\n };\n _this.onInputClick = function (ev) {\n if (_this.selectedItemsList.current) {\n _this.selectedItemsList.current.unselectAll();\n }\n if (_this.floatingPicker.current && _this.inputElement) {\n // Update the value if the input value is empty or is different than the current inputText from the floatingPicker\n var shoudUpdateValue = _this.inputElement.value === '' || _this.inputElement.value !== _this.floatingPicker.current.inputText;\n _this.floatingPicker.current.showPicker(shoudUpdateValue);\n }\n };\n // This is protected because we may expect the backspace key to work differently in a different kind of picker.\n // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow\n _this.onBackspace = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== KeyCodes.backspace) {\n return;\n }\n if (_this.selectedItemsList.current && _this.items.length) {\n if (_this.input.current &&\n !_this.input.current.isValueSelected &&\n _this.input.current.inputElement === ev.currentTarget.ownerDocument.activeElement &&\n _this.input.current.cursorLocation === 0) {\n if (_this.floatingPicker.current) {\n _this.floatingPicker.current.hidePicker();\n }\n ev.preventDefault();\n _this.selectedItemsList.current.removeItemAt(_this.items.length - 1);\n _this._onSelectedItemsChanged();\n }\n else if (_this.selectedItemsList.current.hasSelectedItems()) {\n if (_this.floatingPicker.current) {\n _this.floatingPicker.current.hidePicker();\n }\n ev.preventDefault();\n _this.selectedItemsList.current.removeSelectedItems();\n _this._onSelectedItemsChanged();\n }\n }\n };\n _this.onCopy = function (ev) {\n if (_this.selectedItemsList.current) {\n // Pass it down into the selected items list\n _this.selectedItemsList.current.onCopy(ev);\n }\n };\n _this.onPaste = function (ev) {\n if (_this.props.onPaste) {\n var inputText = ev.clipboardData.getData('Text');\n ev.preventDefault();\n _this.props.onPaste(inputText);\n }\n };\n _this._onSuggestionSelected = function (item) {\n var currentRenderedQueryString = _this.props.currentRenderedQueryString;\n var queryString = _this.state.queryString;\n if (currentRenderedQueryString === undefined || currentRenderedQueryString === queryString) {\n var processedItem = _this.props.onItemSelected\n ? _this.props.onItemSelected(item)\n : item;\n if (processedItem === null) {\n return;\n }\n var processedItemObject = processedItem;\n var processedItemPromiseLike = processedItem;\n var newItem_1;\n if (processedItemPromiseLike && processedItemPromiseLike.then) {\n processedItemPromiseLike.then(function (resolvedProcessedItem) {\n newItem_1 = resolvedProcessedItem;\n _this._addProcessedItem(newItem_1);\n });\n }\n else {\n newItem_1 = processedItemObject;\n _this._addProcessedItem(newItem_1);\n }\n }\n };\n _this._onSelectedItemsChanged = function () {\n _this.focus();\n };\n /**\n * The floating picker is the source of truth for if the menu has been opened or not.\n *\n * Because this isn't tracked inside the state of this component, we need to\n * force an update here to keep the rendered output that depends on the picker being open\n * in sync with the state\n *\n * Called when the suggestions is shown or closed\n */\n _this._onSuggestionsShownOrHidden = function () {\n _this.forceUpdate();\n };\n initializeComponentRef(_this);\n _this.selection = new Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });\n _this.state = {\n queryString: '',\n };\n return _this;\n }\n Object.defineProperty(BaseExtendedPicker.prototype, \"items\", {\n get: function () {\n var _a, _b, _c, _d;\n return (_d = (_c = (_a = this.props.selectedItems) !== null && _a !== void 0 ? _a : (_b = this.selectedItemsList.current) === null || _b === void 0 ? void 0 : _b.items) !== null && _c !== void 0 ? _c : this.props.defaultSelectedItems) !== null && _d !== void 0 ? _d : null;\n },\n enumerable: false,\n configurable: true\n });\n BaseExtendedPicker.prototype.componentDidMount = function () {\n this.forceUpdate();\n };\n BaseExtendedPicker.prototype.focus = function () {\n if (this.input.current) {\n this.input.current.focus();\n }\n };\n BaseExtendedPicker.prototype.clearInput = function () {\n if (this.input.current) {\n this.input.current.clear();\n }\n };\n Object.defineProperty(BaseExtendedPicker.prototype, \"inputElement\", {\n get: function () {\n return this.input.current && this.input.current.inputElement;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseExtendedPicker.prototype, \"highlightedItems\", {\n get: function () {\n return this.selectedItemsList.current ? this.selectedItemsList.current.highlightedItems() : [];\n },\n enumerable: false,\n configurable: true\n });\n BaseExtendedPicker.prototype.render = function () {\n var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled, focusZoneProps = _a.focusZoneProps;\n var activeDescendant = this.floatingPicker.current && this.floatingPicker.current.currentSelectedSuggestionIndex !== -1\n ? 'sug-' + this.floatingPicker.current.currentSelectedSuggestionIndex\n : undefined;\n var isExpanded = this.floatingPicker.current ? this.floatingPicker.current.isSuggestionsShown : false;\n return (React.createElement(\"div\", { ref: this.root, className: css('ms-BasePicker ms-BaseExtendedPicker', className ? className : ''), onKeyDown: this.onBackspace, onCopy: this.onCopy },\n React.createElement(FocusZone, __assign({ direction: FocusZoneDirection.bidirectional }, focusZoneProps),\n React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.multiple },\n React.createElement(\"div\", { className: css('ms-BasePicker-text', styles.pickerText), role: 'list' },\n this.props.headerComponent,\n this.renderSelectedItemsList(),\n this.canAddItems() && (React.createElement(Autofill, __assign({}, inputProps, { className: css('ms-BasePicker-input', styles.pickerInput), ref: this.input, onFocus: this.onInputFocus, onClick: this.onInputClick, onInputValueChange: this.onInputChange, \"aria-activedescendant\": activeDescendant, \"aria-owns\": isExpanded ? 'suggestion-list' : undefined, \"aria-expanded\": isExpanded, \"aria-haspopup\": \"true\", role: \"combobox\", disabled: disabled, onPaste: this.onPaste })))))),\n this.renderFloatingPicker()));\n };\n Object.defineProperty(BaseExtendedPicker.prototype, \"floatingPickerProps\", {\n get: function () {\n return this.props.floatingPickerProps;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseExtendedPicker.prototype, \"selectedItemsListProps\", {\n get: function () {\n return this.props.selectedItemsListProps;\n },\n enumerable: false,\n configurable: true\n });\n BaseExtendedPicker.prototype.canAddItems = function () {\n var itemLimit = this.props.itemLimit;\n return itemLimit === undefined || this.items.length < itemLimit;\n };\n BaseExtendedPicker.prototype.renderFloatingPicker = function () {\n var FloatingPicker = this.props.onRenderFloatingPicker;\n return (React.createElement(FloatingPicker, __assign({ componentRef: this.floatingPicker, onChange: this._onSuggestionSelected, onSuggestionsHidden: this._onSuggestionsShownOrHidden, onSuggestionsShown: this._onSuggestionsShownOrHidden, inputElement: this.input.current ? this.input.current.inputElement : undefined, selectedItems: this.items, suggestionItems: this.props.suggestionItems ? this.props.suggestionItems : undefined }, this.floatingPickerProps)));\n };\n BaseExtendedPicker.prototype.renderSelectedItemsList = function () {\n var SelectedItems = this.props.onRenderSelectedItems;\n return (React.createElement(SelectedItems, __assign({ componentRef: this.selectedItemsList, selection: this.selection, selectedItems: this.props.selectedItems ? this.props.selectedItems : undefined, onItemsDeleted: this.props.selectedItems ? this.props.onItemsRemoved : undefined }, this.selectedItemsListProps)));\n };\n BaseExtendedPicker.prototype._addProcessedItem = function (newItem) {\n // If this is a controlled component, call the on item selected callback\n // Otherwise add it to the selectedItemsList\n if (this.props.onItemAdded) {\n this.props.onItemAdded(newItem);\n }\n if (this.selectedItemsList.current) {\n this.selectedItemsList.current.addItems([newItem]);\n }\n if (this.input.current) {\n this.input.current.clear();\n }\n if (this.floatingPicker.current) {\n this.floatingPicker.current.hidePicker();\n }\n this.focus();\n };\n return BaseExtendedPicker;\n}(React.Component));\nexport { BaseExtendedPicker };\n//# sourceMappingURL=BaseExtendedPicker.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".pickerText_9f838726{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid \" }, { \"theme\": \"neutralTertiary\", \"defaultValue\": \"#a19f9d\" }, { \"rawString\": \";min-width:180px;padding:1px;min-height:32px}.pickerText_9f838726:hover{border-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \"}.pickerInput_9f838726{height:34px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;margin:1px}.pickerInput_9f838726::-ms-clear{display:none}\" }]);\nexport var pickerText = \"pickerText_9f838726\";\nexport var pickerInput = \"pickerInput_9f838726\";\n//# sourceMappingURL=BaseExtendedPicker.scss.js.map","import { __extends } from \"tslib\";\nimport './ExtendedPeoplePicker.scss';\nimport { BaseExtendedPicker } from '../BaseExtendedPicker';\n/**\n * {@docCategory ExtendedPeoplePicker}\n */\nvar BaseExtendedPeoplePicker = /** @class */ (function (_super) {\n __extends(BaseExtendedPeoplePicker, _super);\n function BaseExtendedPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return BaseExtendedPeoplePicker;\n}(BaseExtendedPicker));\nexport { BaseExtendedPeoplePicker };\n/**\n * {@docCategory ExtendedPeoplePicker}\n */\nvar ExtendedPeoplePicker = /** @class */ (function (_super) {\n __extends(ExtendedPeoplePicker, _super);\n function ExtendedPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return ExtendedPeoplePicker;\n}(BaseExtendedPeoplePicker));\nexport { ExtendedPeoplePicker };\n//# sourceMappingURL=ExtendedPeoplePicker.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".resultContent_4cc31f3f{display:table-row}.resultContent_4cc31f3f .resultItem_4cc31f3f{display:table-cell;vertical-align:bottom}.peoplePickerPersona_4cc31f3f{width:180px}.peoplePickerPersona_4cc31f3f .ms-Persona-details{width:100%}.peoplePicker_4cc31f3f .ms-BasePicker-text{min-height:40px}.peoplePickerPersonaContent_4cc31f3f{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}\" }]);\nexport var resultContent = \"resultContent_4cc31f3f\";\nexport var resultItem = \"resultItem_4cc31f3f\";\nexport var peoplePickerPersona = \"peoplePickerPersona_4cc31f3f\";\nexport var peoplePicker = \"peoplePicker_4cc31f3f\";\nexport var peoplePickerPersonaContent = \"peoplePickerPersonaContent_4cc31f3f\";\n//# sourceMappingURL=ExtendedPeoplePicker.scss.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getDocument, getNativeProps, getRTL, memoizeFunction, Customizer, FocusRectsProvider, } from '../../Utilities';\nimport { createTheme } from '../../Styling';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar getFabricTheme = memoizeFunction(function (theme, isRTL) { return createTheme(__assign(__assign({}, theme), { rtl: isRTL })); });\nvar getDir = function (_a) {\n var theme = _a.theme, dir = _a.dir;\n var contextDir = getRTL(theme) ? 'rtl' : 'ltr';\n var pageDir = getRTL() ? 'rtl' : 'ltr';\n var componentDir = dir ? dir : contextDir;\n return {\n // If Fabric dir !== contextDir\n // Or If contextDir !== pageDir\n // Then we need to set dir of the Fabric root\n rootDir: componentDir !== contextDir || componentDir !== pageDir ? componentDir : dir,\n // If dir !== contextDir || pageDir\n // then set contextual theme around content\n needsTheme: componentDir !== contextDir,\n };\n};\nexport var FabricBase = React.forwardRef(function (props, ref) {\n var className = props.className, theme = props.theme, applyTheme = props.applyTheme, applyThemeToBody = props.applyThemeToBody, styles = props.styles;\n var classNames = getClassNames(styles, {\n theme: theme,\n applyTheme: applyTheme,\n className: className,\n });\n var rootElement = React.useRef(null);\n useApplyThemeToBody(applyThemeToBody, classNames, rootElement);\n return React.createElement(React.Fragment, null, useRenderedContent(props, classNames, rootElement, ref));\n});\nFabricBase.displayName = 'FabricBase';\nfunction useRenderedContent(props, _a, rootElement, ref) {\n var root = _a.root;\n var _b = props.as, Root = _b === void 0 ? 'div' : _b, dir = props.dir, theme = props.theme;\n var divProps = getNativeProps(props, divProperties, ['dir']);\n var _c = getDir(props), rootDir = _c.rootDir, needsTheme = _c.needsTheme;\n var renderedContent = (React.createElement(FocusRectsProvider, { providerRef: rootElement },\n React.createElement(Root, __assign({ dir: rootDir }, divProps, { className: root, ref: useMergedRefs(rootElement, ref) }))));\n // Create the contextual theme if component direction does not match parent direction.\n if (needsTheme) {\n // Disabling ThemeProvider here because theme doesn't need to be re-provided by ThemeProvider if dir has changed.\n renderedContent = (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(Customizer, { settings: { theme: getFabricTheme(theme, dir === 'rtl') } }, renderedContent));\n }\n return renderedContent;\n}\nfunction useApplyThemeToBody(applyThemeToBody, _a, rootElement) {\n var bodyThemed = _a.bodyThemed;\n React.useEffect(function () {\n if (applyThemeToBody) {\n var currentDoc_1 = getDocument(rootElement.current);\n if (currentDoc_1) {\n currentDoc_1.body.classList.add(bodyThemed);\n return function () {\n currentDoc_1.body.classList.remove(bodyThemed);\n };\n }\n }\n }, [bodyThemed, applyThemeToBody, rootElement]);\n return rootElement;\n}\n//# sourceMappingURL=Fabric.base.js.map","import { styled } from '../../Utilities';\nimport { FabricBase } from './Fabric.base';\nimport { getStyles } from './Fabric.styles';\n/**\n * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.\n */\nexport var Fabric = styled(FabricBase, getStyles, undefined, {\n scope: 'Fabric',\n});\n//# sourceMappingURL=Fabric.js.map","import { getGlobalClassNames } from '../../Styling';\nvar inheritFont = { fontFamily: 'inherit' };\nvar GlobalClassNames = {\n root: 'ms-Fabric',\n bodyThemed: 'ms-Fabric-bodyThemed',\n};\nexport var getStyles = function (props) {\n var applyTheme = props.applyTheme, className = props.className, preventBlanketFontInheritance = props.preventBlanketFontInheritance, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: theme.palette.neutralPrimary,\n },\n !preventBlanketFontInheritance && {\n '& button': inheritFont,\n '& input': inheritFont,\n '& textarea': inheritFont,\n },\n // apply theme to only if applyTheme is true\n applyTheme && {\n color: theme.semanticColors.bodyText,\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n className,\n ],\n bodyThemed: [\n {\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n ],\n };\n};\n//# sourceMappingURL=Fabric.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, classNamesFunction, getId, getNativeProps, initializeComponentRef } from '../../Utilities';\nimport { OverflowButtonType } from './Facepile.types';\nimport { FacepileButton } from './FacepileButton';\nimport { Icon } from '../../Icon';\nimport { Persona } from '../../Persona';\nimport { PersonaCoin, PersonaSize, PersonaInitialsColor } from '../../PersonaCoin';\nvar getClassNames = classNamesFunction();\n/**\n * FacePile with no default styles.\n * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)\n */\nvar FacepileBase = /** @class */ (function (_super) {\n __extends(FacepileBase, _super);\n function FacepileBase(props) {\n var _this = _super.call(this, props) || this;\n _this._classNames = getClassNames(_this.props.styles, {\n theme: _this.props.theme,\n className: _this.props.className,\n });\n _this._getPersonaControl = function (persona) {\n var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;\n var personaStyles = {\n details: {\n flex: '1 0 auto',\n },\n };\n return (React.createElement(Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null), { styles: personaStyles })));\n };\n _this._getPersonaCoinControl = function (persona) {\n var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;\n return (React.createElement(PersonaCoin, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null))));\n };\n initializeComponentRef(_this);\n _this._ariaDescriptionId = getId();\n return _this;\n }\n FacepileBase.prototype.render = function () {\n var overflowButtonProps = this.props.overflowButtonProps;\n var _a = this.props, chevronButtonProps = _a.chevronButtonProps, // eslint-disable-line deprecation/deprecation\n maxDisplayablePersonas = _a.maxDisplayablePersonas, personas = _a.personas, overflowPersonas = _a.overflowPersonas, showAddButton = _a.showAddButton, ariaLabel = _a.ariaLabel, _b = _a.showTooltip, showTooltip = _b === void 0 ? true : _b;\n var _classNames = this._classNames;\n // Add a check to make sure maxDisplayalePersonas is defined to cover the edge case of it being 0.\n var numPersonasToShow = typeof maxDisplayablePersonas === 'number' ? Math.min(personas.length, maxDisplayablePersonas) : personas.length;\n // Added for deprecating chevronButtonProps. Can remove after v1.0\n if (chevronButtonProps && !overflowButtonProps) {\n overflowButtonProps = chevronButtonProps;\n }\n var hasOverflowPersonas = overflowPersonas && overflowPersonas.length > 0;\n var personasPrimary = hasOverflowPersonas ? personas : personas.slice(0, numPersonasToShow);\n var personasOverflow = (hasOverflowPersonas ? overflowPersonas : personas.slice(numPersonasToShow)) || [];\n return (React.createElement(\"div\", { className: _classNames.root },\n this.onRenderAriaDescription(),\n React.createElement(\"div\", { className: _classNames.itemContainer },\n showAddButton ? this._getAddNewElement() : null,\n React.createElement(\"ul\", { className: _classNames.members, \"aria-label\": ariaLabel }, this._onRenderVisiblePersonas(personasPrimary, personasOverflow.length === 0 && personas.length === 1, showTooltip)),\n overflowButtonProps ? this._getOverflowElement(personasOverflow) : null)));\n };\n FacepileBase.prototype.onRenderAriaDescription = function () {\n var ariaDescription = this.props.ariaDescription;\n var _classNames = this._classNames;\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,\n // otherwise it will be assigned to descriptionSpan.\n return (ariaDescription && (React.createElement(\"span\", { className: _classNames.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)));\n };\n FacepileBase.prototype._onRenderVisiblePersonas = function (personas, singlePersona, showTooltip) {\n var _this = this;\n var _a = this.props, _b = _a.onRenderPersona, onRenderPersona = _b === void 0 ? this._getPersonaControl : _b, _c = _a.onRenderPersonaCoin, onRenderPersonaCoin = _c === void 0 ? this._getPersonaCoinControl : _c, onRenderPersonaWrapper = _a.onRenderPersonaWrapper;\n return personas.map(function (persona, index) {\n var personaControl = singlePersona\n ? onRenderPersona(persona, _this._getPersonaControl)\n : onRenderPersonaCoin(persona, _this._getPersonaCoinControl);\n var defaultPersonaRender = persona.onClick\n ? function () { return _this._getElementWithOnClickEvent(personaControl, persona, showTooltip, index); }\n : function () { return _this._getElementWithoutOnClickEvent(personaControl, persona, showTooltip, index); };\n return (React.createElement(\"li\", { key: \"\".concat(singlePersona ? 'persona' : 'personaCoin', \"-\").concat(index), className: _this._classNames.member }, onRenderPersonaWrapper ? onRenderPersonaWrapper(persona, defaultPersonaRender) : defaultPersonaRender()));\n });\n };\n FacepileBase.prototype._getElementWithOnClickEvent = function (personaControl, persona, showTooltip, index) {\n var keytipProps = persona.keytipProps;\n return (React.createElement(FacepileButton, __assign({}, getNativeProps(persona, buttonProperties), this._getElementProps(persona, showTooltip, index), { keytipProps: keytipProps, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: this._onPersonaClick.bind(this, persona) }), personaControl));\n };\n FacepileBase.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, showTooltip, index) {\n return (React.createElement(\"div\", __assign({}, getNativeProps(persona, buttonProperties), this._getElementProps(persona, showTooltip, index)), personaControl));\n };\n FacepileBase.prototype._getElementProps = function (persona, showTooltip, index) {\n var _classNames = this._classNames;\n return {\n key: (persona.imageUrl ? 'i' : '') + index,\n 'data-is-focusable': true,\n className: _classNames.itemButton,\n title: showTooltip ? persona.personaName : undefined,\n onMouseMove: this._onPersonaMouseMove.bind(this, persona),\n onMouseOut: this._onPersonaMouseOut.bind(this, persona),\n };\n };\n FacepileBase.prototype._getOverflowElement = function (personasOverflow) {\n switch (this.props.overflowButtonType) {\n case OverflowButtonType.descriptive:\n return this._getDescriptiveOverflowElement(personasOverflow);\n case OverflowButtonType.downArrow:\n return this._getIconElement('ChevronDown');\n case OverflowButtonType.more:\n return this._getIconElement('More');\n default:\n return null;\n }\n };\n FacepileBase.prototype._getDescriptiveOverflowElement = function (personasOverflow) {\n var personaSize = this.props.personaSize;\n if (!personasOverflow || personasOverflow.length < 1) {\n return null;\n }\n var personaNames = personasOverflow.map(function (p) { return p.personaName; }).join(', ');\n var overflowButtonProps = __assign({ title: personaNames }, this.props.overflowButtonProps);\n var numPersonasNotPictured = Math.max(personasOverflow.length, 0);\n var _classNames = this._classNames;\n return (React.createElement(FacepileButton, __assign({}, overflowButtonProps, { ariaDescription: overflowButtonProps.title, className: _classNames.descriptiveOverflowButton }),\n React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitialsNotPictured(numPersonasNotPictured), initialsColor: PersonaInitialsColor.transparent })));\n };\n FacepileBase.prototype._getIconElement = function (icon) {\n var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;\n var overflowInitialsIcon = true;\n var _classNames = this._classNames;\n return (React.createElement(FacepileButton, __assign({}, overflowButtonProps, { className: _classNames.overflowButton }),\n React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials(icon, overflowInitialsIcon), initialsColor: PersonaInitialsColor.transparent })));\n };\n FacepileBase.prototype._getAddNewElement = function () {\n var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;\n var _classNames = this._classNames;\n return (React.createElement(FacepileButton, __assign({}, addButtonProps, { className: _classNames.addButton }),\n React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials('AddFriend') })));\n };\n FacepileBase.prototype._onPersonaClick = function (persona, ev) {\n persona.onClick(ev, persona);\n ev.preventDefault();\n ev.stopPropagation();\n };\n FacepileBase.prototype._onPersonaMouseMove = function (persona, ev) {\n if (persona.onMouseMove) {\n persona.onMouseMove(ev, persona);\n }\n };\n FacepileBase.prototype._onPersonaMouseOut = function (persona, ev) {\n if (persona.onMouseOut) {\n persona.onMouseOut(ev, persona);\n }\n };\n FacepileBase.prototype._renderInitials = function (iconName, overflowButton) {\n var _classNames = this._classNames;\n return function () {\n return React.createElement(Icon, { iconName: iconName, className: overflowButton ? _classNames.overflowInitialsIcon : '' });\n };\n };\n FacepileBase.prototype._renderInitialsNotPictured = function (numPersonasNotPictured) {\n var _classNames = this._classNames;\n return function () {\n return (React.createElement(\"span\", { className: _classNames.overflowInitialsIcon }, numPersonasNotPictured < 100 ? '+' + numPersonasNotPictured : '99+'));\n };\n };\n FacepileBase.defaultProps = {\n maxDisplayablePersonas: 5,\n personas: [],\n overflowPersonas: [],\n personaSize: PersonaSize.size32,\n };\n return FacepileBase;\n}(React.Component));\nexport { FacepileBase };\n//# sourceMappingURL=Facepile.base.js.map","import { styled } from '../../Utilities';\nimport { FacepileBase } from './Facepile.base';\nimport { styles } from './Facepile.styles';\n/**\n * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.\n */\nexport var Facepile = styled(FacepileBase, styles, undefined, {\n scope: 'Facepile',\n});\n//# sourceMappingURL=Facepile.js.map","import { hiddenContentStyle, HighContrastSelector, getFocusStyle, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Facepile',\n addButton: 'ms-Facepile-addButton ms-Facepile-itemButton',\n descriptiveOverflowButton: 'ms-Facepile-descriptiveOverflowButton ms-Facepile-itemButton',\n itemButton: 'ms-Facepile-itemButton ms-Facepile-person',\n itemContainer: 'ms-Facepile-itemContainer',\n members: 'ms-Facepile-members',\n member: 'ms-Facepile-member',\n overflowButton: 'ms-Facepile-overflowButton ms-Facepile-itemButton',\n};\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, _b = props.spacingAroundItemButton, spacingAroundItemButton = _b === void 0 ? 2 : _b;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var ItemButtonStyles = {\n textAlign: 'center',\n padding: 0,\n borderRadius: '50%',\n verticalAlign: 'top',\n display: 'inline',\n backgroundColor: 'transparent',\n border: 'none',\n selectors: {\n '&::-moz-focus-inner': {\n padding: 0,\n border: 0,\n },\n },\n };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n width: 'auto',\n },\n className,\n ],\n addButton: [\n classNames.addButton,\n getFocusStyle(theme, { inset: -1 }),\n ItemButtonStyles,\n {\n fontSize: fonts.medium.fontSize,\n color: palette.white,\n backgroundColor: palette.themePrimary,\n marginRight: spacingAroundItemButton * 2 + 'px',\n selectors: {\n '&:hover': {\n backgroundColor: palette.themeDark,\n },\n '&:focus': {\n backgroundColor: palette.themeDark,\n },\n '&:active': {\n backgroundColor: palette.themeDarker,\n },\n '&:disabled': {\n backgroundColor: palette.neutralTertiaryAlt,\n },\n },\n },\n ],\n descriptiveOverflowButton: [\n classNames.descriptiveOverflowButton,\n getFocusStyle(theme, { inset: -1 }),\n ItemButtonStyles,\n {\n fontSize: fonts.small.fontSize,\n color: palette.neutralSecondary,\n backgroundColor: palette.neutralLighter,\n marginLeft: \"\".concat(spacingAroundItemButton * 2, \"px\"),\n },\n ],\n itemButton: [classNames.itemButton, ItemButtonStyles],\n itemContainer: [\n classNames.itemContainer,\n {\n display: 'flex',\n },\n ],\n members: [\n classNames.members,\n {\n display: 'flex',\n overflow: 'hidden',\n listStyleType: 'none',\n padding: 0,\n margin: \"-\".concat(spacingAroundItemButton, \"px\"),\n },\n ],\n member: [\n classNames.member,\n {\n display: 'inline-flex',\n flex: '0 0 auto',\n margin: \"\".concat(spacingAroundItemButton, \"px\"),\n },\n ],\n overflowButton: [\n classNames.overflowButton,\n getFocusStyle(theme, { inset: -1 }),\n ItemButtonStyles,\n {\n fontSize: fonts.medium.fontSize,\n color: palette.neutralSecondary,\n backgroundColor: palette.neutralLighter,\n marginLeft: \"\".concat(spacingAroundItemButton * 2, \"px\"),\n },\n ],\n overflowInitialsIcon: [\n {\n color: palette.neutralPrimary,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'WindowText',\n },\n _a),\n },\n ],\n screenReaderOnly: hiddenContentStyle,\n };\n};\n//# sourceMappingURL=Facepile.styles.js.map","/**\n * {@docCategory Facepile}\n */\nexport var OverflowButtonType;\n(function (OverflowButtonType) {\n /** No overflow */\n OverflowButtonType[OverflowButtonType[\"none\"] = 0] = \"none\";\n /** +1 overflow icon */\n OverflowButtonType[OverflowButtonType[\"descriptive\"] = 1] = \"descriptive\";\n /** More overflow icon */\n OverflowButtonType[OverflowButtonType[\"more\"] = 2] = \"more\";\n /** Chevron overflow icon */\n OverflowButtonType[OverflowButtonType[\"downArrow\"] = 3] = \"downArrow\";\n})(OverflowButtonType || (OverflowButtonType = {}));\n//# sourceMappingURL=Facepile.types.js.map","import { __assign, __decorate, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../../Button';\nimport { customizable, nullRender } from '../../Utilities';\nimport { getStyles } from './FacepileButton.styles';\nvar FacepileButton = /** @class */ (function (_super) {\n __extends(FacepileButton, _super);\n function FacepileButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n FacepileButton.prototype.render = function () {\n var _a = this.props, className = _a.className, styles = _a.styles, rest = __rest(_a, [\"className\", \"styles\"]);\n var customStyles = getStyles(this.props.theme, className, styles);\n return (React.createElement(BaseButton, __assign({}, rest, { variantClassName: \"ms-Button--facepile\", styles: customStyles, onRenderDescription: nullRender })));\n };\n FacepileButton = __decorate([\n customizable('FacepileButton', ['theme', 'styles'], true)\n ], FacepileButton);\n return FacepileButton;\n}(React.Component));\nexport { FacepileButton };\n//# sourceMappingURL=FacepileButton.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../Button/BaseButton.styles';\nexport var getStyles = memoizeFunction(function (theme, className, customStyles) {\n var baseButtonStyles = getBaseButtonStyles(theme);\n var customButtonStyles = concatStyleSets(baseButtonStyles, customStyles);\n return __assign(__assign({}, customButtonStyles), { root: [baseButtonStyles.root, className, theme.fonts.medium, customStyles && customStyles.root] });\n});\n//# sourceMappingURL=FacepileButton.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport * as stylesImport from './BaseFloatingPicker.scss';\nimport { Async, initializeComponentRef, css, KeyCodes } from '../../Utilities';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { Callout } from '../../Callout';\nimport { SuggestionsControl } from './Suggestions/SuggestionsControl';\nvar styles = stylesImport;\nvar BaseFloatingPicker = /** @class */ (function (_super) {\n __extends(BaseFloatingPicker, _super);\n function BaseFloatingPicker(basePickerProps) {\n var _this = _super.call(this, basePickerProps) || this;\n _this.root = React.createRef();\n _this.suggestionsControl = React.createRef();\n _this.SuggestionsControlOfProperType = SuggestionsControl;\n _this.isComponentMounted = false;\n _this.onQueryStringChanged = function (queryString) {\n if (queryString !== _this.state.queryString) {\n _this.setState({\n queryString: queryString,\n });\n if (_this.props.onInputChanged) {\n _this.props.onInputChanged(queryString);\n }\n _this.updateValue(queryString);\n }\n };\n _this.hidePicker = function () {\n var wasShownBeforeUpdate = _this.isSuggestionsShown;\n _this.setState({\n suggestionsVisible: false,\n });\n if (_this.props.onSuggestionsHidden && wasShownBeforeUpdate) {\n _this.props.onSuggestionsHidden();\n }\n };\n _this.showPicker = function (updateValue) {\n if (updateValue === void 0) { updateValue = false; }\n var wasShownBeforeUpdate = _this.isSuggestionsShown;\n _this.setState({\n suggestionsVisible: true,\n });\n // Update the suggestions if updateValue == true\n var value = _this.props.inputElement ? _this.props.inputElement.value : '';\n if (updateValue) {\n _this.updateValue(value);\n }\n if (_this.props.onSuggestionsShown && !wasShownBeforeUpdate) {\n _this.props.onSuggestionsShown();\n }\n };\n _this.completeSuggestion = function () {\n if (_this.suggestionsControl.current && _this.suggestionsControl.current.hasSuggestionSelected()) {\n _this.onChange(_this.suggestionsControl.current.currentSuggestion.item);\n }\n };\n _this.onSuggestionClick = function (ev, item, index) {\n _this.onChange(item);\n _this._updateSuggestionsVisible(false /*shouldShow*/);\n };\n _this.onSuggestionRemove = function (ev, item, index) {\n if (_this.props.onRemoveSuggestion) {\n _this.props.onRemoveSuggestion(item);\n }\n if (_this.suggestionsControl.current) {\n _this.suggestionsControl.current.removeSuggestion(index);\n }\n };\n _this.onKeyDown = function (ev) {\n if (!_this.state.suggestionsVisible ||\n (_this.props.inputElement && !_this.props.inputElement.contains(ev.target))) {\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var keyCode = ev.which;\n switch (keyCode) {\n case KeyCodes.escape:\n _this.hidePicker();\n ev.preventDefault();\n ev.stopPropagation();\n break;\n case KeyCodes.tab:\n case KeyCodes.enter:\n if (!ev.shiftKey &&\n !ev.ctrlKey &&\n _this.suggestionsControl.current &&\n _this.suggestionsControl.current.handleKeyDown(keyCode)) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n else {\n _this._onValidateInput();\n }\n break;\n case KeyCodes.del:\n if (_this.props.onRemoveSuggestion &&\n _this.suggestionsControl.current &&\n _this.suggestionsControl.current.hasSuggestionSelected() &&\n _this.suggestionsControl.current.currentSuggestion &&\n ev.shiftKey) {\n _this.props.onRemoveSuggestion(_this.suggestionsControl.current.currentSuggestion.item);\n _this.suggestionsControl.current.removeSuggestion();\n _this.forceUpdate();\n ev.stopPropagation();\n }\n break;\n case KeyCodes.up:\n if (_this.suggestionsControl.current && _this.suggestionsControl.current.handleKeyDown(keyCode)) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._updateActiveDescendant();\n }\n break;\n case KeyCodes.down:\n if (_this.suggestionsControl.current && _this.suggestionsControl.current.handleKeyDown(keyCode)) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._updateActiveDescendant();\n }\n break;\n }\n };\n _this._onValidateInput = function () {\n if (_this.state.queryString && _this.props.onValidateInput && _this.props.createGenericItem) {\n var itemToConvert = _this.props.createGenericItem(_this.state.queryString, _this.props.onValidateInput(_this.state.queryString));\n var convertedItems = _this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]);\n _this.onChange(convertedItems[0].item);\n }\n };\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n _this.suggestionStore = basePickerProps.suggestionsStore;\n _this.state = {\n queryString: '',\n didBind: false,\n };\n return _this;\n }\n Object.defineProperty(BaseFloatingPicker.prototype, \"inputText\", {\n get: function () {\n return this.state.queryString;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseFloatingPicker.prototype, \"suggestions\", {\n get: function () {\n return this.suggestionStore.suggestions;\n },\n enumerable: false,\n configurable: true\n });\n BaseFloatingPicker.prototype.forceResolveSuggestion = function () {\n if (this.suggestionsControl.current && this.suggestionsControl.current.hasSuggestionSelected()) {\n this.completeSuggestion();\n }\n else {\n this._onValidateInput();\n }\n };\n Object.defineProperty(BaseFloatingPicker.prototype, \"currentSelectedSuggestionIndex\", {\n get: function () {\n return this.suggestionsControl.current ? this.suggestionsControl.current.currentSuggestionIndex : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseFloatingPicker.prototype, \"isSuggestionsShown\", {\n get: function () {\n return this.state.suggestionsVisible === undefined ? false : this.state.suggestionsVisible;\n },\n enumerable: false,\n configurable: true\n });\n BaseFloatingPicker.prototype.componentDidMount = function () {\n this._bindToInputElement();\n this.isComponentMounted = true;\n this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);\n };\n BaseFloatingPicker.prototype.componentDidUpdate = function () {\n this._bindToInputElement();\n };\n BaseFloatingPicker.prototype.componentWillUnmount = function () {\n this._unbindFromInputElement();\n this.isComponentMounted = false;\n };\n BaseFloatingPicker.prototype.updateSuggestions = function (suggestions, forceUpdate) {\n if (forceUpdate === void 0) { forceUpdate = false; }\n this.suggestionStore.updateSuggestions(suggestions);\n if (forceUpdate) {\n this.forceUpdate();\n }\n };\n BaseFloatingPicker.prototype.render = function () {\n var className = this.props.className;\n return (React.createElement(\"div\", { ref: this.root, className: css('ms-BasePicker ms-BaseFloatingPicker', className ? className : '') }, this.renderSuggestions()));\n };\n BaseFloatingPicker.prototype.renderSuggestions = function () {\n var TypedSuggestionsControl = this.SuggestionsControlOfProperType;\n if (this.props.suggestionItems) {\n this.suggestionStore.updateSuggestions(this.props.suggestionItems);\n }\n return this.state.suggestionsVisible ? (React.createElement(Callout, __assign({ className: styles.callout, isBeakVisible: false, gapSpace: 5, target: this.props.inputElement, onDismiss: this.hidePicker, directionalHint: DirectionalHint.bottomLeftEdge, directionalHintForRTL: DirectionalHint.bottomRightEdge, calloutWidth: this.props.calloutWidth ? this.props.calloutWidth : 0 }, this.props.pickerCalloutProps),\n React.createElement(TypedSuggestionsControl, __assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), componentRef: this.suggestionsControl, completeSuggestion: this.completeSuggestion, shouldLoopSelection: false }, this.props.pickerSuggestionsProps)))) : null;\n };\n BaseFloatingPicker.prototype.onSelectionChange = function () {\n this.forceUpdate();\n };\n BaseFloatingPicker.prototype.updateValue = function (updatedValue) {\n if (updatedValue === '') {\n this.updateSuggestionWithZeroState();\n }\n else {\n this._onResolveSuggestions(updatedValue);\n }\n };\n BaseFloatingPicker.prototype.updateSuggestionWithZeroState = function () {\n if (this.props.onZeroQuerySuggestion) {\n var onEmptyInputFocus = this.props.onZeroQuerySuggestion;\n var suggestions = onEmptyInputFocus(this.props.selectedItems);\n this.updateSuggestionsList(suggestions);\n }\n else {\n this.hidePicker();\n }\n };\n BaseFloatingPicker.prototype.updateSuggestionsList = function (suggestions) {\n var _this = this;\n // Check to see if the returned value is an array, if it is then just pass it into the next function.\n // If the returned value is not an array then check to see if it's a promise or PromiseLike.\n // If it is then resolve it asynchronously.\n if (Array.isArray(suggestions)) {\n this.updateSuggestions(suggestions, true /*forceUpdate*/);\n }\n else if (suggestions && suggestions.then) {\n // Ensure that the promise will only use the callback if it was the most recent one.\n this.currentPromise = suggestions;\n suggestions.then(function (newSuggestions) {\n // Only update if the next promise has not yet resolved and\n // the floating picker is still mounted.\n if (suggestions === _this.currentPromise && _this.isComponentMounted) {\n _this.updateSuggestions(newSuggestions, true /*forceUpdate*/);\n }\n });\n }\n };\n BaseFloatingPicker.prototype.onChange = function (item) {\n if (this.props.onChange) {\n this.props.onChange(item);\n }\n };\n BaseFloatingPicker.prototype._updateActiveDescendant = function () {\n if (this.props.inputElement && this.suggestionsControl.current && this.suggestionsControl.current.selectedElement) {\n var selectedElId = this.suggestionsControl.current.selectedElement.getAttribute('id');\n if (selectedElId) {\n this.props.inputElement.setAttribute('aria-activedescendant', selectedElId);\n }\n }\n };\n BaseFloatingPicker.prototype._onResolveSuggestions = function (updatedValue) {\n var suggestions = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);\n this._updateSuggestionsVisible(true /*shouldShow*/);\n if (suggestions !== null) {\n this.updateSuggestionsList(suggestions);\n }\n };\n BaseFloatingPicker.prototype._updateSuggestionsVisible = function (shouldShow) {\n if (shouldShow) {\n this.showPicker();\n }\n else {\n this.hidePicker();\n }\n };\n BaseFloatingPicker.prototype._bindToInputElement = function () {\n if (this.props.inputElement && !this.state.didBind) {\n this.props.inputElement.addEventListener('keydown', this.onKeyDown);\n this.setState({ didBind: true });\n }\n };\n BaseFloatingPicker.prototype._unbindFromInputElement = function () {\n if (this.props.inputElement && this.state.didBind) {\n this.props.inputElement.removeEventListener('keydown', this.onKeyDown);\n this.setState({ didBind: false });\n }\n };\n return BaseFloatingPicker;\n}(React.Component));\nexport { BaseFloatingPicker };\n//# sourceMappingURL=BaseFloatingPicker.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".callout_ad5629e1 .ms-Suggestions-itemButton{padding:0;border:none}.callout_ad5629e1 .ms-Suggestions{min-width:300px}\" }]);\nexport var callout = \"callout_ad5629e1\";\n//# sourceMappingURL=BaseFloatingPicker.scss.js.map","import { __assign, __extends } from \"tslib\";\nimport { getRTL, getInitials } from '../../../Utilities';\nimport { BaseFloatingPicker } from '../BaseFloatingPicker';\nimport { SuggestionItemNormal } from './PeoplePickerItems/SuggestionItemDefault';\nimport './PeoplePicker.scss';\n/**\n * {@docCategory FloatingPeoplePicker}\n */\nvar BaseFloatingPeoplePicker = /** @class */ (function (_super) {\n __extends(BaseFloatingPeoplePicker, _super);\n function BaseFloatingPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return BaseFloatingPeoplePicker;\n}(BaseFloatingPicker));\nexport { BaseFloatingPeoplePicker };\nvar FloatingPeoplePicker = /** @class */ (function (_super) {\n __extends(FloatingPeoplePicker, _super);\n function FloatingPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n FloatingPeoplePicker.defaultProps = {\n onRenderSuggestionsItem: function (props, itemProps) {\n return SuggestionItemNormal(__assign({}, props), __assign({}, itemProps));\n },\n createGenericItem: createItem,\n };\n return FloatingPeoplePicker;\n}(BaseFloatingPeoplePicker));\nexport { FloatingPeoplePicker };\nexport function createItem(name, isValid) {\n var personaToConvert = {\n key: name,\n primaryText: name,\n imageInitials: '!',\n isValid: isValid,\n };\n if (!isValid) {\n personaToConvert.imageInitials = getInitials(name, getRTL());\n }\n return personaToConvert;\n}\n//# sourceMappingURL=FloatingPeoplePicker.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".resultContent_f73be5be{display:table-row}.resultContent_f73be5be .resultItem_f73be5be{display:table-cell;vertical-align:bottom}.peoplePickerPersona_f73be5be{width:180px}.peoplePickerPersona_f73be5be .ms-Persona-details{width:100%}.peoplePicker_f73be5be .ms-BasePicker-text{min-height:40px}.peoplePickerPersonaContent_f73be5be{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:7px 12px}\" }]);\nexport var resultContent = \"resultContent_f73be5be\";\nexport var resultItem = \"resultItem_f73be5be\";\nexport var peoplePickerPersona = \"peoplePickerPersona_f73be5be\";\nexport var peoplePicker = \"peoplePicker_f73be5be\";\nexport var peoplePickerPersonaContent = \"peoplePickerPersonaContent_f73be5be\";\n//# sourceMappingURL=PeoplePicker.scss.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { css } from '../../../../Utilities';\nimport { Persona, PersonaSize, PersonaPresence } from '../../../../Persona';\nimport * as stylesImport from '../PeoplePicker.scss';\nexport var SuggestionItemNormal = function (personaProps, suggestionItemProps) {\n return (React.createElement(\"div\", { className: css('ms-PeoplePicker-personaContent', stylesImport.peoplePickerPersonaContent) },\n React.createElement(Persona, __assign({ presence: personaProps.presence !== undefined ? personaProps.presence : PersonaPresence.none, size: PersonaSize.size40, className: css('ms-PeoplePicker-Persona', stylesImport.peoplePickerPersona), showSecondaryText: true }, personaProps))));\n};\n//# sourceMappingURL=SuggestionItemDefault.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { css, KeyCodes, initializeComponentRef } from '../../../Utilities';\nimport { SuggestionsCore } from './SuggestionsCore';\nimport * as stylesImport from './SuggestionsControl.scss';\nimport { hiddenContentStyle, mergeStyles } from '../../../Styling';\nvar styles = stylesImport;\nexport var SuggestionItemType;\n(function (SuggestionItemType) {\n SuggestionItemType[SuggestionItemType[\"header\"] = 0] = \"header\";\n SuggestionItemType[SuggestionItemType[\"suggestion\"] = 1] = \"suggestion\";\n SuggestionItemType[SuggestionItemType[\"footer\"] = 2] = \"footer\";\n})(SuggestionItemType || (SuggestionItemType = {}));\nvar SuggestionsHeaderFooterItem = /** @class */ (function (_super) {\n __extends(SuggestionsHeaderFooterItem, _super);\n function SuggestionsHeaderFooterItem(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n SuggestionsHeaderFooterItem.prototype.render = function () {\n var _a;\n var _b = this.props, renderItem = _b.renderItem, onExecute = _b.onExecute, isSelected = _b.isSelected, id = _b.id, className = _b.className;\n return onExecute ? (React.createElement(\"div\", { id: id, onClick: onExecute, className: css('ms-Suggestions-sectionButton', className, styles.actionButton, (_a = {},\n _a['is-selected ' + styles.buttonSelected] = isSelected,\n _a)) }, renderItem())) : (React.createElement(\"div\", { id: id, className: css('ms-Suggestions-section', className, styles.suggestionsTitle) }, renderItem()));\n };\n return SuggestionsHeaderFooterItem;\n}(React.Component));\nexport { SuggestionsHeaderFooterItem };\n/**\n * Class when used with SuggestionsStore, renders a suggestions control with customizable headers and footers\n */\nvar SuggestionsControl = /** @class */ (function (_super) {\n __extends(SuggestionsControl, _super);\n function SuggestionsControl(suggestionsProps) {\n var _this = _super.call(this, suggestionsProps) || this;\n _this._selectedElement = React.createRef();\n _this._suggestions = React.createRef();\n _this.SuggestionsOfProperType = SuggestionsCore;\n initializeComponentRef(_this);\n _this.state = {\n selectedHeaderIndex: -1,\n selectedFooterIndex: -1,\n suggestions: suggestionsProps.suggestions,\n };\n return _this;\n }\n SuggestionsControl.prototype.componentDidMount = function () {\n this.resetSelectedItem();\n };\n SuggestionsControl.prototype.componentDidUpdate = function (oldProps) {\n var _this = this;\n this.scrollSelected();\n if (oldProps.suggestions && oldProps.suggestions !== this.props.suggestions) {\n this.setState({ suggestions: this.props.suggestions }, function () {\n _this.resetSelectedItem();\n });\n }\n };\n SuggestionsControl.prototype.componentWillUnmount = function () {\n var _a;\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.deselectAllSuggestions();\n };\n SuggestionsControl.prototype.render = function () {\n var _a = this.props, className = _a.className, headerItemsProps = _a.headerItemsProps, footerItemsProps = _a.footerItemsProps, suggestionsAvailableAlertText = _a.suggestionsAvailableAlertText;\n var screenReaderTextStyles = mergeStyles(hiddenContentStyle);\n var shouldAlertSuggestionsAvailableText = this.state.suggestions && this.state.suggestions.length > 0 && suggestionsAvailableAlertText;\n return (React.createElement(\"div\", { className: css('ms-Suggestions', className ? className : '', styles.root) },\n headerItemsProps && this.renderHeaderItems(),\n this._renderSuggestions(),\n footerItemsProps && this.renderFooterItems(),\n shouldAlertSuggestionsAvailableText ? (React.createElement(\"span\", { role: \"alert\", \"aria-live\": \"polite\", className: screenReaderTextStyles }, suggestionsAvailableAlertText)) : null));\n };\n Object.defineProperty(SuggestionsControl.prototype, \"currentSuggestion\", {\n get: function () {\n var _a;\n return ((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.getCurrentItem()) || undefined;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(SuggestionsControl.prototype, \"currentSuggestionIndex\", {\n get: function () {\n return this._suggestions.current ? this._suggestions.current.currentIndex : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(SuggestionsControl.prototype, \"selectedElement\", {\n get: function () {\n var _a;\n return this._selectedElement.current ? this._selectedElement.current : (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.selectedElement;\n },\n enumerable: false,\n configurable: true\n });\n SuggestionsControl.prototype.hasSuggestionSelected = function () {\n var _a;\n return ((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.hasSuggestionSelected()) || false;\n };\n SuggestionsControl.prototype.hasSelection = function () {\n var _a = this.state, selectedHeaderIndex = _a.selectedHeaderIndex, selectedFooterIndex = _a.selectedFooterIndex;\n return selectedHeaderIndex !== -1 || this.hasSuggestionSelected() || selectedFooterIndex !== -1;\n };\n SuggestionsControl.prototype.executeSelectedAction = function () {\n var _a;\n var _b = this.props, headerItemsProps = _b.headerItemsProps, footerItemsProps = _b.footerItemsProps;\n var _c = this.state, selectedHeaderIndex = _c.selectedHeaderIndex, selectedFooterIndex = _c.selectedFooterIndex;\n if (headerItemsProps && selectedHeaderIndex !== -1 && selectedHeaderIndex < headerItemsProps.length) {\n var selectedHeaderItem = headerItemsProps[selectedHeaderIndex];\n if (selectedHeaderItem.onExecute) {\n selectedHeaderItem.onExecute();\n }\n }\n else if ((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.hasSuggestionSelected()) {\n this.props.completeSuggestion();\n }\n else if (footerItemsProps && selectedFooterIndex !== -1 && selectedFooterIndex < footerItemsProps.length) {\n var selectedFooterItem = footerItemsProps[selectedFooterIndex];\n if (selectedFooterItem.onExecute) {\n selectedFooterItem.onExecute();\n }\n }\n };\n SuggestionsControl.prototype.removeSuggestion = function (index) {\n var _a, _b;\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.removeSuggestion(index ? index : (_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.currentIndex);\n };\n /**\n * Handles the key down, returns true, if the event was handled, false otherwise\n * @param keyCode - The keyCode to handle\n */\n SuggestionsControl.prototype.handleKeyDown = function (keyCode) {\n var _a, _b, _c, _d;\n var _e = this.state, selectedHeaderIndex = _e.selectedHeaderIndex, selectedFooterIndex = _e.selectedFooterIndex;\n var isKeyDownHandled = false;\n if (keyCode === KeyCodes.down) {\n if (selectedHeaderIndex === -1 &&\n !((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.hasSuggestionSelected()) &&\n selectedFooterIndex === -1) {\n this.selectFirstItem();\n }\n else if (selectedHeaderIndex !== -1) {\n this.selectNextItem(SuggestionItemType.header);\n isKeyDownHandled = true;\n }\n else if ((_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.hasSuggestionSelected()) {\n this.selectNextItem(SuggestionItemType.suggestion);\n isKeyDownHandled = true;\n }\n else if (selectedFooterIndex !== -1) {\n this.selectNextItem(SuggestionItemType.footer);\n isKeyDownHandled = true;\n }\n }\n else if (keyCode === KeyCodes.up) {\n if (selectedHeaderIndex === -1 &&\n !((_c = this._suggestions.current) === null || _c === void 0 ? void 0 : _c.hasSuggestionSelected()) &&\n selectedFooterIndex === -1) {\n this.selectLastItem();\n }\n else if (selectedHeaderIndex !== -1) {\n this.selectPreviousItem(SuggestionItemType.header);\n isKeyDownHandled = true;\n }\n else if ((_d = this._suggestions.current) === null || _d === void 0 ? void 0 : _d.hasSuggestionSelected()) {\n this.selectPreviousItem(SuggestionItemType.suggestion);\n isKeyDownHandled = true;\n }\n else if (selectedFooterIndex !== -1) {\n this.selectPreviousItem(SuggestionItemType.footer);\n isKeyDownHandled = true;\n }\n }\n else if (keyCode === KeyCodes.enter || keyCode === KeyCodes.tab) {\n if (this.hasSelection()) {\n this.executeSelectedAction();\n isKeyDownHandled = true;\n }\n }\n return isKeyDownHandled;\n };\n // TODO get the element to scroll into view properly regardless of direction.\n SuggestionsControl.prototype.scrollSelected = function () {\n if (this._selectedElement.current) {\n this._selectedElement.current.scrollIntoView(false);\n }\n };\n SuggestionsControl.prototype.renderHeaderItems = function () {\n var _this = this;\n var _a = this.props, headerItemsProps = _a.headerItemsProps, suggestionsHeaderContainerAriaLabel = _a.suggestionsHeaderContainerAriaLabel;\n var selectedHeaderIndex = this.state.selectedHeaderIndex;\n return headerItemsProps ? (React.createElement(\"div\", { className: css('ms-Suggestions-headerContainer', styles.suggestionsContainer), id: \"suggestionHeader-list\", role: \"list\", \"aria-label\": suggestionsHeaderContainerAriaLabel }, headerItemsProps.map(function (headerItemProps, index) {\n var isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index;\n return headerItemProps.shouldShow() ? (React.createElement(\"div\", { ref: isSelected ? _this._selectedElement : undefined, id: 'sug-header' + index, key: 'sug-header' + index, role: \"listitem\", \"aria-label\": headerItemProps.ariaLabel },\n React.createElement(SuggestionsHeaderFooterItem, { id: 'sug-header-item' + index, isSelected: isSelected, renderItem: headerItemProps.renderItem, onExecute: headerItemProps.onExecute, className: headerItemProps.className }))) : null;\n }))) : null;\n };\n SuggestionsControl.prototype.renderFooterItems = function () {\n var _this = this;\n var _a = this.props, footerItemsProps = _a.footerItemsProps, suggestionsFooterContainerAriaLabel = _a.suggestionsFooterContainerAriaLabel;\n var selectedFooterIndex = this.state.selectedFooterIndex;\n return footerItemsProps ? (React.createElement(\"div\", { className: css('ms-Suggestions-footerContainer', styles.suggestionsContainer), id: \"suggestionFooter-list\", role: \"list\", \"aria-label\": suggestionsFooterContainerAriaLabel }, footerItemsProps.map(function (footerItemProps, index) {\n var isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index;\n return footerItemProps.shouldShow() ? (React.createElement(\"div\", { ref: isSelected ? _this._selectedElement : undefined, id: 'sug-footer' + index, key: 'sug-footer' + index, role: \"listitem\", \"aria-label\": footerItemProps.ariaLabel },\n React.createElement(SuggestionsHeaderFooterItem, { id: 'sug-footer-item' + index, isSelected: isSelected, renderItem: footerItemProps.renderItem, onExecute: footerItemProps.onExecute, className: footerItemProps.className }))) : null;\n }))) : null;\n };\n SuggestionsControl.prototype._renderSuggestions = function () {\n var TypedSuggestions = this.SuggestionsOfProperType;\n return React.createElement(TypedSuggestions, __assign({ ref: this._suggestions }, this.props, { suggestions: this.state.suggestions }));\n };\n /**\n * Selects the next selectable item\n */\n SuggestionsControl.prototype.selectNextItem = function (itemType, originalItemType) {\n // If the recursive calling has not found a selectable item in the other suggestion item type groups\n // And the method is being called again with the original item type,\n // Select the first selectable item of this suggestion item type group (could be the currently selected item)\n if (itemType === originalItemType) {\n this._selectNextItemOfItemType(itemType);\n return;\n }\n var startedItemType = originalItemType !== undefined ? originalItemType : itemType;\n // Try to set the selection to the next selectable item, of the same suggestion item type group\n // If this is the original item type, use the current index\n var selectionChanged = this._selectNextItemOfItemType(itemType, startedItemType === itemType ? this._getCurrentIndexForType(itemType) : undefined);\n // If the selection did not change, try to select from the next suggestion type group\n if (!selectionChanged) {\n this.selectNextItem(this._getNextItemSectionType(itemType), startedItemType);\n }\n };\n /**\n * Selects the previous selectable item\n */\n SuggestionsControl.prototype.selectPreviousItem = function (itemType, originalItemType) {\n // If the recursive calling has not found a selectable item in the other suggestion item type groups\n // And the method is being called again with the original item type,\n // Select the last selectable item of this suggestion item type group (could be the currently selected item)\n if (itemType === originalItemType) {\n this._selectPreviousItemOfItemType(itemType);\n return;\n }\n var startedItemType = originalItemType !== undefined ? originalItemType : itemType;\n // Try to set the selection to the previous selectable item, of the same suggestion item type group\n var selectionChanged = this._selectPreviousItemOfItemType(itemType, startedItemType === itemType ? this._getCurrentIndexForType(itemType) : undefined);\n // If the selection did not change, try to select from the previous suggestion type group\n if (!selectionChanged) {\n this.selectPreviousItem(this._getPreviousItemSectionType(itemType), startedItemType);\n }\n };\n /**\n * Resets the selected state and selects the first selectable item\n */\n SuggestionsControl.prototype.resetSelectedItem = function () {\n var _a;\n this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.deselectAllSuggestions();\n // Select the first item if the shouldSelectFirstItem prop is not set or it is set and it returns true\n if (this.props.shouldSelectFirstItem === undefined || this.props.shouldSelectFirstItem()) {\n this.selectFirstItem();\n }\n };\n /**\n * Selects the first item\n */\n SuggestionsControl.prototype.selectFirstItem = function () {\n if (this._selectNextItemOfItemType(SuggestionItemType.header)) {\n return;\n }\n if (this._selectNextItemOfItemType(SuggestionItemType.suggestion)) {\n return;\n }\n this._selectNextItemOfItemType(SuggestionItemType.footer);\n };\n /**\n * Selects the last item\n */\n SuggestionsControl.prototype.selectLastItem = function () {\n if (this._selectPreviousItemOfItemType(SuggestionItemType.footer)) {\n return;\n }\n if (this._selectPreviousItemOfItemType(SuggestionItemType.suggestion)) {\n return;\n }\n this._selectPreviousItemOfItemType(SuggestionItemType.header);\n };\n /**\n * Selects the next item in the suggestion item type group, given the current index\n * If none is able to be selected, returns false, otherwise returns true\n * @param itemType - The suggestion item type\n * @param currentIndex - The current index, default is -1\n */\n SuggestionsControl.prototype._selectNextItemOfItemType = function (itemType, currentIndex) {\n var _a, _b;\n if (currentIndex === void 0) { currentIndex = -1; }\n if (itemType === SuggestionItemType.suggestion) {\n if (this.state.suggestions.length > currentIndex + 1) {\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.setSelectedSuggestion(currentIndex + 1);\n this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });\n return true;\n }\n }\n else {\n var isHeader = itemType === SuggestionItemType.header;\n var itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;\n if (itemProps && itemProps.length > currentIndex + 1) {\n for (var i = currentIndex + 1; i < itemProps.length; i++) {\n var item = itemProps[i];\n if (item.onExecute && item.shouldShow()) {\n this.setState({ selectedHeaderIndex: isHeader ? i : -1 });\n this.setState({ selectedFooterIndex: isHeader ? -1 : i });\n (_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.deselectAllSuggestions();\n return true;\n }\n }\n }\n }\n return false;\n };\n /**\n * Selects the previous item in the suggestion item type group, given the current index\n * If none is able to be selected, returns false, otherwise returns true\n * @param itemType - The suggestion item type\n * @param currentIndex - The current index. If none is provided, the default is the items length of specified type\n */\n SuggestionsControl.prototype._selectPreviousItemOfItemType = function (itemType, currentIndex) {\n var _a, _b;\n if (itemType === SuggestionItemType.suggestion) {\n var index = currentIndex !== undefined ? currentIndex : this.state.suggestions.length;\n if (index > 0) {\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.setSelectedSuggestion(index - 1);\n this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });\n return true;\n }\n }\n else {\n var isHeader = itemType === SuggestionItemType.header;\n var itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;\n if (itemProps) {\n var index = currentIndex !== undefined ? currentIndex : itemProps.length;\n if (index > 0) {\n for (var i = index - 1; i >= 0; i--) {\n var item = itemProps[i];\n if (item.onExecute && item.shouldShow()) {\n this.setState({ selectedHeaderIndex: isHeader ? i : -1 });\n this.setState({ selectedFooterIndex: isHeader ? -1 : i });\n (_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.deselectAllSuggestions();\n return true;\n }\n }\n }\n }\n }\n return false;\n };\n SuggestionsControl.prototype._getCurrentIndexForType = function (itemType) {\n switch (itemType) {\n case SuggestionItemType.header:\n return this.state.selectedHeaderIndex;\n case SuggestionItemType.suggestion:\n return this._suggestions.current.currentIndex;\n case SuggestionItemType.footer:\n return this.state.selectedFooterIndex;\n }\n };\n SuggestionsControl.prototype._getNextItemSectionType = function (itemType) {\n switch (itemType) {\n case SuggestionItemType.header:\n return SuggestionItemType.suggestion;\n case SuggestionItemType.suggestion:\n return SuggestionItemType.footer;\n case SuggestionItemType.footer:\n return SuggestionItemType.header;\n }\n };\n SuggestionsControl.prototype._getPreviousItemSectionType = function (itemType) {\n switch (itemType) {\n case SuggestionItemType.header:\n return SuggestionItemType.footer;\n case SuggestionItemType.suggestion:\n return SuggestionItemType.header;\n case SuggestionItemType.footer:\n return SuggestionItemType.suggestion;\n }\n };\n return SuggestionsControl;\n}(React.Component));\nexport { SuggestionsControl };\n//# sourceMappingURL=SuggestionsControl.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".root_ade399af{min-width:260px}.actionButton_ade399af{background:0 0;background-color:transparent;border:0;cursor:pointer;margin:0;padding:0;position:relative;width:100%;font-size:12px}html[dir=ltr] .actionButton_ade399af{text-align:left}html[dir=rtl] .actionButton_ade399af{text-align:right}.actionButton_ade399af:hover{background-color:\" }, { \"theme\": \"neutralLighter\", \"defaultValue\": \"#f3f2f1\" }, { \"rawString\": \";cursor:pointer}.actionButton_ade399af:active,.actionButton_ade399af:focus{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \"}.actionButton_ade399af .ms-Button-icon{font-size:16px;width:25px}.actionButton_ade399af .ms-Button-label{margin:0 4px 0 9px}html[dir=rtl] .actionButton_ade399af .ms-Button-label{margin:0 9px 0 4px}.buttonSelected_ade399af{background-color:\" }, { \"theme\": \"themeLighter\", \"defaultValue\": \"#deecf9\" }, { \"rawString\": \"}.buttonSelected_ade399af:hover{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \";cursor:pointer}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.buttonSelected_ade399af:hover{background-color:Highlight;color:HighlightText}}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.buttonSelected_ade399af{background-color:Highlight;color:HighlightText;-ms-high-contrast-adjust:none}}.suggestionsTitle_ade399af{font-size:12px}.suggestionsSpinner_ade399af{margin:5px 0;white-space:nowrap;line-height:20px;font-size:12px}html[dir=ltr] .suggestionsSpinner_ade399af{padding-left:14px}html[dir=rtl] .suggestionsSpinner_ade399af{padding-right:14px}html[dir=ltr] .suggestionsSpinner_ade399af{text-align:left}html[dir=rtl] .suggestionsSpinner_ade399af{text-align:right}.suggestionsSpinner_ade399af .ms-Spinner-circle{display:inline-block;vertical-align:middle}.suggestionsSpinner_ade399af .ms-Spinner-label{display:inline-block;margin:0 10px 0 16px;vertical-align:middle}html[dir=rtl] .suggestionsSpinner_ade399af .ms-Spinner-label{margin:0 16px 0 10px}.itemButton_ade399af{height:100%;width:100%;padding:7px 12px}@media screen and (-ms-high-contrast:active),screen and (forced-colors:active){.itemButton_ade399af{color:WindowText}}.screenReaderOnly_ade399af{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\" }]);\nexport var root = \"root_ade399af\";\nexport var actionButton = \"actionButton_ade399af\";\nexport var buttonSelected = \"buttonSelected_ade399af\";\nexport var suggestionsTitle = \"suggestionsTitle_ade399af\";\nexport var suggestionsSpinner = \"suggestionsSpinner_ade399af\";\nexport var itemButton = \"itemButton_ade399af\";\nexport var screenReaderOnly = \"screenReaderOnly_ade399af\";\n//# sourceMappingURL=SuggestionsControl.scss.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, css } from '../../../Utilities';\nimport { SuggestionsItem } from '../../../Pickers';\nimport * as stylesImport from './SuggestionsCore.scss';\nvar styles = stylesImport;\n/**\n * Class when used with SuggestionsStore, renders a basic suggestions control\n */\nvar SuggestionsCore = /** @class */ (function (_super) {\n __extends(SuggestionsCore, _super);\n function SuggestionsCore(suggestionsProps) {\n var _this = _super.call(this, suggestionsProps) || this;\n _this._selectedElement = React.createRef();\n _this.SuggestionsItemOfProperType = SuggestionsItem;\n _this._onClickTypedSuggestionsItem = function (item, index) {\n return function (ev) {\n _this.props.onSuggestionClick(ev, item, index);\n };\n };\n _this._onRemoveTypedSuggestionsItem = function (item, index) {\n return function (ev) {\n var onSuggestionRemove = _this.props.onSuggestionRemove;\n onSuggestionRemove(ev, item, index);\n ev.stopPropagation();\n };\n };\n initializeComponentRef(_this);\n _this.currentIndex = -1;\n return _this;\n }\n /**\n * Increments the selected suggestion index\n */\n SuggestionsCore.prototype.nextSuggestion = function () {\n var suggestions = this.props.suggestions;\n if (suggestions && suggestions.length > 0) {\n if (this.currentIndex === -1) {\n this.setSelectedSuggestion(0);\n return true;\n }\n else if (this.currentIndex < suggestions.length - 1) {\n this.setSelectedSuggestion(this.currentIndex + 1);\n return true;\n }\n else if (this.props.shouldLoopSelection && this.currentIndex === suggestions.length - 1) {\n this.setSelectedSuggestion(0);\n return true;\n }\n }\n return false;\n };\n /**\n * Decrements the selected suggestion index\n */\n SuggestionsCore.prototype.previousSuggestion = function () {\n var suggestions = this.props.suggestions;\n if (suggestions && suggestions.length > 0) {\n if (this.currentIndex === -1) {\n this.setSelectedSuggestion(suggestions.length - 1);\n return true;\n }\n else if (this.currentIndex > 0) {\n this.setSelectedSuggestion(this.currentIndex - 1);\n return true;\n }\n else if (this.props.shouldLoopSelection && this.currentIndex === 0) {\n this.setSelectedSuggestion(suggestions.length - 1);\n return true;\n }\n }\n return false;\n };\n Object.defineProperty(SuggestionsCore.prototype, \"selectedElement\", {\n get: function () {\n return this._selectedElement.current || undefined;\n },\n enumerable: false,\n configurable: true\n });\n SuggestionsCore.prototype.getCurrentItem = function () {\n return this.props.suggestions[this.currentIndex];\n };\n SuggestionsCore.prototype.getSuggestionAtIndex = function (index) {\n return this.props.suggestions[index];\n };\n SuggestionsCore.prototype.hasSuggestionSelected = function () {\n return this.currentIndex !== -1 && this.currentIndex < this.props.suggestions.length;\n };\n SuggestionsCore.prototype.removeSuggestion = function (index) {\n this.props.suggestions.splice(index, 1);\n };\n SuggestionsCore.prototype.deselectAllSuggestions = function () {\n if (this.currentIndex > -1 && this.props.suggestions[this.currentIndex]) {\n this.props.suggestions[this.currentIndex].selected = false;\n this.currentIndex = -1;\n this.forceUpdate();\n }\n };\n SuggestionsCore.prototype.setSelectedSuggestion = function (index) {\n var suggestions = this.props.suggestions;\n if (index > suggestions.length - 1 || index < 0) {\n this.currentIndex = 0;\n this.currentSuggestion.selected = false;\n this.currentSuggestion = suggestions[0];\n this.currentSuggestion.selected = true;\n }\n else {\n if (this.currentIndex > -1 && suggestions[this.currentIndex]) {\n suggestions[this.currentIndex].selected = false;\n }\n suggestions[index].selected = true;\n this.currentIndex = index;\n this.currentSuggestion = suggestions[index];\n }\n this.forceUpdate();\n };\n SuggestionsCore.prototype.componentDidUpdate = function () {\n this.scrollSelected();\n };\n SuggestionsCore.prototype.render = function () {\n var _this = this;\n var _a = this.props, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons, suggestionsContainerAriaLabel = _a.suggestionsContainerAriaLabel;\n var TypedSuggestionsItem = this.SuggestionsItemOfProperType;\n var suggestions = this.props.suggestions;\n if (resultsMaximumNumber) {\n suggestions = suggestions.slice(0, resultsMaximumNumber);\n }\n return (React.createElement(\"div\", { className: css('ms-Suggestions-container', styles.suggestionsContainer), id: \"suggestion-list\", role: \"listbox\", \"aria-label\": suggestionsContainerAriaLabel }, suggestions.map(function (suggestion, index) { return (React.createElement(\"div\", { ref: suggestion.selected || index === _this.currentIndex ? _this._selectedElement : undefined, key: suggestion.item.key ? suggestion.item.key : index, id: 'sug-' + index },\n React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: _this._onClickTypedSuggestionsItem(suggestion.item, index), className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: _this._onRemoveTypedSuggestionsItem(suggestion.item, index), isSelectedOverride: index === _this.currentIndex }))); })));\n };\n // TODO get the element to scroll into view properly regardless of direction.\n SuggestionsCore.prototype.scrollSelected = function () {\n var _a;\n if (((_a = this._selectedElement.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) !== undefined) {\n this._selectedElement.current.scrollIntoView(false);\n }\n };\n return SuggestionsCore;\n}(React.Component));\nexport { SuggestionsCore };\n//# sourceMappingURL=SuggestionsCore.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".suggestionsContainer_44c59fda{overflow-y:auto;overflow-x:hidden;max-height:300px}.suggestionsContainer_44c59fda .ms-Suggestion-item:hover{background-color:\" }, { \"theme\": \"neutralLighter\", \"defaultValue\": \"#f3f2f1\" }, { \"rawString\": \";cursor:pointer}.suggestionsContainer_44c59fda .is-suggested{background-color:\" }, { \"theme\": \"themeLighter\", \"defaultValue\": \"#deecf9\" }, { \"rawString\": \"}.suggestionsContainer_44c59fda .is-suggested:hover{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \";cursor:pointer}\" }]);\nexport var suggestionsContainer = \"suggestionsContainer_44c59fda\";\n//# sourceMappingURL=SuggestionsCore.scss.js.map","var SuggestionsStore = /** @class */ (function () {\n function SuggestionsStore(options) {\n var _this = this;\n this._isSuggestionModel = function (value) {\n return value.item !== undefined;\n };\n this._ensureSuggestionModel = function (suggestion) {\n if (_this._isSuggestionModel(suggestion)) {\n return suggestion;\n }\n else {\n return {\n item: suggestion,\n selected: false,\n ariaLabel: _this.getAriaLabel !== undefined\n ? _this.getAriaLabel(suggestion)\n : suggestion.name ||\n suggestion.text ||\n // eslint-disable-next-line deprecation/deprecation\n suggestion.primaryText,\n };\n }\n };\n this.suggestions = [];\n this.getAriaLabel = options && options.getAriaLabel;\n }\n SuggestionsStore.prototype.updateSuggestions = function (newSuggestions) {\n if (newSuggestions && newSuggestions.length > 0) {\n this.suggestions = this.convertSuggestionsToSuggestionItems(newSuggestions);\n }\n else {\n this.suggestions = [];\n }\n };\n SuggestionsStore.prototype.getSuggestions = function () {\n return this.suggestions;\n };\n SuggestionsStore.prototype.getSuggestionAtIndex = function (index) {\n return this.suggestions[index];\n };\n SuggestionsStore.prototype.removeSuggestion = function (index) {\n this.suggestions.splice(index, 1);\n };\n SuggestionsStore.prototype.convertSuggestionsToSuggestionItems = function (suggestions) {\n return Array.isArray(suggestions) ? suggestions.map(this._ensureSuggestionModel) : [];\n };\n return SuggestionsStore;\n}());\nexport { SuggestionsStore };\n//# sourceMappingURL=SuggestionsStore.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { elementContains, getNativeProps, divProperties, getFirstTabbable, getLastTabbable, getNextElement, focusAsync, getPropsWithDefaults, modalize, on, } from '../../Utilities';\nimport { useId, useConst, useMergedRefs, useEventCallback, usePrevious, useUnmount } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nvar COMPONENT_NAME = 'FocusTrapZone';\nvar DEFAULT_PROPS = {\n disabled: false,\n disableFirstFocus: false,\n forceFocusInsideTrap: true,\n isClickableOutsideFocusTrap: false,\n};\nvar useComponentRef = function (componentRef, previouslyFocusedElement, focusFTZ) {\n React.useImperativeHandle(componentRef, function () { return ({\n get previouslyFocusedElement() {\n return previouslyFocusedElement;\n },\n focus: focusFTZ,\n }); }, [focusFTZ, previouslyFocusedElement]);\n};\nexport var FocusTrapZone = React.forwardRef(function (propsWithoutDefaults, ref) {\n var _a;\n var root = React.useRef(null);\n var firstBumper = React.useRef(null);\n var lastBumper = React.useRef(null);\n var mergedRootRef = useMergedRefs(root, ref);\n var doc = useDocument();\n var isFirstRender = (_a = usePrevious(false)) !== null && _a !== void 0 ? _a : true;\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var internalState = useConst({\n hasFocus: false,\n focusStackId: useId('ftz-', props.id),\n });\n var children = props.children, componentRef = props.componentRef, disabled = props.disabled, disableFirstFocus = props.disableFirstFocus, forceFocusInsideTrap = props.forceFocusInsideTrap, focusPreviouslyFocusedInnerElement = props.focusPreviouslyFocusedInnerElement, \n // eslint-disable-next-line deprecation/deprecation\n firstFocusableSelector = props.firstFocusableSelector, firstFocusableTarget = props.firstFocusableTarget, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.disableRestoreFocus, \n // eslint-disable-next-line deprecation/deprecation\n disableRestoreFocus = _b === void 0 ? props.ignoreExternalFocusing : _b, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, enableAriaHiddenSiblings = props.enableAriaHiddenSiblings;\n var bumperProps = {\n 'aria-hidden': true,\n style: {\n pointerEvents: 'none',\n position: 'fixed', // 'fixed' prevents browsers from scrolling to bumpers when viewport does not contain them\n },\n tabIndex: disabled ? -1 : 0,\n 'data-is-visible': true,\n 'data-is-focus-trap-zone-bumper': true,\n };\n var focusElementAsync = React.useCallback(function (element) {\n if (element !== firstBumper.current && element !== lastBumper.current) {\n focusAsync(element);\n }\n }, []);\n /**\n * Callback to force focus into FTZ (named to avoid overlap with global focus() callback).\n * useEventCallback always returns the same callback reference but updates the implementation\n * every render to avoid stale captured values.\n */\n var focusFTZ = useEventCallback(function () {\n if (!root.current) {\n return; // not done mounting\n }\n var previouslyFocusedElementInTrapZone = internalState.previouslyFocusedElementInTrapZone;\n if (focusPreviouslyFocusedInnerElement &&\n previouslyFocusedElementInTrapZone &&\n elementContains(root.current, previouslyFocusedElementInTrapZone)) {\n // focus on the last item that had focus in the zone before we left the zone\n focusElementAsync(previouslyFocusedElementInTrapZone);\n return;\n }\n var firstFocusableChild = null;\n if (typeof firstFocusableTarget === 'string') {\n firstFocusableChild = root.current.querySelector(firstFocusableTarget);\n }\n else if (firstFocusableTarget) {\n firstFocusableChild = firstFocusableTarget(root.current);\n }\n else if (firstFocusableSelector) {\n var focusSelector = typeof firstFocusableSelector === 'string' ? firstFocusableSelector : firstFocusableSelector();\n firstFocusableChild = root.current.querySelector('.' + focusSelector);\n }\n // Fall back to first element if query selector did not match any elements.\n if (!firstFocusableChild) {\n firstFocusableChild = getNextElement(root.current, root.current.firstChild, false, false, false, true);\n }\n if (firstFocusableChild) {\n focusElementAsync(firstFocusableChild);\n }\n });\n /** Used in root div focus/blur handlers */\n var focusBumper = function (isFirstBumper) {\n if (disabled || !root.current) {\n return;\n }\n var nextFocusable = isFirstBumper === internalState.hasFocus\n ? getLastTabbable(root.current, lastBumper.current, true, false)\n : getFirstTabbable(root.current, firstBumper.current, true, false);\n if (nextFocusable) {\n if (nextFocusable === firstBumper.current || nextFocusable === lastBumper.current) {\n // This can happen when FTZ contains no tabbable elements.\n // focusFTZ() will take care of finding a focusable element in FTZ.\n focusFTZ();\n }\n else {\n nextFocusable.focus();\n }\n }\n };\n /** Root div blur handler (doesn't need useCallback since it's for a native element) */\n var onRootBlurCapture = function (ev) {\n var _a;\n (_a = props.onBlurCapture) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n var relatedTarget = ev.relatedTarget;\n if (ev.relatedTarget === null) {\n // In IE11, due to lack of support, event.relatedTarget is always\n // null making every onBlur call to be \"outside\" of the root\n // even when it's not. Using document.activeElement is another way\n // for us to be able to get what the relatedTarget without relying\n // on the event\n relatedTarget = doc.activeElement;\n }\n if (!elementContains(root.current, relatedTarget)) {\n internalState.hasFocus = false;\n }\n };\n /** Root div focus handler (doesn't need useCallback since it's for a native element) */\n var onRootFocusCapture = function (ev) {\n var _a;\n (_a = props.onFocusCapture) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n if (ev.target === firstBumper.current) {\n focusBumper(true);\n }\n else if (ev.target === lastBumper.current) {\n focusBumper(false);\n }\n internalState.hasFocus = true;\n if (ev.target !== ev.currentTarget && !(ev.target === firstBumper.current || ev.target === lastBumper.current)) {\n // every time focus changes within the trap zone, remember the focused element so that\n // it can be restored if focus leaves the pane and returns via keystroke (i.e. via a call to this.focus(true))\n internalState.previouslyFocusedElementInTrapZone = ev.target;\n }\n };\n /** Called to restore focus on unmount or props change. (useEventCallback ensures latest prop values are used.) */\n var returnFocusToInitiator = useEventCallback(function (elementToFocusOnDismiss) {\n FocusTrapZone.focusStack = FocusTrapZone.focusStack.filter(function (value) { return internalState.focusStackId !== value; });\n if (!doc) {\n return;\n }\n var activeElement = doc.activeElement;\n if (!disableRestoreFocus &&\n typeof (elementToFocusOnDismiss === null || elementToFocusOnDismiss === void 0 ? void 0 : elementToFocusOnDismiss.focus) === 'function' &&\n // only restore focus if the current focused element is within the FTZ, or if nothing is focused\n (elementContains(root.current, activeElement) || activeElement === doc.body)) {\n focusElementAsync(elementToFocusOnDismiss);\n }\n });\n /** Called in window event handlers. (useEventCallback ensures latest prop values are used.) */\n var forceFocusOrClickInTrap = useEventCallback(function (ev) {\n // be sure to use the latest values here\n if (disabled) {\n return;\n }\n if (internalState.focusStackId === FocusTrapZone.focusStack.slice(-1)[0]) {\n var targetElement = ev.target;\n if (targetElement && !elementContains(root.current, targetElement)) {\n if (doc && doc.activeElement === doc.body) {\n setTimeout(function () {\n if (doc && doc.activeElement === doc.body) {\n focusFTZ();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n }\n }, 0);\n }\n else {\n focusFTZ();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n });\n // Update window event handlers when relevant props change\n React.useEffect(function () {\n var disposables = [];\n if (forceFocusInsideTrap) {\n disposables.push(on(window, 'focus', forceFocusOrClickInTrap, true));\n }\n if (!isClickableOutsideFocusTrap) {\n disposables.push(on(window, 'click', forceFocusOrClickInTrap, true));\n }\n return function () {\n disposables.forEach(function (dispose) { return dispose(); });\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n }, [forceFocusInsideTrap, isClickableOutsideFocusTrap]);\n // On prop change or first render, focus the FTZ and update focusStack if appropriate\n React.useEffect(function () {\n // Do nothing if disabled, or if it's a re-render and forceFocusInsideTrap is false\n // (to match existing behavior, the FTZ handles first focus even if forceFocusInsideTrap\n // is false, though it's debatable whether it should do this)\n if (disabled || (!isFirstRender && !forceFocusInsideTrap) || !root.current) {\n return;\n }\n // Transition from forceFocusInsideTrap / FTZ disabled to enabled (or initial mount)\n FocusTrapZone.focusStack.push(internalState.focusStackId);\n var elementToFocusOnDismiss = props.elementToFocusOnDismiss || doc.activeElement;\n if (!disableFirstFocus && !elementContains(root.current, elementToFocusOnDismiss)) {\n focusFTZ();\n }\n // To match existing behavior, always return focus on cleanup (even if we didn't handle\n // initial focus), but it's debatable whether that's correct\n return function () { return returnFocusToInitiator(elementToFocusOnDismiss); };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when these two props change\n }, [forceFocusInsideTrap, disabled]);\n // Handle modalization separately from first focus\n React.useEffect(function () {\n if (!disabled && enableAriaHiddenSiblings) {\n var unmodalize = modalize(root.current);\n return unmodalize;\n }\n }, [disabled, enableAriaHiddenSiblings, root]);\n // Cleanup lifecyle method for internalState.\n useUnmount(function () {\n // Dispose of element references so the DOM Nodes can be garbage-collected\n delete internalState.previouslyFocusedElementInTrapZone;\n });\n useComponentRef(componentRef, internalState.previouslyFocusedElementInTrapZone, focusFTZ);\n return (React.createElement(\"div\", __assign({ \"aria-labelledby\": props.ariaLabelledBy }, getNativeProps(props, divProperties), { ref: mergedRootRef, onFocusCapture: onRootFocusCapture, onBlurCapture: onRootBlurCapture }),\n React.createElement(\"div\", __assign({}, bumperProps, { ref: firstBumper })),\n children,\n React.createElement(\"div\", __assign({}, bumperProps, { ref: lastBumper }))));\n});\nFocusTrapZone.displayName = COMPONENT_NAME;\nFocusTrapZone.focusStack = [];\n//# sourceMappingURL=FocusTrapZone.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nimport { GroupSpacer } from './GroupSpacer';\nvar getClassNames = classNamesFunction();\nexport var GroupFooterBase = function (props) {\n var group = props.group, groupLevel = props.groupLevel, footerText = props.footerText, indentWidth = props.indentWidth, styles = props.styles, theme = props.theme;\n var classNames = getClassNames(styles, { theme: theme });\n if (group && footerText) {\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),\n footerText));\n }\n return null;\n};\n//# sourceMappingURL=GroupFooter.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './GroupFooter.styles';\nimport { GroupFooterBase } from './GroupFooter.base';\nexport var GroupFooter = styled(GroupFooterBase, getStyles, undefined, {\n scope: 'GroupFooter',\n});\n//# sourceMappingURL=GroupFooter.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-groupFooter',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n {\n position: 'relative',\n padding: '5px 38px',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=GroupFooter.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { composeRenderFunction, classNamesFunction, getId, getRTL, getRTLSafeKeyCode, KeyCodes } from '../../Utilities';\nimport { SelectionMode } from '../../Selection';\nimport { Check } from '../../Check';\nimport { Icon } from '../../Icon';\nimport { GroupSpacer } from './GroupSpacer';\nimport { Spinner } from '../../Spinner';\nimport { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';\nvar getClassNames = classNamesFunction();\nvar GroupHeaderBase = /** @class */ (function (_super) {\n __extends(GroupHeaderBase, _super);\n function GroupHeaderBase(props) {\n var _this = _super.call(this, props) || this;\n _this._toggleCollapse = function () {\n var _a = _this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;\n var isCollapsed = _this.state.isCollapsed;\n var newCollapsed = !isCollapsed;\n var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);\n _this.setState({\n isCollapsed: newCollapsed,\n isLoadingVisible: newLoadingVisible,\n });\n if (onToggleCollapse) {\n onToggleCollapse(group);\n }\n };\n _this._onKeyUp = function (ev) {\n var _a = _this.props, group = _a.group, onGroupHeaderKeyUp = _a.onGroupHeaderKeyUp;\n if (onGroupHeaderKeyUp) {\n onGroupHeaderKeyUp(ev, group);\n }\n if (!ev.defaultPrevented) {\n // eslint-disable-next-line deprecation/deprecation\n var shouldOpen = _this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, _this.props.theme);\n // eslint-disable-next-line deprecation/deprecation\n var shouldClose = !_this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, _this.props.theme);\n if (shouldClose || shouldOpen) {\n _this._toggleCollapse();\n ev.stopPropagation();\n ev.preventDefault();\n }\n }\n };\n _this._onToggleClick = function (ev) {\n _this._toggleCollapse();\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this._onHeaderClick = function () {\n var _a = _this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick;\n if (onGroupHeaderClick) {\n onGroupHeaderClick(group);\n }\n };\n _this._onRenderTitle = function (props) {\n var group = props.group;\n if (!group) {\n return null;\n }\n var onRenderName = props.onRenderName\n ? composeRenderFunction(props.onRenderName, _this._onRenderName)\n : _this._onRenderName;\n return (React.createElement(\"div\", { className: _this._classNames.title, id: _this._id, onClick: _this._onHeaderClick, role: \"gridcell\", \"aria-colspan\": _this.props.ariaColSpan, \"data-selection-invoke\": true }, onRenderName(props)));\n };\n _this._onRenderName = function (props) {\n var group = props.group;\n if (!group) {\n return null;\n }\n return (React.createElement(React.Fragment, null,\n React.createElement(\"span\", null, group.name),\n React.createElement(\"span\", { className: _this._classNames.headerCount },\n \"(\",\n group.count,\n group.hasMoreData && '+',\n \")\")));\n };\n _this._id = getId('GroupHeader');\n _this.state = {\n isCollapsed: (_this.props.group && _this.props.group.isCollapsed),\n isLoadingVisible: false,\n };\n return _this;\n }\n GroupHeaderBase.getDerivedStateFromProps = function (nextProps, previousState) {\n if (nextProps.group) {\n var newCollapsed = nextProps.group.isCollapsed;\n var isGroupLoading = nextProps.isGroupLoading;\n var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(nextProps.group);\n return __assign(__assign({}, previousState), { isCollapsed: newCollapsed || false, isLoadingVisible: newLoadingVisible || false });\n }\n return previousState;\n };\n GroupHeaderBase.prototype.render = function () {\n var _a = this.props, group = _a.group, _b = _a.groupLevel, groupLevel = _b === void 0 ? 0 : _b, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, \n // eslint-disable-next-line deprecation/deprecation\n _c = _a.isSelected, \n // eslint-disable-next-line deprecation/deprecation\n isSelected = _c === void 0 ? false : _c, _d = _a.selected, selected = _d === void 0 ? false : _d, indentWidth = _a.indentWidth, onRenderGroupHeaderCheckbox = _a.onRenderGroupHeaderCheckbox, _e = _a.isCollapsedGroupSelectVisible, isCollapsedGroupSelectVisible = _e === void 0 ? true : _e, expandButtonProps = _a.expandButtonProps, expandButtonIcon = _a.expandButtonIcon, selectAllButtonProps = _a.selectAllButtonProps, theme = _a.theme, styles = _a.styles, className = _a.className, compact = _a.compact, ariaLevel = _a.ariaLevel, ariaPosInSet = _a.ariaPosInSet, ariaSetSize = _a.ariaSetSize, ariaRowIndex = _a.ariaRowIndex, useFastIcons = _a.useFastIcons;\n var onRenderTitle = this.props.onRenderTitle\n ? composeRenderFunction(this.props.onRenderTitle, this._onRenderTitle)\n : this._onRenderTitle;\n var defaultCheckboxRender = useFastIcons ? this._fastDefaultCheckboxRender : this._defaultCheckboxRender;\n var onRenderCheckbox = onRenderGroupHeaderCheckbox\n ? composeRenderFunction(onRenderGroupHeaderCheckbox, defaultCheckboxRender)\n : defaultCheckboxRender;\n var _f = this.state, isCollapsed = _f.isCollapsed, isLoadingVisible = _f.isLoadingVisible;\n var canSelectGroup = selectionMode === SelectionMode.multiple;\n var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));\n var currentlySelected = selected || isSelected;\n var isRTL = getRTL(theme);\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n selected: currentlySelected,\n isCollapsed: isCollapsed,\n compact: compact,\n });\n if (!group) {\n return null;\n }\n return (React.createElement(\"div\", { className: this._classNames.root, style: viewport ? { minWidth: viewport.width } : {}, role: \"row\", \"aria-level\": ariaLevel, \"aria-setsize\": ariaSetSize, \"aria-posinset\": ariaPosInSet, \"aria-rowindex\": ariaRowIndex, \"data-is-focusable\": true, onKeyUp: this._onKeyUp, \"aria-label\": group.ariaLabel, \"aria-labelledby\": group.ariaLabel ? undefined : this._id, \"aria-expanded\": !this.state.isCollapsed, \"aria-selected\": canSelectGroup ? currentlySelected : undefined, \"data-selection-index\": group.startIndex, \"data-selection-span\": group.count },\n React.createElement(\"div\", { className: this._classNames.groupHeaderContainer, role: \"presentation\" },\n isSelectionCheckVisible ? (React.createElement(\"div\", { role: \"gridcell\" },\n React.createElement(\"button\", __assign({ \"data-is-focusable\": false, type: \"button\", className: this._classNames.check, role: \"checkbox\", id: \"\".concat(this._id, \"-check\"), \"aria-checked\": currentlySelected, \"aria-labelledby\": \"\".concat(this._id, \"-check \").concat(this._id), \"data-selection-toggle\": true }, selectAllButtonProps), onRenderCheckbox({ checked: currentlySelected, theme: theme }, onRenderCheckbox)))) : (\n // To make the group header align properly with the column headers, this spacer\n // needs to be the same width as the check cell in the column header.\n selectionMode !== SelectionMode.none && React.createElement(GroupSpacer, { indentWidth: CHECK_CELL_WIDTH, count: 1 })),\n React.createElement(GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),\n React.createElement(\"div\", { className: this._classNames.dropIcon, role: \"presentation\" },\n React.createElement(Icon, { iconName: \"Tag\" })),\n React.createElement(\"div\", { role: \"gridcell\" },\n React.createElement(\"button\", __assign({ \"data-is-focusable\": false, \"data-selection-disabled\": true, type: \"button\", className: this._classNames.expand, onClick: this._onToggleClick, \"aria-expanded\": !this.state.isCollapsed }, expandButtonProps),\n React.createElement(Icon, { className: this._classNames.expandIsCollapsed, iconName: expandButtonIcon || (isRTL ? 'ChevronLeftMed' : 'ChevronRightMed') }))),\n onRenderTitle(this.props),\n isLoadingVisible && React.createElement(Spinner, { label: loadingText }))));\n };\n GroupHeaderBase.prototype._defaultCheckboxRender = function (checkboxProps) {\n return React.createElement(Check, { checked: checkboxProps.checked });\n };\n GroupHeaderBase.prototype._fastDefaultCheckboxRender = function (checkboxProps) {\n return React.createElement(FastCheck, { theme: checkboxProps.theme, checked: checkboxProps.checked });\n };\n GroupHeaderBase.defaultProps = {\n expandButtonProps: { 'aria-label': 'expand collapse group' },\n };\n return GroupHeaderBase;\n}(React.Component));\nexport { GroupHeaderBase };\nvar FastCheck = React.memo(function (props) {\n return React.createElement(Check, { theme: props.theme, checked: props.checked, className: props.className, useFastIcons: true });\n});\n//# sourceMappingURL=GroupHeader.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './GroupHeader.styles';\nimport { GroupHeaderBase } from './GroupHeader.base';\nexport var GroupHeader = styled(GroupHeaderBase, getStyles, undefined, {\n scope: 'GroupHeader',\n});\n//# sourceMappingURL=GroupHeader.js.map","import { getGlobalClassNames, getFocusStyle, AnimationVariables, FontWeights, IconFontSizes } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from '../DetailsList/DetailsRow.styles';\nimport { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as EXPAND_BUTTON_WIDTH } from './GroupSpacer';\nvar GlobalClassNames = {\n root: 'ms-GroupHeader',\n compact: 'ms-GroupHeader--compact',\n check: 'ms-GroupHeader-check',\n dropIcon: 'ms-GroupHeader-dropIcon',\n expand: 'ms-GroupHeader-expand',\n isCollapsed: 'is-collapsed',\n title: 'ms-GroupHeader-title',\n isSelected: 'is-selected',\n iconTag: 'ms-Icon--Tag',\n group: 'ms-GroupedList-group',\n isDropping: 'is-dropping',\n};\nvar beziers = {\n easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n};\nvar DEFAULT_GROUP_HEADER_HEIGHT = 48;\nvar COMPACT_GROUP_HEADER_HEIGHT = 40;\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, className = props.className, selected = props.selected, isCollapsed = props.isCollapsed, compact = props.compact;\n // padding from the source to align GroupHeader title with DetailsRow's first cell.\n var cellLeftPadding = DEFAULT_CELL_STYLE_PROPS.cellLeftPadding;\n var finalRowHeight = compact ? COMPACT_GROUP_HEADER_HEIGHT : DEFAULT_GROUP_HEADER_HEIGHT;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var checkExpandResetStyles = [\n getFocusStyle(theme),\n {\n cursor: 'default',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0, // cancel default