tag.\n fontSize: 'inherit',\n fontWeight: 'inherit',\n color: 'inherit',\n margin: 0,\n },\n ],\n };\n};\n//# sourceMappingURL=Tooltip.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hiddenContentStyle } from '../../Styling';\nimport { initializeComponentRef, Async, divProperties, getNativeProps, getId, assign, hasOverflow, portalContainsElement, classNamesFunction, KeyCodes, } from '../../Utilities';\nimport { TooltipOverflowMode } from './TooltipHost.types';\nimport { Tooltip } from './Tooltip';\nimport { TooltipDelay } from './Tooltip.types';\nvar getClassNames = classNamesFunction();\nvar TooltipHostBase = /** @class */ (function (_super) {\n __extends(TooltipHostBase, _super);\n // Constructor\n function TooltipHostBase(props) {\n var _this = _super.call(this, props) || this;\n // The wrapping div that gets the hover events\n _this._tooltipHost = React.createRef();\n _this._defaultTooltipId = getId('tooltip');\n _this.show = function () {\n _this._toggleTooltip(true);\n };\n _this.dismiss = function () {\n _this._hideTooltip();\n };\n _this._getTargetElement = function () {\n if (!_this._tooltipHost.current) {\n return undefined;\n }\n var overflowMode = _this.props.overflowMode;\n // Select target element based on overflow mode. For parent mode, you want to position the tooltip relative\n // to the parent element, otherwise it might look off.\n if (overflowMode !== undefined) {\n switch (overflowMode) {\n case TooltipOverflowMode.Parent:\n return _this._tooltipHost.current.parentElement;\n case TooltipOverflowMode.Self:\n return _this._tooltipHost.current;\n }\n }\n return _this._tooltipHost.current;\n };\n _this._onTooltipFocus = function (ev) {\n if (_this._ignoreNextFocusEvent) {\n _this._ignoreNextFocusEvent = false;\n return;\n }\n _this._onTooltipMouseEnter(ev);\n };\n _this._onTooltipBlur = function (ev) {\n // The focused element gets a blur event when the document loses focus\n // (e.g. switching tabs in the browser), but we don't want to show the\n // tooltip again when the document gets focus back. Handle this case by\n // checking if the blurred element is still the document's activeElement,\n // and ignoring when it next gets focus back.\n // See https://github.com/microsoft/fluentui/issues/13541\n _this._ignoreNextFocusEvent = (document === null || document === void 0 ? void 0 : document.activeElement) === ev.target;\n _this._hideTooltip();\n };\n // Show Tooltip\n _this._onTooltipMouseEnter = function (ev) {\n var _a = _this.props, overflowMode = _a.overflowMode, delay = _a.delay;\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip !== _this) {\n TooltipHostBase._currentVisibleTooltip.dismiss();\n }\n TooltipHostBase._currentVisibleTooltip = _this;\n if (overflowMode !== undefined) {\n var overflowElement = _this._getTargetElement();\n if (overflowElement && !hasOverflow(overflowElement)) {\n return;\n }\n }\n if (ev.target && portalContainsElement(ev.target, _this._getTargetElement())) {\n // Do not show tooltip when target is inside a portal relative to TooltipHost.\n return;\n }\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n if (delay !== TooltipDelay.zero) {\n _this.setState({ isAriaPlaceholderRendered: true });\n var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`\n _this._openTimerId = _this._async.setTimeout(function () {\n _this._toggleTooltip(true);\n }, delayTime);\n }\n else {\n _this._toggleTooltip(true);\n }\n };\n // Hide Tooltip\n _this._onTooltipMouseLeave = function (ev) {\n var closeDelay = _this.props.closeDelay;\n _this._clearDismissTimer();\n _this._clearOpenTimer();\n if (closeDelay) {\n _this._dismissTimerId = _this._async.setTimeout(function () {\n _this._toggleTooltip(false);\n }, closeDelay);\n }\n else {\n _this._toggleTooltip(false);\n }\n if (TooltipHostBase._currentVisibleTooltip === _this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n };\n _this._onTooltipKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if ((ev.which === KeyCodes.escape || ev.ctrlKey) && _this.state.isTooltipVisible) {\n _this._hideTooltip();\n ev.stopPropagation();\n }\n };\n _this._clearDismissTimer = function () {\n _this._async.clearTimeout(_this._dismissTimerId);\n };\n _this._clearOpenTimer = function () {\n _this._async.clearTimeout(_this._openTimerId);\n };\n // Hide Tooltip\n _this._hideTooltip = function () {\n _this._clearOpenTimer();\n _this._clearDismissTimer();\n _this._toggleTooltip(false);\n };\n _this._toggleTooltip = function (isTooltipVisible) {\n if (_this.state.isTooltipVisible !== isTooltipVisible) {\n _this.setState({ isAriaPlaceholderRendered: false, isTooltipVisible: isTooltipVisible }, function () { return _this.props.onTooltipToggle && _this.props.onTooltipToggle(isTooltipVisible); });\n }\n };\n _this._getDelayTime = function (delay) {\n switch (delay) {\n case TooltipDelay.medium:\n return 300;\n case TooltipDelay.long:\n return 500;\n default:\n return 0;\n }\n };\n initializeComponentRef(_this);\n _this.state = {\n isAriaPlaceholderRendered: false,\n isTooltipVisible: false,\n };\n _this._async = new Async(_this);\n return _this;\n }\n // Render\n TooltipHostBase.prototype.render = function () {\n var _a = this.props, calloutProps = _a.calloutProps, children = _a.children, content = _a.content, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, className = _a.hostClassName, id = _a.id, \n // eslint-disable-next-line deprecation/deprecation\n _b = _a.setAriaDescribedBy, \n // eslint-disable-next-line deprecation/deprecation\n setAriaDescribedBy = _b === void 0 ? true : _b, tooltipProps = _a.tooltipProps, styles = _a.styles, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var _c = this.state, isAriaPlaceholderRendered = _c.isAriaPlaceholderRendered, isTooltipVisible = _c.isTooltipVisible;\n var tooltipId = id || this._defaultTooltipId;\n var isContentPresent = !!(content ||\n (tooltipProps && tooltipProps.onRenderContent && tooltipProps.onRenderContent()));\n var showTooltip = isTooltipVisible && isContentPresent;\n var ariaDescribedBy = setAriaDescribedBy && isTooltipVisible && isContentPresent ? tooltipId : undefined;\n return (React.createElement(\"div\", __assign({ className: this._classNames.root, ref: this._tooltipHost }, { onFocusCapture: this._onTooltipFocus }, { onBlurCapture: this._onTooltipBlur }, { onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, role: \"none\", \"aria-describedby\": ariaDescribedBy }),\n children,\n showTooltip && (React.createElement(Tooltip, __assign({ id: tooltipId, content: content, targetElement: this._getTargetElement(), directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, calloutProps: assign({}, calloutProps, {\n onDismiss: this._hideTooltip,\n onMouseEnter: this._onTooltipMouseEnter,\n onMouseLeave: this._onTooltipMouseLeave,\n }), onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, getNativeProps(this.props, divProperties), tooltipProps))),\n isAriaPlaceholderRendered && (React.createElement(\"div\", { id: tooltipId, role: \"none\", style: hiddenContentStyle }, content))));\n };\n TooltipHostBase.prototype.componentWillUnmount = function () {\n if (TooltipHostBase._currentVisibleTooltip && TooltipHostBase._currentVisibleTooltip === this) {\n TooltipHostBase._currentVisibleTooltip = undefined;\n }\n this._async.dispose();\n };\n TooltipHostBase.defaultProps = {\n delay: TooltipDelay.medium,\n };\n return TooltipHostBase;\n}(React.Component));\nexport { TooltipHostBase };\n//# sourceMappingURL=TooltipHost.base.js.map","/**\n * {@docCategory Button}\n */\nexport var ElementType;\n(function (ElementType) {\n /** `button` element. */\n ElementType[ElementType[\"button\"] = 0] = \"button\";\n /** `a` element. */\n ElementType[ElementType[\"anchor\"] = 1] = \"anchor\";\n})(ElementType || (ElementType = {}));\n/**\n * {@docCategory Button}\n */\nexport var ButtonType;\n(function (ButtonType) {\n ButtonType[ButtonType[\"normal\"] = 0] = \"normal\";\n ButtonType[ButtonType[\"primary\"] = 1] = \"primary\";\n ButtonType[ButtonType[\"hero\"] = 2] = \"hero\";\n ButtonType[ButtonType[\"compound\"] = 3] = \"compound\";\n ButtonType[ButtonType[\"command\"] = 4] = \"command\";\n ButtonType[ButtonType[\"icon\"] = 5] = \"icon\";\n ButtonType[ButtonType[\"default\"] = 6] = \"default\";\n})(ButtonType || (ButtonType = {}));\n//# sourceMappingURL=Button.types.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-TooltipHost',\n ariaPlaceholder: 'ms-TooltipHost-aria-placeholder',\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: 'inline',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=TooltipHost.styles.js.map","import { styled } from '../../Utilities';\nimport { TooltipHostBase } from './TooltipHost.base';\nimport { getStyles } from './TooltipHost.styles';\nexport var TooltipHost = styled(TooltipHostBase, getStyles, undefined, {\n scope: 'TooltipHost',\n});\n//# sourceMappingURL=TooltipHost.js.map","import { __assign, __extends, __rest, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, getRTL, classNamesFunction, getNativeProps, htmlElementProperties, } from '../../Utilities';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Link } from '../../Link';\nimport { Icon } from '../../Icon';\nimport { IconButton } from '../../Button';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { ResizeGroup } from '../../ResizeGroup';\nimport { TooltipHost, TooltipOverflowMode } from '../../Tooltip';\nvar getClassNames = classNamesFunction();\nvar OVERFLOW_KEY = 'overflow';\nvar nullFunction = function () { return null; };\nvar nonActionableItemProps = {\n styles: function (props) {\n var theme = props.theme;\n return {\n root: {\n selectors: {\n '&.is-disabled': {\n color: theme.semanticColors.bodyText,\n },\n },\n },\n };\n },\n};\n/**\n * {@docCategory Breadcrumb}\n */\nvar BreadcrumbBase = /** @class */ (function (_super) {\n __extends(BreadcrumbBase, _super);\n function BreadcrumbBase(props) {\n var _this = _super.call(this, props) || this;\n _this._focusZone = React.createRef();\n /**\n * Remove the first rendered item past the overlow point and put it and the end the overflow set.\n */\n _this._onReduceData = function (data) {\n var renderedItems = data.renderedItems, renderedOverflowItems = data.renderedOverflowItems;\n var overflowIndex = data.props.overflowIndex;\n var movedItem = renderedItems[overflowIndex];\n if (!movedItem) {\n return undefined;\n }\n renderedItems = __spreadArrays(renderedItems);\n renderedItems.splice(overflowIndex, 1);\n renderedOverflowItems = __spreadArrays(renderedOverflowItems, [movedItem]);\n return __assign(__assign({}, data), { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });\n };\n /**\n * Remove the last item of the overflow set and insert the item as the start of the rendered set past the overflow\n * point.\n */\n _this._onGrowData = function (data) {\n var renderedItems = data.renderedItems, renderedOverflowItems = data.renderedOverflowItems;\n var _a = data.props, overflowIndex = _a.overflowIndex, maxDisplayedItems = _a.maxDisplayedItems;\n renderedOverflowItems = __spreadArrays(renderedOverflowItems);\n var movedItem = renderedOverflowItems.pop();\n if (!movedItem || renderedItems.length >= maxDisplayedItems) {\n return undefined;\n }\n renderedItems = __spreadArrays(renderedItems);\n renderedItems.splice(overflowIndex, 0, movedItem);\n return __assign(__assign({}, data), { renderedItems: renderedItems, renderedOverflowItems: renderedOverflowItems });\n };\n _this._onRenderBreadcrumb = function (data) {\n var _a = data.props, ariaLabel = _a.ariaLabel, _b = _a.dividerAs, DividerType = _b === void 0 ? Icon : _b, _c = _a.onRenderItem, onRenderItem = _c === void 0 ? _this._onRenderItem : _c, overflowAriaLabel = _a.overflowAriaLabel, overflowIndex = _a.overflowIndex, onRenderOverflowIcon = _a.onRenderOverflowIcon, overflowButtonAs = _a.overflowButtonAs;\n var renderedOverflowItems = data.renderedOverflowItems, renderedItems = data.renderedItems;\n var contextualItems = renderedOverflowItems.map(function (item) {\n var isActionable = !!(item.onClick || item.href);\n return {\n text: item.text,\n name: item.text,\n key: item.key,\n onClick: item.onClick ? _this._onBreadcrumbClicked.bind(_this, item) : null,\n href: item.href,\n disabled: !isActionable,\n itemProps: isActionable ? undefined : nonActionableItemProps,\n };\n });\n // Find index of last rendered item so the divider icon\n // knows not to render on that item\n var lastItemIndex = renderedItems.length - 1;\n var hasOverflowItems = renderedOverflowItems && renderedOverflowItems.length !== 0;\n var itemElements = renderedItems.map(function (item, index) { return (React.createElement(\"li\", { className: _this._classNames.listItem, key: item.key || String(index) },\n onRenderItem(item, _this._onRenderItem),\n (index !== lastItemIndex || (hasOverflowItems && index === overflowIndex - 1)) && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: item })))); });\n if (hasOverflowItems) {\n var iconProps = !onRenderOverflowIcon ? { iconName: 'More' } : {};\n var onRenderMenuIcon = onRenderOverflowIcon ? onRenderOverflowIcon : nullFunction;\n var OverflowButton = overflowButtonAs ? overflowButtonAs : IconButton;\n itemElements.splice(overflowIndex, 0, React.createElement(\"li\", { className: _this._classNames.overflow, key: OVERFLOW_KEY },\n React.createElement(OverflowButton, { className: _this._classNames.overflowButton, iconProps: iconProps, role: \"button\", \"aria-haspopup\": \"true\", ariaLabel: overflowAriaLabel, onRenderMenuIcon: onRenderMenuIcon, menuProps: {\n items: contextualItems,\n directionalHint: DirectionalHint.bottomLeftEdge,\n } }),\n overflowIndex !== lastItemIndex + 1 && (React.createElement(DividerType, { className: _this._classNames.chevron, iconName: getRTL(_this.props.theme) ? 'ChevronLeft' : 'ChevronRight', item: renderedOverflowItems[renderedOverflowItems.length - 1] }))));\n }\n var nativeProps = getNativeProps(_this.props, htmlElementProperties, [\n 'className',\n ]);\n return (React.createElement(\"div\", __assign({ className: _this._classNames.root, role: \"navigation\", \"aria-label\": ariaLabel }, nativeProps),\n React.createElement(FocusZone, __assign({ componentRef: _this._focusZone, direction: FocusZoneDirection.horizontal }, _this.props.focusZoneProps),\n React.createElement(\"ol\", { className: _this._classNames.list }, itemElements))));\n };\n _this._onRenderItem = function (item) {\n var as = item.as, href = item.href, onClick = item.onClick, isCurrentItem = item.isCurrentItem, text = item.text, additionalProps = __rest(item, [\"as\", \"href\", \"onClick\", \"isCurrentItem\", \"text\"]);\n if (onClick || href) {\n return (React.createElement(Link, __assign({}, additionalProps, { as: as, className: _this._classNames.itemLink, href: href, \"aria-current\": isCurrentItem ? 'page' : undefined, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: _this._onBreadcrumbClicked.bind(_this, item) }),\n React.createElement(TooltipHost, __assign({ content: text, overflowMode: TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), text)));\n }\n else {\n var Tag = as || 'span';\n return (React.createElement(Tag, __assign({}, additionalProps, { className: _this._classNames.item }),\n React.createElement(TooltipHost, __assign({ content: text, overflowMode: TooltipOverflowMode.Parent }, _this.props.tooltipHostProps), text)));\n }\n };\n _this._onBreadcrumbClicked = function (item, ev) {\n if (item.onClick) {\n item.onClick(ev, item);\n }\n };\n initializeComponentRef(_this);\n _this._validateProps(props);\n return _this;\n }\n /**\n * Sets focus to the first breadcrumb link.\n */\n BreadcrumbBase.prototype.focus = function () {\n if (this._focusZone.current) {\n this._focusZone.current.focus();\n }\n };\n BreadcrumbBase.prototype.render = function () {\n this._validateProps(this.props);\n var _a = this.props, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, _c = _a.onGrowData, onGrowData = _c === void 0 ? this._onGrowData : _c, overflowIndex = _a.overflowIndex, maxDisplayedItems = _a.maxDisplayedItems, items = _a.items, className = _a.className, theme = _a.theme, styles = _a.styles;\n var renderedItems = __spreadArrays(items);\n var renderedOverflowItems = renderedItems.splice(overflowIndex, renderedItems.length - maxDisplayedItems);\n var breadcrumbData = {\n props: this.props,\n renderedItems: renderedItems,\n renderedOverflowItems: renderedOverflowItems,\n };\n this._classNames = getClassNames(styles, {\n className: className,\n theme: theme,\n });\n return (React.createElement(ResizeGroup, { onRenderData: this._onRenderBreadcrumb, onReduceData: onReduceData, onGrowData: onGrowData, data: breadcrumbData }));\n };\n /**\n * Validate incoming props\n * @param props - Props to validate\n */\n BreadcrumbBase.prototype._validateProps = function (props) {\n var maxDisplayedItems = props.maxDisplayedItems, overflowIndex = props.overflowIndex, items = props.items;\n if (overflowIndex < 0 ||\n (maxDisplayedItems > 1 && overflowIndex > maxDisplayedItems - 1) ||\n (items.length > 0 && overflowIndex > items.length - 1)) {\n throw new Error('Breadcrumb: overflowIndex out of range');\n }\n };\n BreadcrumbBase.defaultProps = {\n items: [],\n maxDisplayedItems: 999,\n overflowIndex: 0,\n };\n return BreadcrumbBase;\n}(React.Component));\nexport { BreadcrumbBase };\n//# sourceMappingURL=Breadcrumb.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, ScreenWidthMaxMedium, ScreenWidthMaxSmall, ScreenWidthMinMedium, getFocusStyle, getScreenSelector, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-Breadcrumb',\n list: 'ms-Breadcrumb-list',\n listItem: 'ms-Breadcrumb-listItem',\n chevron: 'ms-Breadcrumb-chevron',\n overflow: 'ms-Breadcrumb-overflow',\n overflowButton: 'ms-Breadcrumb-overflowButton',\n itemLink: 'ms-Breadcrumb-itemLink',\n item: 'ms-Breadcrumb-item',\n};\nvar SingleLineTextStyle = {\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n};\nvar overflowButtonFontSize = 16;\nvar chevronSmallFontSize = 8;\nvar itemLineHeight = 36;\nvar itemFontSize = 18;\nvar MinimumScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);\nvar MediumScreenSelector = getScreenSelector(ScreenWidthMinMedium, ScreenWidthMaxMedium);\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var className = props.className, theme = props.theme;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // Tokens\n var itemBackgroundHoveredColor = semanticColors.menuItemBackgroundHovered;\n var itemBackgroundPressedColor = semanticColors.menuItemBackgroundPressed;\n var itemTextColor = palette.neutralSecondary;\n var itemTextFontWeight = FontWeights.regular;\n var itemTextHoveredOrPressedColor = palette.neutralPrimary;\n var itemLastChildTextColor = palette.neutralPrimary;\n var itemLastChildTextFontWeight = FontWeights.semibold;\n var chevronButtonColor = palette.neutralSecondary;\n var overflowButtonColor = palette.neutralSecondary;\n var lastChildItemStyles = {\n fontWeight: itemLastChildTextFontWeight,\n color: itemLastChildTextColor,\n };\n var itemStateSelectors = {\n ':hover': {\n color: itemTextHoveredOrPressedColor,\n backgroundColor: itemBackgroundHoveredColor,\n cursor: 'pointer',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'Highlight',\n backgroundColor: 'transparent',\n },\n _a),\n },\n ':active': {\n backgroundColor: itemBackgroundPressedColor,\n color: itemTextHoveredOrPressedColor,\n },\n '&:active:hover': {\n color: itemTextHoveredOrPressedColor,\n backgroundColor: itemBackgroundPressedColor,\n },\n '&:active, &:hover, &:active:hover': {\n textDecoration: 'none',\n },\n };\n var commonItemStyles = {\n color: itemTextColor,\n padding: '0 8px',\n lineHeight: itemLineHeight,\n fontSize: itemFontSize,\n fontWeight: itemTextFontWeight,\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n margin: '11px 0 1px',\n },\n className,\n ],\n list: [\n classNames.list,\n {\n whiteSpace: 'nowrap',\n padding: 0,\n margin: 0,\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n listItem: [\n classNames.listItem,\n {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n display: 'flex',\n position: 'relative',\n alignItems: 'center',\n selectors: {\n '&:last-child .ms-Breadcrumb-itemLink': __assign(__assign({}, lastChildItemStyles), (_b = {}, _b[HighContrastSelector] = {\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n }, _b)),\n '&:last-child .ms-Breadcrumb-item': lastChildItemStyles,\n },\n },\n ],\n chevron: [\n classNames.chevron,\n {\n color: chevronButtonColor,\n fontSize: fonts.small.fontSize,\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign({ color: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _c[MediumScreenSelector] = {\n fontSize: chevronSmallFontSize,\n },\n _c[MinimumScreenSelector] = {\n fontSize: chevronSmallFontSize,\n },\n _c),\n },\n ],\n overflow: [\n classNames.overflow,\n {\n position: 'relative',\n display: 'flex',\n alignItems: 'center',\n },\n ],\n overflowButton: [\n classNames.overflowButton,\n getFocusStyle(theme),\n SingleLineTextStyle,\n {\n fontSize: overflowButtonFontSize,\n color: overflowButtonColor,\n height: '100%',\n cursor: 'pointer',\n selectors: __assign(__assign({}, itemStateSelectors), (_d = {}, _d[MinimumScreenSelector] = {\n padding: '4px 6px',\n }, _d[MediumScreenSelector] = {\n fontSize: fonts.mediumPlus.fontSize,\n }, _d)),\n },\n ],\n itemLink: [\n classNames.itemLink,\n getFocusStyle(theme),\n SingleLineTextStyle,\n __assign(__assign({}, commonItemStyles), { selectors: __assign((_e = { ':focus': {\n color: palette.neutralDark,\n } }, _e[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n outline: \"none\",\n }, _e), itemStateSelectors) }),\n ],\n item: [\n classNames.item,\n __assign(__assign({}, commonItemStyles), { selectors: {\n ':hover': {\n cursor: 'default',\n },\n } }),\n ],\n };\n};\n//# sourceMappingURL=Breadcrumb.styles.js.map","import { styled } from '../../Utilities';\nimport { BreadcrumbBase } from './Breadcrumb.base';\nimport { getStyles } from './Breadcrumb.styles';\nexport var Breadcrumb = styled(BreadcrumbBase, getStyles, undefined, { scope: 'Breadcrumb' });\n//# sourceMappingURL=Breadcrumb.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nvar splitButtonDividerBaseStyles = function () {\n return {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n};\nexport function standardStyles(theme) {\n var _a, _b, _c, _d, _e;\n var s = theme.semanticColors, p = theme.palette;\n var buttonBackground = s.buttonBackground;\n var buttonBackgroundPressed = s.buttonBackgroundPressed;\n var buttonBackgroundHovered = s.buttonBackgroundHovered;\n var buttonBackgroundDisabled = s.buttonBackgroundDisabled;\n var buttonText = s.buttonText;\n var buttonTextHovered = s.buttonTextHovered;\n var buttonTextDisabled = s.buttonTextDisabled;\n var buttonTextChecked = s.buttonTextChecked;\n var buttonTextCheckedHovered = s.buttonTextCheckedHovered;\n return {\n root: {\n backgroundColor: buttonBackground,\n color: buttonText,\n },\n rootHovered: {\n backgroundColor: buttonBackgroundHovered,\n color: buttonTextHovered,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _a),\n },\n rootPressed: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootExpanded: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootChecked: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextChecked,\n },\n rootCheckedHovered: {\n backgroundColor: buttonBackgroundPressed,\n color: buttonTextCheckedHovered,\n },\n rootDisabled: {\n color: buttonTextDisabled,\n backgroundColor: buttonBackgroundDisabled,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _b),\n },\n // Split button styles\n splitButtonContainer: {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n border: 'none',\n },\n _c),\n },\n splitButtonMenuButton: {\n color: p.white,\n backgroundColor: 'transparent',\n selectors: {\n ':hover': {\n backgroundColor: p.neutralLight,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'Highlight',\n },\n _d),\n },\n },\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.buttonBackgroundDisabled,\n selectors: {\n ':hover': {\n backgroundColor: s.buttonBackgroundDisabled,\n },\n },\n },\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles()), { backgroundColor: p.neutralTertiaryAlt, selectors: (_e = {},\n _e[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _e) }),\n splitButtonDividerDisabled: {\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuIcon: {\n color: s.buttonText,\n },\n splitButtonMenuIconDisabled: {\n color: s.buttonTextDisabled,\n },\n };\n}\nexport function primaryStyles(theme) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j;\n var p = theme.palette, s = theme.semanticColors;\n return {\n root: {\n backgroundColor: s.primaryButtonBackground,\n border: \"1px solid \" + s.primaryButtonBackground,\n color: s.primaryButtonText,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n selectors: {\n ':after': {\n border: \"none\",\n outlineColor: p.white,\n },\n },\n },\n _a),\n },\n rootHovered: {\n backgroundColor: s.primaryButtonBackgroundHovered,\n border: \"1px solid \" + s.primaryButtonBackgroundHovered,\n color: s.primaryButtonTextHovered,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Window',\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n },\n _b),\n },\n rootPressed: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n border: \"1px solid \" + s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText', borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _c),\n },\n rootExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootCheckedHovered: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n color: s.primaryButtonTextPressed,\n },\n rootDisabled: {\n color: s.primaryButtonTextDisabled,\n backgroundColor: s.primaryButtonBackgroundDisabled,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _d),\n },\n // Split button styles\n splitButtonContainer: {\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n },\n _e),\n },\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles()), { backgroundColor: p.white, selectors: (_f = {},\n _f[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _f) }),\n splitButtonMenuButton: {\n backgroundColor: s.primaryButtonBackground,\n color: s.primaryButtonText,\n selectors: (_g = {},\n _g[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _g[':hover'] = {\n backgroundColor: s.primaryButtonBackgroundHovered,\n selectors: (_h = {},\n _h[HighContrastSelector] = {\n color: 'Highlight',\n },\n _h),\n },\n _g),\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundDisabled,\n },\n },\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: s.primaryButtonBackgroundPressed,\n selectors: {\n ':hover': {\n backgroundColor: s.primaryButtonBackgroundPressed,\n },\n },\n },\n splitButtonMenuIcon: {\n color: s.primaryButtonText,\n },\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n color: 'GrayText',\n },\n _j),\n },\n };\n}\n//# sourceMappingURL=ButtonThemes.js.map","import { concatStyleSets, FontWeights } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport { primaryStyles, standardStyles } from '../ButtonThemes';\nvar DEFAULT_BUTTON_HEIGHT = '32px';\nvar DEFAULT_BUTTON_MIN_WIDTH = '80px';\nexport var getStyles = memoizeFunction(function (theme, customStyles, primary) {\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var defaultButtonStyles = {\n root: {\n minWidth: DEFAULT_BUTTON_MIN_WIDTH,\n height: DEFAULT_BUTTON_HEIGHT,\n },\n label: {\n fontWeight: FontWeights.semibold,\n },\n };\n return concatStyleSets(baseButtonStyles, defaultButtonStyles, primary ? primaryStyles(theme) : standardStyles(theme), splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=DefaultButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './DefaultButton.styles';\n/**\n * {@docCategory Button}\n */\nvar DefaultButton = /** @class */ (function (_super) {\n __extends(DefaultButton, _super);\n function DefaultButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n DefaultButton.prototype.render = function () {\n var _a = this.props, _b = _a.primary, primary = _b === void 0 ? false : _b, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: primary ? 'ms-Button--primary' : 'ms-Button--default', styles: getStyles(theme, styles, primary), onRenderDescription: nullRender })));\n };\n DefaultButton = __decorate([\n customizable('DefaultButton', ['theme', 'styles'], true)\n ], DefaultButton);\n return DefaultButton;\n}(React.Component));\nexport { DefaultButton };\n//# sourceMappingURL=DefaultButton.js.map","import { concatStyleSets, HighContrastSelector } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nvar DEFAULT_BUTTON_HEIGHT = '40px';\nvar DEFAULT_PADDING = '0 4px';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b, _c;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var actionButtonStyles = {\n root: {\n padding: DEFAULT_PADDING,\n height: DEFAULT_BUTTON_HEIGHT,\n color: theme.palette.neutralPrimary,\n backgroundColor: 'transparent',\n border: '1px solid transparent',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Window',\n },\n _a),\n },\n rootHovered: {\n color: theme.palette.themePrimary,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Highlight',\n },\n _b),\n },\n iconHovered: {\n color: theme.palette.themePrimary,\n },\n rootPressed: {\n color: theme.palette.black,\n },\n rootExpanded: {\n color: theme.palette.themePrimary,\n },\n iconPressed: {\n color: theme.palette.themeDarker,\n },\n rootDisabled: {\n color: theme.palette.neutralTertiary,\n backgroundColor: 'transparent',\n borderColor: 'transparent',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n },\n rootChecked: {\n color: theme.palette.black,\n },\n iconChecked: {\n color: theme.palette.themeDarker,\n },\n flexContainer: {\n justifyContent: 'flex-start',\n },\n icon: {\n color: theme.palette.themeDarkAlt,\n },\n iconDisabled: {\n color: 'inherit',\n },\n menuIcon: {\n color: theme.palette.neutralSecondary,\n },\n textContainer: {\n flexGrow: 0,\n },\n };\n return concatStyleSets(baseButtonStyles, actionButtonStyles, customStyles);\n});\n//# sourceMappingURL=ActionButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './ActionButton.styles';\n/**\n * {@docCategory Button}\n */\nvar ActionButton = /** @class */ (function (_super) {\n __extends(ActionButton, _super);\n function ActionButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n ActionButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--action ms-Button--command\", styles: getStyles(theme, styles), onRenderDescription: nullRender })));\n };\n ActionButton = __decorate([\n customizable('ActionButton', ['theme', 'styles'], true)\n ], ActionButton);\n return ActionButton;\n}(React.Component));\nexport { ActionButton };\n//# sourceMappingURL=ActionButton.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, FontWeights, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport { primaryStyles, standardStyles } from '../ButtonThemes';\nexport var getStyles = memoizeFunction(function (theme, customStyles, primary) {\n var _a, _b, _c, _d, _e;\n var fonts = theme.fonts, palette = theme.palette;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var compoundButtonStyles = {\n root: {\n maxWidth: '280px',\n minHeight: '72px',\n height: 'auto',\n padding: '16px 12px',\n },\n flexContainer: {\n flexDirection: 'row',\n alignItems: 'flex-start',\n minWidth: '100%',\n margin: '',\n },\n textContainer: {\n textAlign: 'left',\n },\n icon: {\n fontSize: '2em',\n lineHeight: '1em',\n height: '1em',\n margin: '0px 8px 0px 0px',\n flexBasis: '1em',\n flexShrink: '0',\n },\n label: {\n margin: '0 0 5px',\n lineHeight: '100%',\n fontWeight: FontWeights.semibold,\n },\n description: [\n fonts.small,\n {\n lineHeight: '100%',\n },\n ],\n };\n var standardCompoundTheme = {\n description: {\n color: palette.neutralSecondary,\n },\n descriptionHovered: {\n color: palette.neutralDark,\n },\n descriptionPressed: {\n color: 'inherit',\n },\n descriptionChecked: {\n color: 'inherit',\n },\n descriptionDisabled: {\n color: 'inherit',\n },\n };\n var primaryCompoundTheme = {\n description: {\n color: palette.white,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ backgroundColor: 'WindowText', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n descriptionHovered: {\n color: palette.white,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n backgroundColor: 'Highlight',\n color: 'Window',\n },\n _b),\n },\n descriptionPressed: {\n color: 'inherit',\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _c),\n },\n descriptionChecked: {\n color: 'inherit',\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n descriptionDisabled: {\n color: 'inherit',\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'inherit',\n },\n _e),\n },\n };\n return concatStyleSets(baseButtonStyles, compoundButtonStyles, primary ? primaryStyles(theme) : standardStyles(theme), primary ? primaryCompoundTheme : standardCompoundTheme, splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=CompoundButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable } from '../../../Utilities';\nimport { getStyles } from './CompoundButton.styles';\n/**\n * {@docCategory Button}\n */\nvar CompoundButton = /** @class */ (function (_super) {\n __extends(CompoundButton, _super);\n function CompoundButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CompoundButton.prototype.render = function () {\n var _a = this.props, _b = _a.primary, primary = _b === void 0 ? false : _b, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: primary ? 'ms-Button--compoundPrimary' : 'ms-Button--compound', styles: getStyles(theme, styles, primary) })));\n };\n CompoundButton = __decorate([\n customizable('CompoundButton', ['theme', 'styles'], true)\n ], CompoundButton);\n return CompoundButton;\n}(React.Component));\nexport { CompoundButton };\n//# sourceMappingURL=CompoundButton.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { DefaultButton } from '../DefaultButton/DefaultButton';\n/**\n * {@docCategory Button}\n */\nvar PrimaryButton = /** @class */ (function (_super) {\n __extends(PrimaryButton, _super);\n function PrimaryButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n PrimaryButton.prototype.render = function () {\n return React.createElement(DefaultButton, __assign({}, this.props, { primary: true, onRenderDescription: nullRender }));\n };\n PrimaryButton = __decorate([\n customizable('PrimaryButton', ['theme', 'styles'], true)\n ], PrimaryButton);\n return PrimaryButton;\n}(React.Component));\nexport { PrimaryButton };\n//# sourceMappingURL=PrimaryButton.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { warn } from '../../Utilities';\nimport { ButtonType } from './Button.types';\nimport { DefaultButton } from './DefaultButton/DefaultButton';\nimport { ActionButton } from './ActionButton/ActionButton';\nimport { CompoundButton } from './CompoundButton/CompoundButton';\nimport { IconButton } from './IconButton/IconButton';\nimport { PrimaryButton } from './PrimaryButton/PrimaryButton';\n/**\n * This class is deprecated. Use the individual *Button components instead.\n * @deprecated Use the individual *Button components instead.\n * {@docCategory Button}\n */\nvar Button = /** @class */ (function (_super) {\n __extends(Button, _super);\n function Button(props) {\n var _this = _super.call(this, props) || this;\n warn(\"The Button component has been deprecated. Use specific variants instead. \" +\n \"(PrimaryButton, DefaultButton, IconButton, ActionButton, etc.)\");\n return _this;\n }\n Button.prototype.render = function () {\n var props = this.props;\n // eslint-disable-next-line deprecation/deprecation\n switch (props.buttonType) {\n case ButtonType.command:\n return React.createElement(ActionButton, __assign({}, props));\n case ButtonType.compound:\n return React.createElement(CompoundButton, __assign({}, props));\n case ButtonType.icon:\n return React.createElement(IconButton, __assign({}, props));\n case ButtonType.primary:\n return React.createElement(PrimaryButton, __assign({}, props));\n default:\n return React.createElement(DefaultButton, __assign({}, props));\n }\n };\n return Button;\n}(React.Component));\nexport { Button };\n//# sourceMappingURL=Button.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, getFocusStyle, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../BaseButton.styles';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nimport { ButtonGlobalClassNames } from '../BaseButton.classNames';\nexport var getStyles = memoizeFunction(function (theme, customStyles, focusInset, focusColor) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var baseSplitButtonStyles = getSplitButtonStyles(theme);\n var p = theme.palette, semanticColors = theme.semanticColors;\n var commandButtonHighContrastFocus = {\n left: 4,\n top: 4,\n bottom: 4,\n right: 4,\n border: 'none',\n };\n var commandButtonStyles = {\n root: [\n getFocusStyle(theme, {\n inset: 2,\n highContrastStyle: commandButtonHighContrastFocus,\n borderColor: 'transparent',\n }),\n theme.fonts.medium,\n {\n minWidth: '40px',\n backgroundColor: p.white,\n color: p.neutralPrimary,\n padding: '0 4px',\n border: 'none',\n borderRadius: 0,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: 'none',\n },\n _a),\n },\n ],\n rootHovered: {\n backgroundColor: p.neutralLighter,\n color: p.neutralDark,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'Highlight',\n },\n _b[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDarkAlt,\n },\n _b[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _b),\n },\n rootPressed: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: (_c = {},\n _c[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _c[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _c),\n },\n rootChecked: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: (_d = {},\n _d[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _d[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _d),\n },\n rootCheckedHovered: {\n backgroundColor: p.neutralQuaternaryAlt,\n selectors: (_e = {},\n _e[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _e[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _e),\n },\n rootExpanded: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: (_f = {},\n _f[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.themeDark,\n },\n _f[\".\" + ButtonGlobalClassNames.msButtonMenuIcon] = {\n color: p.neutralPrimary,\n },\n _f),\n },\n rootExpandedHovered: {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n rootDisabled: {\n backgroundColor: p.white,\n selectors: (_g = {},\n _g[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: semanticColors.disabledBodySubtext,\n selectors: (_h = {},\n _h[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _h),\n },\n _g[HighContrastSelector] = __assign({ color: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _g),\n },\n // Split button styles\n splitButtonContainer: {\n height: '100%',\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n border: 'none',\n },\n _j),\n },\n splitButtonDividerDisabled: {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _k),\n },\n splitButtonDivider: {\n backgroundColor: p.neutralTertiaryAlt,\n },\n splitButtonMenuButton: {\n backgroundColor: p.white,\n border: 'none',\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n color: p.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralLighter,\n color: p.neutralDark,\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n color: 'Highlight',\n },\n _l[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.neutralPrimary,\n },\n _l),\n },\n ':active': {\n backgroundColor: p.neutralLight,\n selectors: (_m = {},\n _m[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: p.neutralPrimary,\n },\n _m),\n },\n },\n },\n splitButtonMenuButtonDisabled: {\n backgroundColor: p.white,\n selectors: (_o = {},\n _o[HighContrastSelector] = __assign({ color: 'GrayText', border: 'none', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _o),\n },\n splitButtonMenuButtonChecked: {\n backgroundColor: p.neutralLight,\n color: p.neutralDark,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuButtonExpanded: {\n backgroundColor: p.neutralLight,\n color: p.black,\n selectors: {\n ':hover': {\n backgroundColor: p.neutralQuaternaryAlt,\n },\n },\n },\n splitButtonMenuIcon: {\n color: p.neutralPrimary,\n },\n splitButtonMenuIconDisabled: {\n color: p.neutralTertiary,\n },\n label: {\n fontWeight: 'normal',\n },\n icon: {\n color: p.themePrimary,\n },\n menuIcon: (_p = {\n color: p.neutralSecondary\n },\n _p[HighContrastSelector] = {\n color: 'GrayText',\n },\n _p),\n };\n return concatStyleSets(baseButtonStyles, baseSplitButtonStyles, commandButtonStyles, customStyles);\n});\n//# sourceMappingURL=CommandBarButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../BaseButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './CommandBarButton.styles';\n/**\n * {@docCategory Button}\n */\nvar CommandBarButton = /** @class */ (function (_super) {\n __extends(CommandBarButton, _super);\n function CommandBarButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n CommandBarButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return (React.createElement(BaseButton, __assign({}, this.props, { variantClassName: \"ms-Button--commandBar\", styles: getStyles(theme, styles), onRenderDescription: nullRender })));\n };\n CommandBarButton = __decorate([\n customizable('CommandBarButton', ['theme', 'styles'], true)\n ], CommandBarButton);\n return CommandBarButton;\n}(React.Component));\nexport { CommandBarButton };\n//# sourceMappingURL=CommandBarButton.js.map","import { ActionButton } from '../ActionButton/ActionButton';\n/**\n * {@docCategory Button}\n */\nexport var CommandButton = ActionButton;\n//# sourceMappingURL=CommandButton.js.map","import { concatStyleSets, getFocusStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n return concatStyleSets({\n root: [\n getFocusStyle(theme, {\n inset: 1,\n highContrastStyle: {\n outlineOffset: '-4px',\n outline: '1px solid Window',\n },\n borderColor: 'transparent',\n }),\n {\n height: 24,\n },\n ],\n }, customStyles);\n});\n//# sourceMappingURL=MessageBarButton.styles.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { DefaultButton } from '../DefaultButton/DefaultButton';\nimport { customizable, nullRender } from '../../../Utilities';\nimport { getStyles } from './MessageBarButton.styles';\n/**\n * {@docCategory MessageBar}\n */\nvar MessageBarButton = /** @class */ (function (_super) {\n __extends(MessageBarButton, _super);\n function MessageBarButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n MessageBarButton.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme;\n return React.createElement(DefaultButton, __assign({}, this.props, { styles: getStyles(theme, styles), onRenderDescription: nullRender }));\n };\n MessageBarButton = __decorate([\n customizable('MessageBarButton', ['theme', 'styles'], true)\n ], MessageBarButton);\n return MessageBarButton;\n}(React.Component));\nexport { MessageBarButton };\n//# sourceMappingURL=MessageBarButton.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { toMatrix, classNamesFunction, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { FocusZone } from '../../FocusZone';\nimport { useId } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nexport var ButtonGridBase = React.forwardRef(function (props, forwardedRef) {\n var id = useId(undefined, props.id);\n var items = props.items, columnCount = props.columnCount, onRenderItem = props.onRenderItem, \n // eslint-disable-next-line deprecation/deprecation\n _a = props.ariaPosInSet, \n // eslint-disable-next-line deprecation/deprecation\n ariaPosInSet = _a === void 0 ? props.positionInSet : _a, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.ariaSetSize, \n // eslint-disable-next-line deprecation/deprecation\n ariaSetSize = _b === void 0 ? props.setSize : _b, styles = props.styles, doNotContainWithinFocusZone = props.doNotContainWithinFocusZone;\n var htmlProps = getNativeProps(props, htmlElementProperties, \n // avoid applying onBlur on the table if it's being used in the FocusZone\n doNotContainWithinFocusZone ? [] : ['onBlur']);\n var classNames = getClassNames(styles, { theme: props.theme });\n // Array to store the cells in the correct row index\n var rowsOfItems = toMatrix(items, columnCount);\n var content = (React.createElement(\"table\", __assign({ \"aria-posinset\": ariaPosInSet, \"aria-setsize\": ariaSetSize, id: id, role: \"grid\" }, htmlProps, { className: classNames.root }),\n React.createElement(\"tbody\", null, rowsOfItems.map(function (rows, rowIndex) {\n return (React.createElement(\"tr\", { role: 'row', key: rowIndex }, rows.map(function (cell, cellIndex) {\n return (React.createElement(\"td\", { role: \"presentation\", key: cellIndex + '-cell', className: classNames.tableCell }, onRenderItem(cell, cellIndex)));\n })));\n }))));\n return doNotContainWithinFocusZone ? (content) : (React.createElement(FocusZone, { elementRef: forwardedRef, isCircularNavigation: props.shouldFocusCircularNavigate, className: classNames.focusedContainer, onBlur: props.onBlur }, content));\n});\n//# sourceMappingURL=ButtonGrid.base.js.map","import { styled } from '../../Utilities';\nimport { ButtonGridBase } from './ButtonGrid.base';\nimport { getStyles } from './ButtonGrid.styles';\nexport var ButtonGrid = styled(ButtonGridBase, getStyles);\nButtonGrid.displayName = 'ButtonGrid';\n//# sourceMappingURL=ButtonGrid.js.map","export var getStyles = function (props) {\n return {\n root: {\n padding: 2,\n outline: 'none',\n },\n tableCell: {\n padding: 0,\n },\n };\n};\n//# sourceMappingURL=ButtonGrid.styles.js.map","import * as React from 'react';\nimport { css } from '../../Utilities';\nimport { CommandButton } from '../../Button';\nimport { useId } from '@fluentui/react-hooks';\nexport var ButtonGridCell = function (props) {\n var _a;\n var defaultId = useId('gridCell');\n var item = props.item, _b = props.id, id = _b === void 0 ? defaultId : _b, className = props.className, role = props.role, selected = props.selected, _c = props.disabled, disabled = _c === void 0 ? false : _c, onRenderItem = props.onRenderItem, cellDisabledStyle = props.cellDisabledStyle, cellIsSelectedStyle = props.cellIsSelectedStyle, index = props.index, label = props.label, getClassNames = props.getClassNames, onClick = props.onClick, onHover = props.onHover, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onMouseEnter = props.onMouseEnter, onFocus = props.onFocus;\n var handleClick = React.useCallback(function () {\n if (onClick && !disabled) {\n onClick(item);\n }\n }, [disabled, item, onClick]);\n var handleMouseEnter = React.useCallback(function (ev) {\n var didUpdateOnEnter = onMouseEnter && onMouseEnter(ev);\n if (!didUpdateOnEnter && onHover && !disabled) {\n onHover(item);\n }\n }, [disabled, item, onHover, onMouseEnter]);\n var handleMouseMove = React.useCallback(function (ev) {\n var didUpdateOnMove = onMouseMove && onMouseMove(ev);\n if (!didUpdateOnMove && onHover && !disabled) {\n onHover(item);\n }\n }, [disabled, item, onHover, onMouseMove]);\n var handleMouseLeave = React.useCallback(function (ev) {\n var didUpdateOnLeave = onMouseLeave && onMouseLeave(ev);\n if (!didUpdateOnLeave && onHover && !disabled) {\n onHover();\n }\n }, [disabled, onHover, onMouseLeave]);\n var handleFocus = React.useCallback(function () {\n if (onFocus && !disabled) {\n onFocus(item);\n }\n }, [disabled, item, onFocus]);\n return (React.createElement(CommandButton, { id: id, \"data-index\": index, \"data-is-focusable\": true, disabled: disabled, className: css(className, (_a = {},\n _a['' + cellIsSelectedStyle] = selected,\n _a['' + cellDisabledStyle] = disabled,\n _a)), onClick: handleClick, onMouseEnter: handleMouseEnter, onMouseMove: handleMouseMove, onMouseLeave: handleMouseLeave, onFocus: handleFocus, role: role, \"aria-selected\": selected, ariaLabel: label, title: label, getClassNames: getClassNames }, onRenderItem(item)));\n};\n//# sourceMappingURL=ButtonGridCell.js.map","/**\n * The days of the week\n * {@docCategory DateTimeUtilities}\n */\nexport var DayOfWeek;\n(function (DayOfWeek) {\n DayOfWeek[DayOfWeek[\"Sunday\"] = 0] = \"Sunday\";\n DayOfWeek[DayOfWeek[\"Monday\"] = 1] = \"Monday\";\n DayOfWeek[DayOfWeek[\"Tuesday\"] = 2] = \"Tuesday\";\n DayOfWeek[DayOfWeek[\"Wednesday\"] = 3] = \"Wednesday\";\n DayOfWeek[DayOfWeek[\"Thursday\"] = 4] = \"Thursday\";\n DayOfWeek[DayOfWeek[\"Friday\"] = 5] = \"Friday\";\n DayOfWeek[DayOfWeek[\"Saturday\"] = 6] = \"Saturday\";\n})(DayOfWeek || (DayOfWeek = {}));\n/**\n * The months\n * {@docCategory DateTimeUtilities}\n */\nexport var MonthOfYear;\n(function (MonthOfYear) {\n MonthOfYear[MonthOfYear[\"January\"] = 0] = \"January\";\n MonthOfYear[MonthOfYear[\"February\"] = 1] = \"February\";\n MonthOfYear[MonthOfYear[\"March\"] = 2] = \"March\";\n MonthOfYear[MonthOfYear[\"April\"] = 3] = \"April\";\n MonthOfYear[MonthOfYear[\"May\"] = 4] = \"May\";\n MonthOfYear[MonthOfYear[\"June\"] = 5] = \"June\";\n MonthOfYear[MonthOfYear[\"July\"] = 6] = \"July\";\n MonthOfYear[MonthOfYear[\"August\"] = 7] = \"August\";\n MonthOfYear[MonthOfYear[\"September\"] = 8] = \"September\";\n MonthOfYear[MonthOfYear[\"October\"] = 9] = \"October\";\n MonthOfYear[MonthOfYear[\"November\"] = 10] = \"November\";\n MonthOfYear[MonthOfYear[\"December\"] = 11] = \"December\";\n})(MonthOfYear || (MonthOfYear = {}));\n/**\n * First week of the year settings types\n * {@docCategory DateTimeUtilities}\n */\nexport var FirstWeekOfYear;\n(function (FirstWeekOfYear) {\n FirstWeekOfYear[FirstWeekOfYear[\"FirstDay\"] = 0] = \"FirstDay\";\n FirstWeekOfYear[FirstWeekOfYear[\"FirstFullWeek\"] = 1] = \"FirstFullWeek\";\n FirstWeekOfYear[FirstWeekOfYear[\"FirstFourDayWeek\"] = 2] = \"FirstFourDayWeek\";\n})(FirstWeekOfYear || (FirstWeekOfYear = {}));\n/**\n * The supported date range types\n * {@docCategory DateTimeUtilities}\n */\nexport var DateRangeType;\n(function (DateRangeType) {\n DateRangeType[DateRangeType[\"Day\"] = 0] = \"Day\";\n DateRangeType[DateRangeType[\"Week\"] = 1] = \"Week\";\n DateRangeType[DateRangeType[\"Month\"] = 2] = \"Month\";\n DateRangeType[DateRangeType[\"WorkWeek\"] = 3] = \"WorkWeek\";\n})(DateRangeType || (DateRangeType = {}));\nexport var DAYS_IN_WEEK = 7;\n//# sourceMappingURL=dateValues.js.map","import { __assign } from \"tslib\";\n/**\n * Format date to a day string representation\n * @param date - input date to format\n */\nexport var formatDay = function (date) { return date.getDate().toString(); };\n/**\n * Format date to a month-day-year string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport var formatMonthDayYear = function (date, strings) {\n return strings.months[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear();\n};\n/**\n * Format date to a month-year string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport var formatMonthYear = function (date, strings) {\n return strings.months[date.getMonth()] + ' ' + date.getFullYear();\n};\n/**\n * Format date to a month string\n * @param date - input date to format\n * @param strings - localized strings\n */\nexport var formatMonth = function (date, strings) { return strings.months[date.getMonth()]; };\n/**\n * Format date to a year string representation\n * @param date - input date to format\n */\nexport var formatYear = function (date) { return date.getFullYear().toString(); };\nexport var DEFAULT_DATE_GRID_STRINGS = {\n months: [\n 'January',\n 'February',\n 'March',\n 'April',\n 'May',\n 'June',\n 'July',\n 'August',\n 'September',\n 'October',\n 'November',\n 'December',\n ],\n shortMonths: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],\n days: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],\n shortDays: ['S', 'M', 'T', 'W', 'T', 'F', 'S'],\n};\nexport var DEFAULT_DATE_FORMATTING = {\n formatDay: formatDay,\n formatMonth: formatMonth,\n formatYear: formatYear,\n formatMonthDayYear: formatMonthDayYear,\n formatMonthYear: formatMonthYear,\n};\nexport var DEFAULT_CALENDAR_STRINGS = __assign(__assign({}, DEFAULT_DATE_GRID_STRINGS), { goToToday: 'Go to today', weekNumberFormatString: 'Week number {0}', prevMonthAriaLabel: 'Previous month', nextMonthAriaLabel: 'Next month', prevYearAriaLabel: 'Previous year', nextYearAriaLabel: 'Next year', prevYearRangeAriaLabel: 'Previous year range', nextYearRangeAriaLabel: 'Next year range', closeButtonAriaLabel: 'Close', selectedDateFormatString: 'Selected date {0}', todayDateFormatString: \"Today's date {0}\", monthPickerHeaderAriaLabel: '{0}, change year', yearPickerHeaderAriaLabel: '{0}, change month', dayMarkedAriaLabel: 'marked' });\n//# sourceMappingURL=dateFormatting.defaults.js.map","export var TimeConstants = {\n MillisecondsInOneDay: 86400000,\n MillisecondsIn1Sec: 1000,\n MillisecondsIn1Min: 60000,\n MillisecondsIn30Mins: 1800000,\n MillisecondsIn1Hour: 3600000,\n MinutesInOneDay: 1440,\n MinutesInOneHour: 60,\n DaysInOneWeek: 7,\n MonthInOneYear: 12,\n HoursInOneDay: 24,\n};\n//# sourceMappingURL=timeConstants.js.map","import { DayOfWeek, MonthOfYear, FirstWeekOfYear, DateRangeType } from '../dateValues/dateValues';\nimport { TimeConstants } from '../dateValues/timeConstants';\n/**\n * Returns a date offset from the given date by the specified number of days.\n * @param date - The origin date\n * @param days - The number of days to offset. 'days' can be negative.\n * @returns A new Date object offset from the origin date by the given number of days\n */\nexport function addDays(date, days) {\n var result = new Date(date.getTime());\n result.setDate(result.getDate() + days);\n return result;\n}\n/**\n * Returns a date offset from the given date by the specified number of weeks.\n * @param date - The origin date\n * @param weeks - The number of weeks to offset. 'weeks' can be negative.\n * @returns A new Date object offset from the origin date by the given number of weeks\n */\nexport function addWeeks(date, weeks) {\n return addDays(date, weeks * TimeConstants.DaysInOneWeek);\n}\n/**\n * Returns a date offset from the given date by the specified number of months.\n * The method tries to preserve the day-of-month; however, if the new month does not have enough days\n * to contain the original day-of-month, we'll use the last day of the new month.\n * @param date - The origin date\n * @param months - The number of months to offset. 'months' can be negative.\n * @returns A new Date object offset from the origin date by the given number of months\n */\nexport function addMonths(date, months) {\n var result = new Date(date.getTime());\n var newMonth = result.getMonth() + months;\n result.setMonth(newMonth);\n // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.\n // Loop until we back up to a day the new month has.\n // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)\n if (result.getMonth() !==\n ((newMonth % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear) {\n result = addDays(result, -result.getDate());\n }\n return result;\n}\n/**\n * Returns a date offset from the given date by the specified number of years.\n * The method tries to preserve the day-of-month; however, if the new month does not have enough days\n * to contain the original day-of-month, we'll use the last day of the new month.\n * @param date - The origin date\n * @param years - The number of years to offset. 'years' can be negative.\n * @returns A new Date object offset from the origin date by the given number of years\n */\nexport function addYears(date, years) {\n var result = new Date(date.getTime());\n result.setFullYear(date.getFullYear() + years);\n // We want to maintain the same day-of-month, but that may not be possible if the new month doesn't have enough days.\n // Loop until we back up to a day the new month has.\n // (Weird modulo math is due to Javascript's treatment of negative numbers in modulo)\n if (result.getMonth() !==\n ((date.getMonth() % TimeConstants.MonthInOneYear) + TimeConstants.MonthInOneYear) % TimeConstants.MonthInOneYear) {\n result = addDays(result, -result.getDate());\n }\n return result;\n}\n/**\n * Returns a date that is the first day of the month of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the first day of the month.\n */\nexport function getMonthStart(date) {\n return new Date(date.getFullYear(), date.getMonth(), 1, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is the last day of the month of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the last day of the month.\n */\nexport function getMonthEnd(date) {\n return new Date(date.getFullYear(), date.getMonth() + 1, 0, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is the first day of the year of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the first day of the year.\n */\nexport function getYearStart(date) {\n return new Date(date.getFullYear(), 0, 1, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is the last day of the year of the provided date.\n * @param date - The origin date\n * @returns A new Date object with the day set to the last day of the year.\n */\nexport function getYearEnd(date) {\n return new Date(date.getFullYear() + 1, 0, 0, 0, 0, 0, 0);\n}\n/**\n * Returns a date that is a copy of the given date, aside from the month changing to the given month.\n * The method tries to preserve the day-of-month; however, if the new month does not have enough days\n * to contain the original day-of-month, we'll use the last day of the new month.\n * @param date - The origin date\n * @param month - The 0-based index of the month to set on the date.\n * @returns A new Date object with the given month set.\n */\nexport function setMonth(date, month) {\n return addMonths(date, month - date.getMonth());\n}\n/**\n * Compares two dates, and returns true if the two dates (not accounting for time-of-day) are equal.\n * @returns True if the two dates represent the same date (regardless of time-of-day), false otherwise.\n */\nexport function compareDates(date1, date2) {\n if (!date1 && !date2) {\n return true;\n }\n else if (!date1 || !date2) {\n return false;\n }\n else {\n return (date1.getFullYear() === date2.getFullYear() &&\n date1.getMonth() === date2.getMonth() &&\n date1.getDate() === date2.getDate());\n }\n}\n/**\n * Compare the date parts of two dates\n * @param date1 - The first date to compare\n * @param date2 - The second date to compare\n * @returns A negative value if date1 is earlier than date2, 0 if the dates are equal, or a positive value\n * if date1 is later than date2.\n */\nexport function compareDatePart(date1, date2) {\n return getDatePartHashValue(date1) - getDatePartHashValue(date2);\n}\n/**\n * Gets the date range array including the specified date. The date range array is calculated as the list\n * of dates accounting for the specified first day of the week and date range type.\n * @param date - The input date\n * @param dateRangeType - The desired date range type, i.e., day, week, month, etc.\n * @param firstDayOfWeek - The first day of the week.\n * @param workWeekDays - The allowed days in work week. If not provided, assumes all days are allowed.\n * @param daysToSelectInDayView - The number of days to include when using dateRangeType === DateRangeType.Day\n * for multiday view. Defaults to 1\n * @returns An array of dates representing the date range containing the specified date.\n */\nexport function getDateRangeArray(date, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView) {\n if (daysToSelectInDayView === void 0) { daysToSelectInDayView = 1; }\n var datesArray = [];\n var startDate;\n var endDate = null;\n if (!workWeekDays) {\n workWeekDays = [DayOfWeek.Monday, DayOfWeek.Tuesday, DayOfWeek.Wednesday, DayOfWeek.Thursday, DayOfWeek.Friday];\n }\n daysToSelectInDayView = Math.max(daysToSelectInDayView, 1);\n switch (dateRangeType) {\n case DateRangeType.Day:\n startDate = getDatePart(date);\n endDate = addDays(startDate, daysToSelectInDayView);\n break;\n case DateRangeType.Week:\n case DateRangeType.WorkWeek:\n startDate = getStartDateOfWeek(getDatePart(date), firstDayOfWeek);\n endDate = addDays(startDate, TimeConstants.DaysInOneWeek);\n break;\n case DateRangeType.Month:\n startDate = new Date(date.getFullYear(), date.getMonth(), 1);\n endDate = addMonths(startDate, 1);\n break;\n default:\n throw new Error('Unexpected object: ' + dateRangeType);\n }\n // Populate the dates array with the dates in range\n var nextDate = startDate;\n do {\n if (dateRangeType !== DateRangeType.WorkWeek) {\n // push all days not in work week view\n datesArray.push(nextDate);\n }\n else if (workWeekDays.indexOf(nextDate.getDay()) !== -1) {\n datesArray.push(nextDate);\n }\n nextDate = addDays(nextDate, 1);\n } while (!compareDates(nextDate, endDate));\n return datesArray;\n}\n/**\n * Checks whether the specified date is in the given date range.\n * @param date - The origin date\n * @param dateRange - An array of dates to do the lookup on\n * @returns True if the date matches one of the dates in the specified array, false otherwise.\n */\nexport function isInDateRangeArray(date, dateRange) {\n for (var _i = 0, dateRange_1 = dateRange; _i < dateRange_1.length; _i++) {\n var dateInRange = dateRange_1[_i];\n if (compareDates(date, dateInRange)) {\n return true;\n }\n }\n return false;\n}\n/**\n * Returns the week number for a date.\n * Week numbers are 1 - 52 (53) in a year\n * @param navigatedDate - A date to find the week number for.\n * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)\n * @param firstWeekOfYear - The first week of the year (1-2)\n * @returns The weeks number array for the current month.\n */\nexport function getWeekNumbersInMonth(weeksInMonth, firstDayOfWeek, firstWeekOfYear, navigatedDate) {\n var selectedYear = navigatedDate.getFullYear();\n var selectedMonth = navigatedDate.getMonth();\n var dayOfMonth = 1;\n var fistDayOfMonth = new Date(selectedYear, selectedMonth, dayOfMonth);\n var endOfFirstWeek = dayOfMonth +\n (firstDayOfWeek + TimeConstants.DaysInOneWeek - 1) -\n adjustWeekDay(firstDayOfWeek, fistDayOfMonth.getDay());\n var endOfWeekRange = new Date(selectedYear, selectedMonth, endOfFirstWeek);\n dayOfMonth = endOfWeekRange.getDate();\n var weeksArray = [];\n for (var i = 0; i < weeksInMonth; i++) {\n // Get week number for end of week\n weeksArray.push(getWeekNumber(endOfWeekRange, firstDayOfWeek, firstWeekOfYear));\n dayOfMonth += TimeConstants.DaysInOneWeek;\n endOfWeekRange = new Date(selectedYear, selectedMonth, dayOfMonth);\n }\n return weeksArray;\n}\n/**\n * Returns the week number for a date.\n * Week numbers are 1 - 52 (53) in a year\n * @param date - A date to find the week number for.\n * @param firstDayOfWeek - The first day of the week (0-6, Sunday = 0)\n * @param firstWeekOfYear - The first week of the year (1-2)\n * @returns The week's number in the year.\n */\nexport function getWeekNumber(date, firstDayOfWeek, firstWeekOfYear) {\n // First four-day week of the year - minumum days count\n var fourDayWeek = 4;\n switch (firstWeekOfYear) {\n case FirstWeekOfYear.FirstFullWeek:\n return getWeekOfYearFullDays(date, firstDayOfWeek, TimeConstants.DaysInOneWeek);\n case FirstWeekOfYear.FirstFourDayWeek:\n return getWeekOfYearFullDays(date, firstDayOfWeek, fourDayWeek);\n default:\n return getFirstDayWeekOfYear(date, firstDayOfWeek);\n }\n}\n/**\n * Gets the date for the first day of the week based on the given date assuming\n * the specified first day of the week.\n * @param date - The date to find the beginning of the week date for.\n * @returns A new date object representing the first day of the week containing the input date.\n */\nexport function getStartDateOfWeek(date, firstDayOfWeek) {\n var daysOffset = firstDayOfWeek - date.getDay();\n if (daysOffset > 0) {\n // If first day of week is > date, go 1 week back, to ensure resulting date is in the past.\n daysOffset -= TimeConstants.DaysInOneWeek;\n }\n return addDays(date, daysOffset);\n}\n/**\n * Gets the date for the last day of the week based on the given date assuming\n * the specified first day of the week.\n * @param date - The date to find the beginning of the week date for.\n * @returns A new date object representing the first day of the week containing the input date.\n */\nexport function getEndDateOfWeek(date, firstDayOfWeek) {\n var lastDayOfWeek = firstDayOfWeek - 1 >= 0 ? firstDayOfWeek - 1 : TimeConstants.DaysInOneWeek - 1;\n var daysOffset = lastDayOfWeek - date.getDay();\n if (daysOffset < 0) {\n // If last day of week is < date, go 1 week forward, to ensure resulting date is in the future.\n daysOffset += TimeConstants.DaysInOneWeek;\n }\n return addDays(date, daysOffset);\n}\n/**\n * Gets a new date with the time portion zeroed out, i.e., set to midnight\n * @param date - The origin date\n * @returns A new date with the time set to midnight\n */\nfunction getDatePart(date) {\n return new Date(date.getFullYear(), date.getMonth(), date.getDate());\n}\n/**\n * Helper function to assist in date comparisons\n */\nexport function getDatePartHashValue(date) {\n // Generate date hash value created as sum of Date (up to 31 = 5 bits), Month (up to 11 = 4 bits) and Year.\n // eslint-disable-next-line no-bitwise\n return date.getDate() + (date.getMonth() << 5) + (date.getFullYear() << 9);\n}\n/**\n * Helper function for `getWeekNumber`.\n * Returns week number for a date.\n * @param date - current selected date.\n * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)\n * @param numberOfFullDays - week settings.\n * @returns The week's number in the year.\n */\nfunction getWeekOfYearFullDays(date, firstDayOfWeek, numberOfFullDays) {\n var dayOfYear = getDayOfYear(date) - 1;\n var num = date.getDay() - (dayOfYear % TimeConstants.DaysInOneWeek);\n var lastDayOfPrevYear = new Date(date.getFullYear() - 1, MonthOfYear.December, 31);\n var daysInYear = getDayOfYear(lastDayOfPrevYear) - 1;\n var num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n if (num2 !== 0 && num2 >= numberOfFullDays) {\n num2 -= TimeConstants.DaysInOneWeek;\n }\n var num3 = dayOfYear - num2;\n if (num3 < 0) {\n num -= daysInYear % TimeConstants.DaysInOneWeek;\n num2 = (firstDayOfWeek - num + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n if (num2 !== 0 && num2 + 1 >= numberOfFullDays) {\n num2 -= TimeConstants.DaysInOneWeek;\n }\n num3 = daysInYear - num2;\n }\n return Math.floor(num3 / TimeConstants.DaysInOneWeek + 1);\n}\n/**\n * Helper function for `getWeekNumber`.\n * Returns week number for a date.\n * @param date - current selected date.\n * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)\n * @returns The week's number in the year.\n */\nfunction getFirstDayWeekOfYear(date, firstDayOfWeek) {\n var num = getDayOfYear(date) - 1;\n var num2 = date.getDay() - (num % TimeConstants.DaysInOneWeek);\n var num3 = (num2 - firstDayOfWeek + 2 * TimeConstants.DaysInOneWeek) % TimeConstants.DaysInOneWeek;\n return Math.floor((num + num3) / TimeConstants.DaysInOneWeek + 1);\n}\n/**\n * Helper function for `getWeekNumber`.\n * Returns adjusted week day number when `firstDayOfWeek` is other than Sunday.\n * For Week Day Number comparison checks\n * @param firstDayOfWeek - The first day of week (0-6, Sunday = 0)\n * @param dateWeekDay - shifts number forward to 1 week in case passed as true\n * @returns The day of week adjusted to `firstDayOfWeek`; e.g. when `firstDayOfWeek` is Monday (1),\n * Sunday becomes 7.\n */\nfunction adjustWeekDay(firstDayOfWeek, dateWeekDay) {\n return firstDayOfWeek !== DayOfWeek.Sunday && dateWeekDay < firstDayOfWeek\n ? dateWeekDay + TimeConstants.DaysInOneWeek\n : dateWeekDay;\n}\n/**\n * Returns the day number for a date in a year:\n * the number of days since January 1st in the particular year.\n * @param date - A date to find the day number for.\n * @returns The day's number in the year.\n */\nfunction getDayOfYear(date) {\n var month = date.getMonth();\n var year = date.getFullYear();\n var daysUntilDate = 0;\n for (var i = 0; i < month; i++) {\n daysUntilDate += daysInMonth(i + 1, year);\n }\n daysUntilDate += date.getDate();\n return daysUntilDate;\n}\n/**\n * Returns the number of days in the month\n * @param month - The month number to target (months 1-12).\n * @param year - The year to target.\n * @returns The number of days in the month.\n */\nfunction daysInMonth(month, year) {\n return new Date(year, month, 0).getDate();\n}\n//# sourceMappingURL=dateMath.js.map","import { __spreadArrays } from \"tslib\";\nimport { compareDatePart } from '../dateMath/dateMath';\n/**\n * Generates a list of dates, bounded by min and max dates\n * @param dateRange - input date range\n * @param minDate - min date to limit the range\n * @param maxDate - max date to limit the range\n */\nexport var getBoundedDateRange = function (dateRange, minDate, maxDate) {\n var boundedDateRange = __spreadArrays(dateRange);\n if (minDate) {\n boundedDateRange = boundedDateRange.filter(function (date) { return compareDatePart(date, minDate) >= 0; });\n }\n if (maxDate) {\n boundedDateRange = boundedDateRange.filter(function (date) { return compareDatePart(date, maxDate) <= 0; });\n }\n return boundedDateRange;\n};\n//# sourceMappingURL=getBoundedDateRange.js.map","import { compareDatePart } from '../dateMath/dateMath';\n/**\n * Checks if `date` happens earlier than min date\n * @param date - date to check\n * @param options - object with min date to check against\n */\nexport var isBeforeMinDate = function (date, options) {\n var minDate = options.minDate;\n return minDate ? compareDatePart(minDate, date) >= 1 : false;\n};\n//# sourceMappingURL=isBeforeMinDate.js.map","import { compareDatePart } from '../dateMath/dateMath';\n/**\n * Checks if `date` happens later than max date\n * @param date - date to check\n * @param options - object with max date to check against\n */\nexport var isAfterMaxDate = function (date, options) {\n var maxDate = options.maxDate;\n return maxDate ? compareDatePart(date, maxDate) >= 1 : false;\n};\n//# sourceMappingURL=isAfterMaxDate.js.map","import { compareDates } from '../dateMath/dateMath';\nimport { isBeforeMinDate } from './isBeforeMinDate';\nimport { isAfterMaxDate } from './isAfterMaxDate';\n/**\n * Checks if `date` falls into the restricted `options`\n * @param date - date to check\n * @param options - restriction options (min date, max date and list of restricted dates)\n */\nexport var isRestrictedDate = function (date, options) {\n var restrictedDates = options.restrictedDates, minDate = options.minDate, maxDate = options.maxDate;\n if (!restrictedDates && !minDate && !maxDate) {\n return false;\n }\n var inRestrictedDates = restrictedDates && restrictedDates.some(function (rd) { return compareDates(rd, date); });\n return inRestrictedDates || isBeforeMinDate(date, options) || isAfterMaxDate(date, options);\n};\n//# sourceMappingURL=isRestrictedDate.js.map","import * as React from 'react';\nimport { css, findIndex } from '@fluentui/utilities';\nimport { DAYS_IN_WEEK } from '@fluentui/date-time-utilities';\nexport var CalendarMonthHeaderRow = function (props) {\n var showWeekNumbers = props.showWeekNumbers, strings = props.strings, firstDayOfWeek = props.firstDayOfWeek, allFocusable = props.allFocusable, weeksToShow = props.weeksToShow, weeks = props.weeks, classNames = props.classNames;\n var dayLabels = strings.shortDays.slice();\n var firstOfMonthIndex = findIndex(weeks[1], function (day) { return day.originalDate.getDate() === 1; });\n if (weeksToShow === 1 && firstOfMonthIndex >= 0) {\n // if we only show one week, replace the header with short month name\n var firstOfMonthIndexOffset = (firstOfMonthIndex + firstDayOfWeek) % DAYS_IN_WEEK;\n dayLabels[firstOfMonthIndexOffset] = strings.shortMonths[weeks[1][firstOfMonthIndex].originalDate.getMonth()];\n }\n return (React.createElement(\"tr\", null,\n showWeekNumbers && React.createElement(\"th\", { className: classNames.dayCell }),\n dayLabels.map(function (val, index) {\n var i = (index + firstDayOfWeek) % DAYS_IN_WEEK;\n var label = index === firstOfMonthIndex ? strings.days[i] + ' ' + dayLabels[i] : strings.days[i];\n return (React.createElement(\"th\", { className: css(classNames.dayCell, classNames.weekDayLabelCell), scope: \"col\", key: dayLabels[i] + ' ' + index, title: label, \"aria-label\": label, \"data-is-focusable\": allFocusable ? true : undefined }, dayLabels[i]));\n })));\n};\n//# sourceMappingURL=CalendarMonthHeaderRow.js.map","import { __rest } from \"tslib\";\nimport { isRestrictedDate } from './isRestrictedDate';\nimport { isAfterMaxDate } from './isAfterMaxDate';\nimport { isBeforeMinDate } from './isBeforeMinDate';\nimport { compareDatePart, addDays } from '../dateMath/dateMath';\n/**\n * Returns closest available date given the restriction `options`, or undefined otherwise\n * @param options - list of search options\n */\nexport var findAvailableDate = function (options) {\n var targetDate = options.targetDate, initialDate = options.initialDate, direction = options.direction, restrictedDateOptions = __rest(options, [\"targetDate\", \"initialDate\", \"direction\"]);\n var availableDate = targetDate;\n // if the target date is available, return it immediately\n if (!isRestrictedDate(targetDate, restrictedDateOptions)) {\n return targetDate;\n }\n while (compareDatePart(initialDate, availableDate) !== 0 &&\n isRestrictedDate(availableDate, restrictedDateOptions) &&\n !isAfterMaxDate(availableDate, restrictedDateOptions) &&\n !isBeforeMinDate(availableDate, restrictedDateOptions)) {\n availableDate = addDays(availableDate, direction);\n }\n if (compareDatePart(initialDate, availableDate) !== 0 && !isRestrictedDate(availableDate, restrictedDateOptions)) {\n return availableDate;\n }\n return undefined;\n};\n//# sourceMappingURL=findAvailableDate.js.map","import * as React from 'react';\nimport { KeyCodes, css, getRTLSafeKeyCode } from '@fluentui/utilities';\nimport { addDays, addWeeks, compareDates, findAvailableDate, DateRangeType } from '@fluentui/date-time-utilities';\nexport var CalendarGridDayCell = function (props) {\n var _a;\n var navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, allFocusable = props.allFocusable, strings = props.strings, activeDescendantId = props.activeDescendantId, navigatedDayRef = props.navigatedDayRef, calculateRoundedStyles = props.calculateRoundedStyles, weeks = props.weeks, classNames = props.classNames, day = props.day, dayIndex = props.dayIndex, weekIndex = props.weekIndex, weekCorners = props.weekCorners, ariaHidden = props.ariaHidden, customDayCellRef = props.customDayCellRef, dateRangeType = props.dateRangeType, daysToSelectInDayView = props.daysToSelectInDayView, onSelectDate = props.onSelectDate, restrictedDates = props.restrictedDates, minDate = props.minDate, maxDate = props.maxDate, onNavigateDate = props.onNavigateDate, getDayInfosInRangeOfDay = props.getDayInfosInRangeOfDay, getRefsFromDayInfos = props.getRefsFromDayInfos;\n var cornerStyle = (_a = weekCorners === null || weekCorners === void 0 ? void 0 : weekCorners[weekIndex + '_' + dayIndex]) !== null && _a !== void 0 ? _a : '';\n var isNavigatedDate = compareDates(navigatedDate, day.originalDate);\n var navigateMonthEdge = function (ev, date) {\n var targetDate = undefined;\n var direction = 1; // by default search forward\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.up) {\n targetDate = addWeeks(date, -1);\n direction = -1;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.down) {\n targetDate = addWeeks(date, 1);\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === getRTLSafeKeyCode(KeyCodes.left)) {\n targetDate = addDays(date, -1);\n direction = -1;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === getRTLSafeKeyCode(KeyCodes.right)) {\n targetDate = addDays(date, 1);\n }\n if (!targetDate) {\n // if we couldn't find a target date at all, do nothing\n return;\n }\n var findAvailableDateOptions = {\n initialDate: date,\n targetDate: targetDate,\n direction: direction,\n restrictedDates: restrictedDates,\n minDate: minDate,\n maxDate: maxDate,\n };\n // target date is restricted, search in whatever direction until finding the next possible date,\n // stopping at boundaries\n var nextDate = findAvailableDate(findAvailableDateOptions);\n if (!nextDate) {\n // if no dates available in initial direction, try going backwards\n findAvailableDateOptions.direction = -direction;\n nextDate = findAvailableDate(findAvailableDateOptions);\n }\n // if the nextDate is still inside the same focusZone area, let the focusZone handle setting the focus so we\n // don't jump the view unnecessarily\n var isInCurrentView = weeks &&\n nextDate &&\n weeks.slice(1, weeks.length - 1).some(function (week) {\n return week.some(function (dayToCompare) {\n return compareDates(dayToCompare.originalDate, nextDate);\n });\n });\n if (isInCurrentView) {\n return;\n }\n // else, fire navigation on the date to change the view to show it\n if (nextDate) {\n onNavigateDate(nextDate, true);\n ev.preventDefault();\n }\n };\n var onMouseOverDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef, index) {\n var _a;\n if (dayRef) {\n dayRef.classList.add('ms-CalendarDay-hoverStyle');\n if (!dayInfos[index].isSelected &&\n dateRangeType === DateRangeType.Day &&\n daysToSelectInDayView &&\n daysToSelectInDayView > 1) {\n // remove the static classes first to overwrite them\n dayRef.classList.remove(classNames.bottomLeftCornerDate, classNames.bottomRightCornerDate, classNames.topLeftCornerDate, classNames.topRightCornerDate);\n var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();\n if (classNamesToAdd) {\n (_a = dayRef.classList).add.apply(_a, classNamesToAdd.split(' '));\n }\n }\n }\n });\n };\n var onMouseDownDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef) {\n if (dayRef) {\n dayRef.classList.add('ms-CalendarDay-pressedStyle');\n }\n });\n };\n var onMouseUpDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef) {\n if (dayRef) {\n dayRef.classList.remove('ms-CalendarDay-pressedStyle');\n }\n });\n };\n var onMouseOutDay = function (ev) {\n var dayInfos = getDayInfosInRangeOfDay(day);\n var dayRefs = getRefsFromDayInfos(dayInfos);\n dayRefs.forEach(function (dayRef, index) {\n var _a;\n if (dayRef) {\n dayRef.classList.remove('ms-CalendarDay-hoverStyle');\n dayRef.classList.remove('ms-CalendarDay-pressedStyle');\n if (!dayInfos[index].isSelected &&\n dateRangeType === DateRangeType.Day &&\n daysToSelectInDayView &&\n daysToSelectInDayView > 1) {\n var classNamesToAdd = calculateRoundedStyles(classNames, false, false, index > 0, index < dayRefs.length - 1).trim();\n if (classNamesToAdd) {\n (_a = dayRef.classList).remove.apply(_a, classNamesToAdd.split(' '));\n }\n }\n }\n });\n };\n var onDayKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(day.originalDate);\n }\n else {\n navigateMonthEdge(ev, day.originalDate);\n }\n };\n var ariaLabel = day.originalDate.getDate() +\n ', ' +\n strings.months[day.originalDate.getMonth()] +\n ', ' +\n day.originalDate.getFullYear();\n if (day.isMarked) {\n ariaLabel = ariaLabel + ', ' + strings.dayMarkedAriaLabel;\n }\n return (React.createElement(\"td\", { className: css(classNames.dayCell, weekCorners && cornerStyle, day.isSelected && classNames.daySelected, day.isSelected && 'ms-CalendarDay-daySelected', !day.isInBounds && classNames.dayOutsideBounds, !day.isInMonth && classNames.dayOutsideNavigatedMonth), ref: function (element) {\n customDayCellRef === null || customDayCellRef === void 0 ? void 0 : customDayCellRef(element, day.originalDate, classNames);\n day.setRef(element);\n }, \"aria-hidden\": ariaHidden, \"aria-disabled\": !ariaHidden && !day.isInBounds, onClick: day.isInBounds && !ariaHidden ? day.onSelected : undefined, onMouseOver: !ariaHidden ? onMouseOverDay : undefined, onMouseDown: !ariaHidden ? onMouseDownDay : undefined, onMouseUp: !ariaHidden ? onMouseUpDay : undefined, onMouseOut: !ariaHidden ? onMouseOutDay : undefined, onKeyDown: !ariaHidden ? onDayKeyDown : undefined, role: \"gridcell\", tabIndex: isNavigatedDate ? 0 : undefined, \"aria-readonly\": \"true\", \"aria-current\": day.isSelected ? 'date' : undefined, \"aria-selected\": day.isInBounds ? day.isSelected : undefined, \"data-is-focusable\": !ariaHidden && (allFocusable || (day.isInBounds ? true : undefined)) },\n React.createElement(\"button\", { key: day.key + 'button', \"aria-hidden\": ariaHidden, className: css(classNames.dayButton, day.isToday && classNames.dayIsToday, day.isToday && 'ms-CalendarDay-dayIsToday'), \"aria-label\": ariaLabel, id: isNavigatedDate ? activeDescendantId : undefined, ref: isNavigatedDate ? navigatedDayRef : undefined, disabled: !ariaHidden && !day.isInBounds, type: \"button\", tabIndex: -1, \"data-is-focusable\": \"false\" },\n React.createElement(\"span\", { \"aria-hidden\": \"true\" }, dateTimeFormatter.formatDay(day.originalDate)),\n day.isMarked && React.createElement(\"div\", { \"aria-hidden\": \"true\", className: classNames.dayMarker }))));\n};\n//# sourceMappingURL=CalendarGridDayCell.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { format } from '@fluentui/utilities';\nimport { getWeekNumbersInMonth } from '@fluentui/date-time-utilities';\nimport { CalendarGridDayCell } from './CalendarGridDayCell';\nexport var CalendarGridRow = function (props) {\n var classNames = props.classNames, week = props.week, weeks = props.weeks, weekIndex = props.weekIndex, rowClassName = props.rowClassName, ariaRole = props.ariaRole, showWeekNumbers = props.showWeekNumbers, firstDayOfWeek = props.firstDayOfWeek, firstWeekOfYear = props.firstWeekOfYear, navigatedDate = props.navigatedDate, strings = props.strings;\n var weekNumbers = showWeekNumbers\n ? getWeekNumbersInMonth(weeks.length, firstDayOfWeek, firstWeekOfYear, navigatedDate)\n : null;\n var titleString = weekNumbers\n ? strings.weekNumberFormatString && format(strings.weekNumberFormatString, weekNumbers[weekIndex])\n : '';\n return (React.createElement(\"tr\", { role: ariaRole, className: rowClassName, key: weekIndex + '_' + week[0].key },\n showWeekNumbers && weekNumbers && (React.createElement(\"th\", { className: classNames.weekNumberCell, key: weekIndex, title: titleString, \"aria-label\": titleString, scope: \"row\" },\n React.createElement(\"span\", null, weekNumbers[weekIndex]))),\n week.map(function (day, dayIndex) { return (React.createElement(CalendarGridDayCell, __assign({}, props, { key: day.key, day: day, dayIndex: dayIndex }))); })));\n};\n//# sourceMappingURL=CalendarGridRow.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { getRTL, classNamesFunction } from '@fluentui/utilities';\nimport { FocusZone } from '../../FocusZone';\nimport { getDateRangeArray, getDayGrid, getBoundedDateRange, isRestrictedDate, DAYS_IN_WEEK, compareDates, DateRangeType, } from '@fluentui/date-time-utilities';\nimport { usePrevious, useId } from '@fluentui/react-hooks';\nimport { CalendarMonthHeaderRow } from './CalendarMonthHeaderRow';\nimport { CalendarGridRow } from './CalendarGridRow';\nvar getClassNames = classNamesFunction();\nfunction useDayRefs() {\n var daysRef = React.useRef({});\n var getSetRefCallback = function (dayKey) { return function (element) {\n if (element === null) {\n delete daysRef.current[dayKey];\n }\n else {\n daysRef.current[dayKey] = element;\n }\n }; };\n return [daysRef, getSetRefCallback];\n}\nfunction useWeeks(props, onSelectDate, getSetRefCallback) {\n /**\n * Initial parsing of the given props to generate IDayInfo two dimensional array, which contains a representation\n * of every day in the grid. Convenient for helping with conversions between day refs and Date objects in callbacks.\n */\n var weeks = React.useMemo(function () {\n var _a;\n var weeksGrid = getDayGrid(props);\n var firstVisibleDay = weeksGrid[1][0].originalDate;\n var lastVisibleDay = weeksGrid[weeksGrid.length - 1][6].originalDate;\n var markedDays = ((_a = props.getMarkedDays) === null || _a === void 0 ? void 0 : _a.call(props, firstVisibleDay, lastVisibleDay)) || [];\n /**\n * Weeks is a 2D array. Weeks[0] contains the last week of the prior range,\n * Weeks[weeks.length - 1] contains first week of next range. These are for transition states.\n *\n * Weeks[1... weeks.length - 2] contains the actual visible data\n */\n var returnValue = [];\n for (var weekIndex = 0; weekIndex < weeksGrid.length; weekIndex++) {\n var week = [];\n var _loop_1 = function (dayIndex) {\n var day = weeksGrid[weekIndex][dayIndex];\n var dayInfo = __assign(__assign({ onSelected: function () { return onSelectDate(day.originalDate); }, setRef: getSetRefCallback(day.key) }, day), { isMarked: day.isMarked || (markedDays === null || markedDays === void 0 ? void 0 : markedDays.some(function (markedDay) { return compareDates(day.originalDate, markedDay); })) });\n week.push(dayInfo);\n };\n for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n _loop_1(dayIndex);\n }\n returnValue.push(week);\n }\n return returnValue;\n // TODO: this is missing deps on getSetRefCallback and onSelectDate (and depending on the entire\n // props object may not be a good idea due to likely frequent mutation). It would be easy to\n // fix getSetRefCallback to not mutate every render, but onSelectDate is passed down from\n // Calendar and trying to fix it requires a huge cascade of changes.\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [props]);\n return weeks;\n}\n/**\n * Hook to determine whether to animate the CalendarDayGrid forwards or backwards\n * @returns true if the grid should animate backwards; false otherwise\n */\nfunction useAnimateBackwards(weeks) {\n var previousNavigatedDate = usePrevious(weeks[0][0].originalDate);\n if (!previousNavigatedDate || previousNavigatedDate.getTime() === weeks[0][0].originalDate.getTime()) {\n return undefined;\n }\n else if (previousNavigatedDate <= weeks[0][0].originalDate) {\n return false;\n }\n else {\n return true;\n }\n}\nfunction useWeekCornerStyles(props) {\n /**\n *\n * Section for setting the rounded corner styles on individual day cells. Individual day cells need different\n * corners to be rounded depending on which date range type and where the cell is located in the current grid.\n * If we just round all of the corners, there isn't a good overlap and we get gaps between contiguous day boxes\n * in Edge browser.\n *\n */\n var getWeekCornerStyles = function (classNames, initialWeeks) {\n var weekCornersStyled = {};\n /* need to handle setting all of the corners on arbitrarily shaped blobs\n __\n __|A |\n |B |C |__\n |D |E |F |\n \n in this case, A needs top left rounded, top right rounded\n B needs top left rounded\n C doesn't need any rounding\n D needs bottom left rounded\n E doesn't need any rounding\n F needs top right rounding\n */\n // cut off the animation transition weeks\n var weeks = initialWeeks.slice(1, initialWeeks.length - 1);\n // if there's an item above, lose both top corners. Item below, lose both bottom corners, etc.\n weeks.forEach(function (week, weekIndex) {\n week.forEach(function (day, dayIndex) {\n var above = weeks[weekIndex - 1] &&\n weeks[weekIndex - 1][dayIndex] &&\n isInSameHoverRange(weeks[weekIndex - 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex - 1][dayIndex].isSelected, day.isSelected);\n var below = weeks[weekIndex + 1] &&\n weeks[weekIndex + 1][dayIndex] &&\n isInSameHoverRange(weeks[weekIndex + 1][dayIndex].originalDate, day.originalDate, weeks[weekIndex + 1][dayIndex].isSelected, day.isSelected);\n var left = weeks[weekIndex][dayIndex - 1] &&\n isInSameHoverRange(weeks[weekIndex][dayIndex - 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex - 1].isSelected, day.isSelected);\n var right = weeks[weekIndex][dayIndex + 1] &&\n isInSameHoverRange(weeks[weekIndex][dayIndex + 1].originalDate, day.originalDate, weeks[weekIndex][dayIndex + 1].isSelected, day.isSelected);\n var style = [];\n style.push(calculateRoundedStyles(classNames, above, below, left, right));\n style.push(calculateBorderStyles(classNames, above, below, left, right));\n weekCornersStyled[weekIndex + '_' + dayIndex] = style.join(' ');\n });\n });\n return weekCornersStyled;\n };\n var calculateRoundedStyles = function (classNames, above, below, left, right) {\n var style = [];\n var roundedTopLeft = !above && !left;\n var roundedTopRight = !above && !right;\n var roundedBottomLeft = !below && !left;\n var roundedBottomRight = !below && !right;\n if (roundedTopLeft) {\n style.push(getRTL() ? classNames.topRightCornerDate : classNames.topLeftCornerDate);\n }\n if (roundedTopRight) {\n style.push(getRTL() ? classNames.topLeftCornerDate : classNames.topRightCornerDate);\n }\n if (roundedBottomLeft) {\n style.push(getRTL() ? classNames.bottomRightCornerDate : classNames.bottomLeftCornerDate);\n }\n if (roundedBottomRight) {\n style.push(getRTL() ? classNames.bottomLeftCornerDate : classNames.bottomRightCornerDate);\n }\n return style.join(' ');\n };\n var calculateBorderStyles = function (classNames, above, below, left, right) {\n var style = [];\n if (!above) {\n style.push(classNames.datesAbove);\n }\n if (!below) {\n style.push(classNames.datesBelow);\n }\n if (!left) {\n style.push(getRTL() ? classNames.datesRight : classNames.datesLeft);\n }\n if (!right) {\n style.push(getRTL() ? classNames.datesLeft : classNames.datesRight);\n }\n return style.join(' ');\n };\n var isInSameHoverRange = function (date1, date2, date1Selected, date2Selected) {\n var dateRangeType = props.dateRangeType, firstDayOfWeek = props.firstDayOfWeek, workWeekDays = props.workWeekDays;\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n var dateRangeHoverType = dateRangeType === DateRangeType.WorkWeek ? DateRangeType.Week : dateRangeType;\n // we do not pass daysToSelectInDayView because we handle setting those styles dyanamically in onMouseOver\n var dateRange = getDateRangeArray(date1, dateRangeHoverType, firstDayOfWeek, workWeekDays);\n if (date1Selected !== date2Selected) {\n // if one is selected and the other is not, they can't be in the same range\n return false;\n }\n else if (date1Selected && date2Selected) {\n // if they're both selected at the same time they must be in the same range\n return true;\n }\n // otherwise, both must be unselected, so check the dateRange\n return dateRange.filter(function (date) { return date.getTime() === date2.getTime(); }).length > 0;\n };\n return [getWeekCornerStyles, calculateRoundedStyles];\n}\nexport var CalendarDayGridBase = function (props) {\n var navigatedDayRef = React.useRef(null);\n var activeDescendantId = useId();\n var onSelectDate = function (selectedDate) {\n var _a, _b;\n var firstDayOfWeek = props.firstDayOfWeek, minDate = props.minDate, maxDate = props.maxDate, workWeekDays = props.workWeekDays, daysToSelectInDayView = props.daysToSelectInDayView, restrictedDates = props.restrictedDates;\n var restrictedDatesOptions = { minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates };\n var dateRange = getDateRangeArray(selectedDate, dateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n dateRange = getBoundedDateRange(dateRange, minDate, maxDate);\n dateRange = dateRange.filter(function (d) {\n return !isRestrictedDate(d, restrictedDatesOptions);\n });\n (_a = props.onSelectDate) === null || _a === void 0 ? void 0 : _a.call(props, selectedDate, dateRange);\n (_b = props.onNavigateDate) === null || _b === void 0 ? void 0 : _b.call(props, selectedDate, true);\n };\n var _a = useDayRefs(), daysRef = _a[0], getSetRefCallback = _a[1];\n var weeks = useWeeks(props, onSelectDate, getSetRefCallback);\n var animateBackwards = useAnimateBackwards(weeks);\n var _b = useWeekCornerStyles(props), getWeekCornerStyles = _b[0], calculateRoundedStyles = _b[1];\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = navigatedDayRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n /**\n *\n * Section for setting hover/pressed styles. Because we want arbitrary blobs of days to be selectable, to support\n * highlighting every day in the month for month view, css :hover style isn't enough, so we need mouse callbacks\n * to set classnames on all relevant child refs to apply the styling\n *\n */\n var getDayInfosInRangeOfDay = function (dayToCompare) {\n // The hover state looks weird with non-contiguous days in work week view. In work week, show week hover state\n var dateRangeHoverType = getDateRangeTypeToUse(props.dateRangeType, props.workWeekDays);\n // gets all the dates for the given date range type that are in the same date range as the given day\n var dateRange = getDateRangeArray(dayToCompare.originalDate, dateRangeHoverType, props.firstDayOfWeek, props.workWeekDays, props.daysToSelectInDayView).map(function (date) { return date.getTime(); });\n // gets all the day refs for the given dates\n var dayInfosInRange = weeks.reduce(function (accumulatedValue, currentWeek) {\n return accumulatedValue.concat(currentWeek.filter(function (weekDay) { return dateRange.indexOf(weekDay.originalDate.getTime()) !== -1; }));\n }, []);\n return dayInfosInRange;\n };\n var getRefsFromDayInfos = function (dayInfosInRange) {\n var dayRefs = [];\n dayRefs = dayInfosInRange.map(function (dayInfo) { return daysRef.current[dayInfo.key]; });\n return dayRefs;\n };\n var styles = props.styles, theme = props.theme, className = props.className, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, labelledBy = props.labelledBy, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animationDirection = props.animationDirection;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n dateRangeType: dateRangeType,\n showWeekNumbers: showWeekNumbers,\n lightenDaysOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth === undefined ? true : lightenDaysOutsideNavigatedMonth,\n animationDirection: animationDirection,\n animateBackwards: animateBackwards,\n });\n // When the month is highlighted get the corner dates so that styles can be added to them\n var weekCorners = getWeekCornerStyles(classNames, weeks);\n var partialWeekProps = {\n weeks: weeks,\n navigatedDayRef: navigatedDayRef,\n calculateRoundedStyles: calculateRoundedStyles,\n activeDescendantId: activeDescendantId,\n classNames: classNames,\n weekCorners: weekCorners,\n getDayInfosInRangeOfDay: getDayInfosInRangeOfDay,\n getRefsFromDayInfos: getRefsFromDayInfos,\n };\n return (React.createElement(FocusZone, { className: classNames.wrapper },\n React.createElement(\"table\", { className: classNames.table, \"aria-multiselectable\": \"false\", \"aria-labelledby\": labelledBy, \"aria-activedescendant\": activeDescendantId, role: \"grid\" },\n React.createElement(\"tbody\", null,\n React.createElement(CalendarMonthHeaderRow, __assign({}, props, { classNames: classNames, weeks: weeks })),\n React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { week: weeks[0], weekIndex: -1, rowClassName: classNames.firstTransitionWeek, ariaRole: \"presentation\", ariaHidden: true })),\n weeks.slice(1, weeks.length - 1).map(function (week, weekIndex) { return (React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { key: weekIndex, week: week, weekIndex: weekIndex, rowClassName: classNames.weekRow }))); }),\n React.createElement(CalendarGridRow, __assign({}, props, partialWeekProps, { week: weeks[weeks.length - 1], weekIndex: -2, rowClassName: classNames.lastTransitionWeek, ariaRole: \"presentation\", ariaHidden: true }))))));\n};\nCalendarDayGridBase.displayName = 'CalendarDayGridBase';\n/**\n * When given work week, if the days are non-contiguous, the hover states look really weird. So for non-contiguous\n * work weeks, we'll just show week view instead.\n */\nfunction getDateRangeTypeToUse(dateRangeType, workWeekDays) {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n var sortedWWDays = workWeekDays.slice().sort();\n var isContiguous = true;\n for (var i = 1; i < sortedWWDays.length; i++) {\n if (sortedWWDays[i] !== sortedWWDays[i - 1] + 1) {\n isContiguous = false;\n break;\n }\n }\n if (!isContiguous || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n return dateRangeType;\n}\n//# sourceMappingURL=CalendarDayGrid.base.js.map","import { addDays, compareDates, getDateRangeArray, isInDateRangeArray } from '../dateMath/dateMath';\nimport { DAYS_IN_WEEK } from '../dateValues/dateValues';\nimport { getDateRangeTypeToUse } from './getDateRangeTypeToUse';\nimport { getBoundedDateRange } from './getBoundedDateRange';\nimport { isRestrictedDate } from './isRestrictedDate';\n/**\n * Generates a grid of days, given the `options`.\n * Returns one additional week at the begining from the previous range\n * and one at the end from the future range\n * @param options - parameters to specify date related restrictions for the resulting grid\n */\nexport var getDayGrid = function (options) {\n var selectedDate = options.selectedDate, dateRangeType = options.dateRangeType, firstDayOfWeek = options.firstDayOfWeek, today = options.today, minDate = options.minDate, maxDate = options.maxDate, weeksToShow = options.weeksToShow, workWeekDays = options.workWeekDays, daysToSelectInDayView = options.daysToSelectInDayView, restrictedDates = options.restrictedDates, markedDays = options.markedDays;\n var restrictedDateOptions = { minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates };\n var todaysDate = today || new Date();\n var navigatedDate = options.navigatedDate ? options.navigatedDate : todaysDate;\n var date;\n if (weeksToShow && weeksToShow <= 4) {\n // if showing less than a full month, just use date == navigatedDate\n date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), navigatedDate.getDate());\n }\n else {\n date = new Date(navigatedDate.getFullYear(), navigatedDate.getMonth(), 1);\n }\n var weeks = [];\n // Cycle the date backwards to get to the first day of the week.\n while (date.getDay() !== firstDayOfWeek) {\n date.setDate(date.getDate() - 1);\n }\n // add the transition week as last week of previous range\n date = addDays(date, -DAYS_IN_WEEK);\n // a flag to indicate whether all days of the week are outside the month\n var isAllDaysOfWeekOutOfMonth = false;\n // in work week view if the days aren't contiguous we use week view instead\n var selectedDateRangeType = getDateRangeTypeToUse(dateRangeType, workWeekDays, firstDayOfWeek);\n var selectedDates = [];\n if (selectedDate) {\n selectedDates = getDateRangeArray(selectedDate, selectedDateRangeType, firstDayOfWeek, workWeekDays, daysToSelectInDayView);\n selectedDates = getBoundedDateRange(selectedDates, minDate, maxDate);\n }\n var shouldGetWeeks = true;\n for (var weekIndex = 0; shouldGetWeeks; weekIndex++) {\n var week = [];\n isAllDaysOfWeekOutOfMonth = true;\n var _loop_1 = function (dayIndex) {\n var originalDate = new Date(date.getTime());\n var dayInfo = {\n key: date.toString(),\n date: date.getDate().toString(),\n originalDate: originalDate,\n isInMonth: date.getMonth() === navigatedDate.getMonth(),\n isToday: compareDates(todaysDate, date),\n isSelected: isInDateRangeArray(date, selectedDates),\n isInBounds: !isRestrictedDate(date, restrictedDateOptions),\n isMarked: (markedDays === null || markedDays === void 0 ? void 0 : markedDays.some(function (markedDay) { return compareDates(originalDate, markedDay); })) || false,\n };\n week.push(dayInfo);\n if (dayInfo.isInMonth) {\n isAllDaysOfWeekOutOfMonth = false;\n }\n date.setDate(date.getDate() + 1);\n };\n for (var dayIndex = 0; dayIndex < DAYS_IN_WEEK; dayIndex++) {\n _loop_1(dayIndex);\n }\n // We append the condition of the loop depending upon the showSixWeeksByDefault prop.\n shouldGetWeeks = weeksToShow ? weekIndex < weeksToShow + 1 : !isAllDaysOfWeekOutOfMonth || weekIndex === 0;\n // we don't check shouldGetWeeks before pushing because we want to add one extra week for transition state\n weeks.push(week);\n }\n return weeks;\n};\n//# sourceMappingURL=getDayGrid.js.map","import { DateRangeType } from '../dateValues/dateValues';\nimport { isContiguous } from './isContiguous';\n/**\n * Return corrected date range type, given `dateRangeType` and list of working days.\n * For non-contiguous working days and working week range type, returns general week range type.\n * For other cases returns input date range type.\n * @param dateRangeType - input type of range\n * @param workWeekDays - list of working days in a week\n */\nexport var getDateRangeTypeToUse = function (dateRangeType, workWeekDays, firstDayOfWeek) {\n if (workWeekDays && dateRangeType === DateRangeType.WorkWeek) {\n if (!isContiguous(workWeekDays, true, firstDayOfWeek) || workWeekDays.length === 0) {\n return DateRangeType.Week;\n }\n }\n return dateRangeType;\n};\n//# sourceMappingURL=getDateRangeTypeToUse.js.map","/**\n * Returns whether provided week days are contiguous.\n * @param days - list of days in a week\n * @param isSingleWeek - decides whether the contiguous logic applies across week boundaries or not\n * @param firstDayOfWeek - decides which day of week is the first one in the order.\n */\nexport var isContiguous = function (days, isSingleWeek, firstDayOfWeek) {\n var daySet = new Set(days);\n var amountOfNoNeighbors = 0;\n for (var _i = 0, days_1 = days; _i < days_1.length; _i++) {\n var day = days_1[_i];\n var nextDay = (day + 1) % 7;\n if (!(daySet.has(nextDay) && (!isSingleWeek || firstDayOfWeek !== nextDay))) {\n amountOfNoNeighbors++;\n }\n }\n // In case the full week is provided, then each day has a neighbor\n //, otherwise the last day does not have a neighbor.\n return amountOfNoNeighbors < 2;\n};\n//# sourceMappingURL=isContiguous.js.map","/**\n * {@docCategory Calendar}\n */\nexport var AnimationDirection;\n(function (AnimationDirection) {\n /**\n * Grid will transition out and in horizontally\n */\n AnimationDirection[AnimationDirection[\"Horizontal\"] = 0] = \"Horizontal\";\n /**\n * Grid will transition out and in vertically\n */\n AnimationDirection[AnimationDirection[\"Vertical\"] = 1] = \"Vertical\";\n})(AnimationDirection || (AnimationDirection = {}));\n//# sourceMappingURL=Calendar.types.js.map","import { __assign } from \"tslib\";\nimport { FontSizes, FontWeights, getFocusStyle, getGlobalClassNames, AnimationStyles, keyframes, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';\nimport { DateRangeType } from '@fluentui/date-time-utilities';\nimport { AnimationDirection } from '../Calendar/Calendar.types';\nvar GlobalClassNames = {\n hoverStyle: 'ms-CalendarDay-hoverStyle',\n pressedStyle: 'ms-CalendarDay-pressedStyle',\n dayIsTodayStyle: 'ms-CalendarDay-dayIsToday',\n daySelectedStyle: 'ms-CalendarDay-daySelected',\n};\nvar transitionRowDisappearance = keyframes({\n '100%': {\n width: 0,\n height: 0,\n overflow: 'hidden',\n },\n '99.9%': {\n width: '100%',\n height: 28,\n overflow: 'visible',\n },\n '0%': {\n width: '100%',\n height: 28,\n overflow: 'visible',\n },\n});\nexport var styles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;\n var theme = props.theme, dateRangeType = props.dateRangeType, showWeekNumbers = props.showWeekNumbers, lightenDaysOutsideNavigatedMonth = props.lightenDaysOutsideNavigatedMonth, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var rowAnimationStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection === AnimationDirection.Horizontal) {\n rowAnimationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;\n }\n else {\n rowAnimationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;\n }\n }\n var firstTransitionRowAnimationStyle = {};\n var lastTransitionRowAnimationStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection !== AnimationDirection.Horizontal) {\n firstTransitionRowAnimationStyle = animateBackwards ? { animationName: '' } : AnimationStyles.slideUpOut20;\n lastTransitionRowAnimationStyle = animateBackwards ? AnimationStyles.slideDownOut20 : { animationName: '' };\n }\n }\n var disabledStyle = {\n selectors: {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n },\n };\n return {\n wrapper: {\n paddingBottom: 10,\n },\n table: [\n {\n textAlign: 'center',\n borderCollapse: 'collapse',\n borderSpacing: '0',\n tableLayout: 'fixed',\n fontSize: 'inherit',\n marginTop: 4,\n width: 196,\n position: 'relative',\n paddingBottom: 10,\n },\n showWeekNumbers && {\n width: 226,\n },\n ],\n dayCell: {\n margin: 0,\n padding: 0,\n width: 28,\n height: 28,\n lineHeight: 28,\n fontSize: FontSizes.small,\n fontWeight: FontWeights.regular,\n color: palette.neutralPrimary,\n cursor: 'pointer',\n position: 'relative',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'Window', zIndex: 0 }, getHighContrastNoAdjustStyle()),\n _a['&.' + classNames.hoverStyle] = {\n backgroundColor: palette.neutralLighter,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n zIndex: 3,\n backgroundColor: 'Window',\n outline: '1px solid Highlight',\n },\n _b),\n },\n _a['&.' + classNames.pressedStyle] = {\n backgroundColor: palette.neutralLight,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n backgroundColor: 'Window',\n },\n _c),\n },\n _a['&.' + classNames.pressedStyle + '.' + classNames.hoverStyle] = {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n backgroundColor: 'Window',\n outline: '1px solid Highlight',\n },\n _d),\n },\n _a),\n },\n daySelected: [\n dateRangeType !== DateRangeType.Month && {\n backgroundColor: palette.neutralLight + '!important',\n selectors: (_e = {\n '&:after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n left: 0,\n right: 0,\n }\n },\n _e['&:hover, &.' + classNames.hoverStyle + ', &.' + classNames.pressedStyle] = (_f = {\n backgroundColor: palette.neutralLight + '!important'\n },\n _f[HighContrastSelector] = {\n color: 'HighlightText!important',\n background: 'Highlight!important',\n },\n _f),\n _e[HighContrastSelector] = __assign({ background: 'Highlight!important', color: 'HighlightText!important', borderColor: 'Highlight!important' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n ],\n weekRow: rowAnimationStyle,\n weekDayLabelCell: AnimationStyles.fadeIn200,\n weekNumberCell: {\n margin: 0,\n padding: 0,\n borderRight: '1px solid',\n borderColor: palette.neutralLight,\n backgroundColor: palette.neutralLighterAlt,\n color: palette.neutralSecondary,\n boxSizing: 'border-box',\n width: 28,\n height: 28,\n fontWeight: FontWeights.regular,\n fontSize: FontSizes.small,\n },\n dayOutsideBounds: disabledStyle,\n dayOutsideNavigatedMonth: lightenDaysOutsideNavigatedMonth && {\n color: palette.neutralSecondary,\n fontWeight: FontWeights.regular,\n },\n dayButton: [\n getFocusStyle(theme, { inset: -3 }),\n {\n width: 24,\n height: 24,\n lineHeight: 24,\n fontSize: FontSizes.small,\n fontWeight: 'inherit',\n borderRadius: 2,\n border: 'none',\n padding: 0,\n color: 'inherit',\n backgroundColor: 'transparent',\n cursor: 'pointer',\n overflow: 'visible',\n selectors: {\n span: {\n height: 'inherit',\n lineHeight: 'inherit',\n },\n },\n },\n ],\n dayIsToday: {\n backgroundColor: palette.themePrimary + '!important',\n borderRadius: '100%',\n color: palette.white + '!important',\n fontWeight: (FontWeights.semibold + '!important'),\n selectors: (_g = {},\n _g[HighContrastSelector] = __assign({ background: 'WindowText!important', color: 'Window!important', borderColor: 'WindowText!important' }, getHighContrastNoAdjustStyle()),\n _g),\n },\n firstTransitionWeek: __assign(__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden' }, firstTransitionRowAnimationStyle), { animationName: firstTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),\n lastTransitionWeek: __assign(__assign({ position: 'absolute', opacity: 0, width: 0, height: 0, overflow: 'hidden', marginTop: -28 }, lastTransitionRowAnimationStyle), { animationName: lastTransitionRowAnimationStyle.animationName + ',' + transitionRowDisappearance }),\n dayMarker: {\n width: 4,\n height: 4,\n backgroundColor: palette.neutralSecondary,\n borderRadius: '100%',\n bottom: 1,\n left: 0,\n right: 0,\n position: 'absolute',\n margin: 'auto',\n selectors: (_h = {},\n _h['.' + classNames.dayIsTodayStyle + ' &'] = {\n backgroundColor: palette.white,\n selectors: (_j = {},\n _j[HighContrastSelector] = {\n backgroundColor: 'Window',\n },\n _j),\n },\n _h['.' + classNames.daySelectedStyle + ' &'] = {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n backgroundColor: 'HighlightText',\n },\n _k),\n },\n _h[HighContrastSelector] = __assign({ backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _h),\n },\n topRightCornerDate: {\n borderTopRightRadius: '2px',\n },\n topLeftCornerDate: {\n borderTopLeftRadius: '2px',\n },\n bottomRightCornerDate: {\n borderBottomRightRadius: '2px',\n },\n bottomLeftCornerDate: {\n borderBottomLeftRadius: '2px',\n },\n datesAbove: {\n '&:after': {\n borderTop: \"1px solid \" + palette.neutralSecondary,\n },\n },\n datesBelow: {\n '&:after': {\n borderBottom: \"1px solid \" + palette.neutralSecondary,\n },\n },\n datesLeft: {\n '&:after': {\n borderLeft: \"1px solid \" + palette.neutralSecondary,\n },\n },\n datesRight: {\n '&:after': {\n borderRight: \"1px solid \" + palette.neutralSecondary,\n },\n },\n };\n};\n//# sourceMappingURL=CalendarDayGrid.styles.js.map","import { CalendarDayGridBase } from './CalendarDayGrid.base';\nimport { styles } from './CalendarDayGrid.styles';\nimport { styled } from '../../Utilities';\nexport var CalendarDayGrid = styled(CalendarDayGridBase, styles, undefined, { scope: 'CalendarDayGrid' });\n//# sourceMappingURL=CalendarDayGrid.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, css, classNamesFunction, format } from '@fluentui/utilities';\nimport { Icon } from '../../../Icon';\nimport { addMonths, compareDatePart, getMonthStart, getMonthEnd } from '@fluentui/date-time-utilities';\nimport { CalendarDayGrid } from '../../CalendarDayGrid/CalendarDayGrid';\nimport { useId } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nexport var CalendarDayBase = function (props) {\n var dayGrid = React.useRef(null);\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = dayGrid.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n var strings = props.strings, navigatedDate = props.navigatedDate, dateTimeFormatter = props.dateTimeFormatter, styles = props.styles, theme = props.theme, className = props.className, onHeaderSelect = props.onHeaderSelect, showSixWeeksByDefault = props.showSixWeeksByDefault, minDate = props.minDate, maxDate = props.maxDate, restrictedDates = props.restrictedDates, onNavigateDate = props.onNavigateDate, showWeekNumbers = props.showWeekNumbers, dateRangeType = props.dateRangeType, animationDirection = props.animationDirection;\n var monthAndYearId = useId();\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n headerIsClickable: !!onHeaderSelect,\n showWeekNumbers: showWeekNumbers,\n animationDirection: animationDirection,\n });\n var monthAndYear = dateTimeFormatter.formatMonthYear(navigatedDate, strings);\n var HeaderButtonComponentType = onHeaderSelect ? 'button' : 'div';\n var headerAriaLabel = strings.yearPickerHeaderAriaLabel\n ? format(strings.yearPickerHeaderAriaLabel, monthAndYear)\n : monthAndYear;\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(\"div\", { className: classNames.header },\n React.createElement(HeaderButtonComponentType\n // if this component rerenders when text changes, aria-live will not be announced, so make key consistent\n , { \"aria-live\": \"polite\", \"aria-atomic\": \"true\", \"aria-label\": onHeaderSelect ? headerAriaLabel : undefined, key: monthAndYear, className: classNames.monthAndYear, onClick: onHeaderSelect, \"data-is-focusable\": !!onHeaderSelect, tabIndex: onHeaderSelect ? 0 : -1, onKeyDown: onButtonKeyDown(onHeaderSelect), type: \"button\" },\n React.createElement(\"span\", { id: monthAndYearId }, monthAndYear)),\n React.createElement(CalendarDayNavigationButtons, __assign({}, props, { classNames: classNames }))),\n React.createElement(CalendarDayGrid, __assign({}, props, { styles: styles, componentRef: dayGrid, strings: strings, navigatedDate: navigatedDate, weeksToShow: showSixWeeksByDefault ? 6 : undefined, dateTimeFormatter: dateTimeFormatter, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, onNavigateDate: onNavigateDate, labelledBy: monthAndYearId, dateRangeType: dateRangeType }))));\n};\nCalendarDayBase.displayName = 'CalendarDayBase';\nvar CalendarDayNavigationButtons = function (props) {\n var _a, _b;\n var minDate = props.minDate, maxDate = props.maxDate, navigatedDate = props.navigatedDate, allFocusable = props.allFocusable, strings = props.strings, navigationIcons = props.navigationIcons, showCloseButton = props.showCloseButton, classNames = props.classNames, onNavigateDate = props.onNavigateDate, onDismiss = props.onDismiss;\n var onSelectNextMonth = function () {\n onNavigateDate(addMonths(navigatedDate, 1), false);\n };\n var onSelectPrevMonth = function () {\n onNavigateDate(addMonths(navigatedDate, -1), false);\n };\n var leftNavigationIcon = navigationIcons.leftNavigation;\n var rightNavigationIcon = navigationIcons.rightNavigation;\n var closeNavigationIcon = navigationIcons.closeIcon;\n // determine if previous/next months are in bounds\n var prevMonthInBounds = minDate ? compareDatePart(minDate, getMonthStart(navigatedDate)) < 0 : true;\n var nextMonthInBounds = maxDate ? compareDatePart(getMonthEnd(navigatedDate), maxDate) < 0 : true;\n // use aria-disabled instead of disabled so focus is not lost\n // when a prev/next button becomes disabled after being clicked\n return (React.createElement(\"div\", { className: classNames.monthComponents },\n React.createElement(\"button\", { className: css(classNames.headerIconButton, (_a = {},\n _a[classNames.disabledStyle] = !prevMonthInBounds,\n _a)), tabIndex: prevMonthInBounds ? undefined : allFocusable ? 0 : -1, \"aria-disabled\": !prevMonthInBounds, onClick: prevMonthInBounds ? onSelectPrevMonth : undefined, onKeyDown: prevMonthInBounds ? onButtonKeyDown(onSelectPrevMonth) : undefined, title: strings.prevMonthAriaLabel\n ? strings.prevMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, -1).getMonth()]\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: leftNavigationIcon })),\n React.createElement(\"button\", { className: css(classNames.headerIconButton, (_b = {},\n _b[classNames.disabledStyle] = !nextMonthInBounds,\n _b)), tabIndex: nextMonthInBounds ? undefined : allFocusable ? 0 : -1, \"aria-disabled\": !nextMonthInBounds, onClick: nextMonthInBounds ? onSelectNextMonth : undefined, onKeyDown: nextMonthInBounds ? onButtonKeyDown(onSelectNextMonth) : undefined, title: strings.nextMonthAriaLabel\n ? strings.nextMonthAriaLabel + ' ' + strings.months[addMonths(navigatedDate, 1).getMonth()]\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: rightNavigationIcon })),\n showCloseButton && (React.createElement(\"button\", { className: css(classNames.headerIconButton), onClick: onDismiss, onKeyDown: onButtonKeyDown(onDismiss), title: strings.closeButtonAriaLabel, type: \"button\" },\n React.createElement(Icon, { iconName: closeNavigationIcon })))));\n};\nCalendarDayNavigationButtons.displayName = 'CalendarDayNavigationButtons';\nvar onButtonKeyDown = function (callback) { return function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n callback === null || callback === void 0 ? void 0 : callback();\n break;\n }\n}; };\n//# sourceMappingURL=CalendarDay.base.js.map","import { CalendarDayBase } from './CalendarDay.base';\nimport { styles } from './CalendarDay.styles';\nimport { styled } from '../../../Utilities';\nexport var CalendarDay = styled(CalendarDayBase, styles, undefined, {\n scope: 'CalendarDay',\n});\n//# sourceMappingURL=CalendarDay.js.map","import { __assign } from \"tslib\";\nimport { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles, HighContrastSelector, } from '@fluentui/style-utilities';\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, headerIsClickable = props.headerIsClickable, showWeekNumbers = props.showWeekNumbers;\n var palette = theme.palette;\n var disabledStyle = {\n selectors: (_a = {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n }\n },\n _a[HighContrastSelector] = {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n _a),\n };\n return {\n root: [\n normalize,\n {\n width: 196,\n padding: 12,\n boxSizing: 'content-box',\n },\n showWeekNumbers && {\n width: 226,\n },\n className,\n ],\n header: {\n position: 'relative',\n display: 'inline-flex',\n height: 28,\n lineHeight: 44,\n width: '100%',\n },\n monthAndYear: [\n getFocusStyle(theme, { inset: 1 }),\n __assign(__assign({}, AnimationStyles.fadeIn200), { alignItems: 'center', fontSize: FontSizes.medium, fontFamily: 'inherit', color: palette.neutralPrimary, display: 'inline-block', flexGrow: 1, fontWeight: FontWeights.semibold, padding: '0 4px 0 10px', border: 'none', backgroundColor: 'transparent', borderRadius: 2, lineHeight: 28, overflow: 'hidden', whiteSpace: 'nowrap', textAlign: 'left', textOverflow: 'ellipsis' }),\n headerIsClickable && {\n selectors: {\n '&:hover': {\n cursor: 'pointer',\n background: palette.neutralLight,\n color: palette.black,\n },\n },\n },\n ],\n monthComponents: {\n display: 'inline-flex',\n alignSelf: 'flex-end',\n },\n headerIconButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n width: 28,\n height: 28,\n display: 'block',\n textAlign: 'center',\n lineHeight: 28,\n fontSize: FontSizes.small,\n fontFamily: 'inherit',\n color: palette.neutralPrimary,\n borderRadius: 2,\n position: 'relative',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n overflow: 'visible',\n selectors: {\n '&:hover': {\n color: palette.neutralDark,\n backgroundColor: palette.neutralLight,\n cursor: 'pointer',\n outline: '1px solid transparent',\n },\n },\n },\n ],\n disabledStyle: disabledStyle,\n };\n};\n//# sourceMappingURL=CalendarDay.styles.js.map","import { __assign } from \"tslib\";\nimport { normalize, FontSizes, FontWeights, getFocusStyle, AnimationStyles, HighContrastSelector, getHighContrastNoAdjustStyle, } from '@fluentui/style-utilities';\nimport { AnimationDirection } from '../Calendar.types';\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g;\n var className = props.className, theme = props.theme, hasHeaderClickCallback = props.hasHeaderClickCallback, highlightCurrent = props.highlightCurrent, highlightSelected = props.highlightSelected, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;\n var palette = theme.palette;\n var animationStyle = {};\n if (animateBackwards !== undefined) {\n if (animationDirection === AnimationDirection.Horizontal) {\n animationStyle = animateBackwards ? AnimationStyles.slideRightIn20 : AnimationStyles.slideLeftIn20;\n }\n else {\n animationStyle = animateBackwards ? AnimationStyles.slideDownIn20 : AnimationStyles.slideUpIn20;\n }\n }\n var headerAnimationStyle = animateBackwards !== undefined ? AnimationStyles.fadeIn200 : {};\n return {\n root: [\n normalize,\n {\n width: 196,\n padding: 12,\n boxSizing: 'content-box',\n overflow: 'hidden',\n },\n className,\n ],\n headerContainer: {\n display: 'flex',\n },\n currentItemButton: [\n getFocusStyle(theme, { inset: -1 }),\n __assign(__assign({}, headerAnimationStyle), { fontSize: FontSizes.medium, fontWeight: FontWeights.semibold, fontFamily: 'inherit', textAlign: 'left', backgroundColor: 'transparent', flexGrow: 1, padding: '0 4px 0 10px', border: 'none', overflow: 'visible' }),\n hasHeaderClickCallback && {\n selectors: {\n '&:hover, &:active': {\n cursor: !hasHeaderClickCallback ? 'default' : 'pointer',\n color: palette.neutralDark,\n outline: '1px solid transparent',\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n navigationButtonsContainer: {\n display: 'flex',\n alignItems: 'center',\n },\n navigationButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n fontFamily: 'inherit',\n width: 28,\n minWidth: 28,\n height: 28,\n minHeight: 28,\n display: 'block',\n textAlign: 'center',\n lineHeight: 28,\n fontSize: FontSizes.small,\n color: palette.neutralPrimary,\n borderRadius: 2,\n position: 'relative',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n overflow: 'visible',\n selectors: {\n '&:hover': {\n color: palette.neutralDark,\n cursor: 'pointer',\n outline: '1px solid transparent',\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n gridContainer: {\n marginTop: 4,\n },\n buttonRow: __assign(__assign({}, animationStyle), { marginBottom: 16, selectors: {\n '&:nth-child(n + 3)': {\n marginBottom: 0,\n },\n } }),\n itemButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n width: 40,\n height: 40,\n minWidth: 40,\n minHeight: 40,\n lineHeight: 40,\n fontSize: FontSizes.small,\n fontFamily: 'inherit',\n padding: 0,\n margin: '0 12px 0 0',\n color: palette.neutralPrimary,\n backgroundColor: 'transparent',\n border: 'none',\n borderRadius: 2,\n overflow: 'visible',\n selectors: {\n '&:nth-child(4n + 4)': {\n marginRight: 0,\n },\n '&:nth-child(n + 9)': {\n marginBottom: 0,\n },\n '& div': {\n fontWeight: FontWeights.regular,\n },\n '&:hover': {\n color: palette.neutralDark,\n backgroundColor: palette.neutralLight,\n cursor: 'pointer',\n outline: '1px solid transparent',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ background: 'Window', color: 'WindowText', outline: '1px solid Highlight' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n '&:active': {\n backgroundColor: palette.themeLight,\n selectors: (_b = {},\n _b[HighContrastSelector] = __assign({ background: 'Window', color: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _b),\n },\n },\n },\n ],\n current: highlightCurrent\n ? {\n color: palette.white,\n backgroundColor: palette.themePrimary,\n selectors: (_c = {\n '& div': {\n fontWeight: FontWeights.semibold,\n },\n '&:hover': {\n backgroundColor: palette.themePrimary,\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ backgroundColor: 'WindowText', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _d),\n }\n },\n _c[HighContrastSelector] = __assign({ backgroundColor: 'WindowText', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _c),\n }\n : {},\n selected: highlightSelected\n ? {\n color: palette.neutralPrimary,\n backgroundColor: palette.themeLight,\n fontWeight: FontWeights.semibold,\n selectors: (_e = {\n '& div': {\n fontWeight: FontWeights.semibold,\n },\n '&:hover, &:active': {\n backgroundColor: palette.themeLight,\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ color: 'Window', background: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _f),\n }\n },\n _e[HighContrastSelector] = __assign({ background: 'Highlight', color: 'Window' }, getHighContrastNoAdjustStyle()),\n _e),\n }\n : {},\n disabled: {\n selectors: (_g = {\n '&, &:disabled, & button': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n }\n },\n _g[HighContrastSelector] = {\n color: 'GrayText',\n forcedColorAdjust: 'none',\n },\n _g),\n },\n };\n};\n//# sourceMappingURL=CalendarPicker.styles.js.map","import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles';\nexport var getStyles = function (props) {\n /* Return styles from the base class.\n * If this component has extra styles not in the base, apply them here i.e.:\n * const myStyle: IStyle = {\n * display: \"block\"\n * }; *\n * return {...getPickerStyles(props), myStyle};\n */\n return getPickerStyles(props);\n};\n//# sourceMappingURL=CalendarMonth.styles.js.map","import { DEFAULT_CALENDAR_STRINGS } from '@fluentui/date-time-utilities';\nexport var defaultCalendarStrings = DEFAULT_CALENDAR_STRINGS;\n/**\n * @deprecated Use `defaultCalendarStrings`\n */\nexport var defaultDayPickerStrings = defaultCalendarStrings;\nexport var defaultCalendarNavigationIcons = {\n leftNavigation: 'Up',\n rightNavigation: 'Down',\n closeIcon: 'CalculatorMultiply',\n};\n//# sourceMappingURL=defaults.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, getRTL, classNamesFunction, css, format } from '../../../Utilities';\nimport { FocusZone } from '../../../FocusZone';\nimport { Icon } from '../../../Icon';\nimport { usePrevious } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from '../defaults';\nvar getClassNames = classNamesFunction();\nvar CELL_COUNT = 12;\nvar CELLS_PER_ROW = 4;\nvar DefaultCalendarYearStrings = {\n prevRangeAriaLabel: undefined,\n nextRangeAriaLabel: undefined,\n};\nvar CalendarYearGridCell = function (props) {\n var _a;\n var _b;\n var styles = props.styles, theme = props.theme, className = props.className, highlightCurrentYear = props.highlightCurrentYear, highlightSelectedYear = props.highlightSelectedYear, year = props.year, selected = props.selected, disabled = props.disabled, componentRef = props.componentRef, onSelectYear = props.onSelectYear, onRenderYear = props.onRenderYear;\n var buttonRef = React.useRef(null);\n React.useImperativeHandle(componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n var onClick = function () {\n onSelectYear === null || onSelectYear === void 0 ? void 0 : onSelectYear(year);\n };\n var onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onSelectYear === null || onSelectYear === void 0 ? void 0 : onSelectYear(year);\n }\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n highlightCurrent: highlightCurrentYear,\n highlightSelected: highlightSelectedYear,\n });\n return (React.createElement(\"button\", { className: css(classNames.itemButton, (_a = {},\n _a[classNames.selected] = selected,\n _a[classNames.disabled] = disabled,\n _a)), type: \"button\", role: \"gridcell\", onClick: !disabled ? onClick : undefined, onKeyDown: !disabled ? onKeyDown : undefined, disabled: disabled, \"aria-selected\": selected, ref: buttonRef }, (_b = onRenderYear === null || onRenderYear === void 0 ? void 0 : onRenderYear(year)) !== null && _b !== void 0 ? _b : year));\n};\nCalendarYearGridCell.displayName = 'CalendarYearGridCell';\nvar CalendarYearGrid = function (props) {\n var styles = props.styles, theme = props.theme, className = props.className, fromYear = props.fromYear, toYear = props.toYear, animationDirection = props.animationDirection, animateBackwards = props.animateBackwards, minYear = props.minYear, maxYear = props.maxYear, onSelectYear = props.onSelectYear, selectedYear = props.selectedYear, componentRef = props.componentRef;\n var selectedCellRef = React.useRef(null);\n var currentCellRef = React.useRef(null);\n React.useImperativeHandle(componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = (selectedCellRef.current || currentCellRef.current)) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); }, []);\n var renderCell = function (yearToRender) {\n var selected = yearToRender === selectedYear;\n var disabled = (minYear !== undefined && yearToRender < minYear) || (maxYear !== undefined && yearToRender > maxYear);\n var current = yearToRender === new Date().getFullYear();\n return (React.createElement(CalendarYearGridCell, __assign({}, props, { key: yearToRender, year: yearToRender, selected: selected, current: current, disabled: disabled, onSelectYear: onSelectYear, componentRef: selected ? selectedCellRef : current ? currentCellRef : undefined, theme: theme })));\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n var onRenderYear = function (value) {\n var _a, _b;\n return (_b = (_a = props.onRenderYear) === null || _a === void 0 ? void 0 : _a.call(props, value)) !== null && _b !== void 0 ? _b : value;\n };\n var gridAriaLabel = onRenderYear(fromYear) + \" - \" + onRenderYear(toYear);\n var year = fromYear;\n var cells = [];\n for (var i = 0; i < (toYear - fromYear + 1) / CELLS_PER_ROW; i++) {\n cells.push([]);\n for (var j = 0; j < CELLS_PER_ROW; j++) {\n cells[i].push(renderCell(year));\n year++;\n }\n }\n return (React.createElement(FocusZone, null,\n React.createElement(\"div\", { className: classNames.gridContainer, role: \"grid\", \"aria-label\": gridAriaLabel }, cells.map(function (cellRow, index) {\n return (React.createElement(\"div\", { key: 'yearPickerRow_' + index + '_' + fromYear, role: \"row\", className: classNames.buttonRow }, cellRow));\n }))));\n};\nCalendarYearGrid.displayName = 'CalendarYearGrid';\nvar CalendarYearNavDirection;\n(function (CalendarYearNavDirection) {\n CalendarYearNavDirection[CalendarYearNavDirection[\"Previous\"] = 0] = \"Previous\";\n CalendarYearNavDirection[CalendarYearNavDirection[\"Next\"] = 1] = \"Next\";\n})(CalendarYearNavDirection || (CalendarYearNavDirection = {}));\nvar CalendarYearNavArrow = function (props) {\n var _a;\n var styles = props.styles, theme = props.theme, className = props.className, _b = props.navigationIcons, navigationIcons = _b === void 0 ? defaultCalendarNavigationIcons : _b, _c = props.strings, strings = _c === void 0 ? DefaultCalendarYearStrings : _c, direction = props.direction, onSelectPrev = props.onSelectPrev, onSelectNext = props.onSelectNext, fromYear = props.fromYear, toYear = props.toYear, maxYear = props.maxYear, minYear = props.minYear;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var ariaLabel = direction === CalendarYearNavDirection.Previous ? strings.prevRangeAriaLabel : strings.nextRangeAriaLabel;\n var newRangeOffset = direction === CalendarYearNavDirection.Previous ? -CELL_COUNT : CELL_COUNT;\n var newRange = { fromYear: fromYear + newRangeOffset, toYear: toYear + newRangeOffset };\n var ariaLabelString = ariaLabel ? (typeof ariaLabel === 'string' ? ariaLabel : ariaLabel(newRange)) : undefined;\n var disabled = direction === CalendarYearNavDirection.Previous\n ? minYear !== undefined && fromYear < minYear\n : maxYear !== undefined && props.fromYear + CELL_COUNT > maxYear;\n var onNavigate = function () {\n direction === CalendarYearNavDirection.Previous ? onSelectPrev === null || onSelectPrev === void 0 ? void 0 : onSelectPrev() : onSelectNext === null || onSelectNext === void 0 ? void 0 : onSelectNext();\n };\n var onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n onNavigate();\n }\n };\n // can be condensed, but leaving verbose for clarity due to regressions\n var isLeftNavigation = getRTL()\n ? direction === CalendarYearNavDirection.Next\n : direction === CalendarYearNavDirection.Previous;\n return (React.createElement(\"button\", { className: css(classNames.navigationButton, (_a = {},\n _a[classNames.disabled] = disabled,\n _a)), onClick: !disabled ? onNavigate : undefined, onKeyDown: !disabled ? onKeyDown : undefined, type: \"button\", title: ariaLabelString, disabled: disabled },\n React.createElement(Icon, { iconName: isLeftNavigation ? navigationIcons.leftNavigation : navigationIcons.rightNavigation })));\n};\nCalendarYearNavArrow.displayName = 'CalendarYearNavArrow';\nvar CalendarYearNav = function (props) {\n var styles = props.styles, theme = props.theme, className = props.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: classNames.navigationButtonsContainer },\n React.createElement(CalendarYearNavArrow, __assign({}, props, { direction: CalendarYearNavDirection.Previous })),\n React.createElement(CalendarYearNavArrow, __assign({}, props, { direction: CalendarYearNavDirection.Next }))));\n};\nCalendarYearNav.displayName = 'CalendarYearNav';\nvar CalendarYearTitle = function (props) {\n var styles = props.styles, theme = props.theme, className = props.className, fromYear = props.fromYear, toYear = props.toYear, _a = props.strings, strings = _a === void 0 ? DefaultCalendarYearStrings : _a, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection;\n var onHeaderSelect = function () {\n var _a;\n (_a = props.onHeaderSelect) === null || _a === void 0 ? void 0 : _a.call(props, true);\n };\n var onHeaderKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n onHeaderSelect();\n }\n };\n var onRenderYear = function (year) {\n var _a, _b;\n return (_b = (_a = props.onRenderYear) === null || _a === void 0 ? void 0 : _a.call(props, year)) !== null && _b !== void 0 ? _b : year;\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n if (props.onHeaderSelect) {\n var rangeAriaLabel = strings.rangeAriaLabel;\n var headerAriaLabelFormatString = strings.headerAriaLabelFormatString;\n var currentDateRange = rangeAriaLabel\n ? typeof rangeAriaLabel === 'string'\n ? rangeAriaLabel\n : rangeAriaLabel(props)\n : undefined;\n var ariaLabel = headerAriaLabelFormatString\n ? format(headerAriaLabelFormatString, currentDateRange)\n : currentDateRange;\n return (React.createElement(\"button\", { className: classNames.currentItemButton, onClick: onHeaderSelect, onKeyDown: onHeaderKeyDown, \"aria-label\": ariaLabel, role: \"button\", type: \"button\", \"aria-atomic\": true, \"aria-live\": \"polite\" },\n onRenderYear(fromYear),\n \" - \",\n onRenderYear(toYear)));\n }\n return (React.createElement(\"div\", { className: classNames.current },\n onRenderYear(fromYear),\n \" - \",\n onRenderYear(toYear)));\n};\nCalendarYearTitle.displayName = 'CalendarYearTitle';\nvar CalendarYearHeader = function (props) {\n var _a;\n var styles = props.styles, theme = props.theme, className = props.className, animateBackwards = props.animateBackwards, animationDirection = props.animationDirection, onRenderTitle = props.onRenderTitle;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n hasHeaderClickCallback: !!props.onHeaderSelect,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n return (React.createElement(\"div\", { className: classNames.headerContainer }, (_a = onRenderTitle === null || onRenderTitle === void 0 ? void 0 : onRenderTitle(props)) !== null && _a !== void 0 ? _a : React.createElement(CalendarYearTitle, __assign({}, props)),\n React.createElement(CalendarYearNav, __assign({}, props))));\n};\nCalendarYearHeader.displayName = 'CalendarYearHeader';\nfunction useAnimateBackwards(_a) {\n var selectedYear = _a.selectedYear, navigatedYear = _a.navigatedYear;\n var rangeYear = selectedYear || navigatedYear || new Date().getFullYear();\n var fromYear = Math.floor(rangeYear / 10) * 10;\n var previousFromYear = usePrevious(fromYear);\n if (!previousFromYear || previousFromYear === fromYear) {\n return undefined;\n }\n else if (previousFromYear > fromYear) {\n return true;\n }\n else {\n return false;\n }\n}\nvar NavigationDirection;\n(function (NavigationDirection) {\n NavigationDirection[NavigationDirection[\"Previous\"] = 0] = \"Previous\";\n NavigationDirection[NavigationDirection[\"Next\"] = 1] = \"Next\";\n})(NavigationDirection || (NavigationDirection = {}));\nfunction useYearRangeState(_a) {\n var selectedYear = _a.selectedYear, navigatedYear = _a.navigatedYear;\n var _b = React.useReducer(function (state, action) {\n return state + (action === NavigationDirection.Next ? CELL_COUNT : -CELL_COUNT);\n }, undefined, function () {\n var rangeYear = selectedYear || navigatedYear || new Date().getFullYear();\n return Math.floor(rangeYear / 10) * 10;\n }), fromYear = _b[0], navigate = _b[1];\n var toYear = fromYear + CELL_COUNT - 1;\n var onNavNext = function () { return navigate(NavigationDirection.Next); };\n var onNavPrevious = function () { return navigate(NavigationDirection.Previous); };\n return [fromYear, toYear, onNavNext, onNavPrevious];\n}\nexport var CalendarYearBase = function (props) {\n var animateBackwards = useAnimateBackwards(props);\n var _a = useYearRangeState(props), fromYear = _a[0], toYear = _a[1], onNavNext = _a[2], onNavPrevious = _a[3];\n var gridRef = React.useRef(null);\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var _a, _b;\n (_b = (_a = gridRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n },\n }); });\n var styles = props.styles, theme = props.theme, className = props.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(CalendarYearHeader, __assign({}, props, { fromYear: fromYear, toYear: toYear, onSelectPrev: onNavPrevious, onSelectNext: onNavNext, animateBackwards: animateBackwards })),\n React.createElement(CalendarYearGrid, __assign({}, props, { fromYear: fromYear, toYear: toYear, animateBackwards: animateBackwards, componentRef: gridRef }))));\n};\nCalendarYearBase.displayName = 'CalendarYearBase';\n//# sourceMappingURL=CalendarYear.base.js.map","import { getStyles } from './CalendarYear.styles';\nimport { styled } from '../../../Utilities';\nimport { CalendarYearBase } from './CalendarYear.base';\nexport var CalendarYear = styled(CalendarYearBase, getStyles, undefined, { scope: 'CalendarYear' });\n//# sourceMappingURL=CalendarYear.js.map","import { getStyles as getPickerStyles } from '../CalendarPicker/CalendarPicker.styles';\nexport var getStyles = function (props) {\n /* Return styles from the base class.\n * If this component has extra styles not in the base, apply them here i.e.:\n * const myStyle: IStyle = {\n * display: \"block\"\n * };\n * return {...getPickerStyles(props), myStyle};\n */\n return getPickerStyles(props);\n};\n//# sourceMappingURL=CalendarYear.styles.js.map","import * as React from 'react';\nimport { FocusZone } from '../../../FocusZone';\nimport { addYears, setMonth, getYearStart, getYearEnd, getMonthStart, getMonthEnd, compareDatePart, DEFAULT_DATE_FORMATTING, } from '@fluentui/date-time-utilities';\nimport { Icon } from '../../../Icon';\nimport { getStyles } from './CalendarMonth.styles';\nimport { css, getRTL, classNamesFunction, KeyCodes, format, getPropsWithDefaults } from '@fluentui/utilities';\nimport { CalendarYear } from '../CalendarYear/CalendarYear';\nimport { usePrevious } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from '../defaults';\nvar MONTHS_PER_ROW = 4;\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n styles: getStyles,\n strings: undefined,\n navigationIcons: defaultCalendarNavigationIcons,\n dateTimeFormatter: DEFAULT_DATE_FORMATTING,\n yearPickerHidden: false,\n};\nfunction useAnimateBackwards(_a) {\n var navigatedDate = _a.navigatedDate;\n var currentYear = navigatedDate.getFullYear();\n var previousYear = usePrevious(currentYear);\n if (previousYear === undefined || previousYear === currentYear) {\n return undefined;\n }\n else {\n return previousYear > currentYear;\n }\n}\nfunction useFocusLogic(_a) {\n var componentRef = _a.componentRef;\n var navigatedMonthRef = React.useRef(null);\n var calendarYearRef = React.useRef(null);\n var focusOnUpdate = React.useRef(false);\n var focus = React.useCallback(function () {\n if (calendarYearRef.current) {\n calendarYearRef.current.focus();\n }\n else if (navigatedMonthRef.current) {\n navigatedMonthRef.current.focus();\n }\n }, []);\n React.useImperativeHandle(componentRef, function () { return ({ focus: focus }); }, [focus]);\n React.useEffect(function () {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n var focusOnNextUpdate = function () {\n focusOnUpdate.current = true;\n };\n return [navigatedMonthRef, calendarYearRef, focusOnNextUpdate];\n}\nexport var CalendarMonthBase = function (propsWithoutDefaults) {\n var _a, _b;\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var _c = useFocusLogic(props), navigatedMonthRef = _c[0], calendarYearRef = _c[1], focusOnNextUpdate = _c[2];\n var _d = React.useState(false), isYearPickerVisible = _d[0], setIsYearPickerVisible = _d[1];\n var animateBackwards = useAnimateBackwards(props);\n var navigatedDate = props.navigatedDate, selectedDate = props.selectedDate, strings = props.strings, _e = props.today, today = _e === void 0 ? new Date() : _e, navigationIcons = props.navigationIcons, dateTimeFormatter = props.dateTimeFormatter, minDate = props.minDate, maxDate = props.maxDate, theme = props.theme, styles = props.styles, className = props.className, allFocusable = props.allFocusable, highlightCurrentMonth = props.highlightCurrentMonth, highlightSelectedMonth = props.highlightSelectedMonth, animationDirection = props.animationDirection, yearPickerHidden = props.yearPickerHidden, onNavigateDate = props.onNavigateDate;\n var selectMonthCallback = function (newMonth) {\n return function () { return onSelectMonth(newMonth); };\n };\n var onSelectNextYear = function () {\n onNavigateDate(addYears(navigatedDate, 1), false);\n };\n var onSelectPrevYear = function () {\n onNavigateDate(addYears(navigatedDate, -1), false);\n };\n var onSelectMonth = function (newMonth) {\n var _a;\n // If header is clickable the calendars are overlayed, switch back to day picker when month is clicked\n (_a = props.onHeaderSelect) === null || _a === void 0 ? void 0 : _a.call(props);\n onNavigateDate(setMonth(navigatedDate, newMonth), true);\n };\n var onHeaderSelect = function () {\n var _a;\n if (!yearPickerHidden) {\n focusOnNextUpdate();\n setIsYearPickerVisible(true);\n }\n else {\n (_a = props.onHeaderSelect) === null || _a === void 0 ? void 0 : _a.call(props);\n }\n };\n var onSelectYear = function (selectedYear) {\n focusOnNextUpdate();\n var navYear = navigatedDate.getFullYear();\n if (navYear !== selectedYear) {\n var newNavigationDate = new Date(navigatedDate.getTime());\n newNavigationDate.setFullYear(selectedYear);\n // for min and max dates, adjust the new navigation date - perhaps this should be\n // checked on the master navigation date handler (i.e. in Calendar)\n if (maxDate && newNavigationDate > maxDate) {\n newNavigationDate = setMonth(newNavigationDate, maxDate.getMonth());\n }\n else if (minDate && newNavigationDate < minDate) {\n newNavigationDate = setMonth(newNavigationDate, minDate.getMonth());\n }\n onNavigateDate(newNavigationDate, true);\n }\n setIsYearPickerVisible(false);\n };\n var onYearPickerHeaderSelect = function (focus) {\n focusOnNextUpdate();\n setIsYearPickerVisible(false);\n };\n // navigationIcons has a default value in defaultProps, but typescript doesn't recognize this\n var leftNavigationIcon = navigationIcons.leftNavigation;\n var rightNavigationIcon = navigationIcons.rightNavigation;\n var dateFormatter = dateTimeFormatter;\n // determine if previous/next years are in bounds\n var isPrevYearInBounds = minDate ? compareDatePart(minDate, getYearStart(navigatedDate)) < 0 : true;\n var isNextYearInBounds = maxDate ? compareDatePart(getYearEnd(navigatedDate), maxDate) < 0 : true;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n hasHeaderClickCallback: !!props.onHeaderSelect || !yearPickerHidden,\n highlightCurrent: highlightCurrentMonth,\n highlightSelected: highlightSelectedMonth,\n animateBackwards: animateBackwards,\n animationDirection: animationDirection,\n });\n if (isYearPickerVisible) {\n var _f = getYearStrings(props), onRenderYear = _f[0], yearStrings = _f[1];\n // use navigated date for the year picker\n return (React.createElement(CalendarYear, { key: 'calendarYear', minYear: minDate ? minDate.getFullYear() : undefined, maxYear: maxDate ? maxDate.getFullYear() : undefined, \n // eslint-disable-next-line react/jsx-no-bind\n onSelectYear: onSelectYear, navigationIcons: navigationIcons, \n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect: onYearPickerHeaderSelect, selectedYear: selectedDate ? selectedDate.getFullYear() : navigatedDate ? navigatedDate.getFullYear() : undefined, onRenderYear: onRenderYear, strings: yearStrings, componentRef: calendarYearRef, styles: styles, highlightCurrentYear: highlightCurrentMonth, highlightSelectedYear: highlightSelectedMonth, animationDirection: animationDirection }));\n }\n var rowIndexes = [];\n for (var i = 0; i < strings.shortMonths.length / MONTHS_PER_ROW; i++) {\n rowIndexes.push(i);\n }\n var yearString = dateFormatter.formatYear(navigatedDate);\n var headerAriaLabel = strings.monthPickerHeaderAriaLabel\n ? format(strings.monthPickerHeaderAriaLabel, yearString)\n : yearString;\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(\"div\", { className: classNames.headerContainer },\n React.createElement(\"button\", { className: classNames.currentItemButton, onClick: onHeaderSelect, onKeyDown: onButtonKeyDown(onHeaderSelect), \"aria-label\": headerAriaLabel, \"data-is-focusable\": !!props.onHeaderSelect || !yearPickerHidden, tabIndex: !!props.onHeaderSelect || !yearPickerHidden ? 0 : -1, type: \"button\", \"aria-atomic\": true, \"aria-live\": \"polite\" }, yearString),\n React.createElement(\"div\", { className: classNames.navigationButtonsContainer },\n React.createElement(\"button\", { className: css(classNames.navigationButton, (_a = {},\n _a[classNames.disabled] = !isPrevYearInBounds,\n _a)), \"aria-disabled\": !isPrevYearInBounds, tabIndex: isPrevYearInBounds ? undefined : allFocusable ? 0 : -1, onClick: isPrevYearInBounds ? onSelectPrevYear : undefined, onKeyDown: isPrevYearInBounds ? onButtonKeyDown(onSelectPrevYear) : undefined, title: strings.prevYearAriaLabel\n ? strings.prevYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, -1))\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: getRTL() ? rightNavigationIcon : leftNavigationIcon })),\n React.createElement(\"button\", { className: css(classNames.navigationButton, (_b = {},\n _b[classNames.disabled] = !isNextYearInBounds,\n _b)), \"aria-disabled\": !isNextYearInBounds, tabIndex: isNextYearInBounds ? undefined : allFocusable ? 0 : -1, onClick: isNextYearInBounds ? onSelectNextYear : undefined, onKeyDown: isNextYearInBounds ? onButtonKeyDown(onSelectNextYear) : undefined, title: strings.nextYearAriaLabel\n ? strings.nextYearAriaLabel + ' ' + dateFormatter.formatYear(addYears(navigatedDate, 1))\n : undefined, type: \"button\" },\n React.createElement(Icon, { iconName: getRTL() ? leftNavigationIcon : rightNavigationIcon })))),\n React.createElement(FocusZone, null,\n React.createElement(\"div\", { className: classNames.gridContainer, role: \"grid\", \"aria-label\": yearString }, rowIndexes.map(function (rowNum) {\n var monthsForRow = strings.shortMonths.slice(rowNum * MONTHS_PER_ROW, (rowNum + 1) * MONTHS_PER_ROW);\n return (React.createElement(\"div\", { key: 'monthRow_' + rowNum + navigatedDate.getFullYear(), role: \"row\", className: classNames.buttonRow }, monthsForRow.map(function (month, index) {\n var _a;\n var monthIndex = rowNum * MONTHS_PER_ROW + index;\n var indexedMonth = setMonth(navigatedDate, monthIndex);\n var isNavigatedMonth = navigatedDate.getMonth() === monthIndex;\n var isSelectedMonth = selectedDate.getMonth() === monthIndex;\n var isSelectedYear = selectedDate.getFullYear() === navigatedDate.getFullYear();\n var isInBounds = (minDate ? compareDatePart(minDate, getMonthEnd(indexedMonth)) < 1 : true) &&\n (maxDate ? compareDatePart(getMonthStart(indexedMonth), maxDate) < 1 : true);\n return (React.createElement(\"button\", { ref: isNavigatedMonth ? navigatedMonthRef : undefined, role: 'gridcell', className: css(classNames.itemButton, (_a = {},\n _a[classNames.current] = highlightCurrentMonth && isCurrentMonth(monthIndex, navigatedDate.getFullYear(), today),\n _a[classNames.selected] = highlightSelectedMonth && isSelectedMonth && isSelectedYear,\n _a[classNames.disabled] = !isInBounds,\n _a)), disabled: !allFocusable && !isInBounds, key: monthIndex, onClick: isInBounds ? selectMonthCallback(monthIndex) : undefined, onKeyDown: isInBounds ? onButtonKeyDown(selectMonthCallback(monthIndex)) : undefined, \"aria-label\": dateFormatter.formatMonth(indexedMonth, strings), \"aria-selected\": isNavigatedMonth, \"data-is-focusable\": isInBounds ? true : undefined, type: \"button\" }, month));\n })));\n })))));\n};\nCalendarMonthBase.displayName = 'CalendarMonthBase';\nfunction getYearStrings(_a) {\n var strings = _a.strings, navigatedDate = _a.navigatedDate, dateTimeFormatter = _a.dateTimeFormatter;\n var yearToString = function (year) {\n if (dateTimeFormatter) {\n // create a date based on the current nav date\n var yearFormattingDate = new Date(navigatedDate.getTime());\n yearFormattingDate.setFullYear(year);\n return dateTimeFormatter.formatYear(yearFormattingDate);\n }\n return String(year);\n };\n var yearRangeToString = function (yearRange) {\n return yearToString(yearRange.fromYear) + \" - \" + yearToString(yearRange.toYear);\n };\n var yearRangeToNextDecadeLabel = function (yearRange) {\n return strings.nextYearRangeAriaLabel ? strings.nextYearRangeAriaLabel + \" \" + yearRangeToString(yearRange) : '';\n };\n var yearRangeToPrevDecadeLabel = function (yearRange) {\n return strings.prevYearRangeAriaLabel ? strings.prevYearRangeAriaLabel + \" \" + yearRangeToString(yearRange) : '';\n };\n return [\n yearToString,\n {\n rangeAriaLabel: yearRangeToString,\n prevRangeAriaLabel: yearRangeToPrevDecadeLabel,\n nextRangeAriaLabel: yearRangeToNextDecadeLabel,\n headerAriaLabelFormatString: strings.yearPickerHeaderAriaLabel,\n },\n ];\n}\nfunction isCurrentMonth(month, year, today) {\n return today.getFullYear() === year && today.getMonth() === month;\n}\nfunction onButtonKeyDown(callback) {\n return function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n callback();\n break;\n }\n };\n}\n//# sourceMappingURL=CalendarMonth.base.js.map","import { CalendarMonthBase } from './CalendarMonth.base';\nimport { getStyles } from './CalendarMonth.styles';\nimport { styled } from '../../../Utilities';\nexport var CalendarMonth = styled(CalendarMonthBase, getStyles, undefined, { scope: 'CalendarMonth' });\n//# sourceMappingURL=CalendarMonth.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DayOfWeek, FirstWeekOfYear, DateRangeType, addMonths, addYears, DEFAULT_CALENDAR_STRINGS, DEFAULT_DATE_FORMATTING, } from '@fluentui/date-time-utilities';\nimport { CalendarDay } from './CalendarDay/CalendarDay';\nimport { CalendarMonth } from './CalendarMonth/CalendarMonth';\nimport { css, KeyCodes, classNamesFunction, focusAsync, format, FocusRects, getPropsWithDefaults, getWindow, } from '@fluentui/utilities';\nimport { useControllableValue } from '@fluentui/react-hooks';\nimport { defaultCalendarNavigationIcons } from './defaults';\nvar MIN_SIZE_FORCE_OVERLAY = 440;\nvar getClassNames = classNamesFunction();\nvar defaultWorkWeekDays = [\n DayOfWeek.Monday,\n DayOfWeek.Tuesday,\n DayOfWeek.Wednesday,\n DayOfWeek.Thursday,\n DayOfWeek.Friday,\n];\nvar DEFAULT_PROPS = {\n isMonthPickerVisible: true,\n isDayPickerVisible: true,\n showMonthPickerAsOverlay: false,\n today: new Date(),\n firstDayOfWeek: DayOfWeek.Sunday,\n dateRangeType: DateRangeType.Day,\n showGoToToday: true,\n strings: DEFAULT_CALENDAR_STRINGS,\n highlightCurrentMonth: false,\n highlightSelectedMonth: false,\n navigationIcons: defaultCalendarNavigationIcons,\n showWeekNumbers: false,\n firstWeekOfYear: FirstWeekOfYear.FirstDay,\n dateTimeFormatter: DEFAULT_DATE_FORMATTING,\n showSixWeeksByDefault: false,\n workWeekDays: defaultWorkWeekDays,\n showCloseButton: false,\n allFocusable: false,\n};\nfunction useDateState(_a) {\n var value = _a.value, _b = _a.today, today = _b === void 0 ? new Date() : _b, onSelectDate = _a.onSelectDate;\n /** The currently selected date in the calendar */\n var _c = useControllableValue(value, today), _d = _c[0], selectedDate = _d === void 0 ? today : _d, setSelectedDate = _c[1];\n /** The currently focused date in the day picker, but not necessarily selected */\n var _e = React.useState(value), _f = _e[0], navigatedDay = _f === void 0 ? today : _f, setNavigatedDay = _e[1];\n /** The currently focused date in the month picker, but not necessarily selected */\n var _g = React.useState(value), _h = _g[0], navigatedMonth = _h === void 0 ? today : _h, setNavigatedMonth = _g[1];\n /** If using a controlled value, when that value changes, navigate to that date */\n var _j = React.useState(value), _k = _j[0], lastSelectedDate = _k === void 0 ? today : _k, setLastSelectedDate = _j[1];\n if (value && lastSelectedDate.valueOf() !== value.valueOf()) {\n setNavigatedDay(value);\n setNavigatedMonth(value);\n setLastSelectedDate(value);\n }\n var navigateMonth = function (date) {\n setNavigatedMonth(date);\n };\n var navigateDay = function (date) {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n };\n var onDateSelected = function (date, selectedDateRangeArray) {\n setNavigatedMonth(date);\n setNavigatedDay(date);\n setSelectedDate(date);\n onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(date, selectedDateRangeArray);\n };\n return [selectedDate, navigatedDay, navigatedMonth, onDateSelected, navigateDay, navigateMonth];\n}\nfunction useVisibilityState(props) {\n /** State used to show/hide month picker */\n var _a = useControllableValue(getShowMonthPickerAsOverlay(props) ? undefined : props.isMonthPickerVisible, false), _b = _a[0], isMonthPickerVisible = _b === void 0 ? true : _b, setIsMonthPickerVisible = _a[1];\n /** State used to show/hide day picker */\n var _c = useControllableValue(getShowMonthPickerAsOverlay(props) ? undefined : props.isDayPickerVisible, true), _d = _c[0], isDayPickerVisible = _d === void 0 ? true : _d, setIsDayPickerVisible = _c[1];\n var toggleDayMonthPickerVisibility = function () {\n setIsMonthPickerVisible(!isMonthPickerVisible);\n setIsDayPickerVisible(!isDayPickerVisible);\n };\n return [isMonthPickerVisible, isDayPickerVisible, toggleDayMonthPickerVisibility];\n}\nfunction useFocusLogic(_a, isDayPickerVisible, isMonthPickerVisible) {\n var componentRef = _a.componentRef;\n var dayPicker = React.useRef(null);\n var monthPicker = React.useRef(null);\n var focusOnUpdate = React.useRef(false);\n var focus = React.useCallback(function () {\n if (isDayPickerVisible && dayPicker.current) {\n focusAsync(dayPicker.current);\n }\n else if (isMonthPickerVisible && monthPicker.current) {\n focusAsync(monthPicker.current);\n }\n }, [isDayPickerVisible, isMonthPickerVisible]);\n React.useImperativeHandle(componentRef, function () { return ({ focus: focus }); }, [focus]);\n React.useEffect(function () {\n if (focusOnUpdate.current) {\n focus();\n focusOnUpdate.current = false;\n }\n });\n var focusOnNextUpdate = function () {\n focusOnUpdate.current = true;\n };\n return [dayPicker, monthPicker, focusOnNextUpdate];\n}\nexport var CalendarBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var _a = useDateState(props), selectedDate = _a[0], navigatedDay = _a[1], navigatedMonth = _a[2], onDateSelected = _a[3], navigateDay = _a[4], navigateMonth = _a[5];\n var _b = useVisibilityState(props), isMonthPickerVisible = _b[0], isDayPickerVisible = _b[1], toggleDayMonthPickerVisibility = _b[2];\n var _c = useFocusLogic(props, isDayPickerVisible, isMonthPickerVisible), dayPicker = _c[0], monthPicker = _c[1], focusOnNextUpdate = _c[2];\n var renderGoToTodayButton = function () {\n var goTodayEnabled = showGoToToday;\n if (goTodayEnabled && today) {\n goTodayEnabled =\n navigatedDay.getFullYear() !== today.getFullYear() ||\n navigatedDay.getMonth() !== today.getMonth() ||\n navigatedMonth.getFullYear() !== today.getFullYear() ||\n navigatedMonth.getMonth() !== today.getMonth();\n }\n return (showGoToToday && (React.createElement(\"button\", { className: css('js-goToday', classes.goTodayButton), onClick: onGotoToday, onKeyDown: onButtonKeyDown(onGotoToday), type: \"button\", disabled: !goTodayEnabled }, strings.goToToday)));\n };\n var onNavigateDayDate = function (date, focusOnNavigatedDay) {\n navigateDay(date);\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n };\n var onNavigateMonthDate = function (date, focusOnNavigatedDay) {\n if (focusOnNavigatedDay) {\n focusOnNextUpdate();\n }\n if (!focusOnNavigatedDay) {\n navigateMonth(date);\n return;\n }\n if (monthPickerOnly) {\n onDateSelected(date);\n }\n navigateDay(date);\n };\n var onHeaderSelect = getShowMonthPickerAsOverlay(props)\n ? function () {\n toggleDayMonthPickerVisibility();\n focusOnNextUpdate();\n }\n : undefined;\n var onGotoToday = function () {\n navigateDay(today);\n focusOnNextUpdate();\n };\n var onButtonKeyDown = function (callback) {\n return function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n case KeyCodes.space:\n callback();\n break;\n }\n };\n };\n var onDatePickerPopupKeyDown = function (ev) {\n var _a;\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n ev.preventDefault();\n break;\n case KeyCodes.backspace:\n ev.preventDefault();\n break;\n case KeyCodes.escape:\n (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props);\n break;\n case KeyCodes.pageUp:\n if (ev.ctrlKey) {\n // go to next year\n navigateDay(addYears(navigatedDay, 1));\n }\n else {\n // go to next month\n navigateDay(addMonths(navigatedDay, 1));\n }\n ev.preventDefault();\n break;\n case KeyCodes.pageDown:\n if (ev.ctrlKey) {\n // go to previous year\n navigateDay(addYears(navigatedDay, -1));\n }\n else {\n // go to previous month\n navigateDay(addMonths(navigatedDay, -1));\n }\n ev.preventDefault();\n break;\n default:\n break;\n }\n };\n var rootClass = 'ms-DatePicker';\n var firstDayOfWeek = props.firstDayOfWeek, dateRangeType = props.dateRangeType, strings = props.strings, showGoToToday = props.showGoToToday, highlightCurrentMonth = props.highlightCurrentMonth, highlightSelectedMonth = props.highlightSelectedMonth, navigationIcons = props.navigationIcons, minDate = props.minDate, maxDate = props.maxDate, restrictedDates = props.restrictedDates, className = props.className, showCloseButton = props.showCloseButton, allFocusable = props.allFocusable, styles = props.styles, showWeekNumbers = props.showWeekNumbers, theme = props.theme, calendarDayProps = props.calendarDayProps, calendarMonthProps = props.calendarMonthProps, dateTimeFormatter = props.dateTimeFormatter, _d = props.today, today = _d === void 0 ? new Date() : _d;\n var showMonthPickerAsOverlay = getShowMonthPickerAsOverlay(props);\n var monthPickerOnly = !showMonthPickerAsOverlay && !isDayPickerVisible;\n var overlaidWithButton = showMonthPickerAsOverlay && showGoToToday;\n var classes = getClassNames(styles, {\n theme: theme,\n className: className,\n isMonthPickerVisible: isMonthPickerVisible,\n isDayPickerVisible: isDayPickerVisible,\n monthPickerOnly: monthPickerOnly,\n showMonthPickerAsOverlay: showMonthPickerAsOverlay,\n overlaidWithButton: overlaidWithButton,\n overlayedWithButton: overlaidWithButton,\n showGoToToday: showGoToToday,\n showWeekNumbers: showWeekNumbers,\n });\n var todayDateString = '';\n var selectedDateString = '';\n if (dateTimeFormatter && strings.todayDateFormatString) {\n todayDateString = format(strings.todayDateFormatString, dateTimeFormatter.formatMonthDayYear(today, strings));\n }\n if (dateTimeFormatter && strings.selectedDateFormatString) {\n selectedDateString = format(strings.selectedDateFormatString, dateTimeFormatter.formatMonthDayYear(selectedDate, strings));\n }\n var selectionAndTodayString = selectedDateString + ', ' + todayDateString;\n return (React.createElement(\"div\", { ref: forwardedRef, role: \"group\", \"aria-label\": selectionAndTodayString, className: css(rootClass, classes.root, className, 'ms-slideDownIn10'), onKeyDown: onDatePickerPopupKeyDown },\n React.createElement(\"div\", { className: classes.liveRegion, \"aria-live\": \"polite\", \"aria-atomic\": \"true\" },\n React.createElement(\"span\", null, selectedDateString)),\n isDayPickerVisible && (React.createElement(CalendarDay, __assign({ selectedDate: selectedDate, navigatedDate: navigatedDay, today: props.today, onSelectDate: onDateSelected, \n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate: onNavigateDayDate, onDismiss: props.onDismiss, firstDayOfWeek: firstDayOfWeek, dateRangeType: dateRangeType, strings: strings, \n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, showWeekNumbers: props.showWeekNumbers, firstWeekOfYear: props.firstWeekOfYear, dateTimeFormatter: props.dateTimeFormatter, showSixWeeksByDefault: props.showSixWeeksByDefault, minDate: minDate, maxDate: maxDate, restrictedDates: restrictedDates, workWeekDays: props.workWeekDays, componentRef: dayPicker, showCloseButton: showCloseButton, allFocusable: allFocusable }, calendarDayProps))),\n isDayPickerVisible && isMonthPickerVisible && React.createElement(\"div\", { className: classes.divider }),\n isMonthPickerVisible ? (React.createElement(\"div\", { className: classes.monthPickerWrapper },\n React.createElement(CalendarMonth, __assign({ navigatedDate: navigatedMonth, selectedDate: navigatedDay, strings: strings, \n // eslint-disable-next-line react/jsx-no-bind\n onNavigateDate: onNavigateMonthDate, today: props.today, highlightCurrentMonth: highlightCurrentMonth, highlightSelectedMonth: highlightSelectedMonth, \n // eslint-disable-next-line react/jsx-no-bind\n onHeaderSelect: onHeaderSelect, navigationIcons: navigationIcons, dateTimeFormatter: props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: monthPicker }, calendarMonthProps)),\n renderGoToTodayButton())) : (renderGoToTodayButton()),\n React.createElement(FocusRects, null)));\n});\nCalendarBase.displayName = 'CalendarBase';\nfunction getShowMonthPickerAsOverlay(props) {\n var win = getWindow();\n return props.showMonthPickerAsOverlay || (win && win.innerWidth <= MIN_SIZE_FORCE_OVERLAY);\n}\n//# sourceMappingURL=Calendar.base.js.map","import { normalize, FontSizes, getFocusStyle } from '@fluentui/style-utilities';\nexport var styles = function (props) {\n var className = props.className, theme = props.theme, isDayPickerVisible = props.isDayPickerVisible, isMonthPickerVisible = props.isMonthPickerVisible, showWeekNumbers = props.showWeekNumbers;\n var palette = theme.palette;\n var totalWidth = isDayPickerVisible && isMonthPickerVisible ? 440 : 220;\n if (showWeekNumbers && isDayPickerVisible) {\n totalWidth += 30;\n }\n return {\n root: [\n normalize,\n {\n display: 'flex',\n width: totalWidth,\n },\n !isMonthPickerVisible && {\n flexDirection: 'column',\n },\n className,\n ],\n divider: {\n top: 0,\n borderRight: '1px solid',\n borderColor: palette.neutralLight,\n },\n monthPickerWrapper: [\n {\n display: 'flex',\n flexDirection: 'column',\n },\n ],\n goTodayButton: [\n getFocusStyle(theme, { inset: -1 }),\n {\n bottom: 0,\n color: palette.neutralPrimary,\n height: 30,\n lineHeight: 30,\n backgroundColor: 'transparent',\n border: 'none',\n boxSizing: 'content-box',\n padding: '0 4px',\n alignSelf: 'flex-end',\n marginRight: 16,\n marginTop: 3,\n fontSize: FontSizes.small,\n fontFamily: 'inherit',\n overflow: 'visible',\n selectors: {\n '& div': {\n fontSize: FontSizes.small,\n },\n '&:hover': {\n color: palette.themePrimary,\n backgroundColor: 'transparent',\n cursor: 'pointer',\n },\n '&:active': {\n color: palette.themeDark,\n },\n '&:disabled': {\n color: palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n },\n },\n ],\n liveRegion: {\n border: 0,\n height: '1px',\n margin: '-1px',\n overflow: 'hidden',\n padding: 0,\n width: '1px',\n position: 'absolute',\n },\n };\n};\n//# sourceMappingURL=Calendar.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { CalendarBase } from './Calendar.base';\nimport { styles } from './Calendar.styles';\nexport var Calendar = styled(CalendarBase, styles, undefined, {\n scope: 'Calendar',\n});\n//# sourceMappingURL=Calendar.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { elementContains, getNativeProps, divProperties, getFirstTabbable, getLastTabbable, getNextElement, focusAsync, modalize, on, } from '../../Utilities';\nimport { useId, useConst, useMergedRefs } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nvar COMPONENT_NAME = 'FocusTrapZone';\nvar useComponentRef = function (componentRef, previouslyFocusedElement, focus) {\n React.useImperativeHandle(componentRef, function () { return ({\n get previouslyFocusedElement() {\n return previouslyFocusedElement;\n },\n focus: focus,\n }); }, [previouslyFocusedElement, focus]);\n};\nexport var FocusTrapZone = React.forwardRef(function (props, ref) {\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 id = useId(undefined, props.id);\n var doc = useDocument();\n var divProps = getNativeProps(props, divProperties);\n var internalState = useConst(function () { return ({\n previouslyFocusedElementOutsideTrapZone: undefined,\n previouslyFocusedElementInTrapZone: undefined,\n disposeFocusHandler: undefined,\n disposeClickHandler: undefined,\n hasFocus: false,\n unmodalize: undefined,\n }); });\n var ariaLabelledBy = props.ariaLabelledBy, className = props.className, children = props.children, componentRef = props.componentRef, disabled = props.disabled, _a = props.disableFirstFocus, disableFirstFocus = _a === void 0 ? false : _a, _b = props.disabled, currentDisabledValue = _b === void 0 ? false : _b, elementToFocusOnDismiss = props.elementToFocusOnDismiss, _c = props.forceFocusInsideTrap, forceFocusInsideTrap = _c === void 0 ? true : _c, focusPreviouslyFocusedInnerElement = props.focusPreviouslyFocusedInnerElement, \n // eslint-disable-next-line deprecation/deprecation\n firstFocusableSelector = props.firstFocusableSelector, firstFocusableTarget = props.firstFocusableTarget, ignoreExternalFocusing = props.ignoreExternalFocusing, _d = props.isClickableOutsideFocusTrap, isClickableOutsideFocusTrap = _d === void 0 ? false : _d, onFocus = props.onFocus, onBlur = props.onBlur, onFocusCapture = props.onFocusCapture, onBlurCapture = props.onBlurCapture, enableAriaHiddenSiblings = props.enableAriaHiddenSiblings;\n var bumperProps = {\n 'aria-hidden': true,\n style: {\n pointerEvents: 'none',\n position: 'fixed',\n },\n tabIndex: disabled ? -1 : 0,\n 'data-is-visible': true,\n };\n var focus = React.useCallback(function () {\n if (focusPreviouslyFocusedInnerElement &&\n internalState.previouslyFocusedElementInTrapZone &&\n elementContains(root.current, internalState.previouslyFocusedElementInTrapZone)) {\n // focus on the last item that had focus in the zone before we left the zone\n focusAsync(internalState.previouslyFocusedElementInTrapZone);\n return;\n }\n var focusSelector = typeof firstFocusableSelector === 'string'\n ? firstFocusableSelector\n : firstFocusableSelector && firstFocusableSelector();\n var firstFocusableChild = null;\n if (root.current) {\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 (focusSelector) {\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 }\n if (firstFocusableChild) {\n focusAsync(firstFocusableChild);\n }\n }, [firstFocusableSelector, firstFocusableTarget, focusPreviouslyFocusedInnerElement, internalState]);\n var onBumperFocus = React.useCallback(function (isFirstBumper) {\n if (disabled) {\n return;\n }\n var currentBumper = (isFirstBumper === internalState.hasFocus\n ? lastBumper.current\n : firstBumper.current);\n if (root.current) {\n var nextFocusable = isFirstBumper === internalState.hasFocus\n ? getLastTabbable(root.current, currentBumper, true, false)\n : getFirstTabbable(root.current, currentBumper, true, false);\n if (nextFocusable) {\n if (nextFocusable === firstBumper.current || nextFocusable === lastBumper.current) {\n // This can happen when FTZ contains no tabbable elements.\n // focus will take care of finding a focusable element in FTZ.\n focus();\n }\n else {\n nextFocusable.focus();\n }\n }\n }\n }, [disabled, focus, internalState]);\n var onRootBlurCapture = React.useCallback(function (ev) {\n onBlurCapture === null || onBlurCapture === void 0 ? void 0 : onBlurCapture(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 }, [doc, internalState, onBlurCapture]);\n var onRootFocusCapture = React.useCallback(function (ev) {\n onFocusCapture === null || onFocusCapture === void 0 ? void 0 : onFocusCapture(ev);\n if (ev.target === firstBumper.current) {\n onBumperFocus(true);\n }\n else if (ev.target === lastBumper.current) {\n onBumperFocus(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 }, [onFocusCapture, internalState, onBumperFocus]);\n var returnFocusToInitiator = React.useCallback(function () {\n FocusTrapZone.focusStack = FocusTrapZone.focusStack.filter(function (value) {\n return id !== value;\n });\n if (doc) {\n var activeElement = doc.activeElement;\n if (!ignoreExternalFocusing &&\n internalState.previouslyFocusedElementOutsideTrapZone &&\n typeof internalState.previouslyFocusedElementOutsideTrapZone.focus === 'function' &&\n (elementContains(root.current, activeElement) || activeElement === doc.body)) {\n if (!(internalState.previouslyFocusedElementOutsideTrapZone === firstBumper.current ||\n internalState.previouslyFocusedElementOutsideTrapZone === lastBumper.current)) {\n focusAsync(internalState.previouslyFocusedElementOutsideTrapZone);\n }\n }\n }\n }, [doc, id, ignoreExternalFocusing, internalState]);\n var forceFocusInTrap = React.useCallback(function (ev) {\n if (disabled) {\n return;\n }\n if (FocusTrapZone.focusStack.length && id === FocusTrapZone.focusStack[FocusTrapZone.focusStack.length - 1]) {\n var focusedElement = ev.target;\n if (!elementContains(root.current, focusedElement)) {\n focus();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [disabled, id, focus, internalState]);\n var forceClickInTrap = React.useCallback(function (ev) {\n if (disabled) {\n return;\n }\n if (FocusTrapZone.focusStack.length && id === FocusTrapZone.focusStack[FocusTrapZone.focusStack.length - 1]) {\n var clickedElement = ev.target;\n if (clickedElement && !elementContains(root.current, clickedElement)) {\n focus();\n internalState.hasFocus = true; // set focus here since we stop event propagation\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [disabled, id, focus, internalState]);\n var updateEventHandlers = React.useCallback(function () {\n if (forceFocusInsideTrap && !internalState.disposeFocusHandler) {\n internalState.disposeFocusHandler = on(window, 'focus', forceFocusInTrap, true);\n }\n else if (!forceFocusInsideTrap && internalState.disposeFocusHandler) {\n internalState.disposeFocusHandler();\n internalState.disposeFocusHandler = undefined;\n }\n if (!isClickableOutsideFocusTrap && !internalState.disposeClickHandler) {\n internalState.disposeClickHandler = on(window, 'click', forceClickInTrap, true);\n }\n else if (isClickableOutsideFocusTrap && internalState.disposeClickHandler) {\n internalState.disposeClickHandler();\n internalState.disposeClickHandler = undefined;\n }\n }, [forceClickInTrap, forceFocusInTrap, forceFocusInsideTrap, isClickableOutsideFocusTrap, internalState]);\n // Updates eventHandlers and cleans up focusStack when the component unmounts.\n React.useEffect(function () {\n var parentRoot = root.current;\n updateEventHandlers();\n return function () {\n // don't handle return focus unless forceFocusInsideTrap is true or focus is still within FocusTrapZone\n if (!disabled || forceFocusInsideTrap || !elementContains(parentRoot, doc === null || doc === void 0 ? void 0 : doc.activeElement)) {\n returnFocusToInitiator();\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- Should only run on mount.\n }, [updateEventHandlers]);\n // Updates focusStack and the previouslyFocusedElementOutsideTrapZone on prop change.\n React.useEffect(function () {\n var newForceFocusInsideTrap = forceFocusInsideTrap !== undefined ? forceFocusInsideTrap : true;\n var newDisabled = disabled !== undefined ? disabled : false;\n // Transition from forceFocusInsideTrap / FTZ disabled to enabled.\n if (!newDisabled || newForceFocusInsideTrap) {\n if (currentDisabledValue) {\n return;\n }\n FocusTrapZone.focusStack.push(id);\n internalState.previouslyFocusedElementOutsideTrapZone = elementToFocusOnDismiss\n ? elementToFocusOnDismiss\n : doc.activeElement;\n if (!disableFirstFocus && !elementContains(root.current, internalState.previouslyFocusedElementOutsideTrapZone)) {\n focus();\n }\n if (!internalState.unmodalize && root.current && enableAriaHiddenSiblings) {\n internalState.unmodalize = modalize(root.current);\n }\n }\n else if (!newForceFocusInsideTrap || newDisabled) {\n // Transition from forceFocusInsideTrap / FTZ enabled to disabled.\n returnFocusToInitiator();\n if (internalState.unmodalize) {\n internalState.unmodalize();\n }\n }\n if (elementToFocusOnDismiss && internalState.previouslyFocusedElementOutsideTrapZone !== elementToFocusOnDismiss) {\n internalState.previouslyFocusedElementOutsideTrapZone = elementToFocusOnDismiss;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [elementToFocusOnDismiss, forceFocusInsideTrap, disabled]);\n // Cleanup lifecyle method for internalState.\n useUnmount(function () {\n // Dispose of event handlers so their closures can be garbage-collected\n if (internalState.disposeClickHandler) {\n internalState.disposeClickHandler();\n internalState.disposeClickHandler = undefined;\n }\n if (internalState.disposeFocusHandler) {\n internalState.disposeFocusHandler();\n internalState.disposeFocusHandler = undefined;\n }\n if (internalState.unmodalize) {\n internalState.unmodalize();\n }\n // Dispose of element references so the DOM Nodes can be garbage-collected\n delete internalState.previouslyFocusedElementInTrapZone;\n delete internalState.previouslyFocusedElementOutsideTrapZone;\n });\n useComponentRef(componentRef, internalState.previouslyFocusedElementInTrapZone, focus);\n return (React.createElement(\"div\", __assign({}, divProps, { className: className, ref: mergedRootRef, \"aria-labelledby\": ariaLabelledBy, onFocusCapture: onRootFocusCapture, onFocus: onFocus, onBlur: onBlur, onBlurCapture: onRootBlurCapture }),\n React.createElement(\"div\", __assign({}, bumperProps, { ref: firstBumper })),\n children,\n React.createElement(\"div\", __assign({}, bumperProps, { ref: lastBumper }))));\n});\nvar useUnmount = function (unmountFunction) {\n var unmountRef = React.useRef(unmountFunction);\n unmountRef.current = unmountFunction;\n React.useEffect(function () { return function () {\n if (unmountRef.current) {\n unmountRef.current();\n }\n }; }, [unmountFunction]);\n};\nFocusTrapZone.displayName = COMPONENT_NAME;\nFocusTrapZone.focusStack = [];\n//# sourceMappingURL=FocusTrapZone.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { Callout } from './Callout';\nimport { FocusTrapZone } from '../../FocusTrapZone';\n/**\n * A special Callout that uses FocusTrapZone to trap focus\n * @param props - Props for the component\n */\nexport var FocusTrapCallout = function (props) {\n return (React.createElement(Callout, __assign({}, props),\n React.createElement(FocusTrapZone, __assign({ disabled: props.hidden }, props.focusTrapProps), props.children)));\n};\n//# sourceMappingURL=FocusTrapCallout.js.map","import * as React from 'react';\nimport { Icon, FontIcon } from '../../Icon';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var CheckBase = React.forwardRef(function (props, ref) {\n var _a = props.checked, checked = _a === void 0 ? false : _a, className = props.className, theme = props.theme, styles = props.styles, _b = props.useFastIcons, useFastIcons = _b === void 0 ? true : _b;\n var classNames = getClassNames(styles, { theme: theme, className: className, checked: checked });\n var IconComponent = useFastIcons ? FontIcon : Icon;\n return (React.createElement(\"div\", { className: classNames.root, ref: ref },\n React.createElement(IconComponent, { iconName: \"CircleRing\", className: classNames.circle }),\n React.createElement(IconComponent, { iconName: \"StatusCircleCheckmark\", className: classNames.check })));\n});\nCheckBase.displayName = 'CheckBase';\n//# sourceMappingURL=Check.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, IconFontSizes, getHighContrastNoAdjustStyle } from '../../Styling';\nimport { getRTL } from '../../Utilities';\nexport var CheckGlobalClassNames = {\n root: 'ms-Check',\n circle: 'ms-Check-circle',\n check: 'ms-Check-check',\n /** Must be manually applied to the parent element of the check. */\n checkHost: 'ms-Check-checkHost',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n // eslint-disable-next-line deprecation/deprecation\n var _f = props.height, height = _f === void 0 ? props.checkBoxHeight || '18px' : _f, checked = props.checked, className = props.className, theme = props.theme;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var isRTL = getRTL(theme);\n var classNames = getGlobalClassNames(CheckGlobalClassNames, theme);\n var sharedCircleCheck = {\n fontSize: height,\n position: 'absolute',\n left: 0,\n top: 0,\n width: height,\n height: height,\n textAlign: 'center',\n // inline-flex prevents the check from shifting with custom line height styles\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n verticalAlign: 'middle',\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n // lineHeight currently needs to be a string to output without 'px'\n lineHeight: '1',\n width: height,\n height: height,\n verticalAlign: 'top',\n position: 'relative',\n userSelect: 'none',\n selectors: (_a = {\n ':before': {\n content: '\"\"',\n position: 'absolute',\n top: '1px',\n right: '1px',\n bottom: '1px',\n left: '1px',\n borderRadius: '50%',\n opacity: 1,\n background: semanticColors.bodyBackground,\n }\n },\n _a[\".\" + classNames.checkHost + \":hover &, .\" + classNames.checkHost + \":focus &, &:hover, &:focus\"] = {\n opacity: 1,\n },\n _a),\n },\n checked && [\n 'is-checked',\n {\n selectors: {\n ':before': {\n background: palette.themePrimary,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n background: 'Window',\n },\n _b),\n },\n },\n },\n ],\n className,\n ],\n circle: [\n classNames.circle,\n sharedCircleCheck,\n {\n color: palette.neutralSecondary,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'WindowText',\n },\n _c),\n },\n checked && {\n color: palette.white,\n },\n ],\n check: [\n classNames.check,\n sharedCircleCheck,\n {\n opacity: 0,\n color: palette.neutralSecondary,\n fontSize: IconFontSizes.medium,\n left: isRTL ? '-0.5px' : '.5px',\n top: '-1px',\n selectors: (_d = {\n ':hover': {\n opacity: 1,\n }\n },\n _d[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _d),\n },\n checked && {\n opacity: 1,\n color: palette.white,\n fontWeight: 900,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n border: 'none',\n color: 'WindowText',\n },\n _e),\n },\n ],\n checkHost: classNames.checkHost,\n };\n};\n//# sourceMappingURL=Check.styles.js.map","import { styled } from '../../Utilities';\nimport { CheckBase } from './Check.base';\nimport { getStyles } from './Check.styles';\nexport var Check = styled(CheckBase, getStyles, undefined, {\n scope: 'Check',\n}, true);\n//# sourceMappingURL=Check.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport { useFocusRects, classNamesFunction } from '@fluentui/utilities';\nimport { Icon } from '../Icon/Icon';\nvar getClassNames = classNamesFunction();\nexport var CheckboxBase = React.forwardRef(function (props, forwardedRef) {\n var disabled = props.disabled, required = props.required, inputProps = props.inputProps, name = props.name, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, ariaPositionInSet = props.ariaPositionInSet, ariaSetSize = props.ariaSetSize, title = props.title, checkmarkIconProps = props.checkmarkIconProps, styles = props.styles, theme = props.theme, className = props.className, _a = props.boxSide, boxSide = _a === void 0 ? 'start' : _a;\n var id = useId('checkbox-', props.id);\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n var inputRef = React.useRef(null);\n var _b = useControllableValue(props.checked, props.defaultChecked, props.onChange), isChecked = _b[0], setIsChecked = _b[1];\n var _c = useControllableValue(props.indeterminate, props.defaultIndeterminate), isIndeterminate = _c[0], setIsIndeterminate = _c[1];\n useFocusRects(rootRef);\n useDebugWarning(props);\n useComponentRef(props, isChecked, isIndeterminate, inputRef);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n indeterminate: isIndeterminate,\n checked: isChecked,\n reversed: boxSide !== 'start',\n isUsingCustomLabelRender: !!props.onRenderLabel,\n });\n var onChange = function (ev) {\n if (isIndeterminate) {\n // If indeterminate, clicking the checkbox *only* removes the indeterminate state (or if\n // controlled, lets the consumer know to change it by calling onChange). It doesn't\n // change the checked state.\n setIsChecked(!!isChecked, ev);\n setIsIndeterminate(false);\n }\n else {\n setIsChecked(!isChecked, ev);\n }\n };\n var defaultLabelRenderer = React.useCallback(function (checkboxProps) {\n if (!checkboxProps) {\n return null;\n }\n return checkboxProps.label ? (React.createElement(\"span\", { className: classNames.text, title: checkboxProps.title }, checkboxProps.label)) : null;\n }, [classNames.text]);\n var onRenderLabel = props.onRenderLabel || defaultLabelRenderer;\n var ariaChecked = isIndeterminate\n ? 'mixed'\n : undefined;\n var mergedInputProps = __assign(__assign({ className: classNames.input, type: 'checkbox' }, inputProps), { checked: !!isChecked, disabled: disabled,\n required: required,\n name: name,\n id: id,\n title: title,\n onChange: onChange, 'aria-disabled': disabled, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-posinset': ariaPositionInSet, 'aria-setsize': ariaSetSize, 'aria-checked': ariaChecked });\n return (React.createElement(\"div\", { className: classNames.root, title: title, ref: mergedRootRefs },\n React.createElement(\"input\", __assign({}, mergedInputProps, { ref: inputRef, title: title, \"data-ktp-execute-target\": true })),\n React.createElement(\"label\", { className: classNames.label, htmlFor: id },\n React.createElement(\"div\", { className: classNames.checkbox, \"data-ktp-target\": true },\n React.createElement(Icon, __assign({ iconName: \"CheckMark\" }, checkmarkIconProps, { className: classNames.checkmark }))),\n onRenderLabel(props, defaultLabelRenderer))));\n});\nCheckboxBase.displayName = 'CheckboxBase';\nfunction useDebugWarning(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: 'Checkbox',\n props: props,\n mutuallyExclusive: {\n checked: 'defaultChecked',\n indeterminate: 'defaultIndeterminate',\n },\n });\n }\n}\nfunction useComponentRef(props, isChecked, isIndeterminate, checkBoxRef) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n get checked() {\n return !!isChecked;\n },\n get indeterminate() {\n return !!isIndeterminate;\n },\n focus: function () {\n if (checkBoxRef.current) {\n checkBoxRef.current.focus();\n }\n },\n }); }, [checkBoxRef, isChecked, isIndeterminate]);\n}\n//# sourceMappingURL=Checkbox.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '@fluentui/style-utilities';\nimport { IsFocusVisibleClassName } from '@fluentui/utilities';\nvar GlobalClassNames = {\n root: 'ms-Checkbox',\n label: 'ms-Checkbox-label',\n checkbox: 'ms-Checkbox-checkbox',\n checkmark: 'ms-Checkbox-checkmark',\n text: 'ms-Checkbox-text',\n};\nvar MS_CHECKBOX_LABEL_SIZE = '20px';\nvar MS_CHECKBOX_TRANSITION_DURATION = '200ms';\nvar MS_CHECKBOX_TRANSITION_TIMING = 'cubic-bezier(.4, 0, .23, 1)';\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;\n var className = props.className, theme = props.theme, reversed = props.reversed, checked = props.checked, disabled = props.disabled, isUsingCustomLabelRender = props.isUsingCustomLabelRender, indeterminate = props.indeterminate;\n var semanticColors = theme.semanticColors, effects = theme.effects, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var checkmarkFontColor = semanticColors.inputForegroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBorder\n var checkmarkFontColorHovered = palette.neutralSecondary;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder\n var checkboxBorderColor = palette.neutralPrimary;\n var checkboxBorderIndeterminateColor = semanticColors.inputBackgroundChecked;\n var checkboxBorderColorChecked = semanticColors.inputBackgroundChecked;\n var checkboxBorderColorDisabled = semanticColors.disabledBodySubtext;\n var checkboxBorderHoveredColor = semanticColors.inputBorderHovered;\n var checkboxBorderIndeterminateHoveredColor = semanticColors.inputBackgroundCheckedHovered;\n var checkboxBackgroundChecked = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping the following 2 tokens need to be\n // semanticColors.inputBackgroundCheckedHovered\n var checkboxBackgroundCheckedHovered = semanticColors.inputBackgroundCheckedHovered;\n var checkboxBorderColorCheckedHovered = semanticColors.inputBackgroundCheckedHovered;\n var checkboxHoveredTextColor = semanticColors.inputTextHovered;\n var checkboxBackgroundDisabledChecked = semanticColors.disabledBodySubtext;\n var checkboxTextColor = semanticColors.bodyText;\n var checkboxTextColorDisabled = semanticColors.disabledText;\n var indeterminateDotStyles = [\n (_a = {\n content: '\"\"',\n borderRadius: effects.roundedCorner2,\n position: 'absolute',\n width: 10,\n height: 10,\n top: 4,\n left: 4,\n boxSizing: 'border-box',\n borderWidth: 5,\n borderStyle: 'solid',\n borderColor: disabled ? checkboxBorderColorDisabled : checkboxBorderIndeterminateColor,\n transitionProperty: 'border-width, border, border-color',\n transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,\n transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING\n },\n _a[HighContrastSelector] = {\n borderColor: 'WindowText',\n },\n _a),\n ];\n return {\n root: [\n classNames.root,\n {\n position: 'relative',\n display: 'flex',\n },\n reversed && 'reversed',\n checked && 'is-checked',\n !disabled && 'is-enabled',\n disabled && 'is-disabled',\n !disabled && [\n !checked && (_b = {},\n _b[\":hover .\" + classNames.checkbox] = (_c = {\n borderColor: checkboxBorderHoveredColor\n },\n _c[HighContrastSelector] = {\n borderColor: 'Highlight',\n },\n _c),\n _b[\":focus .\" + classNames.checkbox] = { borderColor: checkboxBorderHoveredColor },\n _b[\":hover .\" + classNames.checkmark] = (_d = {\n color: checkmarkFontColorHovered,\n opacity: '1'\n },\n _d[HighContrastSelector] = {\n color: 'Highlight',\n },\n _d),\n _b),\n checked &&\n !indeterminate && (_e = {},\n _e[\":hover .\" + classNames.checkbox] = {\n background: checkboxBackgroundCheckedHovered,\n borderColor: checkboxBorderColorCheckedHovered,\n },\n _e[\":focus .\" + classNames.checkbox] = {\n background: checkboxBackgroundCheckedHovered,\n borderColor: checkboxBorderColorCheckedHovered,\n },\n _e[HighContrastSelector] = (_f = {},\n _f[\":hover .\" + classNames.checkbox] = {\n background: 'Highlight',\n borderColor: 'Highlight',\n },\n _f[\":focus .\" + classNames.checkbox] = {\n background: 'Highlight',\n },\n _f[\":focus:hover .\" + classNames.checkbox] = {\n background: 'Highlight',\n },\n _f[\":focus:hover .\" + classNames.checkmark] = {\n color: 'Window',\n },\n _f[\":hover .\" + classNames.checkmark] = {\n color: 'Window',\n },\n _f),\n _e),\n indeterminate && (_g = {},\n _g[\":hover .\" + classNames.checkbox + \", :hover .\" + classNames.checkbox + \":after\"] = (_h = {\n borderColor: checkboxBorderIndeterminateHoveredColor\n },\n _h[HighContrastSelector] = {\n borderColor: 'WindowText',\n },\n _h),\n _g[\":focus .\" + classNames.checkbox] = {\n borderColor: checkboxBorderIndeterminateHoveredColor,\n },\n _g[\":hover .\" + classNames.checkmark] = {\n opacity: '0',\n },\n _g),\n (_j = {},\n _j[\":hover .\" + classNames.text + \", :focus .\" + classNames.text] = (_k = {\n color: checkboxHoveredTextColor\n },\n _k[HighContrastSelector] = {\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _k),\n _j),\n ],\n className,\n ],\n input: (_l = {\n position: 'absolute',\n background: 'none',\n opacity: 0\n },\n _l[\".\" + IsFocusVisibleClassName + \" &:focus + label::before\"] = (_m = {\n outline: '1px solid ' + theme.palette.neutralSecondary,\n outlineOffset: '2px'\n },\n _m[HighContrastSelector] = {\n outline: '1px solid WindowText',\n },\n _m),\n _l),\n label: [\n classNames.label,\n theme.fonts.medium,\n {\n display: 'flex',\n alignItems: isUsingCustomLabelRender ? 'center' : 'flex-start',\n cursor: disabled ? 'default' : 'pointer',\n position: 'relative',\n userSelect: 'none',\n },\n reversed && {\n flexDirection: 'row-reverse',\n justifyContent: 'flex-end',\n },\n {\n '&::before': {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n content: '\"\"',\n pointerEvents: 'none',\n },\n },\n ],\n checkbox: [\n classNames.checkbox,\n (_o = {\n position: 'relative',\n display: 'flex',\n flexShrink: 0,\n alignItems: 'center',\n justifyContent: 'center',\n height: MS_CHECKBOX_LABEL_SIZE,\n width: MS_CHECKBOX_LABEL_SIZE,\n border: \"1px solid \" + checkboxBorderColor,\n borderRadius: effects.roundedCorner2,\n boxSizing: 'border-box',\n transitionProperty: 'background, border, border-color',\n transitionDuration: MS_CHECKBOX_TRANSITION_DURATION,\n transitionTimingFunction: MS_CHECKBOX_TRANSITION_TIMING,\n /* in case the icon is bigger than the box */\n overflow: 'hidden',\n ':after': indeterminate ? indeterminateDotStyles : null\n },\n _o[HighContrastSelector] = __assign({ borderColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _o),\n indeterminate && {\n borderColor: checkboxBorderIndeterminateColor,\n },\n !reversed\n ? // This margin on the checkbox is for backwards compat. Notably it has the effect where a customRender\n // is used, there will be only a 4px margin from checkbox to label. The label by default would have\n // another 4px margin for a total of 8px margin between checkbox and label. We don't combine the two\n // (and move it into the text) to not incur a breaking change for everyone using custom render atm.\n {\n marginRight: 4,\n }\n : {\n marginLeft: 4,\n },\n !disabled &&\n !indeterminate &&\n checked && (_p = {\n background: checkboxBackgroundChecked,\n borderColor: checkboxBorderColorChecked\n },\n _p[HighContrastSelector] = {\n background: 'Highlight',\n borderColor: 'Highlight',\n },\n _p),\n disabled && (_q = {\n borderColor: checkboxBorderColorDisabled\n },\n _q[HighContrastSelector] = {\n borderColor: 'GrayText',\n },\n _q),\n checked &&\n disabled && (_r = {\n background: checkboxBackgroundDisabledChecked,\n borderColor: checkboxBorderColorDisabled\n },\n _r[HighContrastSelector] = {\n background: 'Window',\n },\n _r),\n ],\n checkmark: [\n classNames.checkmark,\n (_s = {\n opacity: checked ? '1' : '0',\n color: checkmarkFontColor\n },\n _s[HighContrastSelector] = __assign({ color: disabled ? 'GrayText' : 'Window' }, getHighContrastNoAdjustStyle()),\n _s),\n ],\n text: [\n classNames.text,\n (_t = {\n color: disabled ? checkboxTextColorDisabled : checkboxTextColor,\n fontSize: fonts.medium.fontSize,\n lineHeight: '20px'\n },\n _t[HighContrastSelector] = __assign({ color: disabled ? 'GrayText' : 'WindowText' }, getHighContrastNoAdjustStyle()),\n _t),\n !reversed\n ? {\n marginLeft: 4,\n }\n : {\n marginRight: 4,\n },\n ],\n };\n};\n//# sourceMappingURL=Checkbox.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { CheckboxBase } from './Checkbox.base';\nimport { getStyles } from './Checkbox.styles';\nexport var Checkbox = styled(CheckboxBase, getStyles, undefined, { scope: 'Checkbox' });\n//# sourceMappingURL=Checkbox.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction({\n // Label is used a lot by other components.\n // It's likely to see expected cases which pass different className to the Label.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar LabelBase = /** @class */ (function (_super) {\n __extends(LabelBase, _super);\n function LabelBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n LabelBase.prototype.render = function () {\n var _a = this.props, _b = _a.as, RootType = _b === void 0 ? 'label' : _b, children = _a.children, className = _a.className, disabled = _a.disabled, styles = _a.styles, required = _a.required, theme = _a.theme;\n var classNames = getClassNames(styles, {\n className: className,\n disabled: disabled,\n required: required,\n theme: theme,\n });\n return (React.createElement(RootType, __assign({}, getNativeProps(this.props, divProperties), { className: classNames.root }), children));\n };\n return LabelBase;\n}(React.Component));\nexport { LabelBase };\n//# sourceMappingURL=Label.base.js.map","import { styled } from '../../Utilities';\nimport { LabelBase } from './Label.base';\nimport { getStyles } from './Label.styles';\nexport var Label = styled(LabelBase, getStyles, undefined, {\n scope: 'Label',\n});\n//# sourceMappingURL=Label.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, FontWeights, getHighContrastNoAdjustStyle } from '../../Styling';\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, disabled = props.disabled, required = props.required;\n var semanticColors = theme.semanticColors;\n // Tokens\n var labelFontWeight = FontWeights.semibold;\n var labelColor = semanticColors.bodyText;\n var labelDisabledColor = semanticColors.disabledBodyText;\n var labelRequiredStarColor = semanticColors.errorText;\n return {\n root: [\n 'ms-Label',\n theme.fonts.medium,\n {\n fontWeight: labelFontWeight,\n color: labelColor,\n boxSizing: 'border-box',\n boxShadow: 'none',\n margin: 0,\n display: 'block',\n padding: '5px 0',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n },\n disabled && {\n color: labelDisabledColor,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n required && {\n selectors: {\n '::after': {\n content: \"' *'\",\n color: labelRequiredStarColor,\n paddingRight: 12,\n },\n },\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=Label.styles.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { Image } from '../../../Image';\nimport { Icon } from '../../../Icon';\nimport { classNamesFunction, getNativeProps, inputProperties, css, composeRenderFunction, getPropsWithDefaults, } from '../../../Utilities';\nvar getClassNames = classNamesFunction();\nvar LARGE_IMAGE_SIZE = 71;\nvar DEFAULT_PROPS = {\n // This ensures default imageSize value doesn't mutate. Mutation can cause style re-calcuation.\n imageSize: { width: 32, height: 32 },\n};\nexport var ChoiceGroupOptionBase = function (propsWithoutDefaults) {\n // Mix the `key` prop back in since custom render functions may be expecting it\n // (React uses `key` internally rather than passing it through to the component)\n var props = getPropsWithDefaults(__assign(__assign({}, DEFAULT_PROPS), { key: propsWithoutDefaults.itemKey }), propsWithoutDefaults);\n var ariaLabel = props.ariaLabel, focused = props.focused, required = props.required, theme = props.theme, iconProps = props.iconProps, imageSrc = props.imageSrc, imageSize = props.imageSize, disabled = props.disabled, checked = props.checked, id = props.id, styles = props.styles, name = props.name, rest = __rest(props, [\"ariaLabel\", \"focused\", \"required\", \"theme\", \"iconProps\", \"imageSrc\", \"imageSize\", \"disabled\", \"checked\", \"id\", \"styles\", \"name\"]);\n var classNames = getClassNames(styles, {\n theme: theme,\n hasIcon: !!iconProps,\n hasImage: !!imageSrc,\n checked: checked,\n disabled: disabled,\n imageIsLarge: !!imageSrc && (imageSize.width > LARGE_IMAGE_SIZE || imageSize.height > LARGE_IMAGE_SIZE),\n imageSize: imageSize,\n focused: focused,\n });\n var _a = getNativeProps(rest, inputProperties), className = _a.className, nativeProps = __rest(_a, [\"className\"]);\n var defaultOnRenderLabel = function () {\n return (React.createElement(\"span\", { id: props.labelId, className: \"ms-ChoiceFieldLabel\" }, props.text));\n };\n var defaultOnRenderField = function () {\n var _a = props.imageAlt, imageAlt = _a === void 0 ? '' : _a, selectedImageSrc = props.selectedImageSrc;\n var onRenderLabel = props.onRenderLabel\n ? composeRenderFunction(props.onRenderLabel, defaultOnRenderLabel)\n : defaultOnRenderLabel;\n var label = onRenderLabel(props);\n return (React.createElement(\"label\", { htmlFor: id, className: classNames.field },\n imageSrc && (React.createElement(\"div\", { className: classNames.innerField },\n React.createElement(\"div\", { className: classNames.imageWrapper },\n React.createElement(Image, __assign({ src: imageSrc, alt: imageAlt }, imageSize))),\n React.createElement(\"div\", { className: classNames.selectedImageWrapper },\n React.createElement(Image, __assign({ src: selectedImageSrc, alt: imageAlt }, imageSize))))),\n iconProps && (React.createElement(\"div\", { className: classNames.innerField },\n React.createElement(\"div\", { className: classNames.iconWrapper },\n React.createElement(Icon, __assign({}, iconProps))))),\n imageSrc || iconProps ? React.createElement(\"div\", { className: classNames.labelWrapper }, label) : label));\n };\n var _b = props.onRenderField, onRenderField = _b === void 0 ? defaultOnRenderField : _b;\n var onChange = function (evt) {\n var _a;\n (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, evt, props);\n };\n var onBlur = function (evt) {\n var _a;\n (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, evt);\n };\n var onFocus = function (evt) {\n var _a;\n (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, evt, props);\n };\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(\"div\", { className: classNames.choiceFieldWrapper },\n React.createElement(\"input\", __assign({ \"aria-label\": ariaLabel, id: id, className: css(classNames.input, className), type: \"radio\", name: name, disabled: disabled, checked: checked, required: required }, nativeProps, { onChange: onChange, onFocus: onFocus, onBlur: onBlur })),\n onRenderField(props, defaultOnRenderField))));\n};\nChoiceGroupOptionBase.displayName = 'ChoiceGroupOption';\n//# sourceMappingURL=ChoiceGroupOption.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { IsFocusVisibleClassName } from '../../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-ChoiceField',\n choiceFieldWrapper: 'ms-ChoiceField-wrapper',\n input: 'ms-ChoiceField-input',\n field: 'ms-ChoiceField-field',\n innerField: 'ms-ChoiceField-innerField',\n imageWrapper: 'ms-ChoiceField-imageWrapper',\n iconWrapper: 'ms-ChoiceField-iconWrapper',\n labelWrapper: 'ms-ChoiceField-labelWrapper',\n checked: 'is-checked',\n};\nvar labelWrapperLineHeight = 15;\nvar labelWrapperHeight = labelWrapperLineHeight * 2 + 2; // adding 2px height to ensure text doesn't get cutoff\nvar iconSize = 32;\nvar choiceFieldSize = 20;\nvar choiceFieldTransitionDuration = '200ms';\nvar choiceFieldTransitionTiming = 'cubic-bezier(.4, 0, .23, 1)';\nvar radioButtonSpacing = 3;\nvar radioButtonInnerSize = 5;\nfunction getChoiceGroupFocusStyle(focusBorderColor, hasIconOrImage) {\n var _a, _b;\n return [\n 'is-inFocus',\n {\n selectors: (_a = {},\n _a[\".\" + IsFocusVisibleClassName + \" &\"] = {\n position: 'relative',\n outline: 'transparent',\n selectors: {\n '::-moz-focus-inner': {\n border: 0,\n },\n ':after': {\n content: '\"\"',\n top: -2,\n right: -2,\n bottom: -2,\n left: -2,\n pointerEvents: 'none',\n border: \"1px solid \" + focusBorderColor,\n position: 'absolute',\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n borderColor: 'WindowText',\n borderWidth: hasIconOrImage ? 1 : 2,\n },\n _b),\n },\n },\n },\n _a),\n },\n ];\n}\nfunction getImageWrapperStyle(isSelectedImageWrapper, className, checked) {\n return [\n className,\n {\n paddingBottom: 2,\n transitionProperty: 'opacity',\n transitionDuration: choiceFieldTransitionDuration,\n transitionTimingFunction: 'ease',\n selectors: {\n '.ms-Image': {\n display: 'inline-block',\n borderStyle: 'none',\n },\n },\n },\n (checked ? !isSelectedImageWrapper : isSelectedImageWrapper) && [\n 'is-hidden',\n {\n position: 'absolute',\n left: 0,\n top: 0,\n width: '100%',\n height: '100%',\n overflow: 'hidden',\n opacity: 0,\n },\n ],\n ];\n}\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, hasIcon = props.hasIcon, hasImage = props.hasImage, checked = props.checked, disabled = props.disabled, imageIsLarge = props.imageIsLarge, focused = props.focused, imageSize = props.imageSize;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // Tokens\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.smallInputBorder\n var circleBorderColor = palette.neutralPrimary;\n var circleHoveredBorderColor = semanticColors.inputBorderHovered;\n var circleCheckedBorderColor = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered\n var circleCheckedHoveredBorderColor = palette.themeDark;\n var circleDisabledBorderColor = semanticColors.disabledBodySubtext;\n var circleBackgroundColor = semanticColors.bodyBackground;\n var dotUncheckedHoveredColor = palette.neutralSecondary;\n var dotCheckedColor = semanticColors.inputBackgroundChecked;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered\n var dotCheckedHoveredColor = palette.themeDark;\n var dotDisabledColor = semanticColors.disabledBodySubtext;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.bodyTextChecked\n var labelHoverFocusColor = palette.neutralDark;\n var focusBorderColor = semanticColors.focusBorder;\n var iconOrImageChoiceBorderUncheckedHoveredColor = semanticColors.inputBorderHovered;\n // TODO: after updating the semanticColors slots mapping this needs to be semanticColors.inputBackgroundCheckedHovered\n var iconOrImageChoiceBorderCheckedColor = semanticColors.inputBackgroundChecked;\n var iconOrImageChoiceBorderCheckedHoveredColor = palette.themeDark;\n var iconOrImageChoiceBackgroundColor = palette.neutralLighter;\n var fieldHoverOrFocusProperties = {\n selectors: {\n '.ms-ChoiceFieldLabel': {\n color: labelHoverFocusColor,\n },\n ':before': {\n borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,\n },\n ':after': [\n !hasIcon &&\n !hasImage &&\n !checked && {\n content: '\"\"',\n transitionProperty: 'background-color',\n left: 5,\n top: 5,\n width: 10,\n height: 10,\n backgroundColor: dotUncheckedHoveredColor,\n },\n checked && {\n borderColor: dotCheckedHoveredColor,\n background: dotCheckedHoveredColor,\n },\n ],\n },\n };\n var enabledFieldWithImageHoverOrFocusProperties = {\n borderColor: checked ? iconOrImageChoiceBorderCheckedHoveredColor : iconOrImageChoiceBorderUncheckedHoveredColor,\n selectors: {\n ':before': {\n opacity: 1,\n borderColor: checked ? circleCheckedHoveredBorderColor : circleHoveredBorderColor,\n },\n },\n };\n var circleAreaProperties = [\n {\n content: '\"\"',\n display: 'inline-block',\n backgroundColor: circleBackgroundColor,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: circleBorderColor,\n width: choiceFieldSize,\n height: choiceFieldSize,\n fontWeight: 'normal',\n position: 'absolute',\n top: 0,\n left: 0,\n boxSizing: 'border-box',\n transitionProperty: 'border-color',\n transitionDuration: choiceFieldTransitionDuration,\n transitionTimingFunction: choiceFieldTransitionTiming,\n borderRadius: '50%',\n },\n disabled && {\n borderColor: circleDisabledBorderColor,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ borderColor: 'GrayText', background: 'Window' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n checked && {\n borderColor: disabled ? circleDisabledBorderColor : circleCheckedBorderColor,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n borderColor: 'Highlight',\n background: 'Window',\n forcedColorAdjust: 'none',\n },\n _b),\n },\n (hasIcon || hasImage) && {\n top: radioButtonSpacing,\n right: radioButtonSpacing,\n left: 'auto',\n opacity: checked ? 1 : 0,\n },\n ];\n var dotAreaProperties = [\n {\n content: '\"\"',\n width: 0,\n height: 0,\n borderRadius: '50%',\n position: 'absolute',\n left: choiceFieldSize / 2,\n right: 0,\n transitionProperty: 'border-width',\n transitionDuration: choiceFieldTransitionDuration,\n transitionTimingFunction: choiceFieldTransitionTiming,\n boxSizing: 'border-box',\n },\n checked && {\n borderWidth: 5,\n borderStyle: 'solid',\n borderColor: disabled ? dotDisabledColor : dotCheckedColor,\n background: dotCheckedColor,\n left: 5,\n top: 5,\n width: 10,\n height: 10,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n borderColor: 'Highlight',\n forcedColorAdjust: 'none',\n },\n _c),\n },\n checked &&\n (hasIcon || hasImage) && {\n top: radioButtonSpacing + radioButtonInnerSize,\n right: radioButtonSpacing + radioButtonInnerSize,\n left: 'auto',\n },\n ];\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n display: 'flex',\n alignItems: 'center',\n boxSizing: 'border-box',\n color: semanticColors.bodyText,\n minHeight: 26,\n border: 'none',\n position: 'relative',\n marginTop: 8,\n selectors: {\n '.ms-ChoiceFieldLabel': {\n display: 'inline-block',\n },\n },\n },\n !hasIcon &&\n !hasImage && {\n selectors: {\n '.ms-ChoiceFieldLabel': {\n paddingLeft: '26px',\n },\n },\n },\n hasImage && 'ms-ChoiceField--image',\n hasIcon && 'ms-ChoiceField--icon',\n (hasIcon || hasImage) && {\n display: 'inline-flex',\n fontSize: 0,\n margin: '0 4px 4px 0',\n paddingLeft: 0,\n backgroundColor: iconOrImageChoiceBackgroundColor,\n height: '100%',\n },\n ],\n choiceFieldWrapper: [\n classNames.choiceFieldWrapper,\n focused && getChoiceGroupFocusStyle(focusBorderColor, hasIcon || hasImage),\n ],\n // The hidden input\n input: [\n classNames.input,\n {\n position: 'absolute',\n opacity: 0,\n top: 0,\n right: 0,\n width: '100%',\n height: '100%',\n margin: 0,\n },\n disabled && 'is-disabled',\n ],\n field: [\n classNames.field,\n checked && classNames.checked,\n {\n display: 'inline-block',\n cursor: 'pointer',\n marginTop: 0,\n position: 'relative',\n verticalAlign: 'top',\n userSelect: 'none',\n minHeight: 20,\n selectors: {\n ':hover': !disabled && fieldHoverOrFocusProperties,\n ':focus': !disabled && fieldHoverOrFocusProperties,\n // The circle\n ':before': circleAreaProperties,\n // The dot\n ':after': dotAreaProperties,\n },\n },\n hasIcon && 'ms-ChoiceField--icon',\n hasImage && 'ms-ChoiceField-field--image',\n (hasIcon || hasImage) && {\n boxSizing: 'content-box',\n cursor: 'pointer',\n paddingTop: 22,\n margin: 0,\n textAlign: 'center',\n transitionProperty: 'all',\n transitionDuration: choiceFieldTransitionDuration,\n transitionTimingFunction: 'ease',\n border: '1px solid transparent',\n justifyContent: 'center',\n alignItems: 'center',\n display: 'flex',\n flexDirection: 'column',\n },\n checked && {\n borderColor: iconOrImageChoiceBorderCheckedColor,\n },\n (hasIcon || hasImage) &&\n !disabled && {\n selectors: {\n ':hover': enabledFieldWithImageHoverOrFocusProperties,\n ':focus': enabledFieldWithImageHoverOrFocusProperties,\n },\n },\n disabled && {\n cursor: 'default',\n selectors: {\n '.ms-ChoiceFieldLabel': {\n color: semanticColors.disabledBodyText,\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n },\n },\n checked &&\n disabled && {\n borderColor: iconOrImageChoiceBackgroundColor,\n },\n ],\n innerField: [\n classNames.innerField,\n hasImage && {\n // using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.\n height: imageSize.height,\n width: imageSize.width,\n },\n (hasIcon || hasImage) && {\n position: 'relative',\n display: 'inline-block',\n paddingLeft: 30,\n paddingRight: 30,\n },\n (hasIcon || hasImage) &&\n imageIsLarge && {\n paddingLeft: 24,\n paddingRight: 24,\n },\n (hasIcon || hasImage) &&\n disabled && {\n opacity: 0.25,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'GrayText',\n opacity: 1,\n },\n _e),\n },\n ],\n imageWrapper: getImageWrapperStyle(false, classNames.imageWrapper, checked),\n selectedImageWrapper: getImageWrapperStyle(true, classNames.imageWrapper, checked),\n iconWrapper: [\n classNames.iconWrapper,\n {\n fontSize: iconSize,\n lineHeight: iconSize,\n height: iconSize,\n },\n ],\n labelWrapper: [\n classNames.labelWrapper,\n fonts.medium,\n (hasIcon || hasImage) && {\n display: 'block',\n position: 'relative',\n margin: '4px 8px 2px 8px',\n height: labelWrapperHeight,\n lineHeight: labelWrapperLineHeight,\n // using non-null assertion because we have a default in `ChoiceGroupOptionBase` class.\n maxWidth: imageSize.width * 2,\n overflow: 'hidden',\n whiteSpace: 'pre-wrap',\n },\n ],\n };\n};\n//# sourceMappingURL=ChoiceGroupOption.styles.js.map","import { styled } from '../../../Utilities';\nimport { ChoiceGroupOptionBase } from './ChoiceGroupOption.base';\nimport { getStyles } from './ChoiceGroupOption.styles';\nexport var ChoiceGroupOption = styled(ChoiceGroupOptionBase, getStyles, undefined, { scope: 'ChoiceGroupOption' });\n//# sourceMappingURL=ChoiceGroupOption.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { Label } from '../../Label';\nimport { classNamesFunction, elementContains, find, getNativeProps, divProperties, setFocusVisibility, useFocusRects, } from '../../Utilities';\nimport { ChoiceGroupOption } from './ChoiceGroupOption/index';\nimport { useId, useControllableValue, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar getOptionId = function (option, id) {\n return id + \"-\" + option.key;\n};\nvar findOption = function (options, key) {\n return key === undefined ? undefined : find(options, function (value) { return value.key === key; });\n};\nvar focusSelectedOption = function (options, keyChecked, id) {\n var optionToFocus = findOption(options, keyChecked) || options.filter(function (option) { return !option.disabled; })[0];\n var elementToFocus = optionToFocus && document.getElementById(getOptionId(optionToFocus, id));\n if (elementToFocus) {\n elementToFocus.focus();\n setFocusVisibility(true, elementToFocus);\n }\n};\n// Test if focus came from a sibling DOM element\nvar focusFromSibling = function (evt) {\n return !!(evt.relatedTarget && !elementContains(evt.currentTarget, evt.relatedTarget));\n};\nvar useComponentRef = function (options, keyChecked, id, componentRef) {\n React.useImperativeHandle(componentRef, function () { return ({\n get checkedOption() {\n return findOption(options, keyChecked);\n },\n focus: function () {\n focusSelectedOption(options, keyChecked, id);\n },\n }); }, [options, keyChecked, id]);\n};\nvar COMPONENT_NAME = 'ChoiceGroup';\nexport var ChoiceGroupBase = React.forwardRef(function (props, forwardedRef) {\n var className = props.className, theme = props.theme, styles = props.styles, _a = props.options, options = _a === void 0 ? [] : _a, label = props.label, required = props.required, disabled = props.disabled, name = props.name, defaultSelectedKey = props.defaultSelectedKey, componentRef = props.componentRef, onChange = props.onChange;\n var id = useId('ChoiceGroup');\n var labelId = useId('ChoiceGroupLabel');\n var divProps = getNativeProps(props, divProperties, [\n 'onChange',\n 'className',\n 'required',\n ]);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n optionsContainIconOrImage: options.some(function (option) { return !!(option.iconProps || option.imageSrc); }),\n });\n var ariaLabelledBy = props.ariaLabelledBy || (label ? labelId : props['aria-labelledby']);\n var _b = useControllableValue(props.selectedKey, defaultSelectedKey), keyChecked = _b[0], setKeyChecked = _b[1];\n var _c = React.useState(), keyFocused = _c[0], setKeyFocused = _c[1];\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n useDebugWarnings(props);\n useComponentRef(options, keyChecked, id, componentRef);\n useFocusRects(rootRef);\n var onFocus = React.useCallback(function (ev, option) {\n var _a;\n if (option) {\n setKeyFocused(option.itemKey);\n (_a = option.onFocus) === null || _a === void 0 ? void 0 : _a.call(option, ev);\n }\n }, []);\n var onBlur = React.useCallback(function (ev, option) {\n var _a;\n setKeyFocused(undefined);\n (_a = option === null || option === void 0 ? void 0 : option.onBlur) === null || _a === void 0 ? void 0 : _a.call(option, ev);\n }, []);\n var onOptionChange = React.useCallback(function (evt, option) {\n var _a;\n if (!option) {\n return;\n }\n setKeyChecked(option.itemKey);\n (_a = option.onChange) === null || _a === void 0 ? void 0 : _a.call(option, evt);\n onChange === null || onChange === void 0 ? void 0 : onChange(evt, findOption(options, option.itemKey));\n }, [onChange, options, setKeyChecked]);\n var onRadioFocus = React.useCallback(function (evt) {\n // Handles scenarios like this bug: https://github.com/microsoft/fluentui/issues/20173\n if (focusFromSibling(evt)) {\n focusSelectedOption(options, keyChecked, id);\n }\n }, [options, keyChecked, id]);\n return (React.createElement(\"div\", __assign({ className: classNames.root }, divProps, { ref: mergedRootRefs }),\n React.createElement(\"div\", __assign({ role: \"radiogroup\" }, (ariaLabelledBy && { 'aria-labelledby': ariaLabelledBy }), { onFocus: onRadioFocus }),\n label && (React.createElement(Label, { className: classNames.label, required: required, id: labelId, disabled: disabled }, label)),\n React.createElement(\"div\", { className: classNames.flexContainer }, options.map(function (option) {\n return (React.createElement(ChoiceGroupOption, __assign({ itemKey: option.key }, option, { key: option.key, onBlur: onBlur, onFocus: onFocus, onChange: onOptionChange, focused: option.key === keyFocused, checked: option.key === keyChecked, disabled: option.disabled || disabled, id: getOptionId(option, id), labelId: option.labelId || labelId + \"-\" + option.key, name: name || id, required: required })));\n })))));\n});\nChoiceGroupBase.displayName = COMPONENT_NAME;\nfunction useDebugWarnings(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n mutuallyExclusive: {\n selectedKey: 'defaultSelectedKey',\n },\n });\n }\n}\n//# sourceMappingURL=ChoiceGroup.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-ChoiceFieldGroup',\n flexContainer: 'ms-ChoiceFieldGroup-flexContainer',\n};\nexport var getStyles = function (props) {\n var className = props.className, optionsContainIconOrImage = props.optionsContainIconOrImage, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n className,\n classNames.root,\n theme.fonts.medium,\n {\n display: 'block',\n },\n ],\n flexContainer: [\n classNames.flexContainer,\n optionsContainIconOrImage && {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'wrap',\n },\n ],\n };\n};\n//# sourceMappingURL=ChoiceGroup.styles.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { getClassNames } from './PositioningContainer.styles';\nimport { ZIndexes } from '../../../Styling';\nimport { Layer } from '../../../Layer';\n// Utilites/Helpers\nimport { DirectionalHint } from '../../../common/DirectionalHint';\nimport { css, elementContains, focusFirstChild, EventGroup, getPropsWithDefaults } from '../../../Utilities';\nimport { getMaxHeight, positionElement, RectangleEdge } from '../../../Positioning';\nimport { AnimationClassNames, mergeStyles } from '../../../Styling';\nimport { useMergedRefs, useAsync, useTarget } from '@fluentui/react-hooks';\nvar OFF_SCREEN_STYLE = { opacity: 0 };\n// In order for some of the max height logic to work properly we need to set the border.\n// The value is arbitrary.\nvar BORDER_WIDTH = 1;\nvar SLIDE_ANIMATIONS = (_a = {},\n _a[RectangleEdge.top] = 'slideUpIn20',\n _a[RectangleEdge.bottom] = 'slideDownIn20',\n _a[RectangleEdge.left] = 'slideLeftIn20',\n _a[RectangleEdge.right] = 'slideRightIn20',\n _a);\nvar DEFAULT_PROPS = {\n preventDismissOnScroll: false,\n offsetFromTarget: 0,\n minPagePadding: 8,\n directionalHint: DirectionalHint.bottomAutoEdge,\n};\nfunction useCachedBounds(props, targetWindow) {\n /** The bounds used when determining if and where the PositioningContainer should be placed. */\n var positioningBounds = React.useRef();\n var getCachedBounds = function () {\n if (!positioningBounds.current) {\n var currentBounds = props.bounds;\n if (!currentBounds) {\n currentBounds = {\n top: 0 + props.minPagePadding,\n left: 0 + props.minPagePadding,\n right: targetWindow.innerWidth - props.minPagePadding,\n bottom: targetWindow.innerHeight - props.minPagePadding,\n width: targetWindow.innerWidth - props.minPagePadding * 2,\n height: targetWindow.innerHeight - props.minPagePadding * 2,\n };\n }\n positioningBounds.current = currentBounds;\n }\n return positioningBounds.current;\n };\n return getCachedBounds;\n}\nfunction usePositionState(props, positionedHost, contentHost, targetRef, getCachedBounds) {\n var async = useAsync();\n /**\n * Current set of calculated positions for the outermost parent container.\n */\n var _a = React.useState(), positions = _a[0], setPositions = _a[1];\n var positionAttempts = React.useRef(0);\n var updateAsyncPosition = function () {\n async.requestAnimationFrame(function () { return updatePosition(); });\n };\n var updatePosition = function () {\n var offsetFromTarget = props.offsetFromTarget, onPositioned = props.onPositioned;\n var hostElement = positionedHost.current;\n var positioningContainerElement = contentHost.current;\n if (hostElement && positioningContainerElement) {\n var currentProps = __assign({}, props);\n currentProps.bounds = getCachedBounds();\n currentProps.target = targetRef.current;\n var target = currentProps.target;\n if (target) {\n // Check if the target is an Element or a MouseEvent and the document contains it\n // or don't check anything else if the target is a Point or Rectangle\n if ((!target.getBoundingClientRect && !target.preventDefault) ||\n document.body.contains(target)) {\n currentProps.gapSpace = offsetFromTarget;\n var newPositions = positionElement(currentProps, hostElement, positioningContainerElement);\n // Set the new position only when the positions are not exists or one of the new positioningContainer\n // positions are different. The position should not change if the position is within 2 decimal places.\n if ((!positions && newPositions) ||\n (positions && newPositions && !arePositionsEqual(positions, newPositions) && positionAttempts.current < 5)) {\n // We should not reposition the positioningContainer more than a few times, if it is then the content is\n // likely resizing and we should stop trying to reposition to prevent a stack overflow.\n positionAttempts.current++;\n setPositions(newPositions);\n onPositioned === null || onPositioned === void 0 ? void 0 : onPositioned(newPositions);\n }\n else {\n positionAttempts.current = 0;\n onPositioned === null || onPositioned === void 0 ? void 0 : onPositioned(newPositions);\n }\n }\n else if (positions !== undefined) {\n setPositions(undefined);\n }\n }\n else if (positions !== undefined) {\n setPositions(undefined);\n }\n }\n };\n React.useEffect(updateAsyncPosition);\n return [positions, updateAsyncPosition];\n}\nfunction useSetInitialFocus(_a, contentHost, positions) {\n var setInitialFocus = _a.setInitialFocus;\n var didSetInitialFocus = React.useRef(false);\n React.useEffect(function () {\n if (!didSetInitialFocus.current && contentHost.current && setInitialFocus && positions) {\n didSetInitialFocus.current = true;\n focusFirstChild(contentHost.current);\n }\n });\n}\nfunction useMaxHeight(_a, targetRef, getCachedBounds) {\n var directionalHintFixed = _a.directionalHintFixed, offsetFromTarget = _a.offsetFromTarget, directionalHint = _a.directionalHint, target = _a.target;\n /**\n * The maximum height the PositioningContainer can grow to\n * without going beyond the window or target bounds\n */\n var maxHeight = React.useRef();\n // If the target element changed, reset the max height. If we are tracking\n // target with class name, always reset because we do not know if\n // fabric has rendered a new element and disposed the old element.\n if (typeof target === 'string') {\n maxHeight.current = undefined;\n }\n React.useEffect(function () {\n maxHeight.current = undefined;\n }, [target, offsetFromTarget]);\n /**\n * Return the maximum height the container can grow to\n * without going out of the specified bounds\n */\n var getCachedMaxHeight = function () {\n if (!maxHeight.current) {\n if (directionalHintFixed && targetRef.current) {\n var gapSpace = offsetFromTarget ? offsetFromTarget : 0;\n maxHeight.current = getMaxHeight(targetRef.current, directionalHint, gapSpace, getCachedBounds());\n }\n else {\n maxHeight.current = getCachedBounds().height - BORDER_WIDTH * 2;\n }\n }\n return maxHeight.current;\n };\n return getCachedMaxHeight;\n}\nfunction useAutoDismissEvents(_a, positionedHost, targetWindow, targetRef, positions, updateAsyncPosition) {\n var onDismiss = _a.onDismiss, preventDismissOnScroll = _a.preventDismissOnScroll;\n var async = useAsync();\n var onResize = React.useCallback(function (ev) {\n if (onDismiss) {\n onDismiss(ev);\n }\n else {\n updateAsyncPosition();\n }\n }, [onDismiss, updateAsyncPosition]);\n var dismissOnLostFocus = React.useCallback(function (ev) {\n var target = ev.target;\n var clickedOutsideCallout = positionedHost.current && !elementContains(positionedHost.current, target);\n if ((!targetRef.current && clickedOutsideCallout) ||\n (ev.target !== targetWindow &&\n clickedOutsideCallout &&\n (targetRef.current.stopPropagation ||\n !targetRef.current ||\n (target !== targetRef.current && !elementContains(targetRef.current, target))))) {\n onResize(ev);\n }\n }, [onResize, positionedHost, targetRef, targetWindow]);\n var dismissOnScroll = React.useCallback(function (ev) {\n if (positions && !preventDismissOnScroll) {\n dismissOnLostFocus(ev);\n }\n }, [dismissOnLostFocus, positions, preventDismissOnScroll]);\n React.useEffect(function () {\n var events = new EventGroup({});\n // This is added so the positioningContainer will dismiss when the window is scrolled\n // but not when something inside the positioningContainer is scrolled. The delay seems\n // to be required to avoid React firing an async focus event in IE from\n // the target changing focus quickly prior to rendering the positioningContainer.\n async.setTimeout(function () {\n var _a, _b;\n events.on(targetWindow, 'scroll', async.throttle(dismissOnScroll, 10), true);\n events.on(targetWindow, 'resize', async.throttle(onResize, 10), true);\n events.on((_a = targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document) === null || _a === void 0 ? void 0 : _a.body, 'focus', dismissOnLostFocus, true);\n events.on((_b = targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document) === null || _b === void 0 ? void 0 : _b.body, 'click', dismissOnLostFocus, true);\n }, 0);\n return function () { return events.dispose(); };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on mount\n }, [dismissOnScroll]);\n}\nexport function useHeightOffset(_a, contentHost) {\n var finalHeight = _a.finalHeight;\n /**\n * Tracks the current height offset and updates during\n * the height animation when props.finalHeight is specified.\n */\n var _b = React.useState(0), heightOffset = _b[0], setHeightOffset = _b[1];\n var async = useAsync();\n var setHeightOffsetTimer = React.useRef(0);\n /** Animates the height if finalHeight was given. */\n var setHeightOffsetEveryFrame = function () {\n if (contentHost && finalHeight) {\n setHeightOffsetTimer.current = async.requestAnimationFrame(function () {\n if (!contentHost.current) {\n return;\n }\n var positioningContainerMainElem = contentHost.current.lastChild;\n var cardScrollHeight = positioningContainerMainElem.scrollHeight;\n var cardCurrHeight = positioningContainerMainElem.offsetHeight;\n var scrollDiff = cardScrollHeight - cardCurrHeight;\n setHeightOffset(heightOffset + scrollDiff);\n if (positioningContainerMainElem.offsetHeight < finalHeight) {\n setHeightOffsetEveryFrame();\n }\n else {\n async.cancelAnimationFrame(setHeightOffsetTimer.current);\n }\n });\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only re-run if finalHeight changes\n React.useEffect(setHeightOffsetEveryFrame, [finalHeight]);\n return heightOffset;\n}\nexport var PositioningContainer = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n // @TODO rename to reflect the name of this class\n var contentHost = React.useRef(null);\n /**\n * The primary positioned div.\n */\n var positionedHost = React.useRef(null);\n var rootRef = useMergedRefs(forwardedRef, positionedHost);\n var _a = useTarget(props.target, positionedHost), targetRef = _a[0], targetWindow = _a[1];\n var getCachedBounds = useCachedBounds(props, targetWindow);\n var _b = usePositionState(props, positionedHost, contentHost, targetRef, getCachedBounds), positions = _b[0], updateAsyncPosition = _b[1];\n var getCachedMaxHeight = useMaxHeight(props, targetRef, getCachedBounds);\n var heightOffset = useHeightOffset(props, contentHost);\n useSetInitialFocus(props, contentHost, positions);\n useAutoDismissEvents(props, positionedHost, targetWindow, targetRef, positions, updateAsyncPosition);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on initial render\n React.useEffect(function () { var _a; return (_a = props.onLayerMounted) === null || _a === void 0 ? void 0 : _a.call(props); }, []);\n // If there is no target window then we are likely in server side rendering and we should not render anything.\n if (!targetWindow) {\n return null;\n }\n var className = props.className, doNotLayer = props.doNotLayer, positioningContainerWidth = props.positioningContainerWidth, positioningContainerMaxHeight = props.positioningContainerMaxHeight, children = props.children;\n var styles = getClassNames();\n var directionalClassName = positions && positions.targetEdge ? AnimationClassNames[SLIDE_ANIMATIONS[positions.targetEdge]] : '';\n var getContentMaxHeight = getCachedMaxHeight() + heightOffset;\n var contentMaxHeight = positioningContainerMaxHeight && positioningContainerMaxHeight > getContentMaxHeight\n ? getContentMaxHeight\n : positioningContainerMaxHeight;\n var content = (React.createElement(\"div\", { ref: rootRef, className: css('ms-PositioningContainer', styles.container) },\n React.createElement(\"div\", { className: mergeStyles('ms-PositioningContainer-layerHost', styles.root, className, directionalClassName, !!positioningContainerWidth && { width: positioningContainerWidth }, doNotLayer && { zIndex: ZIndexes.Layer }), style: positions ? positions.elementPosition : OFF_SCREEN_STYLE, \n // Safari and Firefox on Mac OS requires this to back-stop click events so focus remains in the Callout.\n // See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Clicking_and_focus\n tabIndex: -1, ref: contentHost },\n children,\n // @TODO apply to the content container\n contentMaxHeight)));\n return doNotLayer ? content : React.createElement(Layer, null, content);\n});\nPositioningContainer.displayName = 'PositioningContainer';\nfunction arePositionsEqual(positions, newPosition) {\n return comparePositions(positions.elementPosition, newPosition.elementPosition);\n}\nfunction comparePositions(oldPositions, newPositions) {\n for (var key in newPositions) {\n if (newPositions.hasOwnProperty(key)) {\n var oldPositionEdge = oldPositions[key];\n var newPositionEdge = newPositions[key];\n if (oldPositionEdge && newPositionEdge) {\n if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {\n return false;\n }\n }\n }\n }\n return true;\n}\n//# sourceMappingURL=PositioningContainer.js.map","import { styled } from '../../Utilities';\nimport { ChoiceGroupBase } from './ChoiceGroup.base';\nimport { getStyles } from './ChoiceGroup.styles';\nexport var ChoiceGroup = styled(ChoiceGroupBase, getStyles, undefined, { scope: 'ChoiceGroup' });\n//# sourceMappingURL=ChoiceGroup.js.map","import { keyframes, PulsingBeaconAnimationStyles, HighContrastSelector } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName, memoizeFunction } from '../../Utilities';\nexport var COACHMARK_WIDTH = 32;\nexport var COACHMARK_HEIGHT = 32;\nexport var translateOne = memoizeFunction(function () {\n return keyframes({\n '0%': {\n transform: 'translate(0, 0)',\n animationTimingFunction: 'linear',\n },\n '78.57%': {\n transform: 'translate(0, 0)',\n animationTimingFunction: 'cubic-bezier(0.62, 0, 0.56, 1)',\n },\n '82.14%': {\n transform: 'translate(0, -5px)',\n animationTimingFunction: 'cubic-bezier(0.58, 0, 0, 1)',\n },\n '84.88%': {\n transform: 'translate(0, 9px)',\n animationTimingFunction: 'cubic-bezier(1, 0, 0.56, 1)',\n },\n '88.1%': {\n transform: 'translate(0, -2px)',\n animationTimingFunction: 'cubic-bezier(0.58, 0, 0.67, 1)',\n },\n '90.12%': {\n transform: 'translate(0, 0)',\n animationTimingFunction: 'linear',\n },\n '100%': {\n transform: 'translate(0, 0)',\n },\n });\n});\nexport var scaleOne = memoizeFunction(function () {\n return keyframes({\n '0%': {\n transform: ' scale(0)',\n animationTimingFunction: 'linear',\n },\n '14.29%': {\n transform: 'scale(0)',\n animationTimingFunction: 'cubic-bezier(0.84, 0, 0.52, 0.99)',\n },\n '16.67%': {\n transform: 'scale(1.15)',\n animationTimingFunction: 'cubic-bezier(0.48, -0.01, 0.52, 1.01)',\n },\n '19.05%': {\n transform: 'scale(0.95)',\n animationTimingFunction: 'cubic-bezier(0.48, 0.02, 0.52, 0.98)',\n },\n '21.43%': {\n transform: 'scale(1)',\n animationTimingFunction: 'linear',\n },\n '42.86%': {\n transform: 'scale(1)',\n animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)',\n },\n '45.71%': {\n transform: 'scale(0.8)',\n animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)',\n },\n '50%': {\n transform: 'scale(1)',\n animationTimingFunction: 'linear',\n },\n '90.12%': {\n transform: 'scale(1)',\n animationTimingFunction: 'cubic-bezier(0.48, -0.02, 0.52, 1.02)',\n },\n '92.98%': {\n transform: 'scale(0.8)',\n animationTimingFunction: 'cubic-bezier(0.48, 0.01, 0.52, 0.99)',\n },\n '97.26%': {\n transform: 'scale(1)',\n animationTimingFunction: 'linear',\n },\n '100%': {\n transform: 'scale(1)',\n },\n });\n});\nexport var rotateOne = memoizeFunction(function () {\n return keyframes({\n '0%': {\n transform: 'rotate(0deg)',\n animationTimingFunction: 'linear',\n },\n '83.33%': {\n transform: ' rotate(0deg)',\n animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n },\n '83.93%': {\n transform: 'rotate(15deg)',\n animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n },\n '84.52%': {\n transform: 'rotate(-15deg)',\n animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n },\n '85.12%': {\n transform: 'rotate(15deg)',\n animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n },\n '85.71%': {\n transform: 'rotate(-15deg)',\n animationTimingFunction: 'cubic-bezier(0.33, 0, 0.67, 1)',\n },\n '86.31%': {\n transform: 'rotate(0deg)',\n animationTimingFunction: 'linear',\n },\n '100%': {\n transform: 'rotate(0deg)',\n },\n });\n});\nexport function getStyles(props) {\n var _a;\n var theme = props.theme, className = props.className, color = props.color, beaconColorOne = props.beaconColorOne, beaconColorTwo = props.beaconColorTwo, delayBeforeCoachmarkAnimation = props.delayBeforeCoachmarkAnimation, isCollapsed = props.isCollapsed, isMeasuring = props.isMeasuring, entityHostHeight = props.entityHostHeight, entityHostWidth = props.entityHostWidth, transformOrigin = props.transformOrigin;\n if (!theme) {\n throw new Error('theme is undefined or null in base Dropdown getStyles function.');\n }\n var animationInnerDimension = '35px';\n var animationOuterDimension = '150px';\n var animationBorderWidth = '10px';\n var ContinuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationDouble(beaconColorOne ? beaconColorOne : theme.palette.themePrimary, beaconColorTwo ? beaconColorTwo : theme.palette.themeTertiary, animationInnerDimension, animationOuterDimension, animationBorderWidth);\n var ContinuousPulseAnimation = PulsingBeaconAnimationStyles.createDefaultAnimation(ContinuousPulse, delayBeforeCoachmarkAnimation);\n return {\n root: [\n theme.fonts.medium,\n {\n position: 'relative',\n },\n className,\n ],\n pulsingBeacon: [\n {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: getRTL(theme) ? 'translate(50%, -50%)' : 'translate(-50%, -50%)',\n width: '0px',\n height: '0px',\n borderRadius: '225px',\n borderStyle: 'solid',\n opacity: '0',\n },\n isCollapsed && ContinuousPulseAnimation,\n ],\n // Translate Animation Layer\n translateAnimationContainer: [\n {\n width: '100%',\n height: '100%',\n },\n isCollapsed && {\n animationDuration: '14s',\n animationTimingFunction: 'linear',\n animationDirection: 'normal',\n animationIterationCount: '1',\n animationDelay: '0s',\n animationFillMode: 'forwards',\n animationName: translateOne(),\n transition: 'opacity 0.5s ease-in-out',\n },\n !isCollapsed && {\n opacity: '1',\n },\n ],\n // Scale Animation Layer\n scaleAnimationLayer: [\n {\n width: '100%',\n height: '100%',\n },\n isCollapsed && {\n animationDuration: '14s',\n animationTimingFunction: 'linear',\n animationDirection: 'normal',\n animationIterationCount: '1',\n animationDelay: '0s',\n animationFillMode: 'forwards',\n animationName: scaleOne(),\n },\n ],\n // Rotate Animation Layer\n rotateAnimationLayer: [\n {\n width: '100%',\n height: '100%',\n },\n isCollapsed && {\n animationDuration: '14s',\n animationTimingFunction: 'linear',\n animationDirection: 'normal',\n animationIterationCount: '1',\n animationDelay: '0s',\n animationFillMode: 'forwards',\n animationName: rotateOne(),\n },\n !isCollapsed && {\n opacity: '1',\n },\n ],\n // Layer Host, defaults to collapsed\n entityHost: [\n {\n position: 'relative',\n outline: 'none',\n overflow: 'hidden',\n backgroundColor: color,\n borderRadius: COACHMARK_WIDTH,\n transition: 'border-radius 250ms, width 500ms, height 500ms cubic-bezier(0.5, 0, 0, 1)',\n visibility: 'hidden',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n backgroundColor: 'Window',\n border: '2px solid WindowText',\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n outline: \"1px solid \" + theme.palette.themeTertiary,\n },\n _a),\n },\n !isMeasuring &&\n isCollapsed && {\n width: COACHMARK_WIDTH,\n height: COACHMARK_HEIGHT,\n },\n !isMeasuring && {\n visibility: 'visible',\n },\n !isCollapsed && {\n borderRadius: '1px',\n opacity: '1',\n width: entityHostWidth,\n height: entityHostHeight,\n },\n ],\n entityInnerHost: [\n {\n transition: 'transform 500ms cubic-bezier(0.5, 0, 0, 1)',\n transformOrigin: transformOrigin,\n transform: 'scale(0)',\n },\n !isCollapsed && {\n width: entityHostWidth,\n height: entityHostHeight,\n transform: 'scale(1)',\n },\n !isMeasuring && {\n visibility: 'visible',\n },\n ],\n childrenContainer: [\n {\n display: !isMeasuring && isCollapsed ? 'none' : 'block',\n },\n ],\n ariaContainer: {\n position: 'fixed',\n opacity: 0,\n height: 0,\n width: 0,\n pointerEvents: 'none',\n },\n };\n}\n//# sourceMappingURL=Coachmark.styles.js.map","import { memoizeFunction } from '../../../Utilities';\nimport { mergeStyleSets, focusClear, HighContrastSelector } from '../../../Styling';\nexport var getClassNames = memoizeFunction(function () {\n var _a;\n return mergeStyleSets({\n root: [\n {\n position: 'absolute',\n boxSizing: 'border-box',\n border: '1px solid ${}',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: '1px solid WindowText',\n },\n _a),\n },\n focusClear(),\n ],\n container: {\n position: 'relative',\n },\n main: {\n backgroundColor: '#ffffff',\n overflowX: 'hidden',\n overflowY: 'hidden',\n position: 'relative',\n },\n overFlowYHidden: {\n overflowY: 'hidden',\n },\n });\n});\n//# sourceMappingURL=PositioningContainer.styles.js.map","import { HighContrastSelector } from '../../../Styling';\nexport function getStyles(props) {\n var _a;\n return {\n root: [\n {\n position: 'absolute',\n boxShadow: 'inherit',\n border: 'none',\n boxSizing: 'border-box',\n transform: props.transform,\n width: props.width,\n height: props.height,\n left: props.left,\n top: props.top,\n right: props.right,\n bottom: props.bottom,\n },\n ],\n beak: {\n fill: props.color,\n display: 'block',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n fill: 'windowtext',\n },\n _a),\n },\n };\n}\n//# sourceMappingURL=Beak.styles.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport { getStyles } from './Beak.styles';\nimport { RectangleEdge } from '../../../Positioning';\nexport var BEAK_HEIGHT = 10;\nexport var BEAK_WIDTH = 18;\nexport var Beak = React.forwardRef(function (props, forwardedRef) {\n var left = props.left, top = props.top, bottom = props.bottom, right = props.right, color = props.color, _a = props.direction, direction = _a === void 0 ? RectangleEdge.top : _a;\n var svgHeight;\n var svgWidth;\n if (direction === RectangleEdge.top || direction === RectangleEdge.bottom) {\n svgHeight = BEAK_HEIGHT;\n svgWidth = BEAK_WIDTH;\n }\n else {\n svgHeight = BEAK_WIDTH;\n svgWidth = BEAK_HEIGHT;\n }\n var pointOne;\n var pointTwo;\n var pointThree;\n var transform;\n switch (direction) {\n case RectangleEdge.top:\n default:\n pointOne = BEAK_WIDTH / 2 + \", 0\";\n pointTwo = BEAK_WIDTH + \", \" + BEAK_HEIGHT;\n pointThree = \"0, \" + BEAK_HEIGHT;\n transform = 'translateY(-100%)';\n break;\n case RectangleEdge.right:\n pointOne = \"0, 0\";\n pointTwo = BEAK_HEIGHT + \", \" + BEAK_HEIGHT;\n pointThree = \"0, \" + BEAK_WIDTH;\n transform = 'translateX(100%)';\n break;\n case RectangleEdge.bottom:\n pointOne = \"0, 0\";\n pointTwo = BEAK_WIDTH + \", 0\";\n pointThree = BEAK_WIDTH / 2 + \", \" + BEAK_HEIGHT;\n transform = 'translateY(100%)';\n break;\n case RectangleEdge.left:\n pointOne = BEAK_HEIGHT + \", 0\";\n pointTwo = \"0, \" + BEAK_HEIGHT;\n pointThree = BEAK_HEIGHT + \", \" + BEAK_WIDTH;\n transform = 'translateX(-100%)';\n break;\n }\n var getClassNames = classNamesFunction();\n var classNames = getClassNames(getStyles, {\n left: left,\n top: top,\n bottom: bottom,\n right: right,\n height: svgHeight + \"px\",\n width: svgWidth + \"px\",\n transform: transform,\n color: color,\n });\n return (React.createElement(\"div\", { className: classNames.root, role: \"presentation\", ref: forwardedRef },\n React.createElement(\"svg\", { height: svgHeight, width: svgWidth, className: classNames.beak },\n React.createElement(\"polygon\", { points: pointOne + ' ' + pointTwo + ' ' + pointThree }))));\n});\nBeak.displayName = 'Beak';\n//# sourceMappingURL=Beak.js.map","import { __assign } from \"tslib\";\n// Utilities\nimport * as React from 'react';\nimport { classNamesFunction, elementContains, focusFirstChild, getDocument, KeyCodes, getRTL, EventGroup, getPropsWithDefaults, } from '../../Utilities';\nimport { RectangleEdge, getOppositeEdge } from '../../Positioning';\n// Component Dependencies\nimport { PositioningContainer } from './PositioningContainer/index';\nimport { Beak, BEAK_HEIGHT, BEAK_WIDTH } from './Beak/Beak';\nimport { DirectionalHint } from '../../common/DirectionalHint';\n// Coachmark\nimport { COACHMARK_HEIGHT, COACHMARK_WIDTH } from './Coachmark.styles';\nimport { FocusTrapZone } from '../../FocusTrapZone';\nimport { useAsync, useOnEvent, useSetTimeout, useWarnings } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nexport var COACHMARK_ATTRIBUTE_NAME = 'data-coachmarkid';\nvar DEFAULT_PROPS = {\n isCollapsed: true,\n mouseProximityOffset: 10,\n delayBeforeMouseOpen: 3600,\n delayBeforeCoachmarkAnimation: 0,\n isPositionForced: true,\n positioningContainerProps: {\n directionalHint: DirectionalHint.bottomAutoEdge,\n },\n};\nfunction useCollapsedState(props, entityInnerHostElementRef) {\n var propsIsCollapsed = props.isCollapsed, onAnimationOpenStart = props.onAnimationOpenStart, onAnimationOpenEnd = props.onAnimationOpenEnd;\n /** Is the Coachmark currently collapsed into a tear drop shape */\n var _a = React.useState(!!propsIsCollapsed), isCollapsed = _a[0], setIsCollapsed = _a[1];\n var setTimeout = useSetTimeout().setTimeout;\n // Rather than pushing out logic elsewhere to prevent openCoachmark from being called repeatedly,\n // we'll track it here and only invoke the logic once. We do this with a ref, rather than just the state,\n // because the openCoachmark callback can be captured in scope for an effect\n var hasCoachmarkBeenOpened = React.useRef(!isCollapsed);\n var openCoachmark = React.useCallback(function () {\n var _a, _b;\n if (!hasCoachmarkBeenOpened.current) {\n setIsCollapsed(false);\n onAnimationOpenStart === null || onAnimationOpenStart === void 0 ? void 0 : onAnimationOpenStart();\n (_b = (_a = entityInnerHostElementRef.current) === null || _a === void 0 ? void 0 : _a.addEventListener) === null || _b === void 0 ? void 0 : _b.call(_a, 'transitionend', function () {\n // Need setTimeout to trigger narrator\n setTimeout(function () {\n if (entityInnerHostElementRef.current) {\n focusFirstChild(entityInnerHostElementRef.current);\n }\n }, 1000);\n onAnimationOpenEnd === null || onAnimationOpenEnd === void 0 ? void 0 : onAnimationOpenEnd();\n });\n hasCoachmarkBeenOpened.current = true;\n }\n }, [entityInnerHostElementRef, onAnimationOpenEnd, onAnimationOpenStart, setTimeout]);\n React.useEffect(function () {\n if (!propsIsCollapsed) {\n openCoachmark();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isCollapsed changes\n }, [propsIsCollapsed]);\n return [isCollapsed, openCoachmark];\n}\nfunction usePositionedData() {\n var async = useAsync();\n /**\n * Alignment edge of callout in relation to target\n */\n var _a = React.useState(), targetAlignment = _a[0], setTargetAlignment = _a[1];\n /**\n * Position of Coachmark/TeachingBubble in relation to target\n */\n var _b = React.useState(), targetPosition = _b[0], setTargetPosition = _b[1];\n var onPositioned = function (_a) {\n var alignmentEdge = _a.alignmentEdge, targetEdge = _a.targetEdge;\n return async.requestAnimationFrame(function () {\n setTargetAlignment(alignmentEdge);\n setTargetPosition(targetEdge);\n });\n };\n return [targetAlignment, targetPosition, onPositioned];\n}\nfunction useBeakPosition(props, targetAlignment, targetPosition) {\n var isRTL = getRTL(props.theme);\n return React.useMemo(function () {\n var beakDirection = targetPosition === undefined ? RectangleEdge.bottom : getOppositeEdge(targetPosition);\n var beakPosition = { direction: beakDirection };\n var transformOriginX;\n var transformOriginY;\n var distanceAdjustment = '3px'; // Adjustment distance for Beak to shift towards Coachmark bubble.\n switch (beakDirection) {\n // If Beak is pointing Up or Down\n case RectangleEdge.top:\n case RectangleEdge.bottom:\n // If there is no target alignment, then beak is X-axis centered in callout\n if (!targetAlignment) {\n beakPosition.left = \"calc(50% - \" + BEAK_WIDTH / 2 + \"px)\";\n transformOriginX = 'center';\n }\n else {\n // Beak is aligned to the left of target\n if (targetAlignment === RectangleEdge.left) {\n beakPosition.left = COACHMARK_WIDTH / 2 - BEAK_WIDTH / 2 + \"px\";\n transformOriginX = 'left';\n }\n else {\n // Beak is aligned to the right of target\n beakPosition.right = COACHMARK_WIDTH / 2 - BEAK_WIDTH / 2 + \"px\";\n transformOriginX = 'right';\n }\n }\n if (beakDirection === RectangleEdge.top) {\n beakPosition.top = distanceAdjustment;\n transformOriginY = 'top';\n }\n else {\n beakPosition.bottom = distanceAdjustment;\n transformOriginY = 'bottom';\n }\n break;\n // If Beak is pointing Left or Right\n case RectangleEdge.left:\n case RectangleEdge.right:\n // If there is no target alignment, then beak is Y-axis centered in callout\n if (!targetAlignment) {\n beakPosition.top = \"calc(50% - \" + BEAK_WIDTH / 2 + \"px)\";\n transformOriginY = \"center\";\n }\n else {\n // Beak is aligned to the top of target\n if (targetAlignment === RectangleEdge.top) {\n beakPosition.top = COACHMARK_WIDTH / 2 - BEAK_WIDTH / 2 + \"px\";\n transformOriginY = \"top\";\n }\n else {\n // Beak is aligned to the bottom of target\n beakPosition.bottom = COACHMARK_WIDTH / 2 - BEAK_WIDTH / 2 + \"px\";\n transformOriginY = \"bottom\";\n }\n }\n if (beakDirection === RectangleEdge.left) {\n if (isRTL) {\n beakPosition.right = distanceAdjustment;\n }\n else {\n beakPosition.left = distanceAdjustment;\n }\n transformOriginX = 'left';\n }\n else {\n if (isRTL) {\n beakPosition.left = distanceAdjustment;\n }\n else {\n beakPosition.right = distanceAdjustment;\n }\n transformOriginX = 'right';\n }\n break;\n }\n return [beakPosition, transformOriginX + \" \" + transformOriginY];\n }, [targetAlignment, targetPosition, isRTL]);\n}\nfunction useListeners(props, translateAnimationContainer, openCoachmark) {\n var _a;\n var document = (_a = getDocument()) === null || _a === void 0 ? void 0 : _a.documentElement;\n useOnEvent(document, 'keydown', function (e) {\n var _a, _b;\n // Open coachmark if user presses ALT + C (arbitrary keypress for now)\n if (\n // eslint-disable-next-line deprecation/deprecation\n (e.altKey && e.which === KeyCodes.c) ||\n // eslint-disable-next-line deprecation/deprecation\n (e.which === KeyCodes.enter && ((_b = (_a = translateAnimationContainer.current) === null || _a === void 0 ? void 0 : _a.contains) === null || _b === void 0 ? void 0 : _b.call(_a, e.target)))) {\n openCoachmark();\n }\n }, true);\n var dismissOnLostFocus = function (ev) {\n var _a;\n if (props.preventDismissOnLostFocus) {\n var clickTarget = ev.target;\n var clickedOutsideCallout = translateAnimationContainer.current && !elementContains(translateAnimationContainer.current, clickTarget);\n var target = props.target;\n if (clickedOutsideCallout && clickTarget !== target && !elementContains(target, clickTarget)) {\n (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n }\n }\n };\n useOnEvent(document, 'click', dismissOnLostFocus, true);\n useOnEvent(document, 'focus', dismissOnLostFocus, true);\n}\nfunction useProximityHandlers(props, translateAnimationContainer, openCoachmark) {\n var _a = useSetTimeout(), setTimeout = _a.setTimeout, clearTimeout = _a.clearTimeout;\n /** The target element the mouse would be in proximity to */\n var targetElementRect = React.useRef();\n React.useEffect(function () {\n var setTargetElementRect = function () {\n if (translateAnimationContainer.current) {\n targetElementRect.current = translateAnimationContainer.current.getBoundingClientRect();\n }\n };\n var events = new EventGroup({});\n // We don't want the user to immediately trigger the Coachmark when it's opened\n setTimeout(function () {\n var _a = props.mouseProximityOffset, mouseProximityOffset = _a === void 0 ? 0 : _a;\n /** Cached ids returned when setTimeout runs during the window resize event trigger. */\n var timeoutIds = [];\n // Take the initial measure out of the initial render to prevent an unnecessary render.\n setTimeout(function () {\n setTargetElementRect();\n // When the window resizes we want to async get the bounding client rectangle.\n // Every time the event is triggered we want to setTimeout and then clear any previous\n // instances of setTimeout.\n events.on(window, 'resize', function () {\n timeoutIds.forEach(function (value) {\n clearTimeout(value);\n });\n timeoutIds.splice(0, timeoutIds.length); // clear array\n timeoutIds.push(setTimeout(function () {\n setTargetElementRect();\n }, 100));\n });\n }, 10);\n // Every time the document's mouse move is triggered, we want to check if inside of an element\n // and set the state with the result.\n events.on(document, 'mousemove', function (e) {\n var _a;\n var mouseY = e.clientY;\n var mouseX = e.clientX;\n setTargetElementRect();\n if (isInsideElement(targetElementRect.current, mouseX, mouseY, mouseProximityOffset)) {\n openCoachmark();\n }\n (_a = props.onMouseMove) === null || _a === void 0 ? void 0 : _a.call(props, e);\n });\n }, props.delayBeforeMouseOpen);\n return function () { return events.dispose(); };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on mount\n }, []);\n}\nfunction useComponentRef(props) {\n var onDismiss = props.onDismiss;\n React.useImperativeHandle(props.componentRef, function (ev) { return ({\n dismiss: function () {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n },\n }); }, [onDismiss]);\n}\nfunction useAriaAlert(_a) {\n var ariaAlertText = _a.ariaAlertText;\n var async = useAsync();\n /** ARIA alert text to read aloud with Narrator once the Coachmark is mounted */\n var _b = React.useState(), alertText = _b[0], setAlertText = _b[1];\n React.useEffect(function () {\n // Need to add RAF to have narrator read change in alert container\n async.requestAnimationFrame(function () {\n setAlertText(ariaAlertText);\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on mount\n }, []);\n return alertText;\n}\nfunction useAutoFocus(_a) {\n var preventFocusOnMount = _a.preventFocusOnMount;\n var setTimeout = useSetTimeout().setTimeout;\n /**\n * The cached HTMLElement reference to the Entity Inner Host\n * element.\n */\n var entityHost = React.useRef(null);\n React.useEffect(function () {\n if (!preventFocusOnMount) {\n setTimeout(function () { var _a; return (_a = entityHost.current) === null || _a === void 0 ? void 0 : _a.focus(); }, 1000);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on mount\n }, []);\n return entityHost;\n}\nfunction useEntityHostMeasurements(props, entityInnerHostElementRef) {\n /** Is the teaching bubble currently retrieving the original dimensions of the hosted entity. */\n var _a = React.useState(!!props.isCollapsed), isMeasuring = _a[0], setIsMeasuring = _a[1];\n /** Cached width and height of _entityInnerHostElement */\n var _b = React.useState(props.isCollapsed ? { width: 0, height: 0 } : {}), entityInnerHostRect = _b[0], setEntityInnerHostRect = _b[1];\n var async = useAsync();\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n if (entityInnerHostElementRef.current) {\n setEntityInnerHostRect({\n width: entityInnerHostElementRef.current.offsetWidth,\n height: entityInnerHostElementRef.current.offsetHeight,\n });\n setIsMeasuring(false);\n }\n });\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on mount\n }, []);\n return [isMeasuring, entityInnerHostRect];\n}\nfunction useDeprecationWarning(props) {\n if (process.env.NODE_ENV !== 'production') {\n // eslint-disable-next-line react-hooks/rules-of-hooks -- build-time conditional\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: {\n teachingBubbleRef: undefined,\n collapsed: 'isCollapsed',\n beakWidth: undefined,\n beakHeight: undefined,\n width: undefined,\n height: undefined,\n },\n });\n }\n}\nvar COMPONENT_NAME = 'CoachmarkBase';\nexport var CoachmarkBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var entityInnerHostElementRef = React.useRef(null);\n var translateAnimationContainer = React.useRef(null);\n var _a = usePositionedData(), targetAlignment = _a[0], targetPosition = _a[1], onPositioned = _a[2];\n var _b = useCollapsedState(props, entityInnerHostElementRef), isCollapsed = _b[0], openCoachmark = _b[1];\n var _c = useBeakPosition(props, targetAlignment, targetPosition), beakPositioningProps = _c[0], transformOrigin = _c[1];\n var _d = useEntityHostMeasurements(props, entityInnerHostElementRef), isMeasuring = _d[0], entityInnerHostRect = _d[1];\n var alertText = useAriaAlert(props);\n var entityHost = useAutoFocus(props);\n useListeners(props, translateAnimationContainer, openCoachmark);\n useComponentRef(props);\n useProximityHandlers(props, translateAnimationContainer, openCoachmark);\n useDeprecationWarning(props);\n var beaconColorOne = props.beaconColorOne, beaconColorTwo = props.beaconColorTwo, children = props.children, target = props.target, color = props.color, positioningContainerProps = props.positioningContainerProps, ariaDescribedBy = props.ariaDescribedBy, ariaDescribedByText = props.ariaDescribedByText, ariaLabelledBy = props.ariaLabelledBy, ariaLabelledByText = props.ariaLabelledByText, ariaAlertText = props.ariaAlertText, delayBeforeCoachmarkAnimation = props.delayBeforeCoachmarkAnimation, styles = props.styles, theme = props.theme, className = props.className, persistentBeak = props.persistentBeak;\n // Defaulting the main background before passing it to the styles because it is used for `Beak` too.\n var defaultColor = color;\n if (!defaultColor && theme) {\n defaultColor = theme.semanticColors.primaryButtonBackground;\n }\n var classNames = getClassNames(styles, {\n theme: theme,\n beaconColorOne: beaconColorOne,\n beaconColorTwo: beaconColorTwo,\n className: className,\n isCollapsed: isCollapsed,\n isMeasuring: isMeasuring,\n color: defaultColor,\n transformOrigin: transformOrigin,\n entityHostHeight: entityInnerHostRect.height === undefined ? undefined : entityInnerHostRect.height + \"px\",\n entityHostWidth: entityInnerHostRect.width === undefined ? undefined : entityInnerHostRect.width + \"px\",\n width: COACHMARK_WIDTH + \"px\",\n height: COACHMARK_HEIGHT + \"px\",\n delayBeforeCoachmarkAnimation: delayBeforeCoachmarkAnimation + \"ms\",\n });\n var finalHeight = isCollapsed ? COACHMARK_HEIGHT : entityInnerHostRect.height;\n return (React.createElement(PositioningContainer, __assign({ target: target, offsetFromTarget: BEAK_HEIGHT, finalHeight: finalHeight, ref: forwardedRef, onPositioned: onPositioned, bounds: getBounds(props) }, positioningContainerProps),\n React.createElement(\"div\", { className: classNames.root },\n ariaAlertText && (React.createElement(\"div\", { className: classNames.ariaContainer, role: \"alert\", \"aria-hidden\": !isCollapsed }, alertText)),\n React.createElement(\"div\", { className: classNames.pulsingBeacon }),\n React.createElement(\"div\", { className: classNames.translateAnimationContainer, ref: translateAnimationContainer },\n React.createElement(\"div\", { className: classNames.scaleAnimationLayer },\n React.createElement(\"div\", { className: classNames.rotateAnimationLayer },\n (isCollapsed || persistentBeak) && React.createElement(Beak, __assign({}, beakPositioningProps, { color: defaultColor })),\n React.createElement(\"div\", { className: classNames.entityHost, ref: entityHost, tabIndex: -1, \"data-is-focusable\": true, role: \"dialog\", \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy },\n isCollapsed && [\n ariaLabelledBy && (React.createElement(\"p\", { id: ariaLabelledBy, key: 0, className: classNames.ariaContainer }, ariaLabelledByText)),\n ariaDescribedBy && (React.createElement(\"p\", { id: ariaDescribedBy, key: 1, className: classNames.ariaContainer }, ariaDescribedByText)),\n ],\n React.createElement(FocusTrapZone, { isClickableOutsideFocusTrap: true, forceFocusInsideTrap: false },\n React.createElement(\"div\", { className: classNames.entityInnerHost, ref: entityInnerHostElementRef },\n React.createElement(\"div\", { className: classNames.childrenContainer, \"aria-hidden\": isCollapsed }, children))))))))));\n});\nCoachmarkBase.displayName = COMPONENT_NAME;\nfunction getBounds(_a) {\n var isPositionForced = _a.isPositionForced, positioningContainerProps = _a.positioningContainerProps;\n if (isPositionForced) {\n // If directionalHint direction is the top or bottom auto edge, then we want to set the left/right bounds\n // to the window x-axis to have auto positioning work correctly.\n if (positioningContainerProps &&\n (positioningContainerProps.directionalHint === DirectionalHint.topAutoEdge ||\n positioningContainerProps.directionalHint === DirectionalHint.bottomAutoEdge)) {\n return {\n left: 0,\n top: -Infinity,\n bottom: Infinity,\n right: window.innerWidth,\n width: window.innerWidth,\n height: Infinity,\n };\n }\n else {\n return {\n left: -Infinity,\n top: -Infinity,\n bottom: Infinity,\n right: Infinity,\n width: Infinity,\n height: Infinity,\n };\n }\n }\n else {\n return undefined;\n }\n}\nfunction isInsideElement(targetElementRect, mouseX, mouseY, mouseProximityOffset) {\n if (mouseProximityOffset === void 0) { mouseProximityOffset = 0; }\n return (mouseX > targetElementRect.left - mouseProximityOffset &&\n mouseX < targetElementRect.left + targetElementRect.width + mouseProximityOffset &&\n mouseY > targetElementRect.top - mouseProximityOffset &&\n mouseY < targetElementRect.top + targetElementRect.height + mouseProximityOffset);\n}\n//# sourceMappingURL=Coachmark.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './Coachmark.styles';\nimport { CoachmarkBase } from './Coachmark.base';\nexport var Coachmark = styled(CoachmarkBase, getStyles, undefined, {\n scope: 'Coachmark',\n});\n//# sourceMappingURL=Coachmark.js.map","export var MAX_COLOR_SATURATION = 100;\nexport var MAX_COLOR_HUE = 359;\nexport var MAX_COLOR_VALUE = 100;\nexport var MAX_COLOR_RGB = 255;\n/** @deprecated Use MAX_COLOR_RGB (255) or MAX_COLOR_ALPHA (100) */\nexport var MAX_COLOR_RGBA = MAX_COLOR_RGB;\nexport var MAX_COLOR_ALPHA = 100;\n/** Minimum length for a hexadecimal color string (not including the #) */\nexport var MIN_HEX_LENGTH = 3;\n/** Maximum length for a hexadecimal color string (not including the #) */\nexport var MAX_HEX_LENGTH = 6;\n/** Minimum length for a string of an RGBA color component */\nexport var MIN_RGBA_LENGTH = 1;\n/** Maximum length for a string of an RGBA color component */\nexport var MAX_RGBA_LENGTH = 3;\n/** Regular expression matching only valid hexadecimal chars */\nexport var HEX_REGEX = /^[\\da-f]{0,6}$/i;\n/** Regular expression matching only numbers */\nexport var RGBA_REGEX = /^\\d{0,3}$/;\n//# sourceMappingURL=consts.js.map","/** Converts HSL components to an HSV color. */\nexport function hsl2hsv(h, s, l) {\n s *= (l < 50 ? l : 100 - l) / 100;\n var v = l + s;\n return {\n h: h,\n s: v === 0 ? 0 : ((2 * s) / v) * 100,\n v: v,\n };\n}\n//# sourceMappingURL=hsl2hsv.js.map","import { MAX_COLOR_RGB } from './consts';\n/** Converts HSV components to an RGB color. Does not set the alpha value. */\nexport function hsv2rgb(h, s, v) {\n s = s / 100;\n v = v / 100;\n var rgb = [];\n var c = v * s;\n var hh = h / 60;\n var x = c * (1 - Math.abs((hh % 2) - 1));\n var m = v - c;\n switch (Math.floor(hh)) {\n case 0:\n rgb = [c, x, 0];\n break;\n case 1:\n rgb = [x, c, 0];\n break;\n case 2:\n rgb = [0, c, x];\n break;\n case 3:\n rgb = [0, x, c];\n break;\n case 4:\n rgb = [x, 0, c];\n break;\n case 5:\n rgb = [c, 0, x];\n break;\n }\n return {\n r: Math.round(MAX_COLOR_RGB * (rgb[0] + m)),\n g: Math.round(MAX_COLOR_RGB * (rgb[1] + m)),\n b: Math.round(MAX_COLOR_RGB * (rgb[2] + m)),\n };\n}\n//# sourceMappingURL=hsv2rgb.js.map","import { hsl2hsv } from './hsl2hsv';\nimport { hsv2rgb } from './hsv2rgb';\n/** Converts HSL components to an RGB color. Does not set the alpha value. */\nexport function hsl2rgb(h, s, l) {\n var hsv = hsl2hsv(h, s, l);\n return hsv2rgb(hsv.h, hsv.s, hsv.v);\n}\n//# sourceMappingURL=hsl2rgb.js.map","import { MAX_COLOR_ALPHA } from './consts';\nimport { hsl2rgb } from './hsl2rgb';\n/**\n * Converts a valid CSS color string to an RGB color.\n * Note that hex colors *must* be prefixed with # to be considered valid.\n * Alpha in returned color defaults to 100.\n * Four and eight digit hex values (with alpha) are supported if the current browser supports them.\n */\nexport function cssColor(color) {\n if (!color) {\n return undefined;\n }\n // Need to check the following valid color formats: RGB(A), HSL(A), hex, named color\n // First check for well formatted RGB(A), HSL(A), and hex formats at the start.\n // This is for perf (no creating an element) and catches the intentional \"transparent\" color\n // case early on.\n var easyColor = _rgba(color) || _hex6(color) || _hex3(color) || _hsla(color);\n if (easyColor) {\n return easyColor;\n }\n // if the above fails, do the more expensive catch-all\n return _browserCompute(color);\n}\n/**\n * Uses the browser's getComputedStyle() to determine what the passed-in color is.\n * This assumes _rgba, _hex6, _hex3, and _hsla have already been tried and all failed.\n * This works by attaching an element to the DOM, which may fail in server-side rendering\n * or with headless browsers.\n */\nfunction _browserCompute(str) {\n if (typeof document === 'undefined') {\n // don't throw an error when used server-side\n return undefined;\n }\n var elem = document.createElement('div');\n elem.style.backgroundColor = str;\n // This element must be attached to the DOM for getComputedStyle() to have a value\n elem.style.position = 'absolute';\n elem.style.top = '-9999px';\n elem.style.left = '-9999px';\n elem.style.height = '1px';\n elem.style.width = '1px';\n document.body.appendChild(elem);\n var eComputedStyle = getComputedStyle(elem);\n var computedColor = eComputedStyle && eComputedStyle.backgroundColor;\n document.body.removeChild(elem);\n // computedColor is always an RGB(A) string, except for invalid colors in IE/Edge which return 'transparent'\n // browsers return one of these if the color string is invalid,\n // so need to differentiate between an actual error and intentionally passing in this color\n if (computedColor === 'rgba(0, 0, 0, 0)' || computedColor === 'transparent') {\n switch (str.trim()) {\n // RGB and HSL were already checked at the start of the function\n case 'transparent':\n case '#0000':\n case '#00000000':\n return { r: 0, g: 0, b: 0, a: 0 };\n }\n return undefined;\n }\n return _rgba(computedColor);\n}\n/**\n * If `str` is in valid `rgb()` or `rgba()` format, returns an RGB color (alpha defaults to 100).\n * Otherwise returns undefined.\n */\nfunction _rgba(str) {\n if (!str) {\n return undefined;\n }\n var match = str.match(/^rgb(a?)\\(([\\d., ]+)\\)$/);\n if (match) {\n var hasAlpha = !!match[1];\n var expectedPartCount = hasAlpha ? 4 : 3;\n var parts = match[2].split(/ *, */).map(Number);\n if (parts.length === expectedPartCount) {\n return {\n r: parts[0],\n g: parts[1],\n b: parts[2],\n a: hasAlpha ? parts[3] * 100 : MAX_COLOR_ALPHA,\n };\n }\n }\n}\n/**\n * If `str` is in `hsl()` or `hsla()` format, returns an RGB color (alpha defaults to 100).\n * Otherwise returns undefined.\n */\nfunction _hsla(str) {\n var match = str.match(/^hsl(a?)\\(([\\d., ]+)\\)$/);\n if (match) {\n var hasAlpha = !!match[1];\n var expectedPartCount = hasAlpha ? 4 : 3;\n var parts = match[2].split(/ *, */).map(Number);\n if (parts.length === expectedPartCount) {\n var rgba = hsl2rgb(parts[0], parts[1], parts[2]);\n rgba.a = hasAlpha ? parts[3] * 100 : MAX_COLOR_ALPHA;\n return rgba;\n }\n }\n}\n/**\n * If `str` is in valid 6-digit hex format *with* # prefix, returns an RGB color (with alpha 100).\n * Otherwise returns undefined.\n */\nfunction _hex6(str) {\n if (str[0] === '#' && str.length === 7 && /^#[\\da-fA-F]{6}$/.test(str)) {\n return {\n r: parseInt(str.slice(1, 3), 16),\n g: parseInt(str.slice(3, 5), 16),\n b: parseInt(str.slice(5, 7), 16),\n a: MAX_COLOR_ALPHA,\n };\n }\n}\n/**\n * If `str` is in valid 3-digit hex format *with* # prefix, returns an RGB color (with alpha 100).\n * Otherwise returns undefined.\n */\nfunction _hex3(str) {\n if (str[0] === '#' && str.length === 4 && /^#[\\da-fA-F]{3}$/.test(str)) {\n return {\n r: parseInt(str[1] + str[1], 16),\n g: parseInt(str[2] + str[2], 16),\n b: parseInt(str[3] + str[3], 16),\n a: MAX_COLOR_ALPHA,\n };\n }\n}\n//# sourceMappingURL=cssColor.js.map","/** Clamp a value to ensure it falls within a given range. */\nexport function clamp(value, max, min) {\n if (min === void 0) { min = 0; }\n return value < min ? min : value > max ? max : value;\n}\n//# sourceMappingURL=clamp.js.map","import { MAX_COLOR_RGB } from './consts';\nimport { clamp } from './clamp';\n/** Converts RGB components to a hex color string (without # prefix). */\nexport function rgb2hex(r, g, b) {\n return [_rgbToPaddedHex(r), _rgbToPaddedHex(g), _rgbToPaddedHex(b)].join('');\n}\n/** Converts an RGB component to a 0-padded hex component of length 2. */\nfunction _rgbToPaddedHex(num) {\n num = clamp(num, MAX_COLOR_RGB);\n var hex = num.toString(16);\n return hex.length === 1 ? '0' + hex : hex;\n}\n//# sourceMappingURL=rgb2hex.js.map","import { hsv2rgb } from './hsv2rgb';\nimport { rgb2hex } from './rgb2hex';\n/** Converts HSV components to a hex color string (without # prefix). */\nexport function hsv2hex(h, s, v) {\n var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b;\n return rgb2hex(r, g, b);\n}\n//# sourceMappingURL=hsv2hex.js.map","import { MAX_COLOR_RGB } from './consts';\n/** Converts RGB components to an HSV color. */\nexport function rgb2hsv(r, g, b) {\n var h = NaN;\n var max = Math.max(r, g, b);\n var min = Math.min(r, g, b);\n var delta = max - min;\n // hue\n if (delta === 0) {\n h = 0;\n }\n else if (r === max) {\n h = ((g - b) / delta) % 6;\n }\n else if (g === max) {\n h = (b - r) / delta + 2;\n }\n else if (b === max) {\n h = (r - g) / delta + 4;\n }\n h = Math.round(h * 60);\n if (h < 0) {\n h += 360;\n }\n // saturation\n var s = Math.round((max === 0 ? 0 : delta / max) * 100);\n // value\n var v = Math.round((max / MAX_COLOR_RGB) * 100);\n return { h: h, s: s, v: v };\n}\n//# sourceMappingURL=rgb2hsv.js.map","import { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts';\n/** Converts HSV components to an HSL color. */\nexport function hsv2hsl(h, s, v) {\n s /= MAX_COLOR_SATURATION;\n v /= MAX_COLOR_VALUE;\n var l = (2 - s) * v;\n var sl = s * v;\n sl /= l <= 1 ? l : 2 - l;\n sl = sl || 0;\n l /= 2;\n return { h: h, s: sl * 100, l: l * 100 };\n}\n//# sourceMappingURL=hsv2hsl.js.map","import { MAX_COLOR_ALPHA } from './consts';\n/**\n * @internal\n * Get a CSS color string from some color components.\n * If `a` is specified and not 100, returns an `rgba()` string.\n * Otherwise returns `hex` prefixed with #.\n */\nexport function _rgbaOrHexString(r, g, b, a, hex) {\n return a === MAX_COLOR_ALPHA || typeof a !== 'number' ? \"#\" + hex : \"rgba(\" + r + \", \" + g + \", \" + b + \", \" + a / MAX_COLOR_ALPHA + \")\";\n}\n//# sourceMappingURL=_rgbaOrHexString.js.map","import { MAX_COLOR_ALPHA } from './consts';\nimport { rgb2hsv } from './rgb2hsv';\nimport { rgb2hex } from './rgb2hex';\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\n/** Converts an RGBA color to a color object (alpha defaults to 100). */\nexport function getColorFromRGBA(rgba) {\n var _a = rgba.a, a = _a === void 0 ? MAX_COLOR_ALPHA : _a, b = rgba.b, g = rgba.g, r = rgba.r;\n var _b = rgb2hsv(r, g, b), h = _b.h, s = _b.s, v = _b.v;\n var hex = rgb2hex(r, g, b);\n var str = _rgbaOrHexString(r, g, b, a, hex);\n var t = MAX_COLOR_ALPHA - a;\n return { a: a, b: b, g: g, h: h, hex: hex, r: r, s: s, str: str, v: v, t: t };\n}\n//# sourceMappingURL=getColorFromRGBA.js.map","import { __assign } from \"tslib\";\nimport { cssColor } from './cssColor';\nimport { getColorFromRGBA } from './getColorFromRGBA';\n/**\n * Converts a CSS color string to a color object.\n * Note that hex colors *must* be prefixed with # to be considered valid.\n *\n * `inputColor` will be used unmodified as the `str` property of the returned object.\n * Alpha defaults to 100 if not specified in `inputColor`.\n * Returns undefined if the color string is invalid/not recognized.\n */\nexport function getColorFromString(inputColor) {\n var color = cssColor(inputColor);\n if (!color) {\n return;\n }\n return __assign(__assign({}, getColorFromRGBA(color)), { str: inputColor });\n}\n//# sourceMappingURL=getColorFromString.js.map","import { MAX_COLOR_ALPHA } from './consts';\nimport { hsv2rgb } from './hsv2rgb';\nimport { hsv2hex } from './hsv2hex';\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\n/**\n * Converts an HSV color (and optional alpha value) to a color object.\n * If `a` is not given, a default of 100 is used.\n * Hex in the returned value will *not* be prefixed with #.\n * If `a` is unspecified or 100, the result's `str` property will contain a hex value\n * (*not* prefixed with #)\n */\nexport function getColorFromHSV(hsv, a) {\n var h = hsv.h, s = hsv.s, v = hsv.v;\n a = typeof a === 'number' ? a : MAX_COLOR_ALPHA;\n var _a = hsv2rgb(h, s, v), r = _a.r, g = _a.g, b = _a.b;\n var hex = hsv2hex(h, s, v);\n var str = _rgbaOrHexString(r, g, b, a, hex);\n var t = MAX_COLOR_ALPHA - a;\n return { a: a, b: b, g: g, h: h, hex: hex, r: r, s: s, str: str, v: v, t: t };\n}\n//# sourceMappingURL=getColorFromHSV.js.map","import { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts';\nimport { hsv2hex } from './hsv2hex';\n/**\n * Converts a color hue to an HTML color string (with # prefix).\n * This implementation ignores all components of `color` except hue.\n */\nexport function getFullColorString(color) {\n return \"#\" + hsv2hex(color.h, MAX_COLOR_SATURATION, MAX_COLOR_VALUE);\n}\n//# sourceMappingURL=getFullColorString.js.map","import { __assign } from \"tslib\";\nimport { hsv2rgb } from './hsv2rgb';\nimport { rgb2hex } from './rgb2hex';\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\n/**\n * Gets a color with the same hue as `color` and other components updated to match the given\n * saturation and value.\n *\n * Does not modify the original `color` and does not supply a default alpha value.\n */\nexport function updateSV(color, s, v) {\n var _a = hsv2rgb(color.h, s, v), r = _a.r, g = _a.g, b = _a.b;\n var hex = rgb2hex(r, g, b);\n return __assign(__assign({}, color), { s: s,\n v: v,\n r: r,\n g: g,\n b: b,\n hex: hex, str: _rgbaOrHexString(r, g, b, color.a, hex) });\n}\n//# sourceMappingURL=updateSV.js.map","import { __assign } from \"tslib\";\nimport { hsv2rgb } from './hsv2rgb';\nimport { rgb2hex } from './rgb2hex';\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\n/**\n * Gets a color with the same saturation and value as `color` and the other components updated\n * to match the given hue.\n *\n * Does not modify the original `color` and does not supply a default alpha value.\n */\nexport function updateH(color, h) {\n var _a = hsv2rgb(h, color.s, color.v), r = _a.r, g = _a.g, b = _a.b;\n var hex = rgb2hex(r, g, b);\n return __assign(__assign({}, color), { h: h,\n r: r,\n g: g,\n b: b,\n hex: hex, str: _rgbaOrHexString(r, g, b, color.a, hex) });\n}\n//# sourceMappingURL=updateH.js.map","import { getColorFromRGBA } from './getColorFromRGBA';\n/**\n * Gets a color with a single RGBA component updated to a new value.\n * Does not modify the original `color`. Alpha defaults to 100 if not set.\n */\nexport function updateRGB(color, component, value) {\n var _a;\n return getColorFromRGBA((_a = {\n r: color.r,\n g: color.g,\n b: color.b,\n a: color.a\n },\n _a[component] = value,\n _a));\n}\n//# sourceMappingURL=updateRGB.js.map","import { __assign } from \"tslib\";\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\nimport { MAX_COLOR_ALPHA } from './consts';\n/**\n * Gets a color with the given alpha value and the same other components as `color`.\n * Does not modify the original color.\n */\nexport function updateA(color, a) {\n return __assign(__assign({}, color), { a: a, t: MAX_COLOR_ALPHA - a, str: _rgbaOrHexString(color.r, color.g, color.b, a, color.hex) });\n}\n//# sourceMappingURL=updateA.js.map","import { MAX_COLOR_ALPHA, MAX_COLOR_RGB } from './consts';\nimport { clamp } from './clamp';\n/** Corrects an RGB color to fall within the valid range. */\nexport function correctRGB(color) {\n return {\n r: clamp(color.r, MAX_COLOR_RGB),\n g: clamp(color.g, MAX_COLOR_RGB),\n b: clamp(color.b, MAX_COLOR_RGB),\n a: typeof color.a === 'number' ? clamp(color.a, MAX_COLOR_ALPHA) : color.a,\n };\n}\n//# sourceMappingURL=correctRGB.js.map","import { MAX_COLOR_HUE, MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from './consts';\nimport { clamp } from './clamp';\n/** Corrects an HSV color to fall within the valid range. */\nexport function correctHSV(color) {\n return {\n h: clamp(color.h, MAX_COLOR_HUE),\n s: clamp(color.s, MAX_COLOR_SATURATION),\n v: clamp(color.v, MAX_COLOR_VALUE),\n };\n}\n//# sourceMappingURL=correctHSV.js.map","import { MIN_HEX_LENGTH, MAX_HEX_LENGTH } from './consts';\n/**\n * Corrects a hex color to have length 3 or 6. Defaults to white if too short.\n * Does NOT check anything besides the length (such as valid characters) and does NOT handle\n * hex values starting with # sign.\n */\nexport function correctHex(hex) {\n if (!hex || hex.length < MIN_HEX_LENGTH) {\n return 'ffffff'; // not a valid color--default to white\n }\n if (hex.length >= MAX_HEX_LENGTH) {\n return hex.substring(0, MAX_HEX_LENGTH);\n }\n return hex.substring(0, MIN_HEX_LENGTH);\n}\n//# sourceMappingURL=correctHex.js.map","// Technically this should be shades and tints, but for simplicity we'll call everything a shade.\n/*\n * This utility module is used with theming. Given a color to shade, whether the theme is inverted\n * (i.e. is a dark color), and the desired shade enum, this will return an appropriate shade of that color.\n */\nimport { MAX_COLOR_RGB } from './consts';\nimport { assign } from '../../Utilities';\nimport { clamp } from './clamp';\nimport { getColorFromRGBA } from './getColorFromRGBA';\nimport { hsv2hsl } from './hsv2hsl';\nimport { hsv2rgb } from './hsv2rgb';\n// Soften: to get closer to the background color's luminance\n// (softening with a white background would be lightening, with black it'd be darkening)\n// Strongen: opposite of soften\n// Luminance multiplier constants for generating shades of a given color\nvar WhiteShadeTableBG = [0.027, 0.043, 0.082, 0.145, 0.184, 0.216, 0.349, 0.537]; // white bg\nvar BlackTintTableBG = [0.537, 0.45, 0.349, 0.216, 0.184, 0.145, 0.082, 0.043]; // black bg\nvar WhiteShadeTable = [0.537, 0.349, 0.216, 0.184, 0.145, 0.082, 0.043, 0.027]; // white fg\nvar BlackTintTable = [0.537, 0.45, 0.349, 0.216, 0.184, 0.145, 0.082, 0.043]; // black fg\nvar LumTintTable = [0.88, 0.77, 0.66, 0.55, 0.44, 0.33, 0.22, 0.11]; // light (strongen all)\nvar LumShadeTable = [0.11, 0.22, 0.33, 0.44, 0.55, 0.66, 0.77, 0.88]; // dark (soften all)\nvar ColorTintTable = [0.96, 0.84, 0.7, 0.4, 0.12]; // default soften\nvar ColorShadeTable = [0.1, 0.24, 0.44]; // default strongen\n// If the given shade's luminance is below/above these values, we'll swap to using the White/Black tables above\nvar LowLuminanceThreshold = 0.2;\nvar HighLuminanceThreshold = 0.8;\n/** Shades of a given color, from softest to strongest. */\nexport var Shade;\n(function (Shade) {\n Shade[Shade[\"Unshaded\"] = 0] = \"Unshaded\";\n Shade[Shade[\"Shade1\"] = 1] = \"Shade1\";\n Shade[Shade[\"Shade2\"] = 2] = \"Shade2\";\n Shade[Shade[\"Shade3\"] = 3] = \"Shade3\";\n Shade[Shade[\"Shade4\"] = 4] = \"Shade4\";\n Shade[Shade[\"Shade5\"] = 5] = \"Shade5\";\n Shade[Shade[\"Shade6\"] = 6] = \"Shade6\";\n Shade[Shade[\"Shade7\"] = 7] = \"Shade7\";\n Shade[Shade[\"Shade8\"] = 8] = \"Shade8\";\n // remember to update isValidShade()!\n})(Shade || (Shade = {}));\n/**\n * Returns true if the argument is a valid Shade value\n * @param shade - The Shade value to validate.\n */\nexport function isValidShade(shade) {\n return typeof shade === 'number' && shade >= Shade.Unshaded && shade <= Shade.Shade8;\n}\nfunction _isBlack(color) {\n return color.r === 0 && color.g === 0 && color.b === 0;\n}\nfunction _isWhite(color) {\n return color.r === MAX_COLOR_RGB && color.g === MAX_COLOR_RGB && color.b === MAX_COLOR_RGB;\n}\nfunction _darken(hsv, factor) {\n return {\n h: hsv.h,\n s: hsv.s,\n v: clamp(hsv.v - hsv.v * factor, 100, 0),\n };\n}\nfunction _lighten(hsv, factor) {\n return {\n h: hsv.h,\n s: clamp(hsv.s - hsv.s * factor, 100, 0),\n v: clamp(hsv.v + (100 - hsv.v) * factor, 100, 0),\n };\n}\nexport function isDark(color) {\n return hsv2hsl(color.h, color.s, color.v).l < 50;\n}\n/**\n * Given a color and a shade specification, generates the requested shade of the color.\n * Logic:\n * if white\n * darken via tables defined above\n * if black\n * lighten\n * if light\n * strongen\n * if dark\n * soften\n * else default\n * soften or strongen depending on shade#\n * @param color - The base color whose shade is to be computed\n * @param shade - The shade of the base color to compute\n * @param isInverted - Default false. Whether the given theme is inverted (reverse strongen/soften logic)\n */\nexport function getShade(color, shade, isInverted) {\n if (isInverted === void 0) { isInverted = false; }\n if (!color) {\n return null;\n }\n if (shade === Shade.Unshaded || !isValidShade(shade)) {\n return color;\n }\n var hsl = hsv2hsl(color.h, color.s, color.v);\n var hsv = { h: color.h, s: color.s, v: color.v };\n var tableIndex = shade - 1;\n var _soften = _lighten;\n var _strongen = _darken;\n if (isInverted) {\n _soften = _darken;\n _strongen = _lighten;\n }\n if (_isWhite(color)) {\n // white\n hsv = _darken(hsv, WhiteShadeTable[tableIndex]);\n }\n else if (_isBlack(color)) {\n // black\n hsv = _lighten(hsv, BlackTintTable[tableIndex]);\n }\n else if (hsl.l / 100 > HighLuminanceThreshold) {\n // light\n hsv = _strongen(hsv, LumShadeTable[tableIndex]);\n }\n else if (hsl.l / 100 < LowLuminanceThreshold) {\n // dark\n hsv = _soften(hsv, LumTintTable[tableIndex]);\n }\n else {\n // default\n if (tableIndex < ColorTintTable.length) {\n hsv = _soften(hsv, ColorTintTable[tableIndex]);\n }\n else {\n hsv = _strongen(hsv, ColorShadeTable[tableIndex - ColorTintTable.length]);\n }\n }\n return getColorFromRGBA(assign(hsv2rgb(hsv.h, hsv.s, hsv.v), { a: color.a }));\n}\n// Background shades/tints are generated differently. The provided color will be guaranteed\n// to be the darkest or lightest one. If it is <50% luminance, it will always be the darkest,\n// otherwise it will always be the lightest.\nexport function getBackgroundShade(color, shade, isInverted) {\n if (isInverted === void 0) { isInverted = false; }\n if (!color) {\n return null;\n }\n if (shade === Shade.Unshaded || !isValidShade(shade)) {\n return color;\n }\n var hsv = { h: color.h, s: color.s, v: color.v };\n var tableIndex = shade - 1;\n if (!isInverted) {\n // lightish\n hsv = _darken(hsv, WhiteShadeTableBG[tableIndex]);\n }\n else {\n // default: if (hsl.l / 100 < .5) { // darkish\n hsv = _lighten(hsv, BlackTintTableBG[BlackTintTable.length - 1 - tableIndex]);\n }\n return getColorFromRGBA(assign(hsv2rgb(hsv.h, hsv.s, hsv.v), { a: color.a }));\n}\n/* Calculates the contrast ratio between two colors. Used for verifying\n * color pairs meet minimum accessibility requirements.\n * See: https://www.w3.org/TR/WCAG20/ section 1.4.3\n */\nexport function getContrastRatio(color1, color2) {\n // Formula defined by: http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html#contrast-ratiodef\n // relative luminance: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef\n /* calculate the intermediate value needed to calculating relative luminance */\n function _getThing(x) {\n if (x <= 0.03928) {\n return x / 12.92;\n }\n else {\n return Math.pow((x + 0.055) / 1.055, 2.4);\n }\n }\n var r1 = _getThing(color1.r / MAX_COLOR_RGB);\n var g1 = _getThing(color1.g / MAX_COLOR_RGB);\n var b1 = _getThing(color1.b / MAX_COLOR_RGB);\n var L1 = 0.2126 * r1 + 0.7152 * g1 + 0.0722 * b1; // relative luminance of first color\n L1 += 0.05;\n var r2 = _getThing(color2.r / MAX_COLOR_RGB);\n var g2 = _getThing(color2.g / MAX_COLOR_RGB);\n var b2 = _getThing(color2.b / MAX_COLOR_RGB);\n var L2 = 0.2126 * r2 + 0.7152 * g2 + 0.0722 * b2; // relative luminance of second color\n L2 += 0.05;\n // return the lighter color divided by darker\n return L1 / L2 > 1 ? L1 / L2 : L2 / L1;\n}\n//# sourceMappingURL=shades.js.map","import { __assign } from \"tslib\";\nimport { _rgbaOrHexString } from './_rgbaOrHexString';\nimport { MAX_COLOR_ALPHA } from './consts';\n/**\n * Gets a color with the given transparency value and the same other components as `color`.\n * Does not modify the original color.\n */\nexport function updateT(color, t) {\n var a = MAX_COLOR_ALPHA - t;\n return __assign(__assign({}, color), { t: t,\n a: a, str: _rgbaOrHexString(color.r, color.g, color.b, a, color.hex) });\n}\n//# sourceMappingURL=updateT.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Label } from '../../Label';\nimport { Icon } from '../../Icon';\nimport { Async, classNamesFunction, DelayedRender, getId, getNativeProps, getWindow, initializeComponentRef, inputProperties, isControlled, isIE11, textAreaProperties, warn, warnControlledUsage, warnMutuallyExclusive, } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_STATE_VALUE = '';\nvar COMPONENT_NAME = 'TextField';\nvar REVEAL_ICON_NAME = 'RedEye';\nvar HIDE_ICON_NAME = 'Hide';\nvar TextFieldBase = /** @class */ (function (_super) {\n __extends(TextFieldBase, _super);\n function TextFieldBase(props) {\n var _this = _super.call(this, props) || this;\n _this._textElement = React.createRef();\n _this._onFocus = function (ev) {\n if (_this.props.onFocus) {\n _this.props.onFocus(ev);\n }\n _this.setState({ isFocused: true }, function () {\n if (_this.props.validateOnFocusIn) {\n _this._validate(_this.value);\n }\n });\n };\n _this._onBlur = function (ev) {\n if (_this.props.onBlur) {\n _this.props.onBlur(ev);\n }\n _this.setState({ isFocused: false }, function () {\n if (_this.props.validateOnFocusOut) {\n _this._validate(_this.value);\n }\n });\n };\n _this._onRenderLabel = function (props) {\n var label = props.label, required = props.required;\n // IProcessedStyleSet definition requires casting for what Label expects as its styles prop\n var labelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.label\n : undefined;\n if (label) {\n return (React.createElement(Label, { required: required, htmlFor: _this._id, styles: labelStyles, disabled: props.disabled, id: _this._labelId }, props.label));\n }\n return null;\n };\n _this._onRenderDescription = function (props) {\n if (props.description) {\n return React.createElement(\"span\", { className: _this._classNames.description }, props.description);\n }\n return null;\n };\n _this._onRevealButtonClick = function (event) {\n _this.setState(function (prevState) { return ({ isRevealingPassword: !prevState.isRevealingPassword }); });\n };\n _this._onInputChange = function (event) {\n // Previously, we needed to call both onInput and onChange due to some weird IE/React issues,\n // which have *probably* been fixed now:\n // - https://github.com/microsoft/fluentui/issues/744 (likely fixed)\n // - https://github.com/microsoft/fluentui/issues/824 (confirmed fixed)\n var _a, _b;\n // TODO (Fabric 8?) - Switch to calling only onChange. This switch is pretty disruptive for\n // tests (ours and maybe consumers' too), so it seemed best to do the switch in a major bump.\n var element = event.target;\n var value = element.value;\n // Ignore this event if any of the following are true:\n // - the value is undefined (in case one of the IE bugs comes back)\n // - it's a duplicate event (important since onInputChange is called twice per actual user event)\n // - it's the same as the previous value\n var previousValue = _getValue(_this.props, _this.state) || '';\n if (value === undefined || value === _this._lastChangeValue || value === previousValue) {\n _this._lastChangeValue = undefined;\n return;\n }\n _this._lastChangeValue = value;\n (_b = (_a = _this.props).onChange) === null || _b === void 0 ? void 0 : _b.call(_a, event, value);\n if (!_this._isControlled) {\n // ONLY if this is an uncontrolled component, update the displayed value.\n // (Controlled components must update the `value` prop from `onChange`.)\n _this.setState({ uncontrolledValue: value });\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n if (process.env.NODE_ENV !== 'production') {\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n errorMessage: 'onGetErrorMessage',\n });\n }\n _this._fallbackId = getId(COMPONENT_NAME);\n _this._descriptionId = getId(COMPONENT_NAME + 'Description');\n _this._labelId = getId(COMPONENT_NAME + 'Label');\n _this._warnControlledUsage();\n var _a = props.defaultValue, defaultValue = _a === void 0 ? DEFAULT_STATE_VALUE : _a;\n if (typeof defaultValue === 'number') {\n // This isn't allowed per the props, but happens anyway.\n defaultValue = String(defaultValue);\n }\n _this.state = {\n uncontrolledValue: _this._isControlled ? undefined : defaultValue,\n isFocused: false,\n errorMessage: '',\n };\n _this._delayedValidate = _this._async.debounce(_this._validate, _this.props.deferredValidationTime);\n _this._lastValidation = 0;\n return _this;\n }\n Object.defineProperty(TextFieldBase.prototype, \"value\", {\n /**\n * Gets the current value of the text field.\n */\n get: function () {\n return _getValue(this.props, this.state);\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype.componentDidMount = function () {\n this._adjustInputHeight();\n if (this.props.validateOnLoad) {\n this._validate(this.value);\n }\n };\n TextFieldBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n };\n TextFieldBase.prototype.getSnapshotBeforeUpdate = function (prevProps, prevState) {\n return {\n selection: [this.selectionStart, this.selectionEnd],\n };\n };\n TextFieldBase.prototype.componentDidUpdate = function (prevProps, prevState, snapshot) {\n var props = this.props;\n var _a = (snapshot || {}).selection, selection = _a === void 0 ? [null, null] : _a;\n var start = selection[0], end = selection[1];\n if (!!prevProps.multiline !== !!props.multiline && prevState.isFocused) {\n // The text field has just changed between single- and multi-line, so we need to reset focus\n // and selection/cursor.\n this.focus();\n if (start !== null && end !== null && start >= 0 && end >= 0) {\n this.setSelectionRange(start, end);\n }\n }\n if (prevProps.value !== props.value) {\n // Only if the value in props changed, reset the record of the last value seen by a\n // change/input event (don't do this if the value in state changed, since at least in tests\n // the state update may happen before the second event in a series)\n this._lastChangeValue = undefined;\n }\n var prevValue = _getValue(prevProps, prevState);\n var value = this.value;\n if (prevValue !== value) {\n // Handle controlled/uncontrolled warnings and status\n this._warnControlledUsage(prevProps);\n // Clear error message if needed\n // TODO: is there any way to do this without an extra render?\n if (this.state.errorMessage && !props.errorMessage) {\n this.setState({ errorMessage: '' });\n }\n // Adjust height if needed based on new value\n this._adjustInputHeight();\n // TODO: #5875 added logic to trigger validation in componentWillReceiveProps and other places.\n // This seems a bit odd and hard to integrate with the new approach.\n // (Starting to think we should just put the validation logic in a separate wrapper component...?)\n if (_shouldValidateAllChanges(props)) {\n this._delayedValidate(value);\n }\n }\n };\n TextFieldBase.prototype.render = function () {\n var _a = this.props, borderless = _a.borderless, className = _a.className, disabled = _a.disabled, invalid = _a.invalid, iconProps = _a.iconProps, inputClassName = _a.inputClassName, label = _a.label, multiline = _a.multiline, required = _a.required, underlined = _a.underlined, prefix = _a.prefix, resizable = _a.resizable, suffix = _a.suffix, theme = _a.theme, styles = _a.styles, autoAdjustHeight = _a.autoAdjustHeight, canRevealPassword = _a.canRevealPassword, revealPasswordAriaLabel = _a.revealPasswordAriaLabel, type = _a.type, _b = _a.onRenderPrefix, onRenderPrefix = _b === void 0 ? this._onRenderPrefix : _b, _c = _a.onRenderSuffix, onRenderSuffix = _c === void 0 ? this._onRenderSuffix : _c, _d = _a.onRenderLabel, onRenderLabel = _d === void 0 ? this._onRenderLabel : _d, _e = _a.onRenderDescription, onRenderDescription = _e === void 0 ? this._onRenderDescription : _e;\n var _f = this.state, isFocused = _f.isFocused, isRevealingPassword = _f.isRevealingPassword;\n var errorMessage = this._errorMessage;\n var isInvalid = typeof invalid === 'boolean' ? invalid : !!errorMessage;\n var hasRevealButton = !!canRevealPassword && type === 'password' && _browserNeedsRevealButton();\n var classNames = (this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n focused: isFocused,\n required: required,\n multiline: multiline,\n hasLabel: !!label,\n hasErrorMessage: isInvalid,\n borderless: borderless,\n resizable: resizable,\n hasIcon: !!iconProps,\n underlined: underlined,\n inputClassName: inputClassName,\n autoAdjustHeight: autoAdjustHeight,\n hasRevealButton: hasRevealButton,\n }));\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", { ref: this.props.elementRef, className: classNames.root },\n React.createElement(\"div\", { className: classNames.wrapper },\n onRenderLabel(this.props, this._onRenderLabel),\n React.createElement(\"div\", { className: classNames.fieldGroup },\n (prefix !== undefined || this.props.onRenderPrefix) && (React.createElement(\"div\", { className: classNames.prefix }, onRenderPrefix(this.props, this._onRenderPrefix))),\n multiline ? this._renderTextArea() : this._renderInput(),\n iconProps && React.createElement(Icon, __assign({ className: classNames.icon }, iconProps)),\n hasRevealButton && (\n // Explicitly set type=\"button\" since the default button type within a form is \"submit\"\n React.createElement(\"button\", { \"aria-label\": revealPasswordAriaLabel, className: classNames.revealButton, onClick: this._onRevealButtonClick, \"aria-pressed\": !!isRevealingPassword, type: \"button\" },\n React.createElement(\"span\", { className: classNames.revealSpan },\n React.createElement(Icon, { className: classNames.revealIcon, iconName: isRevealingPassword ? HIDE_ICON_NAME : REVEAL_ICON_NAME })))),\n (suffix !== undefined || this.props.onRenderSuffix) && (React.createElement(\"div\", { className: classNames.suffix }, onRenderSuffix(this.props, this._onRenderSuffix))))),\n this._isDescriptionAvailable && (React.createElement(\"span\", { id: this._descriptionId },\n onRenderDescription(this.props, this._onRenderDescription),\n errorMessage && (React.createElement(\"div\", { role: \"alert\" },\n React.createElement(DelayedRender, null, this._renderErrorMessage())))))));\n };\n /**\n * Sets focus on the text field\n */\n TextFieldBase.prototype.focus = function () {\n if (this._textElement.current) {\n this._textElement.current.focus();\n }\n };\n /**\n * Blurs the text field.\n */\n TextFieldBase.prototype.blur = function () {\n if (this._textElement.current) {\n this._textElement.current.blur();\n }\n };\n /**\n * Selects the text field\n */\n TextFieldBase.prototype.select = function () {\n if (this._textElement.current) {\n this._textElement.current.select();\n }\n };\n /**\n * Sets the selection start of the text field to a specified value\n */\n TextFieldBase.prototype.setSelectionStart = function (value) {\n if (this._textElement.current) {\n this._textElement.current.selectionStart = value;\n }\n };\n /**\n * Sets the selection end of the text field to a specified value\n */\n TextFieldBase.prototype.setSelectionEnd = function (value) {\n if (this._textElement.current) {\n this._textElement.current.selectionEnd = value;\n }\n };\n Object.defineProperty(TextFieldBase.prototype, \"selectionStart\", {\n /**\n * Gets the selection start of the text field\n */\n get: function () {\n return this._textElement.current ? this._textElement.current.selectionStart : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(TextFieldBase.prototype, \"selectionEnd\", {\n /**\n * Gets the selection end of the text field\n */\n get: function () {\n return this._textElement.current ? this._textElement.current.selectionEnd : -1;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Sets the start and end positions of a selection in a text field.\n * @param start - Index of the start of the selection.\n * @param end - Index of the end of the selection.\n */\n TextFieldBase.prototype.setSelectionRange = function (start, end) {\n if (this._textElement.current) {\n this._textElement.current.setSelectionRange(start, end);\n }\n };\n TextFieldBase.prototype._warnControlledUsage = function (prevProps) {\n // Show warnings if props are being used in an invalid way\n warnControlledUsage({\n componentId: this._id,\n componentName: COMPONENT_NAME,\n props: this.props,\n oldProps: prevProps,\n valueProp: 'value',\n defaultValueProp: 'defaultValue',\n onChangeProp: 'onChange',\n readOnlyProp: 'readOnly',\n });\n if (this.props.value === null && !this._hasWarnedNullValue) {\n this._hasWarnedNullValue = true;\n warn(\"Warning: 'value' prop on '\" + COMPONENT_NAME + \"' should not be null. Consider using an \" +\n 'empty string to clear the component or undefined to indicate an uncontrolled component.');\n }\n };\n Object.defineProperty(TextFieldBase.prototype, \"_id\", {\n /** Returns `props.id` if available, or a fallback if not. */\n get: function () {\n return this.props.id || this._fallbackId;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(TextFieldBase.prototype, \"_isControlled\", {\n get: function () {\n return isControlled(this.props, 'value');\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype._onRenderPrefix = function (props) {\n var prefix = props.prefix;\n return React.createElement(\"span\", { style: { paddingBottom: '1px' } }, prefix);\n };\n TextFieldBase.prototype._onRenderSuffix = function (props) {\n var suffix = props.suffix;\n return React.createElement(\"span\", { style: { paddingBottom: '1px' } }, suffix);\n };\n Object.defineProperty(TextFieldBase.prototype, \"_errorMessage\", {\n /**\n * Current error message from either `props.errorMessage` or the result of `props.onGetErrorMessage`.\n *\n * - If there is no validation error or we have not validated the input value, errorMessage is an empty string.\n * - If we have done the validation and there is validation error, errorMessage is the validation error message.\n */\n get: function () {\n var _a = this.props.errorMessage, errorMessage = _a === void 0 ? this.state.errorMessage : _a;\n return errorMessage || '';\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Renders error message based on the type of the message.\n *\n * - If error message is string, it will render using the built in styles.\n * - If error message is an element, user has full control over how it's rendered.\n */\n TextFieldBase.prototype._renderErrorMessage = function () {\n var errorMessage = this._errorMessage;\n return errorMessage ? (typeof errorMessage === 'string' ? (React.createElement(\"p\", { className: this._classNames.errorMessage },\n React.createElement(\"span\", { \"data-automation-id\": \"error-message\" }, errorMessage))) : (React.createElement(\"div\", { className: this._classNames.errorMessage, \"data-automation-id\": \"error-message\" }, errorMessage))) : null;\n };\n Object.defineProperty(TextFieldBase.prototype, \"_isDescriptionAvailable\", {\n /**\n * If a custom description render function is supplied then treat description as always available.\n * Otherwise defer to the presence of description or error message text.\n */\n get: function () {\n var props = this.props;\n return !!(props.onRenderDescription || props.description || this._errorMessage);\n },\n enumerable: false,\n configurable: true\n });\n TextFieldBase.prototype._renderTextArea = function () {\n var _a = this.props.invalid, invalid = _a === void 0 ? !!this._errorMessage : _a;\n var textAreaProps = getNativeProps(this.props, textAreaProperties, ['defaultValue']);\n var ariaLabelledBy = this.props['aria-labelledby'] || (this.props.label ? this._labelId : undefined);\n return (React.createElement(\"textarea\", __assign({ id: this._id }, textAreaProps, { ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], \"aria-invalid\": invalid, \"aria-label\": this.props.ariaLabel, readOnly: this.props.readOnly, onFocus: this._onFocus, onBlur: this._onBlur })));\n };\n TextFieldBase.prototype._renderInput = function () {\n var _a = this.props, ariaLabel = _a.ariaLabel, _b = _a.invalid, invalid = _b === void 0 ? !!this._errorMessage : _b, _c = _a.type, type = _c === void 0 ? 'text' : _c, label = _a.label;\n var inputProps = __assign(__assign({ type: this.state.isRevealingPassword ? 'text' : type, id: this._id }, getNativeProps(this.props, inputProperties, ['defaultValue', 'type'])), { 'aria-labelledby': this.props['aria-labelledby'] || (label ? this._labelId : undefined), ref: this._textElement, value: this.value || '', onInput: this._onInputChange, onChange: this._onInputChange, className: this._classNames.field, 'aria-label': ariaLabel, 'aria-describedby': this._isDescriptionAvailable ? this._descriptionId : this.props['aria-describedby'], 'aria-invalid': invalid, onFocus: this._onFocus, onBlur: this._onBlur });\n var defaultRender = function (updatedInputProps) {\n return React.createElement(\"input\", __assign({}, updatedInputProps));\n };\n var onRenderInput = this.props.onRenderInput || defaultRender;\n return onRenderInput(inputProps, defaultRender);\n };\n TextFieldBase.prototype._validate = function (value) {\n var _this = this;\n // In case _validate is called again while validation promise is executing\n if (this._latestValidateValue === value && _shouldValidateAllChanges(this.props)) {\n return;\n }\n this._latestValidateValue = value;\n var onGetErrorMessage = this.props.onGetErrorMessage;\n var result = onGetErrorMessage && onGetErrorMessage(value || '');\n if (result !== undefined) {\n if (typeof result === 'string' || !('then' in result)) {\n this.setState({ errorMessage: result });\n this._notifyAfterValidate(value, result);\n }\n else {\n var currentValidation_1 = ++this._lastValidation;\n result.then(function (errorMessage) {\n if (currentValidation_1 === _this._lastValidation) {\n _this.setState({ errorMessage: errorMessage });\n }\n _this._notifyAfterValidate(value, errorMessage);\n });\n }\n }\n else {\n this._notifyAfterValidate(value, '');\n }\n };\n TextFieldBase.prototype._notifyAfterValidate = function (value, errorMessage) {\n if (value === this.value && this.props.onNotifyValidationResult) {\n this.props.onNotifyValidationResult(errorMessage, value);\n }\n };\n TextFieldBase.prototype._adjustInputHeight = function () {\n if (this._textElement.current && this.props.autoAdjustHeight && this.props.multiline) {\n var textField = this._textElement.current;\n textField.style.height = '';\n textField.style.height = textField.scrollHeight + 'px';\n }\n };\n TextFieldBase.defaultProps = {\n resizable: true,\n deferredValidationTime: 200,\n validateOnLoad: true,\n };\n return TextFieldBase;\n}(React.Component));\nexport { TextFieldBase };\n/** Get the value from the given state and props (converting from number to string if needed) */\nfunction _getValue(props, state) {\n var _a = props.value, value = _a === void 0 ? state.uncontrolledValue : _a;\n if (typeof value === 'number') {\n // not allowed per typings, but happens anyway\n return String(value);\n }\n return value;\n}\n/**\n * If `validateOnFocusIn` or `validateOnFocusOut` is true, validation should run **only** on that event.\n * Otherwise, validation should run on every change.\n */\nfunction _shouldValidateAllChanges(props) {\n return !(props.validateOnFocusIn || props.validateOnFocusOut);\n}\n// Only calculate this once across all TextFields, since will stay the same\nvar __browserNeedsRevealButton;\nfunction _browserNeedsRevealButton() {\n if (typeof __browserNeedsRevealButton !== 'boolean') {\n var win = getWindow();\n if (win === null || win === void 0 ? void 0 : win.navigator) {\n // Edge, Chromium Edge\n var isEdge = /^Edg/.test(win.navigator.userAgent || '');\n __browserNeedsRevealButton = !(isIE11() || isEdge);\n }\n else {\n __browserNeedsRevealButton = true;\n }\n }\n return __browserNeedsRevealButton;\n}\n//# sourceMappingURL=TextField.base.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, getFocusStyle, getGlobalClassNames, getInputFocusStyle, HighContrastSelector, normalize, getPlaceholderStyles, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nvar globalClassNames = {\n root: 'ms-TextField',\n description: 'ms-TextField-description',\n errorMessage: 'ms-TextField-errorMessage',\n field: 'ms-TextField-field',\n fieldGroup: 'ms-TextField-fieldGroup',\n prefix: 'ms-TextField-prefix',\n suffix: 'ms-TextField-suffix',\n wrapper: 'ms-TextField-wrapper',\n revealButton: 'ms-TextField-reveal',\n multiline: 'ms-TextField--multiline',\n borderless: 'ms-TextField--borderless',\n underlined: 'ms-TextField--underlined',\n unresizable: 'ms-TextField--unresizable',\n required: 'is-required',\n disabled: 'is-disabled',\n active: 'is-active',\n};\nfunction getLabelStyles(props) {\n var underlined = props.underlined, disabled = props.disabled, focused = props.focused, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n return function () {\n var _a;\n return ({\n root: [\n underlined &&\n disabled && {\n color: palette.neutralTertiary,\n },\n underlined && {\n fontSize: fonts.medium.fontSize,\n marginRight: 8,\n paddingLeft: 12,\n paddingRight: 0,\n lineHeight: '22px',\n height: 32,\n },\n underlined &&\n focused && {\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n height: 31,\n },\n _a),\n },\n ],\n });\n };\n}\nexport function getStyles(props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n var theme = props.theme, className = props.className, disabled = props.disabled, focused = props.focused, required = props.required, multiline = props.multiline, hasLabel = props.hasLabel, borderless = props.borderless, underlined = props.underlined, hasIcon = props.hasIcon, resizable = props.resizable, hasErrorMessage = props.hasErrorMessage, inputClassName = props.inputClassName, autoAdjustHeight = props.autoAdjustHeight, hasRevealButton = props.hasRevealButton;\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var classNames = getGlobalClassNames(globalClassNames, theme);\n var fieldPrefixSuffix = {\n // Suffix/Prefix are not editable so the disabled slot perfectly fits.\n background: semanticColors.disabledBackground,\n color: !disabled ? semanticColors.inputPlaceholderText : semanticColors.disabledText,\n display: 'flex',\n alignItems: 'center',\n padding: '0 10px',\n lineHeight: 1,\n whiteSpace: 'nowrap',\n flexShrink: 0,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _a),\n };\n // placeholder style constants\n var placeholderStyles = [\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n },\n ];\n var disabledPlaceholderStyles = {\n color: semanticColors.disabledText,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n };\n return {\n root: [\n classNames.root,\n fonts.medium,\n required && classNames.required,\n disabled && classNames.disabled,\n focused && classNames.active,\n multiline && classNames.multiline,\n borderless && classNames.borderless,\n underlined && classNames.underlined,\n normalize,\n {\n position: 'relative',\n },\n className,\n ],\n wrapper: [\n classNames.wrapper,\n underlined && [\n {\n display: 'flex',\n borderBottom: \"1px solid \" + (!hasErrorMessage ? semanticColors.inputBorder : semanticColors.errorText),\n width: '100%',\n },\n disabled && {\n borderBottomColor: semanticColors.disabledBackground,\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ borderColor: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n !disabled && {\n selectors: {\n ':hover': {\n borderBottomColor: !hasErrorMessage ? semanticColors.inputBorderHovered : semanticColors.errorText,\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ borderBottomColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n },\n },\n focused && [\n {\n position: 'relative',\n },\n getInputFocusStyle(!hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText, 0, 'borderBottom'),\n ],\n ],\n ],\n fieldGroup: [\n classNames.fieldGroup,\n normalize,\n {\n border: \"1px solid \" + semanticColors.inputBorder,\n borderRadius: effects.roundedCorner2,\n background: semanticColors.inputBackground,\n cursor: 'text',\n height: 32,\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'stretch',\n position: 'relative',\n },\n multiline && {\n minHeight: '60px',\n height: 'auto',\n display: 'flex',\n },\n !focused &&\n !disabled && {\n selectors: {\n ':hover': {\n borderColor: semanticColors.inputBorderHovered,\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ borderColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n },\n },\n focused &&\n !underlined &&\n getInputFocusStyle(!hasErrorMessage ? semanticColors.inputFocusBorderAlt : semanticColors.errorText, effects.roundedCorner2),\n disabled && {\n borderColor: semanticColors.disabledBackground,\n selectors: (_g = {},\n _g[HighContrastSelector] = __assign({ borderColor: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _g),\n cursor: 'default',\n },\n borderless && {\n border: 'none',\n },\n borderless &&\n focused && {\n border: 'none',\n selectors: {\n ':after': {\n border: 'none',\n },\n },\n },\n underlined && {\n flex: '1 1 0px',\n border: 'none',\n textAlign: 'left',\n },\n underlined &&\n disabled && {\n backgroundColor: 'transparent',\n },\n hasErrorMessage &&\n !underlined && {\n borderColor: semanticColors.errorText,\n selectors: {\n '&:hover': {\n borderColor: semanticColors.errorText,\n },\n },\n },\n !hasLabel &&\n required && {\n selectors: (_h = {\n ':before': {\n content: \"'*'\",\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n }\n },\n _h[HighContrastSelector] = {\n selectors: {\n ':before': {\n color: 'WindowText',\n right: -14,\n },\n },\n },\n _h),\n },\n ],\n field: [\n fonts.medium,\n classNames.field,\n normalize,\n {\n borderRadius: 0,\n border: 'none',\n background: 'none',\n backgroundColor: 'transparent',\n color: semanticColors.inputText,\n padding: '0 8px',\n width: '100%',\n minWidth: 0,\n textOverflow: 'ellipsis',\n outline: 0,\n selectors: (_j = {\n '&:active, &:focus, &:hover': { outline: 0 },\n '::-ms-clear': {\n display: 'none',\n }\n },\n _j[HighContrastSelector] = {\n background: 'Window',\n color: disabled ? 'GrayText' : 'WindowText',\n },\n _j),\n },\n getPlaceholderStyles(placeholderStyles),\n multiline &&\n !resizable && [\n classNames.unresizable,\n {\n resize: 'none',\n },\n ],\n multiline && {\n minHeight: 'inherit',\n lineHeight: 17,\n flexGrow: 1,\n paddingTop: 6,\n paddingBottom: 6,\n overflow: 'auto',\n width: '100%',\n },\n multiline &&\n autoAdjustHeight && {\n overflow: 'hidden',\n },\n hasIcon &&\n !hasRevealButton && {\n paddingRight: 24,\n },\n multiline &&\n hasIcon && {\n paddingRight: 40,\n },\n disabled && [\n {\n backgroundColor: semanticColors.disabledBackground,\n color: semanticColors.disabledText,\n borderColor: semanticColors.disabledBackground,\n },\n getPlaceholderStyles(disabledPlaceholderStyles),\n ],\n underlined && {\n textAlign: 'left',\n },\n focused &&\n !borderless && {\n selectors: (_k = {},\n _k[HighContrastSelector] = {\n paddingLeft: 11,\n paddingRight: 11,\n },\n _k),\n },\n focused &&\n multiline &&\n !borderless && {\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n paddingTop: 4,\n },\n _l),\n },\n inputClassName,\n ],\n icon: [\n multiline && {\n paddingRight: 24,\n alignItems: 'flex-end',\n },\n {\n pointerEvents: 'none',\n position: 'absolute',\n bottom: 6,\n right: 8,\n top: 'auto',\n fontSize: IconFontSizes.medium,\n lineHeight: 18,\n },\n disabled && {\n color: semanticColors.disabledText,\n },\n ],\n description: [\n classNames.description,\n {\n color: semanticColors.bodySubtext,\n fontSize: fonts.xSmall.fontSize,\n },\n ],\n errorMessage: [\n classNames.errorMessage,\n AnimationClassNames.slideDownIn20,\n fonts.small,\n {\n color: semanticColors.errorText,\n margin: 0,\n paddingTop: 5,\n display: 'flex',\n alignItems: 'center',\n },\n ],\n prefix: [classNames.prefix, fieldPrefixSuffix],\n suffix: [classNames.suffix, fieldPrefixSuffix],\n revealButton: [\n classNames.revealButton,\n 'ms-Button',\n 'ms-Button--icon',\n getFocusStyle(theme, { inset: 1 }),\n {\n height: 30,\n width: 32,\n border: 'none',\n padding: '0px 4px',\n backgroundColor: 'transparent',\n color: semanticColors.link,\n selectors: {\n ':hover': {\n outline: 0,\n color: semanticColors.primaryButtonBackgroundHovered,\n backgroundColor: semanticColors.buttonBackgroundHovered,\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _m),\n },\n ':focus': { outline: 0 },\n },\n },\n hasIcon && {\n marginRight: 28,\n },\n ],\n revealSpan: {\n display: 'flex',\n height: '100%',\n alignItems: 'center',\n },\n revealIcon: {\n margin: '0px 4px',\n pointerEvents: 'none',\n bottom: 6,\n right: 8,\n top: 'auto',\n fontSize: IconFontSizes.medium,\n lineHeight: 18,\n },\n subComponentStyles: {\n label: getLabelStyles(props),\n },\n };\n}\n//# sourceMappingURL=TextField.styles.js.map","import { styled } from '../../Utilities';\nimport { TextFieldBase } from './TextField.base';\nimport { getStyles } from './TextField.styles';\nexport var TextField = styled(TextFieldBase, getStyles, undefined, {\n scope: 'TextField',\n});\n//# sourceMappingURL=TextField.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, on, initializeComponentRef, KeyCodes, getId } from '../../../Utilities';\n// These imports are separated to help with bundling\nimport { MAX_COLOR_SATURATION, MAX_COLOR_VALUE } from '../../../utilities/color/consts';\nimport { getFullColorString } from '../../../utilities/color/getFullColorString';\nimport { updateSV } from '../../../utilities/color/updateSV';\nimport { clamp } from '../../../utilities/color/clamp';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory ColorPicker}\n */\nvar ColorRectangleBase = /** @class */ (function (_super) {\n __extends(ColorRectangleBase, _super);\n function ColorRectangleBase(props) {\n var _this = _super.call(this, props) || this;\n _this._disposables = [];\n _this._root = React.createRef();\n _this._isAdjustingSaturation = true;\n _this._descriptionId = getId('ColorRectangle-description');\n _this._onKeyDown = function (ev) {\n var color = _this.state.color;\n var s = color.s, v = color.v;\n var increment = ev.shiftKey ? 10 : 1;\n // Intentionally DO NOT flip the color picker in RTL: its orientation is not very meaningful,\n // and getting all the math and styles flipped correctly is tricky\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.up: {\n _this._isAdjustingSaturation = false;\n v += increment; // V = 100 (lightest) is at the top\n break;\n }\n case KeyCodes.down: {\n _this._isAdjustingSaturation = false;\n v -= increment; // V = 0 (darkest) is at the bottom\n break;\n }\n case KeyCodes.left: {\n _this._isAdjustingSaturation = true;\n s -= increment;\n break;\n }\n case KeyCodes.right: {\n _this._isAdjustingSaturation = true;\n s += increment;\n break;\n }\n default:\n return;\n }\n _this._updateColor(ev, updateSV(color, clamp(s, MAX_COLOR_SATURATION), clamp(v, MAX_COLOR_VALUE)));\n };\n _this._onMouseDown = function (ev) {\n _this._disposables.push(on(window, 'mousemove', _this._onMouseMove, true), on(window, 'mouseup', _this._disposeListeners, true));\n _this._onMouseMove(ev);\n };\n _this._onMouseMove = function (ev) {\n if (!_this._root.current) {\n return;\n }\n // Leaving the following commented code which is sometimes necessary for debugging:\n // If the primary button (1) isn't pressed, the user is no longer dragging, so turn off\n // the event handlers and exit.\n // if (!(ev.buttons & 1)) {\n // this._disposeListeners();\n // return;\n // }\n var newColor = _getNewColor(ev, _this.state.color, _this._root.current);\n if (newColor) {\n _this._updateColor(ev, newColor);\n }\n };\n _this._disposeListeners = function () {\n _this._disposables.forEach(function (dispose) { return dispose(); });\n _this._disposables = [];\n };\n initializeComponentRef(_this);\n _this.state = { color: props.color };\n return _this;\n }\n Object.defineProperty(ColorRectangleBase.prototype, \"color\", {\n get: function () {\n return this.state.color;\n },\n enumerable: false,\n configurable: true\n });\n ColorRectangleBase.prototype.componentDidUpdate = function (prevProps, prevState) {\n // if props changed (as opposed to a state update), set the value\n // TODO: switch to strict controlled pattern instead\n if (prevProps !== this.props && this.props.color) {\n this.setState({ color: this.props.color });\n }\n };\n ColorRectangleBase.prototype.componentWillUnmount = function () {\n this._disposeListeners();\n };\n ColorRectangleBase.prototype.render = function () {\n var _a = this.props, minSize = _a.minSize, theme = _a.theme, className = _a.className, styles = _a.styles, ariaValueFormat = _a.ariaValueFormat, ariaLabel = _a.ariaLabel, ariaDescription = _a.ariaDescription;\n var color = this.state.color;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n minSize: minSize,\n });\n var valueText = ariaValueFormat.replace('{0}', String(color.s)).replace('{1}', String(color.v));\n return (React.createElement(\"div\", { ref: this._root, tabIndex: 0, className: classNames.root, style: { backgroundColor: getFullColorString(color) }, onMouseDown: this._onMouseDown, onKeyDown: this._onKeyDown, role: \"slider\", \"aria-valuetext\": valueText, \"aria-valuenow\": this._isAdjustingSaturation ? color.s : color.v, \"aria-valuemin\": 0, \"aria-valuemax\": MAX_COLOR_VALUE, \"aria-label\": ariaLabel, \"aria-describedby\": this._descriptionId, \"data-is-focusable\": true },\n React.createElement(\"div\", { className: classNames.description, id: this._descriptionId }, ariaDescription),\n React.createElement(\"div\", { className: classNames.light }),\n React.createElement(\"div\", { className: classNames.dark }),\n React.createElement(\"div\", { className: classNames.thumb, style: { left: color.s + '%', top: MAX_COLOR_VALUE - color.v + '%', backgroundColor: color.str } })));\n };\n ColorRectangleBase.prototype._updateColor = function (ev, color) {\n var onChange = this.props.onChange;\n var oldColor = this.state.color;\n if (color.s === oldColor.s && color.v === oldColor.v) {\n return; // no change\n }\n if (onChange) {\n onChange(ev, color);\n }\n if (!ev.defaultPrevented) {\n this.setState({ color: color });\n ev.preventDefault();\n }\n };\n ColorRectangleBase.defaultProps = {\n minSize: 220,\n ariaLabel: 'Saturation and brightness',\n ariaValueFormat: 'Saturation {0} brightness {1}',\n ariaDescription: 'Use left and right arrow keys to set saturation. Use up and down arrow keys to set brightness.',\n };\n return ColorRectangleBase;\n}(React.Component));\nexport { ColorRectangleBase };\n/**\n * Exported for testing only.\n * @internal\n */\nexport function _getNewColor(ev, prevColor, root) {\n var rectSize = root.getBoundingClientRect();\n var sPercentage = (ev.clientX - rectSize.left) / rectSize.width;\n var vPercentage = (ev.clientY - rectSize.top) / rectSize.height;\n return updateSV(prevColor, clamp(Math.round(sPercentage * MAX_COLOR_SATURATION), MAX_COLOR_SATURATION), clamp(Math.round(MAX_COLOR_VALUE - vPercentage * MAX_COLOR_VALUE), MAX_COLOR_VALUE));\n}\n//# sourceMappingURL=ColorRectangle.base.js.map","import { styled } from '../../../Utilities';\nimport { ColorRectangleBase } from './ColorRectangle.base';\nimport { getStyles } from './ColorRectangle.styles';\nexport var ColorRectangle = styled(ColorRectangleBase, getStyles, undefined, { scope: 'ColorRectangle' });\n//# sourceMappingURL=ColorRectangle.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { IsFocusVisibleClassName } from '../../../Utilities';\nimport { hiddenContentStyle } from '@fluentui/style-utilities';\nexport var getStyles = function (props) {\n var _a, _b;\n var className = props.className, theme = props.theme, minSize = props.minSize;\n var palette = theme.palette, effects = theme.effects;\n return {\n root: [\n 'ms-ColorPicker-colorRect',\n {\n position: 'relative',\n marginBottom: 8,\n border: \"1px solid \" + palette.neutralLighter,\n borderRadius: effects.roundedCorner2,\n minWidth: minSize,\n minHeight: minSize,\n outline: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = (_b = {\n outline: \"1px solid \" + palette.neutralSecondary\n },\n _b[\"\" + HighContrastSelector] = {\n outline: '2px solid CanvasText',\n },\n _b),\n _a),\n },\n className,\n ],\n light: [\n 'ms-ColorPicker-light',\n {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n // Intentionally DO NOT flip the color picker in RTL: its orientation is not very meaningful,\n // and getting all the math and styles flipped correctly is tricky\n background: 'linear-gradient(to right, white 0%, transparent 100%) /*@noflip*/',\n },\n ],\n dark: [\n 'ms-ColorPicker-dark',\n {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n background: 'linear-gradient(to bottom, transparent 0, #000 100%)',\n },\n ],\n thumb: [\n 'ms-ColorPicker-thumb',\n {\n position: 'absolute',\n width: 20,\n height: 20,\n background: 'white',\n border: \"1px solid \" + palette.neutralSecondaryAlt,\n borderRadius: '50%',\n boxShadow: effects.elevation8,\n transform: 'translate(-50%, -50%)',\n selectors: {\n ':before': {\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n border: \"2px solid \" + palette.white,\n borderRadius: '50%',\n boxSizing: 'border-box',\n content: '\"\"',\n },\n },\n },\n ],\n description: hiddenContentStyle,\n };\n};\n//# sourceMappingURL=ColorRectangle.styles.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef, on, KeyCodes, getWindow, warnDeprecations, warn, } from '../../../Utilities';\nimport { clamp } from '../../../utilities/color/clamp';\nimport { MAX_COLOR_HUE, MAX_COLOR_ALPHA } from '../../../utilities/color/consts';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory ColorPicker}\n */\nvar ColorSliderBase = /** @class */ (function (_super) {\n __extends(ColorSliderBase, _super);\n function ColorSliderBase(props) {\n var _this = _super.call(this, props) || this;\n _this._disposables = [];\n _this._root = React.createRef();\n _this._onKeyDown = function (ev) {\n var currentValue = _this.value;\n var maxValue = _this._maxValue;\n var increment = ev.shiftKey ? 10 : 1;\n // Intentionally DO NOT flip the color picker in RTL: its orientation is not very meaningful,\n // and getting all the math and styles flipped correctly is tricky\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.left: {\n currentValue -= increment;\n break;\n }\n case KeyCodes.right: {\n currentValue += increment;\n break;\n }\n case KeyCodes.home: {\n currentValue = 0;\n break;\n }\n case KeyCodes.end: {\n currentValue = maxValue;\n break;\n }\n default: {\n return;\n }\n }\n _this._updateValue(ev, clamp(currentValue, maxValue));\n };\n _this._onMouseDown = function (ev) {\n var win = getWindow(_this);\n if (win) {\n _this._disposables.push(on(win, 'mousemove', _this._onMouseMove, true), on(win, 'mouseup', _this._disposeListeners, true));\n }\n _this._onMouseMove(ev);\n };\n _this._onMouseMove = function (ev) {\n if (!_this._root.current) {\n return;\n }\n var maxValue = _this._maxValue;\n var rectSize = _this._root.current.getBoundingClientRect();\n var currentPercentage = (ev.clientX - rectSize.left) / rectSize.width;\n var newValue = clamp(Math.round(currentPercentage * maxValue), maxValue);\n _this._updateValue(ev, newValue);\n };\n _this._disposeListeners = function () {\n _this._disposables.forEach(function (dispose) { return dispose(); });\n _this._disposables = [];\n };\n initializeComponentRef(_this);\n warnDeprecations('ColorSlider', props, {\n thumbColor: 'styles.sliderThumb',\n overlayStyle: 'overlayColor',\n isAlpha: 'type',\n maxValue: 'type',\n minValue: 'type',\n });\n // eslint-disable-next-line deprecation/deprecation\n if (_this._type !== 'hue' && !(props.overlayColor || props.overlayStyle)) {\n warn(\"ColorSlider: 'overlayColor' is required when 'type' is \\\"alpha\\\" or \\\"transparency\\\"\");\n }\n _this.state = {\n currentValue: props.value || 0,\n };\n return _this;\n }\n Object.defineProperty(ColorSliderBase.prototype, \"value\", {\n get: function () {\n return this.state.currentValue;\n },\n enumerable: false,\n configurable: true\n });\n ColorSliderBase.prototype.componentDidUpdate = function (prevProps, prevState) {\n // if props changed (as opposed to a state update), set the value\n // TODO: switch to strict controlled pattern instead\n if (prevProps !== this.props && this.props.value !== undefined) {\n this.setState({ currentValue: this.props.value });\n }\n };\n ColorSliderBase.prototype.componentWillUnmount = function () {\n this._disposeListeners();\n };\n ColorSliderBase.prototype.render = function () {\n var type = this._type;\n var maxValue = this._maxValue;\n var _a = this.props, \n // eslint-disable-next-line deprecation/deprecation\n overlayStyle = _a.overlayStyle, overlayColor = _a.overlayColor, theme = _a.theme, className = _a.className, styles = _a.styles, _b = _a.ariaLabel, ariaLabel = _b === void 0 ? type : _b;\n var currentValue = this.value;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n type: type,\n });\n var currentPercentage = (100 * currentValue) / maxValue;\n return (React.createElement(\"div\", { ref: this._root, className: classNames.root, tabIndex: 0, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, role: \"slider\", \"aria-valuenow\": currentValue, \"aria-valuetext\": String(currentValue), \"aria-valuemin\": 0, \"aria-valuemax\": maxValue, \"aria-label\": ariaLabel, \"data-is-focusable\": true },\n !!(overlayColor || overlayStyle) && (React.createElement(\"div\", { className: classNames.sliderOverlay, \n // this isn't included in getStyles because it may change frequently\n style: overlayColor\n ? {\n background: type === 'transparency'\n ? \"linear-gradient(to right, #\" + overlayColor + \", transparent)\"\n : \"linear-gradient(to right, transparent, #\" + overlayColor + \")\",\n }\n : overlayStyle })),\n React.createElement(\"div\", { className: classNames.sliderThumb, style: { left: currentPercentage + '%' } })));\n };\n Object.defineProperty(ColorSliderBase.prototype, \"_type\", {\n get: function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, isAlpha = _a.isAlpha, _b = _a.type, type = _b === void 0 ? isAlpha ? 'alpha' : 'hue' : _b;\n return type;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(ColorSliderBase.prototype, \"_maxValue\", {\n get: function () {\n return this._type === 'hue' ? MAX_COLOR_HUE : MAX_COLOR_ALPHA;\n },\n enumerable: false,\n configurable: true\n });\n ColorSliderBase.prototype._updateValue = function (ev, newValue) {\n if (newValue === this.value) {\n return;\n }\n var onChange = this.props.onChange;\n if (onChange) {\n onChange(ev, newValue);\n }\n if (!ev.defaultPrevented) {\n this.setState({\n currentValue: newValue,\n });\n ev.preventDefault();\n }\n };\n ColorSliderBase.defaultProps = {\n value: 0,\n };\n return ColorSliderBase;\n}(React.Component));\nexport { ColorSliderBase };\n//# sourceMappingURL=ColorSlider.base.js.map","import { IsFocusVisibleClassName } from '../../../Utilities';\nimport { HighContrastSelector } from '../../../Styling';\nvar hueStyle = {\n background: \"linear-gradient(\" + [\n 'to left',\n 'red 0',\n '#f09 10%',\n '#cd00ff 20%',\n '#3200ff 30%',\n '#06f 40%',\n '#00fffd 50%',\n '#0f6 60%',\n '#35ff00 70%',\n '#cdff00 80%',\n '#f90 90%',\n 'red 100%',\n ].join(',') + \")\",\n};\nvar alphaStyle = {\n backgroundImage: 'url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJUlEQVQYV2N89erVfwY0ICYmxoguxjgUFKI7GsTH5m4M3w1ChQC1/Ca8i2n1WgAAAABJRU5ErkJggg==)',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n // eslint-disable-next-line deprecation/deprecation\n var theme = props.theme, className = props.className, _c = props.type, type = _c === void 0 ? 'hue' : _c, _d = props.isAlpha, useAlphaBackground = _d === void 0 ? type !== 'hue' : _d;\n var palette = theme.palette, effects = theme.effects;\n return {\n root: [\n 'ms-ColorPicker-slider',\n {\n position: 'relative',\n height: 20,\n marginBottom: 8,\n border: \"1px solid \" + palette.neutralLight,\n borderRadius: effects.roundedCorner2,\n boxSizing: 'border-box',\n outline: 'none',\n forcedColorAdjust: 'none',\n selectors: (_a = {},\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = (_b = {\n outline: \"1px solid \" + palette.neutralSecondary\n },\n _b[\"\" + HighContrastSelector] = {\n outline: '2px solid CanvasText',\n },\n _b),\n _a),\n },\n useAlphaBackground ? alphaStyle : hueStyle,\n className,\n ],\n sliderOverlay: [\n 'ms-ColorPicker-sliderOverlay',\n {\n content: '',\n position: 'absolute',\n left: 0,\n right: 0,\n top: 0,\n bottom: 0,\n },\n ],\n sliderThumb: [\n 'ms-ColorPicker-thumb',\n 'is-slider',\n {\n position: 'absolute',\n width: 20,\n height: 20,\n background: 'white',\n border: \"1px solid \" + palette.neutralSecondaryAlt,\n borderRadius: '50%',\n boxShadow: effects.elevation8,\n transform: 'translate(-50%, -50%)',\n top: '50%',\n forcedColorAdjust: 'auto',\n },\n ],\n };\n};\n//# sourceMappingURL=ColorSlider.styles.js.map","import { styled } from '../../../Utilities';\nimport { ColorSliderBase } from './ColorSlider.base';\nimport { getStyles } from './ColorSlider.styles';\nexport var ColorSlider = styled(ColorSliderBase, getStyles, undefined, { scope: 'ColorSlider' });\n//# sourceMappingURL=ColorSlider.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef, warnDeprecations, warn } from '../../Utilities';\nimport { TextField } from '../../TextField';\nimport { TooltipHost } from '../../Tooltip';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { ColorRectangle } from './ColorRectangle/ColorRectangle';\nimport { ColorSlider } from './ColorSlider/ColorSlider';\nimport { MAX_COLOR_ALPHA, MAX_COLOR_RGB, MAX_HEX_LENGTH, MAX_RGBA_LENGTH, MIN_HEX_LENGTH, MIN_RGBA_LENGTH, HEX_REGEX, RGBA_REGEX, } from '../../utilities/color/consts';\n// These imports are separated to help with bundling\nimport { getColorFromString } from '../../utilities/color/getColorFromString';\nimport { getColorFromRGBA } from '../../utilities/color/getColorFromRGBA';\nimport { clamp } from '../../utilities/color/clamp';\nimport { updateA } from '../../utilities/color/updateA';\nimport { updateT } from '../../utilities/color/updateT';\nimport { updateH } from '../../utilities/color/updateH';\nimport { correctRGB } from '../../utilities/color/correctRGB';\nimport { correctHex } from '../../utilities/color/correctHex';\nimport { ColorRectangleBase } from './ColorRectangle/ColorRectangle.base';\nvar getClassNames = classNamesFunction();\nvar allColorComponents = ['hex', 'r', 'g', 'b', 'a', 't'];\nvar errorKeys = {\n hex: 'hexError',\n r: 'redError',\n g: 'greenError',\n b: 'blueError',\n a: 'alphaError',\n t: 'transparencyError',\n};\n/**\n * {@docCategory ColorPicker}\n */\nvar ColorPickerBase = /** @class */ (function (_super) {\n __extends(ColorPickerBase, _super);\n function ColorPickerBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onSVChanged = function (ev, color) {\n _this._updateColor(ev, color);\n };\n _this._onHChanged = function (ev, h) {\n _this._updateColor(ev, updateH(_this.state.color, h));\n };\n /** Callback for when the alpha/transparency slider changes */\n _this._onATChanged = function (ev, value) {\n var updater = _this.props.alphaType === 'transparency' ? updateT : updateA;\n _this._updateColor(ev, updater(_this.state.color, Math.round(value)));\n };\n _this._onBlur = function (event) {\n var _a;\n var _b = _this.state, color = _b.color, editingColor = _b.editingColor;\n if (!editingColor) {\n return;\n }\n // If there was an intermediate incorrect value (such as too large or empty), correct it.\n var value = editingColor.value, component = editingColor.component;\n var isHex = component === 'hex';\n var isAlpha = component === 'a';\n var isTransparency = component === 't';\n var minLength = isHex ? MIN_HEX_LENGTH : MIN_RGBA_LENGTH;\n if (value.length >= minLength && (isHex || !isNaN(Number(value)))) {\n // Real value. Clamp to appropriate length (hex) or range (rgba).\n var newColor = void 0;\n if (isHex) {\n newColor = getColorFromString('#' + correctHex(value));\n }\n else if (isAlpha || isTransparency) {\n var updater = isAlpha ? updateA : updateT;\n newColor = updater(color, clamp(Number(value), MAX_COLOR_ALPHA));\n }\n else {\n newColor = getColorFromRGBA(correctRGB(__assign(__assign({}, color), (_a = {}, _a[component] = Number(value), _a))));\n }\n // Update state and call onChange\n _this._updateColor(event, newColor);\n }\n else {\n // Intermediate value was an empty string or too short (hex only).\n // Just clear the intermediate state and revert to the previous value.\n _this.setState({ editingColor: undefined });\n }\n };\n initializeComponentRef(_this);\n var strings = props.strings; // always defined since it's in defaultProps\n warnDeprecations('ColorPicker', props, {\n hexLabel: 'strings.hex',\n redLabel: 'strings.red',\n greenLabel: 'strings.green',\n blueLabel: 'strings.blue',\n alphaLabel: 'strings.alpha',\n alphaSliderHidden: 'alphaType',\n });\n // eslint-disable-next-line deprecation/deprecation\n if (strings.hue) {\n // warnDeprecations can't handle nested deprecated props\n warn(\"ColorPicker property 'strings.hue' was used but has been deprecated. Use 'strings.hueAriaLabel' instead.\");\n }\n _this.state = {\n color: _getColorFromProps(props) || getColorFromString('#ffffff'),\n };\n _this._textChangeHandlers = {};\n for (var _i = 0, allColorComponents_1 = allColorComponents; _i < allColorComponents_1.length; _i++) {\n var component = allColorComponents_1[_i];\n _this._textChangeHandlers[component] = _this._onTextChange.bind(_this, component);\n }\n var defaultStrings = ColorPickerBase.defaultProps.strings;\n _this._textLabels = {\n /* eslint-disable deprecation/deprecation */\n r: props.redLabel || strings.red || defaultStrings.red,\n g: props.greenLabel || strings.green || defaultStrings.green,\n b: props.blueLabel || strings.blue || defaultStrings.blue,\n a: props.alphaLabel || strings.alpha || defaultStrings.alpha,\n hex: props.hexLabel || strings.hex || defaultStrings.hex,\n t: strings.transparency || defaultStrings.transparency,\n };\n _this._strings = __assign(__assign(__assign({}, defaultStrings), { \n // these aria labels default to the visible labels\n alphaAriaLabel: _this._textLabels.a, transparencyAriaLabel: _this._textLabels.t }), strings);\n return _this;\n }\n Object.defineProperty(ColorPickerBase.prototype, \"color\", {\n get: function () {\n return this.state.color;\n },\n enumerable: false,\n configurable: true\n });\n ColorPickerBase.prototype.componentDidUpdate = function (prevProps, prevState) {\n // if props changed (as opposed to a state update), update the color\n if (prevProps !== this.props) {\n var color = _getColorFromProps(this.props);\n if (color) {\n this._updateColor(undefined, color);\n }\n }\n };\n ColorPickerBase.prototype.render = function () {\n var _this = this;\n var props = this.props;\n var strings = this._strings;\n var textLabels = this._textLabels;\n var theme = props.theme, className = props.className, styles = props.styles, alphaType = props.alphaType, \n // eslint-disable-next-line deprecation/deprecation\n _a = props.alphaSliderHidden, \n // eslint-disable-next-line deprecation/deprecation\n alphaSliderHidden = _a === void 0 ? alphaType === 'none' : _a, tooltipProps = props.tooltipProps;\n var color = this.state.color;\n var useTransparency = alphaType === 'transparency';\n var colorComponents = ['hex', 'r', 'g', 'b', useTransparency ? 't' : 'a'];\n var atValue = useTransparency ? color.t : color.a;\n var atLabel = useTransparency ? textLabels.t : textLabels.a;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n alphaType: alphaType,\n });\n var selectedColorAriaParts = [textLabels.r, color.r, textLabels.g, color.g, textLabels.b, color.b];\n if (!alphaSliderHidden && typeof atValue === 'number') {\n selectedColorAriaParts.push(atLabel, atValue + \"%\");\n }\n var ariaLabel = strings.rootAriaLabelFormat.replace('{0}', selectedColorAriaParts.join(' '));\n return (React.createElement(\"div\", { className: classNames.root, role: \"group\", \"aria-label\": ariaLabel },\n React.createElement(\"div\", { className: classNames.panel },\n React.createElement(ColorRectangle, { color: color, onChange: this._onSVChanged, ariaLabel: strings.svAriaLabel, ariaDescription: strings.svAriaDescription, ariaValueFormat: strings.svAriaValueFormat, className: classNames.colorRectangle }),\n React.createElement(\"div\", { className: classNames.flexContainer },\n React.createElement(\"div\", { className: classNames.flexSlider },\n React.createElement(ColorSlider, { className: \"is-hue\", type: \"hue\", \n // eslint-disable-next-line deprecation/deprecation\n ariaLabel: strings.hue || strings.hueAriaLabel, value: color.h, onChange: this._onHChanged }),\n !alphaSliderHidden && (React.createElement(ColorSlider, { className: \"is-alpha\", type: alphaType, ariaLabel: useTransparency ? strings.transparencyAriaLabel : strings.alphaAriaLabel, overlayColor: color.hex, value: atValue, onChange: this._onATChanged }))),\n props.showPreview && (React.createElement(\"div\", { className: classNames.flexPreviewBox },\n React.createElement(\"div\", { className: classNames.colorSquare + ' is-preview', style: {\n backgroundColor: color.str,\n } })))),\n React.createElement(\"table\", { className: classNames.table, role: \"group\", cellPadding: \"0\", cellSpacing: \"0\" },\n React.createElement(\"thead\", null,\n React.createElement(\"tr\", { className: classNames.tableHeader },\n React.createElement(\"td\", { className: classNames.tableHexCell }, textLabels.hex),\n React.createElement(\"td\", null, textLabels.r),\n React.createElement(\"td\", null, textLabels.g),\n React.createElement(\"td\", null, textLabels.b),\n !alphaSliderHidden && React.createElement(\"td\", { className: classNames.tableAlphaCell }, atLabel))),\n React.createElement(\"tbody\", null,\n React.createElement(\"tr\", null, colorComponents.map(function (comp) {\n if ((comp === 'a' || comp === 't') && alphaSliderHidden) {\n return null;\n }\n var tooltipContent = _this._getTooltipValue(comp);\n return (React.createElement(\"td\", { key: comp },\n React.createElement(TooltipHost, __assign({ content: tooltipContent, directionalHint: DirectionalHint.bottomCenter, role: \"alert\" }, tooltipProps),\n React.createElement(TextField, { className: classNames.input, onChange: _this._textChangeHandlers[comp], onBlur: _this._onBlur, value: _this._getDisplayValue(comp), spellCheck: false, ariaLabel: textLabels[comp], autoComplete: \"off\", invalid: !!tooltipContent }))));\n })))))));\n };\n ColorPickerBase.prototype._getDisplayValue = function (component) {\n var _a = this.state, color = _a.color, editingColor = _a.editingColor;\n if (editingColor && editingColor.component === component) {\n return editingColor.value;\n }\n if (component === 'hex') {\n return color[component] || '';\n }\n else if (typeof color[component] === 'number' && !isNaN(color[component])) {\n return String(color[component]);\n }\n return '';\n };\n /* Get the error tooltip value for a component if the component is in an invalid state */\n ColorPickerBase.prototype._getTooltipValue = function (component) {\n var editingColor = this.state.editingColor;\n // if the component does not have an interim value, it is valid\n if (!editingColor || editingColor.component !== component) {\n return undefined;\n }\n var value = editingColor.value;\n // for hex, do not show a tooltip if the value is between 3-6 characters\n if (component === 'hex' && value.length >= MIN_HEX_LENGTH && value.length <= MAX_HEX_LENGTH) {\n return undefined;\n }\n var errorKey = errorKeys[component];\n return this._strings[errorKey];\n };\n ColorPickerBase.prototype._onTextChange = function (component, event, newValue) {\n var _a;\n var color = this.state.color;\n var isHex = component === 'hex';\n var isAlpha = component === 'a';\n var isTransparency = component === 't';\n newValue = (newValue || '').substr(0, isHex ? MAX_HEX_LENGTH : MAX_RGBA_LENGTH);\n // Ignore what the user typed if it contains invalid characters\n var validCharsRegex = isHex ? HEX_REGEX : RGBA_REGEX;\n if (!validCharsRegex.test(newValue)) {\n return;\n }\n // Determine if the entry is valid (different methods for hex, alpha, and RGB)\n var isValid;\n if (newValue === '') {\n // Empty string is obviously not valid\n isValid = false;\n }\n else if (isHex) {\n // Technically hex values of length 3 are also valid, but committing the value here would\n // cause it to be automatically converted to a value of length 6, which may not be what the\n // user wanted if they're not finished typing. (Values of length 3 will be committed on blur.)\n isValid = newValue.length === MAX_HEX_LENGTH;\n }\n else if (isAlpha || isTransparency) {\n isValid = Number(newValue) <= MAX_COLOR_ALPHA;\n }\n else {\n isValid = Number(newValue) <= MAX_COLOR_RGB;\n }\n if (!isValid) {\n // If the new value is an empty string or other invalid value, save that to display.\n // (if the user still hasn't entered anything on blur, the last value is restored)\n this.setState({ editingColor: { component: component, value: newValue } });\n }\n else if (String(color[component]) === newValue) {\n // If the new value is the same as the current value, mostly ignore it.\n // Exception is that if the user was previously editing the value (but hadn't yet entered\n // a new valid value), we should clear the intermediate value.\n if (this.state.editingColor) {\n this.setState({ editingColor: undefined });\n }\n }\n else {\n // Should be a valid color. Update the value.\n var newColor = isHex\n ? getColorFromString('#' + newValue)\n : isTransparency\n ? updateT(color, Number(newValue))\n : getColorFromRGBA(__assign(__assign({}, color), (_a = {}, _a[component] = Number(newValue), _a)));\n this._updateColor(event, newColor);\n }\n };\n /**\n * Update the displayed color and call change handlers if appropriate.\n * @param ev - Event if call was triggered by an event (undefined if triggered by props change)\n * @param newColor - Updated color\n */\n ColorPickerBase.prototype._updateColor = function (ev, newColor) {\n if (!newColor) {\n return;\n }\n var _a = this.state, color = _a.color, editingColor = _a.editingColor;\n // For black or white, the hue can change without changing the string.\n var isDifferentColor = newColor.h !== color.h || newColor.str !== color.str;\n if (isDifferentColor || editingColor) {\n // If ev is undefined, it's an update from props (which should be unconditionally respected\n // and not call onChange).\n if (ev && this.props.onChange) {\n this.props.onChange(ev, newColor);\n if (ev.defaultPrevented) {\n return;\n }\n }\n this.setState({ color: newColor, editingColor: undefined });\n }\n };\n ColorPickerBase.defaultProps = {\n alphaType: 'alpha',\n strings: {\n rootAriaLabelFormat: 'Color picker, {0} selected.',\n hex: 'Hex',\n red: 'Red',\n green: 'Green',\n blue: 'Blue',\n alpha: 'Alpha',\n transparency: 'Transparency',\n hueAriaLabel: 'Hue',\n svAriaLabel: ColorRectangleBase.defaultProps.ariaLabel,\n svAriaValueFormat: ColorRectangleBase.defaultProps.ariaValueFormat,\n svAriaDescription: ColorRectangleBase.defaultProps.ariaDescription,\n hexError: 'Hex values must be between 3 and 6 characters long',\n alphaError: 'Alpha must be between 0 and 100',\n transparencyError: 'Transparency must be between 0 and 100',\n redError: 'Red must be between 0 and 255',\n greenError: 'Green must be between 0 and 255',\n blueError: 'Blue must be between 0 and 255',\n },\n };\n return ColorPickerBase;\n}(React.Component));\nexport { ColorPickerBase };\nfunction _getColorFromProps(props) {\n var color = props.color;\n return typeof color === 'string' ? getColorFromString(color) : color;\n}\n//# sourceMappingURL=ColorPicker.base.js.map","export var getStyles = function (props) {\n var className = props.className, theme = props.theme, alphaType = props.alphaType;\n return {\n root: [\n 'ms-ColorPicker',\n theme.fonts.medium,\n {\n position: 'relative',\n maxWidth: 300,\n },\n className,\n ],\n panel: [\n 'ms-ColorPicker-panel',\n {\n padding: '16px',\n },\n ],\n table: [\n 'ms-ColorPicker-table',\n {\n tableLayout: 'fixed',\n width: '100%',\n selectors: {\n 'tbody td:last-of-type .ms-ColorPicker-input': {\n paddingRight: 0,\n },\n },\n },\n ],\n tableHeader: [\n theme.fonts.small,\n {\n selectors: {\n td: {\n paddingBottom: 4,\n },\n },\n },\n ],\n tableHexCell: {\n width: '25%',\n },\n // Account for \"Transparency\" being a longer word\n tableAlphaCell: alphaType === 'transparency' && {\n width: '22%',\n },\n colorSquare: [\n 'ms-ColorPicker-colorSquare',\n {\n width: 48,\n height: 48,\n margin: '0 0 0 8px',\n border: '1px solid #c8c6c4',\n },\n ],\n flexContainer: {\n display: 'flex',\n },\n flexSlider: {\n flexGrow: '1',\n },\n flexPreviewBox: {\n flexGrow: '0',\n },\n input: [\n 'ms-ColorPicker-input',\n {\n width: '100%',\n border: 'none',\n boxSizing: 'border-box',\n height: 30,\n selectors: {\n '&.ms-TextField': {\n paddingRight: 4,\n },\n '& .ms-TextField-field': {\n minWidth: 'auto',\n padding: 5,\n textOverflow: 'clip',\n },\n },\n },\n ],\n };\n};\n//# sourceMappingURL=ColorPicker.styles.js.map","var _a, _b;\nimport { __assign } from \"tslib\";\nimport { FontWeights, concatStyleSets, getFocusStyle, HighContrastSelector, getPlaceholderStyles, hiddenContentStyle, getInputFocusStyle, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nvar ComboBoxHeight = 32;\nvar ComboBoxLineHeight = 30;\nvar ComboBoxCaretDownWidth = 32;\nvar ComboBoxOptionHeight = 36;\nvar getDisabledStyles = memoizeFunction(function (theme) {\n var _a;\n var semanticColors = theme.semanticColors;\n return {\n backgroundColor: semanticColors.disabledBackground,\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: (_a = {\n ':after': {\n borderColor: semanticColors.disabledBackground,\n }\n },\n _a[HighContrastSelector] = {\n color: 'GrayText',\n selectors: {\n ':after': {\n borderColor: 'GrayText',\n },\n },\n },\n _a),\n };\n});\nvar listOptionHighContrastStyles = {\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _a),\n};\nvar inputHighContrastStyles = {\n selectors: (_b = {},\n _b[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _b),\n};\nexport var getOptionStyles = memoizeFunction(function (theme, customStylesForAllOptions, customOptionStylesForCurrentOption, isPending, isHidden, isSelected) {\n var _a;\n var palette = theme.palette, semanticColors = theme.semanticColors;\n var option = {\n textHoveredColor: semanticColors.menuItemTextHovered,\n textSelectedColor: palette.neutralDark,\n textDisabledColor: semanticColors.disabledText,\n backgroundHoveredColor: semanticColors.menuItemBackgroundHovered,\n backgroundPressedColor: semanticColors.menuItemBackgroundPressed,\n };\n var optionStyles = {\n root: [\n theme.fonts.medium,\n {\n backgroundColor: isPending ? option.backgroundHoveredColor : 'transparent',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: isHidden ? 'none' : 'block',\n width: '100%',\n height: 'auto',\n minHeight: ComboBoxOptionHeight,\n lineHeight: '20px',\n padding: '0 8px',\n position: 'relative',\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: 'transparent',\n borderRadius: 0,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n textAlign: 'left',\n selectors: __assign(__assign((_a = {}, _a[HighContrastSelector] = {\n border: 'none',\n borderColor: 'Background',\n }, _a), (!isHidden && {\n '&.ms-Checkbox': {\n display: 'flex',\n alignItems: 'center',\n },\n })), { '&.ms-Button--command:hover:active': {\n backgroundColor: option.backgroundPressedColor,\n }, '.ms-Checkbox-label': {\n width: '100%',\n } }),\n },\n isSelected\n ? [\n {\n backgroundColor: 'transparent',\n color: option.textSelectedColor,\n selectors: {\n ':hover': [\n {\n backgroundColor: option.backgroundHoveredColor,\n },\n listOptionHighContrastStyles,\n ],\n },\n },\n getFocusStyle(theme, { inset: -1, isFocusedOnly: false }),\n listOptionHighContrastStyles,\n ]\n : [],\n ],\n rootHovered: {\n backgroundColor: option.backgroundHoveredColor,\n color: option.textHoveredColor,\n },\n rootFocused: {\n backgroundColor: option.backgroundHoveredColor,\n },\n rootDisabled: {\n color: option.textDisabledColor,\n cursor: 'default',\n },\n optionText: {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n minWidth: '0px',\n maxWidth: '100%',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n display: 'inline-block',\n },\n optionTextWrapper: {\n maxWidth: '100%',\n display: 'flex',\n alignItems: 'center',\n },\n };\n return concatStyleSets(optionStyles, customStylesForAllOptions, customOptionStylesForCurrentOption);\n});\nexport var getCaretDownButtonStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var caret = {\n buttonTextColor: semanticColors.bodySubtext,\n buttonTextHoveredCheckedColor: semanticColors.buttonTextChecked,\n buttonBackgroundHoveredColor: semanticColors.listItemBackgroundHovered,\n buttonBackgroundCheckedColor: semanticColors.listItemBackgroundChecked,\n buttonBackgroundCheckedHoveredColor: semanticColors.listItemBackgroundCheckedHovered,\n };\n var buttonHighContrastStyles = {\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _a),\n };\n var styles = {\n root: {\n color: caret.buttonTextColor,\n fontSize: fonts.small.fontSize,\n position: 'absolute',\n top: 0,\n height: '100%',\n lineHeight: ComboBoxLineHeight,\n width: ComboBoxCaretDownWidth,\n textAlign: 'center',\n cursor: 'default',\n selectors: (_b = {},\n _b[HighContrastSelector] = __assign({ backgroundColor: 'ButtonFace', borderColor: 'ButtonText', color: 'ButtonText' }, getHighContrastNoAdjustStyle()),\n _b),\n },\n icon: {\n fontSize: fonts.small.fontSize,\n },\n rootHovered: [\n {\n backgroundColor: caret.buttonBackgroundHoveredColor,\n color: caret.buttonTextHoveredCheckedColor,\n cursor: 'pointer',\n },\n buttonHighContrastStyles,\n ],\n rootPressed: [\n {\n backgroundColor: caret.buttonBackgroundCheckedColor,\n color: caret.buttonTextHoveredCheckedColor,\n },\n buttonHighContrastStyles,\n ],\n rootChecked: [\n {\n backgroundColor: caret.buttonBackgroundCheckedColor,\n color: caret.buttonTextHoveredCheckedColor,\n },\n buttonHighContrastStyles,\n ],\n rootCheckedHovered: [\n {\n backgroundColor: caret.buttonBackgroundCheckedHoveredColor,\n color: caret.buttonTextHoveredCheckedColor,\n },\n buttonHighContrastStyles,\n ],\n rootDisabled: [\n getDisabledStyles(theme),\n {\n position: 'absolute',\n },\n ],\n };\n return concatStyleSets(styles, customStyles);\n});\nexport var getStyles = memoizeFunction(function (theme, customStyles, comboBoxOptionWidth) {\n var _a, _b, _c, _d, _e, _f;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;\n var root = {\n textColor: semanticColors.inputText,\n borderColor: semanticColors.inputBorder,\n borderHoveredColor: semanticColors.inputBorderHovered,\n borderPressedColor: semanticColors.inputFocusBorderAlt,\n borderFocusedColor: semanticColors.inputFocusBorderAlt,\n backgroundColor: semanticColors.inputBackground,\n erroredColor: semanticColors.errorText,\n };\n var option = {\n headerTextColor: semanticColors.menuHeader,\n dividerBorderColor: semanticColors.bodyDivider,\n };\n // placeholder style variables\n var placeholderHighContrastStyles = {\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n };\n var placeholderStyles = [\n {\n color: semanticColors.inputPlaceholderText,\n },\n placeholderHighContrastStyles,\n ];\n var placeholderStylesHovered = [\n {\n color: semanticColors.inputTextHovered,\n },\n placeholderHighContrastStyles,\n ];\n var disabledPlaceholderStyles = [\n {\n color: semanticColors.disabledText,\n },\n placeholderHighContrastStyles,\n ];\n var ComboBoxRootHighContrastFocused = __assign(__assign({ color: 'HighlightText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()), { selectors: {\n ':after': {\n borderColor: 'Highlight',\n },\n } });\n var focusBorderStyles = getInputFocusStyle(root.borderPressedColor, effects.roundedCorner2, 'border', 0);\n var styles = {\n container: {},\n label: {},\n labelDisabled: {},\n root: [\n theme.fonts.medium,\n {\n boxShadow: 'none',\n marginLeft: '0',\n paddingRight: ComboBoxCaretDownWidth,\n paddingLeft: 9,\n color: root.textColor,\n position: 'relative',\n outline: '0',\n userSelect: 'none',\n backgroundColor: root.backgroundColor,\n cursor: 'text',\n display: 'block',\n height: ComboBoxHeight,\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n boxSizing: 'border-box',\n selectors: {\n '.ms-Label': {\n display: 'inline-block',\n marginBottom: '8px',\n },\n '&.is-open': {\n selectors: (_b = {},\n _b[HighContrastSelector] = ComboBoxRootHighContrastFocused,\n _b),\n },\n // setting border using pseudo-element here in order to\n // prevent chevron button to overlap ComboBox border under certain resolutions\n ':after': {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n left: 0,\n top: 0,\n bottom: 0,\n right: 0,\n borderWidth: '1px',\n borderStyle: 'solid',\n borderColor: root.borderColor,\n borderRadius: effects.roundedCorner2,\n },\n },\n },\n ],\n rootHovered: {\n selectors: (_c = {\n ':after': {\n borderColor: root.borderHoveredColor,\n },\n '.ms-ComboBox-Input': [\n {\n color: semanticColors.inputTextHovered,\n },\n getPlaceholderStyles(placeholderStylesHovered),\n inputHighContrastStyles,\n ]\n },\n _c[HighContrastSelector] = __assign(__assign({ color: 'HighlightText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()), { selectors: {\n ':after': {\n borderColor: 'Highlight',\n },\n } }),\n _c),\n },\n rootPressed: [\n {\n position: 'relative',\n selectors: (_d = {},\n _d[HighContrastSelector] = ComboBoxRootHighContrastFocused,\n _d),\n },\n ],\n rootFocused: [\n {\n selectors: (_e = {\n '.ms-ComboBox-Input': [\n {\n color: semanticColors.inputTextHovered,\n },\n inputHighContrastStyles,\n ]\n },\n _e[HighContrastSelector] = ComboBoxRootHighContrastFocused,\n _e),\n },\n focusBorderStyles,\n ],\n rootDisabled: getDisabledStyles(theme),\n rootError: {\n selectors: {\n ':after': {\n borderColor: root.erroredColor,\n },\n ':hover:after': {\n borderColor: semanticColors.inputBorderHovered,\n },\n },\n },\n rootDisallowFreeForm: {},\n input: [\n getPlaceholderStyles(placeholderStyles),\n {\n backgroundColor: root.backgroundColor,\n color: root.textColor,\n boxSizing: 'border-box',\n width: '100%',\n height: '100%',\n borderStyle: 'none',\n outline: 'none',\n font: 'inherit',\n textOverflow: 'ellipsis',\n padding: '0',\n selectors: {\n '::-ms-clear': {\n display: 'none',\n },\n },\n },\n inputHighContrastStyles,\n ],\n inputDisabled: [getDisabledStyles(theme), getPlaceholderStyles(disabledPlaceholderStyles)],\n errorMessage: [\n theme.fonts.small,\n {\n color: root.erroredColor,\n marginTop: '5px',\n },\n ],\n callout: {\n boxShadow: effects.elevation8,\n },\n optionsContainerWrapper: {\n width: comboBoxOptionWidth,\n },\n optionsContainer: {\n display: 'block',\n },\n screenReaderText: hiddenContentStyle,\n header: [\n fonts.medium,\n {\n fontWeight: FontWeights.semibold,\n color: option.headerTextColor,\n backgroundColor: 'none',\n borderStyle: 'none',\n height: ComboBoxOptionHeight,\n lineHeight: ComboBoxOptionHeight,\n cursor: 'default',\n padding: '0 8px',\n userSelect: 'none',\n textAlign: 'left',\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n ],\n divider: {\n height: 1,\n backgroundColor: option.dividerBorderColor,\n },\n };\n return concatStyleSets(styles, customStyles);\n});\n//# sourceMappingURL=ComboBox.styles.js.map","export var SelectableOptionMenuItemType;\n(function (SelectableOptionMenuItemType) {\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"Normal\"] = 0] = \"Normal\";\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"Divider\"] = 1] = \"Divider\";\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"Header\"] = 2] = \"Header\";\n SelectableOptionMenuItemType[SelectableOptionMenuItemType[\"SelectAll\"] = 3] = \"SelectAll\";\n})(SelectableOptionMenuItemType || (SelectableOptionMenuItemType = {}));\n//# sourceMappingURL=SelectableOption.types.js.map","import { __assign, __decorate, __extends, __rest, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { Autofill } from '../../Autofill';\nimport { initializeComponentRef, css, customizable, divProperties, findElementRecursive, findIndex, focusAsync, getId, getNativeProps, isIOS, isMac, KeyCodes, shallowCompare, mergeAriaAttributeValues, warnMutuallyExclusive, Async, EventGroup, getPropsWithDefaults, } from '../../Utilities';\nimport { Callout, DirectionalHint } from '../../Callout';\nimport { Checkbox } from '../../Checkbox';\nimport { getCaretDownButtonStyles, getOptionStyles, getStyles } from './ComboBox.styles';\nimport { getClassNames, getComboBoxOptionClassNames } from './ComboBox.classNames';\nimport { Label } from '../../Label';\nimport { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption';\nimport { CommandButton, IconButton } from '../../Button';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar SearchDirection;\n(function (SearchDirection) {\n SearchDirection[SearchDirection[\"backward\"] = -1] = \"backward\";\n SearchDirection[SearchDirection[\"none\"] = 0] = \"none\";\n SearchDirection[SearchDirection[\"forward\"] = 1] = \"forward\";\n})(SearchDirection || (SearchDirection = {}));\nvar HoverStatus;\n(function (HoverStatus) {\n /** Used when the user was hovering and has since moused out of the menu items */\n HoverStatus[HoverStatus[\"clearAll\"] = -2] = \"clearAll\";\n /** Default \"normal\" state, when no hover has happened or a hover is in progress */\n HoverStatus[HoverStatus[\"default\"] = -1] = \"default\";\n})(HoverStatus || (HoverStatus = {}));\nvar ScrollIdleDelay = 250; /* ms */\nvar TouchIdleDelay = 500; /* ms */\n/**\n * This is used to clear any pending autocomplete text (used when autocomplete is true and\n * allowFreeform is false)\n */\nvar ReadOnlyPendingAutoCompleteTimeout = 1000; /* ms */\n/**\n * Internal component that is used to wrap all ComboBox options.\n * This is used to customize when we want to re-render components,\n * so we don't re-render every option every time render is executed.\n */\nvar ComboBoxOptionWrapper = React.memo(function (_a) {\n var render = _a.render;\n return render();\n}, function (_a, _b) {\n var oldRender = _a.render, oldProps = __rest(_a, [\"render\"]);\n var newRender = _b.render, newProps = __rest(_b, [\"render\"]);\n // The render function will always be different, so we ignore that prop\n return shallowCompare(oldProps, newProps);\n});\nvar COMPONENT_NAME = 'ComboBox';\nvar DEFAULT_PROPS = {\n options: [],\n allowFreeform: false,\n autoComplete: 'on',\n buttonIconProps: { iconName: 'ChevronDown' },\n};\nfunction useOptionsState(_a) {\n var options = _a.options, defaultSelectedKey = _a.defaultSelectedKey, selectedKey = _a.selectedKey;\n /** The currently selected indices */\n var _b = React.useState(function () {\n return getSelectedIndices(options, buildDefaultSelectedKeys(defaultSelectedKey, selectedKey));\n }), selectedIndices = _b[0], setSelectedIndices = _b[1];\n /** The options currently available for the callout */\n var _c = React.useState(options), currentOptions = _c[0], setCurrentOptions = _c[1];\n /** This value is used for the autocomplete hint value */\n var _d = React.useState(), suggestedDisplayValue = _d[0], setSuggestedDisplayValue = _d[1];\n React.useEffect(function () {\n if (selectedKey !== undefined) {\n var selectedKeys = buildSelectedKeys(selectedKey);\n var indices = getSelectedIndices(options, selectedKeys);\n setSelectedIndices(indices);\n }\n setCurrentOptions(options);\n }, [options, selectedKey]);\n React.useEffect(function () {\n if (selectedKey === null) {\n setSuggestedDisplayValue(undefined);\n }\n }, [selectedKey]);\n return [\n selectedIndices,\n setSelectedIndices,\n currentOptions,\n setCurrentOptions,\n suggestedDisplayValue,\n setSuggestedDisplayValue,\n ];\n}\nexport var ComboBox = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var _a = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults), ref = _a.ref, props = __rest(_a, [\"ref\"]);\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(rootRef, forwardedRef);\n var _b = useOptionsState(props), selectedIndices = _b[0], setSelectedIndices = _b[1], currentOptions = _b[2], setCurrentOptions = _b[3], suggestedDisplayValue = _b[4], setSuggestedDisplayValue = _b[5];\n return (React.createElement(ComboBoxInternal, __assign({}, props, { hoisted: {\n mergedRootRef: mergedRootRef,\n rootRef: rootRef,\n selectedIndices: selectedIndices,\n setSelectedIndices: setSelectedIndices,\n currentOptions: currentOptions,\n setCurrentOptions: setCurrentOptions,\n suggestedDisplayValue: suggestedDisplayValue,\n setSuggestedDisplayValue: setSuggestedDisplayValue,\n } })));\n});\nComboBox.displayName = COMPONENT_NAME;\nvar ComboBoxInternal = /** @class */ (function (_super) {\n __extends(ComboBoxInternal, _super);\n function ComboBoxInternal(props) {\n var _this = _super.call(this, props) || this;\n /** The input aspect of the combo box */\n _this._autofill = React.createRef();\n /** The wrapping div of the input and button */\n _this._comboBoxWrapper = React.createRef();\n /** The callout element */\n _this._comboBoxMenu = React.createRef();\n /** The menu item element that is currently selected */\n _this._selectedElement = React.createRef();\n /**\n * {@inheritdoc}\n */\n _this.focus = function (shouldOpenOnFocus, useFocusAsync) {\n if (_this._autofill.current) {\n if (useFocusAsync) {\n focusAsync(_this._autofill.current);\n }\n else {\n _this._autofill.current.focus();\n }\n if (shouldOpenOnFocus) {\n _this.setState({\n isOpen: true,\n });\n }\n }\n // Programmatically setting focus means that there is nothing else that needs to be done\n // Focus is now contained\n if (!_this._hasFocus()) {\n _this.setState({ focusState: 'focused' });\n }\n };\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 /**\n * componentWillReceiveProps handler for the auto fill component\n * Checks/updates the input value to set, if needed\n * @param defaultVisibleValue - the defaultVisibleValue that got passed\n * in to the auto fill's componentWillReceiveProps\n * @returns - the updated value to set, if needed\n */\n _this._onUpdateValueInAutofillWillReceiveProps = function () {\n var comboBox = _this._autofill.current;\n if (!comboBox) {\n return null;\n }\n if (comboBox.value === null || comboBox.value === undefined) {\n return null;\n }\n var visibleValue = normalizeToString(_this._currentVisibleValue);\n if (comboBox.value !== visibleValue) {\n return visibleValue;\n }\n return comboBox.value;\n };\n _this._renderComboBoxWrapper = function (multiselectAccessibleText, errorMessageId) {\n var _a = _this.props, label = _a.label, disabled = _a.disabled, ariaLabel = _a.ariaLabel, ariaDescribedBy = _a.ariaDescribedBy, required = _a.required, errorMessage = _a.errorMessage, buttonIconProps = _a.buttonIconProps, _b = _a.isButtonAriaHidden, isButtonAriaHidden = _b === void 0 ? true : _b, title = _a.title, placeholderProp = _a.placeholder, tabIndex = _a.tabIndex, autofill = _a.autofill, iconButtonProps = _a.iconButtonProps, suggestedDisplayValue = _a.hoisted.suggestedDisplayValue;\n var isOpen = _this.state.isOpen;\n // If the combo box has focus, is multiselect, and has a display string, then use that placeholder\n // so that the selected items don't appear to vanish. This is not ideal but it's the only reasonable way\n // to correct the behavior where the input is cleared so the user can type. If a full refactor is done, then this\n // should be removed and the multiselect combo box should behave like a picker.\n var placeholder = _this._hasFocus() && _this.props.multiSelect && multiselectAccessibleText\n ? multiselectAccessibleText\n : placeholderProp;\n return (React.createElement(\"div\", { \"data-ktp-target\": true, ref: _this._comboBoxWrapper, id: _this._id + 'wrapper', className: _this._classNames.root, \"aria-owns\": isOpen ? _this._id + '-list' : undefined },\n React.createElement(Autofill, __assign({ \"data-ktp-execute-target\": true, \"data-is-interactable\": !disabled, componentRef: _this._autofill, id: _this._id + '-input', className: _this._classNames.input, type: \"text\", onFocus: _this._onFocus, onBlur: _this._onBlur, onKeyDown: _this._onInputKeyDown, onKeyUp: _this._onInputKeyUp, onClick: _this._onAutofillClick, onTouchStart: _this._onTouchStart, onInputValueChange: _this._onInputChange, \"aria-expanded\": isOpen, \"aria-autocomplete\": _this._getAriaAutoCompleteValue(), role: \"combobox\", readOnly: disabled, \"aria-labelledby\": label && _this._id + '-label', \"aria-label\": ariaLabel && !label ? ariaLabel : undefined, \"aria-describedby\": errorMessage !== undefined ? mergeAriaAttributeValues(ariaDescribedBy, errorMessageId) : ariaDescribedBy, \"aria-activedescendant\": _this._getAriaActiveDescendantValue(), \"aria-required\": required, \"aria-disabled\": disabled, \"aria-controls\": isOpen ? _this._id + '-list' : undefined, spellCheck: false, defaultVisibleValue: _this._currentVisibleValue, suggestedDisplayValue: suggestedDisplayValue, updateValueInWillReceiveProps: _this._onUpdateValueInAutofillWillReceiveProps, shouldSelectFullInputValueInComponentDidUpdate: _this._onShouldSelectFullInputValueInAutofillComponentDidUpdate, title: title, preventValueSelection: !_this._hasFocus(), placeholder: placeholder, tabIndex: disabled ? -1 : tabIndex }, autofill)),\n React.createElement(IconButton, __assign({ className: 'ms-ComboBox-CaretDown-button', styles: _this._getCaretButtonStyles(), role: \"presentation\", \"aria-hidden\": isButtonAriaHidden, \"data-is-focusable\": false, tabIndex: -1, onClick: _this._onComboBoxClick, onBlur: _this._onBlur, iconProps: buttonIconProps, disabled: disabled, checked: isOpen }, iconButtonProps))));\n };\n /**\n * componentDidUpdate handler for the auto fill component\n *\n * @param defaultVisibleValue - the current defaultVisibleValue in the auto fill's componentDidUpdate\n * @param suggestedDisplayValue - the current suggestedDisplayValue in the auto fill's componentDidUpdate\n * @returns - should the full value of the input be selected?\n * True if the defaultVisibleValue equals the suggestedDisplayValue, false otherwise\n */\n _this._onShouldSelectFullInputValueInAutofillComponentDidUpdate = function () {\n return _this._currentVisibleValue === _this.props.hoisted.suggestedDisplayValue;\n };\n /**\n * Get the correct value to pass to the input\n * to show to the user based off of the current props and state\n * @returns the value to pass to the input\n */\n _this._getVisibleValue = function () {\n var _a = _this.props, text = _a.text, allowFreeform = _a.allowFreeform, autoComplete = _a.autoComplete, _b = _a.hoisted, suggestedDisplayValue = _b.suggestedDisplayValue, selectedIndices = _b.selectedIndices, currentOptions = _b.currentOptions;\n var _c = _this.state, currentPendingValueValidIndex = _c.currentPendingValueValidIndex, currentPendingValue = _c.currentPendingValue, isOpen = _c.isOpen;\n var currentPendingIndexValid = indexWithinBounds(currentOptions, currentPendingValueValidIndex);\n // If the user passed is a value prop, use that\n // unless we are open and have a valid current pending index\n if (!(isOpen && currentPendingIndexValid) &&\n text &&\n (currentPendingValue === null || currentPendingValue === undefined)) {\n return text;\n }\n if (_this.props.multiSelect) {\n // Multi-select\n if (_this._hasFocus()) {\n var index = -1;\n if (autoComplete === 'on' && currentPendingIndexValid) {\n index = currentPendingValueValidIndex;\n }\n return _this._getPendingString(currentPendingValue, currentOptions, index);\n }\n else {\n return _this._getMultiselectDisplayString(selectedIndices, currentOptions, suggestedDisplayValue);\n }\n }\n else {\n // Single-select\n var index = _this._getFirstSelectedIndex();\n if (allowFreeform) {\n // If we are allowing freeform and autocomplete is also true\n // and we've got a pending value that matches an option, remember\n // the matched option's index\n if (autoComplete === 'on' && currentPendingIndexValid) {\n index = currentPendingValueValidIndex;\n }\n // Since we are allowing freeform, if there is currently a pending value, use that\n // otherwise use the index determined above (falling back to '' if we did not get a valid index)\n return _this._getPendingString(currentPendingValue, currentOptions, index);\n }\n else {\n // If we are not allowing freeform and have a valid index that matches the pending value,\n // we know we will need some version of the pending value\n if (currentPendingIndexValid && autoComplete === 'on') {\n // If autoComplete is on, return the raw pending value, otherwise remember\n // the matched option's index\n index = currentPendingValueValidIndex;\n return normalizeToString(currentPendingValue);\n }\n else if (!_this.state.isOpen && currentPendingValue) {\n return indexWithinBounds(currentOptions, index)\n ? currentPendingValue\n : normalizeToString(suggestedDisplayValue);\n }\n else {\n return indexWithinBounds(currentOptions, index)\n ? getPreviewText(currentOptions[index])\n : normalizeToString(suggestedDisplayValue);\n }\n }\n }\n };\n /**\n * Handler for typing changes on the input\n * @param updatedValue - the newly changed value\n */\n _this._onInputChange = function (updatedValue) {\n if (_this.props.disabled) {\n _this._handleInputWhenDisabled(null /* event */);\n return;\n }\n _this.props.allowFreeform\n ? _this._processInputChangeWithFreeform(updatedValue)\n : _this._processInputChangeWithoutFreeform(updatedValue);\n };\n /**\n * Focus (and select) the content of the input\n * and set the focused state\n */\n _this._onFocus = function () {\n var _a, _b;\n (_b = (_a = _this._autofill.current) === null || _a === void 0 ? void 0 : _a.inputElement) === null || _b === void 0 ? void 0 : _b.select();\n if (!_this._hasFocus()) {\n _this.setState({ focusState: 'focusing' });\n }\n };\n /**\n * Callback issued when the options should be resolved, if they have been updated or\n * if they need to be passed in the first time. This only does work if an onResolveOptions\n * callback was passed in\n */\n _this._onResolveOptions = function () {\n if (_this.props.onResolveOptions) {\n // get the options\n var newOptions = _this.props.onResolveOptions(__spreadArrays(_this.props.hoisted.currentOptions));\n // Check to see if the returned value is an array, if it is update the state\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(newOptions)) {\n _this.props.hoisted.setCurrentOptions(newOptions);\n }\n else if (newOptions && newOptions.then) {\n // Ensure that the promise will only use the callback if it was the most recent one\n // and update the state when the promise returns\n var promise_1 = (_this._currentPromise = newOptions);\n promise_1.then(function (newOptionsFromPromise) {\n if (promise_1 === _this._currentPromise) {\n _this.props.hoisted.setCurrentOptions(newOptionsFromPromise);\n }\n });\n }\n }\n };\n /**\n * OnBlur handler. Set the focused state to false\n * and submit any pending value\n */\n // eslint-disable-next-line deprecation/deprecation\n _this._onBlur = function (event) {\n var _a, _b;\n // Do nothing if the blur is coming from something\n // inside the comboBox root or the comboBox menu since\n // it we are not really blurring from the whole comboBox\n var relatedTarget = event.relatedTarget;\n if (event.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 ComboBox\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 = document.activeElement;\n }\n if (relatedTarget) {\n var isBlurFromComboBoxTitle = (_a = _this.props.hoisted.rootRef.current) === null || _a === void 0 ? void 0 : _a.contains(relatedTarget);\n var isBlurFromComboBoxMenu = (_b = _this._comboBoxMenu.current) === null || _b === void 0 ? void 0 : _b.contains(relatedTarget);\n var isBlurFromComboBoxMenuAncestor = _this._comboBoxMenu.current &&\n findElementRecursive(_this._comboBoxMenu.current, function (element) { return element === relatedTarget; });\n if (isBlurFromComboBoxTitle || isBlurFromComboBoxMenu || isBlurFromComboBoxMenuAncestor) {\n if (isBlurFromComboBoxMenuAncestor &&\n _this._hasFocus() &&\n (!_this.props.multiSelect || _this.props.allowFreeform)) {\n _this._submitPendingValue(event);\n }\n event.preventDefault();\n event.stopPropagation();\n return;\n }\n }\n if (_this._hasFocus()) {\n _this.setState({ focusState: 'none' });\n if (!_this.props.multiSelect || _this.props.allowFreeform) {\n _this._submitPendingValue(event);\n }\n }\n };\n // Render Callout container and pass in list\n _this._onRenderContainer = function (props, defaultRender) {\n var onRenderList = props.onRenderList, calloutProps = props.calloutProps, dropdownWidth = props.dropdownWidth, dropdownMaxWidth = props.dropdownMaxWidth, _a = props.onRenderUpperContent, onRenderUpperContent = _a === void 0 ? _this._onRenderUpperContent : _a, _b = props.onRenderLowerContent, onRenderLowerContent = _b === void 0 ? _this._onRenderLowerContent : _b, useComboBoxAsMenuWidth = props.useComboBoxAsMenuWidth, persistMenu = props.persistMenu, _c = props.shouldRestoreFocus, shouldRestoreFocus = _c === void 0 ? true : _c;\n var isOpen = _this.state.isOpen;\n var id = _this._id;\n var comboBoxMenuWidth = useComboBoxAsMenuWidth && _this._comboBoxWrapper.current\n ? _this._comboBoxWrapper.current.clientWidth + 2\n : undefined;\n return (React.createElement(Callout, __assign({ isBeakVisible: false, gapSpace: 0, doNotLayer: false, directionalHint: DirectionalHint.bottomLeftEdge, directionalHintFixed: false }, calloutProps, { onLayerMounted: _this._onLayerMounted, className: css(_this._classNames.callout, calloutProps === null || calloutProps === void 0 ? void 0 : calloutProps.className), target: _this._comboBoxWrapper.current, onDismiss: _this._onDismiss, onMouseDown: _this._onCalloutMouseDown, onScroll: _this._onScroll, setInitialFocus: false, calloutWidth: useComboBoxAsMenuWidth && _this._comboBoxWrapper.current\n ? comboBoxMenuWidth && comboBoxMenuWidth\n : dropdownWidth, calloutMaxWidth: dropdownMaxWidth ? dropdownMaxWidth : comboBoxMenuWidth, hidden: persistMenu ? !isOpen : undefined, shouldRestoreFocus: shouldRestoreFocus }),\n onRenderUpperContent(_this.props, _this._onRenderUpperContent),\n React.createElement(\"div\", { className: _this._classNames.optionsContainerWrapper, ref: _this._comboBoxMenu }, onRenderList === null || onRenderList === void 0 ? void 0 : onRenderList(__assign(__assign({}, props), { id: id }), _this._onRenderList)),\n onRenderLowerContent(_this.props, _this._onRenderLowerContent)));\n };\n _this._onLayerMounted = function () {\n _this._onCalloutLayerMounted();\n // need to call this again here to get the correct scroll parent dimensions\n // when the callout is first opened\n _this._async.setTimeout(function () {\n _this._scrollIntoView();\n }, 0);\n if (_this.props.calloutProps && _this.props.calloutProps.onLayerMounted) {\n _this.props.calloutProps.onLayerMounted();\n }\n };\n _this._onRenderLabel = function (onRenderLabelProps) {\n var _a = onRenderLabelProps.props, label = _a.label, disabled = _a.disabled, required = _a.required;\n if (label) {\n return (React.createElement(Label, { id: _this._id + '-label', disabled: disabled, required: required, className: _this._classNames.label },\n label,\n onRenderLabelProps.multiselectAccessibleText && (React.createElement(\"span\", { className: _this._classNames.screenReaderText }, onRenderLabelProps.multiselectAccessibleText))));\n }\n return null;\n };\n // Render List of items\n _this._onRenderList = function (props) {\n var _a = props.onRenderItem, onRenderItem = _a === void 0 ? _this._onRenderItem : _a, label = props.label, ariaLabel = props.ariaLabel;\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 = __spreadArrays(renderedList, newGroup);\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_1 = _this._id + item.key;\n queue.items.push(onRenderItem(__assign(__assign({ id: id_1 }, item), { index: index }), _this._onRenderItem));\n queue.id = id_1;\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 var id = _this._id;\n return (React.createElement(\"div\", { id: id + '-list', className: _this._classNames.optionsContainer, \"aria-labelledby\": label && id + '-label', \"aria-label\": ariaLabel && !label ? ariaLabel : undefined, role: \"listbox\" }, renderedList));\n };\n // Render items\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 // Default _onRenderLowerContent function returns nothing\n _this._onRenderLowerContent = function () {\n return null;\n };\n // Default _onRenderUpperContent function returns nothing\n _this._onRenderUpperContent = function () {\n return null;\n };\n _this._renderOption = function (item) {\n var _a;\n var _b = _this.props.onRenderOption, onRenderOption = _b === void 0 ? _this._onRenderOptionContent : _b;\n var id = _this._id;\n var isSelected = _this._isOptionSelected(item.index);\n var isChecked = _this._isOptionChecked(item.index);\n var isIndeterminate = _this._isOptionIndeterminate(item.index);\n var optionStyles = _this._getCurrentOptionStyles(item);\n var optionClassNames = getComboBoxOptionClassNames(_this._getCurrentOptionStyles(item));\n var title = (_a = item.title) !== null && _a !== void 0 ? _a : getPreviewText(item);\n var onRenderCheckboxLabel = function () { return onRenderOption(item, _this._onRenderOptionContent); };\n var getOptionComponent = function () {\n return !_this.props.multiSelect ? (React.createElement(CommandButton, { id: id + '-list' + item.index, key: item.key, \"data-index\": item.index, styles: optionStyles, checked: isSelected, className: 'ms-ComboBox-option', onClick: _this._onItemClick(item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseEnter: _this._onOptionMouseEnter.bind(_this, item.index), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseMove: _this._onOptionMouseMove.bind(_this, item.index), onMouseLeave: _this._onOptionMouseLeave, role: \"option\", \"aria-selected\": isSelected ? 'true' : 'false', ariaLabel: item.ariaLabel, disabled: item.disabled, title: title }, React.createElement(\"span\", { className: optionClassNames.optionTextWrapper, ref: isSelected ? _this._selectedElement : undefined }, onRenderOption(item, _this._onRenderOptionContent)))) : (React.createElement(Checkbox, { id: id + '-list' + item.index, ariaLabel: item.ariaLabel, key: item.key, styles: optionStyles, className: 'ms-ComboBox-option', onChange: _this._onItemClick(item), label: item.text, checked: isChecked, indeterminate: isIndeterminate, title: title, disabled: item.disabled, \n // eslint-disable-next-line react/jsx-no-bind\n onRenderLabel: onRenderCheckboxLabel, inputProps: __assign({ \n // aria-selected should only be applied to checked items, not hovered items\n 'aria-selected': isChecked ? 'true' : 'false', role: 'option' }, {\n 'data-index': item.index,\n 'data-is-focusable': true,\n }) }));\n };\n return (React.createElement(ComboBoxOptionWrapper, { key: item.key, index: item.index, disabled: item.disabled, isSelected: isSelected, isChecked: isChecked, isIndeterminate: isIndeterminate, text: item.text, \n // eslint-disable-next-line react/jsx-no-bind\n render: getOptionComponent, data: item.data }));\n };\n /**\n * Mouse clicks to headers, dividers and scrollbar should not make input lose focus\n */\n _this._onCalloutMouseDown = function (ev) {\n ev.preventDefault();\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 _this._async.clearTimeout(_this._scrollIdleTimeoutId);\n _this._scrollIdleTimeoutId = undefined;\n }\n else {\n _this._isScrollIdle = false;\n }\n _this._scrollIdleTimeoutId = _this._async.setTimeout(function () {\n _this._isScrollIdle = true;\n }, ScrollIdleDelay);\n };\n _this._onRenderOptionContent = function (item) {\n var optionClassNames = getComboBoxOptionClassNames(_this._getCurrentOptionStyles(item));\n return React.createElement(\"span\", { className: optionClassNames.optionText }, item.text);\n };\n /**\n * Handles dismissing (cancelling) the menu\n */\n _this._onDismiss = function () {\n var onMenuDismiss = _this.props.onMenuDismiss;\n if (onMenuDismiss) {\n onMenuDismiss();\n }\n // In persistMode we need to simulate callout layer mount\n // since that only happens once. We do it on dismiss since\n // it works either way.\n if (_this.props.persistMenu) {\n _this._onCalloutLayerMounted();\n }\n // close the menu\n _this._setOpenStateAndFocusOnClose(false /* isOpen */, false /* focusInputAfterClose */);\n // reset the selected index\n // to the last value state\n _this._resetSelectedIndex();\n };\n _this._onAfterClearPendingInfo = function () {\n _this._processingClearPendingInfo = false;\n };\n /**\n * Handle keydown on the input\n * @param ev - The keyboard event that was fired\n */\n _this._onInputKeyDown = function (ev) {\n var _a = _this.props, disabled = _a.disabled, allowFreeform = _a.allowFreeform, autoComplete = _a.autoComplete, currentOptions = _a.hoisted.currentOptions;\n var _b = _this.state, isOpen = _b.isOpen, currentPendingValueValidIndexOnHover = _b.currentPendingValueValidIndexOnHover;\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in _onInputKeyUp for reasoning.\n _this._lastKeyDownWasAltOrMeta = isAltOrMeta(ev);\n if (disabled) {\n _this._handleInputWhenDisabled(ev);\n return;\n }\n var index = _this._getPendingSelectedIndex(false /* includeCurrentPendingValue */);\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n if (_this._autofill.current && _this._autofill.current.inputElement) {\n _this._autofill.current.inputElement.select();\n }\n _this._submitPendingValue(ev);\n if (_this.props.multiSelect && isOpen) {\n _this.setState({\n currentPendingValueValidIndex: index,\n });\n }\n else {\n // On enter submit the pending value\n if (isOpen ||\n ((!allowFreeform ||\n _this.state.currentPendingValue === undefined ||\n _this.state.currentPendingValue === null ||\n _this.state.currentPendingValue.length <= 0) &&\n _this.state.currentPendingValueValidIndex < 0)) {\n // if we are open or\n // if we are not allowing freeform or\n // our we have no pending value\n // and no valid pending index\n // flip the open state\n _this.setState({\n isOpen: !isOpen,\n });\n }\n }\n break;\n case KeyCodes.tab:\n // On enter submit the pending value\n if (!_this.props.multiSelect) {\n _this._submitPendingValue(ev);\n }\n // If we are not allowing freeform\n // or the combo box is open, flip the open state\n if (isOpen) {\n _this._setOpenStateAndFocusOnClose(!isOpen, false /* focusInputAfterClose */);\n }\n // Allow TAB to propagate\n return;\n case KeyCodes.escape:\n // reset the selected index\n _this._resetSelectedIndex();\n // Close the menu if opened\n if (isOpen) {\n _this.setState({\n isOpen: false,\n });\n }\n else {\n return;\n }\n break;\n case KeyCodes.up:\n // if we are in clearAll state (e.g. the user as hovering\n // and has since mousedOut of the menu items),\n // go to the last index\n if (currentPendingValueValidIndexOnHover === HoverStatus.clearAll) {\n index = _this.props.hoisted.currentOptions.length;\n }\n if (ev.altKey || ev.metaKey) {\n // Close the menu if it is open and break so\n // that the event get stopPropagation and prevent default.\n // Otherwise, we need to let the event continue to propagate\n if (isOpen) {\n _this._setOpenStateAndFocusOnClose(!isOpen, true /* focusInputAfterClose */);\n break;\n }\n return;\n }\n // do not scroll page\n ev.preventDefault();\n // Go to the previous option\n _this._setPendingInfoFromIndexAndDirection(index, SearchDirection.backward);\n break;\n case KeyCodes.down:\n // Expand the combo box on ALT + DownArrow\n if (ev.altKey || ev.metaKey) {\n _this._setOpenStateAndFocusOnClose(true /* isOpen */, true /* focusInputAfterClose */);\n }\n else {\n // if we are in clearAll state (e.g. the user as hovering\n // and has since mousedOut of the menu items),\n // go to the first index\n if (currentPendingValueValidIndexOnHover === HoverStatus.clearAll) {\n index = -1;\n }\n // do not scroll page\n ev.preventDefault();\n // Got to the next option\n _this._setPendingInfoFromIndexAndDirection(index, SearchDirection.forward);\n }\n break;\n case KeyCodes.home:\n case KeyCodes.end:\n if (allowFreeform) {\n return;\n }\n // Set the initial values to respond to HOME\n // which goes to the first selectable option\n index = -1;\n var directionToSearch = SearchDirection.forward;\n // If end, update the values to respond to END\n // which goes to the last selectable option\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.end) {\n index = currentOptions.length;\n directionToSearch = SearchDirection.backward;\n }\n _this._setPendingInfoFromIndexAndDirection(index, directionToSearch);\n break;\n /* eslint-disable no-fallthrough */\n case KeyCodes.space:\n // event handled in _onComboBoxKeyUp\n if (!allowFreeform && autoComplete === 'off') {\n break;\n }\n default:\n /* eslint-enable no-fallthrough */\n // are we processing a function key? if so bail out\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which >= 112 /* F1 */ && ev.which <= 123 /* F12 */) {\n return;\n }\n // If we get here and we got either and ALT key\n // or meta key, let the event propagate\n if (ev.keyCode === KeyCodes.alt || ev.key === 'Meta' /* && isOpen */) {\n return;\n }\n // If we are not allowing freeform and\n // allowing autoComplete, handle the input here\n // since we have marked the input as readonly\n if (!allowFreeform && autoComplete === 'on') {\n _this._onInputChange(ev.key);\n break;\n }\n // allow the key to propagate by default\n return;\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n /**\n * Handle keyup on the input\n * @param ev - the keyboard event that was fired\n */\n _this._onInputKeyUp = function (ev) {\n var _a = _this.props, disabled = _a.disabled, allowFreeform = _a.allowFreeform, autoComplete = _a.autoComplete;\n var isOpen = _this.state.isOpen;\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 // 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 var keyPressIsAltOrMetaAlone = _this._lastKeyDownWasAltOrMeta && isAltOrMeta(ev);\n _this._lastKeyDownWasAltOrMeta = false;\n var shouldHandleKey = keyPressIsAltOrMetaAlone && !(isMac() || isIOS());\n if (disabled) {\n _this._handleInputWhenDisabled(ev);\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.space:\n // If we are not allowing freeform and are not autoComplete\n // make space expand/collapse the combo box\n // and allow the event to propagate\n if (!allowFreeform && autoComplete === 'off') {\n _this._setOpenStateAndFocusOnClose(!isOpen, !!isOpen);\n }\n return;\n default:\n if (shouldHandleKey && isOpen) {\n _this._setOpenStateAndFocusOnClose(!isOpen, true /* focusInputAfterClose */);\n }\n else {\n if (_this.state.focusState === 'focusing' && _this.props.openOnKeyboardFocus) {\n _this.setState({ isOpen: true });\n }\n if (_this.state.focusState !== 'focused') {\n _this.setState({ focusState: 'focused' });\n }\n }\n return;\n }\n };\n _this._onOptionMouseLeave = function () {\n if (_this._shouldIgnoreMouseEvent()) {\n return;\n }\n // Ignore the event in persistMenu mode if the callout has\n // closed. This is to avoid clearing the visuals on item click.\n if (_this.props.persistMenu && !_this.state.isOpen) {\n return;\n }\n _this.setState({\n currentPendingValueValidIndexOnHover: HoverStatus.clearAll,\n });\n };\n /**\n * Click handler for the button of the combo box and the input when not allowing freeform.\n * This toggles the expand/collapse state of the combo box (if enabled).\n */\n _this._onComboBoxClick = function () {\n var disabled = _this.props.disabled;\n var isOpen = _this.state.isOpen;\n if (!disabled) {\n _this._setOpenStateAndFocusOnClose(!isOpen, false /* focusInputAfterClose */);\n _this.setState({ focusState: 'focused' });\n }\n };\n /**\n * Click handler for the autofill.\n */\n _this._onAutofillClick = function () {\n var _a = _this.props, disabled = _a.disabled, allowFreeform = _a.allowFreeform;\n if (allowFreeform && !disabled) {\n _this.focus(_this.state.isOpen || _this._processingTouch);\n }\n else {\n _this._onComboBoxClick();\n }\n };\n _this._onTouchStart = function () {\n if (_this._comboBoxWrapper.current && !('onpointerdown' in _this._comboBoxWrapper)) {\n _this._handleTouchAndPointerEvent();\n }\n };\n _this._onPointerDown = function (ev) {\n if (ev.pointerType === 'touch') {\n _this._handleTouchAndPointerEvent();\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n defaultSelectedKey: 'selectedKey',\n text: 'defaultSelectedKey',\n selectedKey: 'value',\n dropdownWidth: 'useComboBoxAsMenuWidth',\n ariaLabel: 'label',\n });\n _this._id = props.id || getId('ComboBox');\n _this._isScrollIdle = true;\n _this._processingTouch = false;\n _this._gotMouseMove = false;\n _this._processingClearPendingInfo = false;\n _this.state = {\n isOpen: false,\n focusState: 'none',\n currentPendingValueValidIndex: -1,\n currentPendingValue: undefined,\n currentPendingValueValidIndexOnHover: HoverStatus.default,\n };\n return _this;\n }\n Object.defineProperty(ComboBoxInternal.prototype, \"selectedOptions\", {\n /**\n * All selected options\n */\n get: function () {\n var _a = this.props.hoisted, currentOptions = _a.currentOptions, selectedIndices = _a.selectedIndices;\n return getAllSelectedOptions(currentOptions, selectedIndices);\n },\n enumerable: false,\n configurable: true\n });\n ComboBoxInternal.prototype.componentDidMount = function () {\n if (this._comboBoxWrapper.current && !this.props.disabled) {\n // hook up resolving the options if needed on focus\n this._events.on(this._comboBoxWrapper.current, 'focus', this._onResolveOptions, true);\n if ('onpointerdown' in this._comboBoxWrapper.current) {\n // For ComboBoxes, touching anywhere in the combo box should drop the dropdown, including the input element.\n // This gives more hit target space for touch environments. We're setting the onpointerdown here, because React\n // does not support Pointer events yet.\n this._events.on(this._comboBoxWrapper.current, 'pointerdown', this._onPointerDown, true);\n }\n }\n };\n ComboBoxInternal.prototype.componentDidUpdate = function (prevProps, prevState) {\n var _this = this;\n var _a = this.props, allowFreeform = _a.allowFreeform, text = _a.text, onMenuOpen = _a.onMenuOpen, onMenuDismissed = _a.onMenuDismissed, selectedIndices = _a.hoisted.selectedIndices;\n var _b = this.state, isOpen = _b.isOpen, currentPendingValueValidIndex = _b.currentPendingValueValidIndex;\n // If we are newly open or are open and the pending valid index changed,\n // make sure the currently selected/pending option is scrolled into view\n if (isOpen && (!prevState.isOpen || prevState.currentPendingValueValidIndex !== currentPendingValueValidIndex)) {\n // Need this timeout so that the selectedElement ref is correctly updated\n this._async.setTimeout(function () { return _this._scrollIntoView(); }, 0);\n }\n // if an action is taken that put focus in the ComboBox\n // and If we are open or we are just closed, shouldFocusAfterClose is set,\n // but we are not the activeElement set focus on the input\n if (this._hasFocus() &&\n (isOpen ||\n (prevState.isOpen &&\n !isOpen &&\n this._focusInputAfterClose &&\n this._autofill.current &&\n document.activeElement !== this._autofill.current.inputElement))) {\n this.focus(undefined /*shouldOpenOnFocus*/, true /*useFocusAsync*/);\n }\n // If we should focusAfterClose AND\n // just opened/closed the menu OR\n // are focused AND\n // updated the selectedIndex with the menu closed OR\n // are not allowing freeform OR\n // the value changed\n // we need to set selection\n if (this._focusInputAfterClose &&\n ((prevState.isOpen && !isOpen) ||\n (this._hasFocus() &&\n ((!isOpen &&\n !this.props.multiSelect &&\n prevProps.hoisted.selectedIndices &&\n selectedIndices &&\n prevProps.hoisted.selectedIndices[0] !== selectedIndices[0]) ||\n !allowFreeform ||\n text !== prevProps.text)))) {\n this._onFocus();\n }\n this._notifyPendingValueChanged(prevState);\n if (isOpen && !prevState.isOpen && onMenuOpen) {\n onMenuOpen();\n }\n if (!isOpen && prevState.isOpen && onMenuDismissed) {\n onMenuDismissed();\n }\n };\n ComboBoxInternal.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n // Primary Render\n ComboBoxInternal.prototype.render = function () {\n var id = this._id;\n var errorMessageId = id + '-error';\n var _a = this.props, className = _a.className, disabled = _a.disabled, required = _a.required, errorMessage = _a.errorMessage, _b = _a.onRenderContainer, onRenderContainer = _b === void 0 ? this._onRenderContainer : _b, _c = _a.onRenderLabel, onRenderLabel = _c === void 0 ? this._onRenderLabel : _c, _d = _a.onRenderList, onRenderList = _d === void 0 ? this._onRenderList : _d, _e = _a.onRenderItem, onRenderItem = _e === void 0 ? this._onRenderItem : _e, _f = _a.onRenderOption, onRenderOption = _f === void 0 ? this._onRenderOptionContent : _f, allowFreeform = _a.allowFreeform, customStyles = _a.styles, theme = _a.theme, persistMenu = _a.persistMenu, multiSelect = _a.multiSelect, _g = _a.hoisted, suggestedDisplayValue = _g.suggestedDisplayValue, selectedIndices = _g.selectedIndices, currentOptions = _g.currentOptions;\n var isOpen = this.state.isOpen;\n this._currentVisibleValue = this._getVisibleValue();\n // Single select is already accessible since the whole text is selected\n // when focus enters the input. Since multiselect appears to clear the input\n // it needs special accessible text\n var multiselectAccessibleText = multiSelect\n ? this._getMultiselectDisplayString(selectedIndices, currentOptions, suggestedDisplayValue)\n : undefined;\n var divProps = getNativeProps(this.props, divProperties, [\n 'onChange',\n 'value',\n ]);\n var hasErrorMessage = errorMessage && errorMessage.length > 0 ? true : false;\n this._classNames = this.props.getClassNames\n ? this.props.getClassNames(theme, !!isOpen, !!disabled, !!required, !!this._hasFocus(), !!allowFreeform, !!hasErrorMessage, className)\n : getClassNames(getStyles(theme, customStyles), className, !!isOpen, !!disabled, !!required, !!this._hasFocus(), !!allowFreeform, !!hasErrorMessage);\n var comboBoxWrapper = this._renderComboBoxWrapper(multiselectAccessibleText, errorMessageId);\n return (React.createElement(\"div\", __assign({}, divProps, { ref: this.props.hoisted.mergedRootRef, className: this._classNames.container }),\n onRenderLabel({ props: this.props, multiselectAccessibleText: multiselectAccessibleText }, this._onRenderLabel),\n comboBoxWrapper,\n (persistMenu || isOpen) &&\n onRenderContainer(__assign(__assign({}, this.props), { onRenderList: onRenderList,\n onRenderItem: onRenderItem,\n onRenderOption: onRenderOption, options: currentOptions.map(function (item, index) { return (__assign(__assign({}, item), { index: index })); }), onDismiss: this._onDismiss }), this._onRenderContainer),\n hasErrorMessage && (React.createElement(\"div\", { role: \"alert\", id: errorMessageId, className: this._classNames.errorMessage }, errorMessage))));\n };\n ComboBoxInternal.prototype._getPendingString = function (currentPendingValue, currentOptions, index) {\n return currentPendingValue !== null && currentPendingValue !== undefined\n ? currentPendingValue\n : indexWithinBounds(currentOptions, index)\n ? currentOptions[index].text\n : '';\n };\n /**\n * Returns a string that concatenates all of the selected values\n * for multiselect combo box.\n */\n ComboBoxInternal.prototype._getMultiselectDisplayString = function (selectedIndices, currentOptions, suggestedDisplayValue) {\n var displayValues = [];\n for (var idx = 0; selectedIndices && idx < selectedIndices.length; idx++) {\n var index = selectedIndices[idx];\n if (currentOptions[index].itemType !== SelectableOptionMenuItemType.SelectAll) {\n displayValues.push(indexWithinBounds(currentOptions, index)\n ? currentOptions[index].text\n : normalizeToString(suggestedDisplayValue));\n }\n }\n var _a = this.props.multiSelectDelimiter, multiSelectDelimiter = _a === void 0 ? ', ' : _a;\n return displayValues.join(multiSelectDelimiter);\n };\n /**\n * Process the new input's new value when the combo box allows freeform entry\n * @param updatedValue - the input's newly changed value\n */\n ComboBoxInternal.prototype._processInputChangeWithFreeform = function (updatedValue) {\n var currentOptions = this.props.hoisted.currentOptions;\n var newCurrentPendingValueValidIndex = -1;\n // if the new value is empty, see if we have an exact match and then set the pending info\n if (updatedValue === '') {\n var items = currentOptions\n .map(function (item, index) { return (__assign(__assign({}, item), { index: index })); })\n .filter(function (option) { return isNormalOption(option) && getPreviewText(option) === updatedValue; });\n // if we found a match remember the index\n if (items.length === 1) {\n newCurrentPendingValueValidIndex = items[0].index;\n }\n this._setPendingInfo(updatedValue, newCurrentPendingValueValidIndex, updatedValue);\n return;\n }\n // Remember the original value and then make the value lowercase for comparison\n var originalUpdatedValue = updatedValue;\n updatedValue = updatedValue.toLocaleLowerCase();\n var newSuggestedDisplayValue = '';\n // If autoComplete is on, attempt to find a match from the available options\n if (this.props.autoComplete === 'on') {\n // If autoComplete is on, attempt to find a match where the text of an option starts with the updated value\n var items = currentOptions\n .map(function (item, index) { return (__assign(__assign({}, item), { index: index })); })\n .filter(function (option) { return isNormalOption(option) && getPreviewText(option).toLocaleLowerCase().indexOf(updatedValue) === 0; });\n if (items.length > 0) {\n // use ariaLabel as the value when the option is set\n var text = getPreviewText(items[0]);\n // If the user typed out the complete option text, we don't need any suggested display text anymore\n newSuggestedDisplayValue = text.toLocaleLowerCase() !== updatedValue ? text : '';\n // remember the index of the match we found\n newCurrentPendingValueValidIndex = items[0].index;\n }\n }\n else {\n // If autoComplete is off, attempt to find a match only when the value is exactly equal to the text of an option\n var items = currentOptions\n .map(function (item, index) { return (__assign(__assign({}, item), { index: index })); })\n .filter(function (option) { return isNormalOption(option) && getPreviewText(option).toLocaleLowerCase() === updatedValue; });\n // if we found a match remember the index\n if (items.length === 1) {\n newCurrentPendingValueValidIndex = items[0].index;\n }\n }\n // Set the updated state\n this._setPendingInfo(originalUpdatedValue, newCurrentPendingValueValidIndex, newSuggestedDisplayValue);\n };\n /**\n * Process the new input's new value when the combo box does not allow freeform entry\n * @param updatedValue - the input's newly changed value\n */\n ComboBoxInternal.prototype._processInputChangeWithoutFreeform = function (updatedValue) {\n var _this = this;\n var currentOptions = this.props.hoisted.currentOptions;\n var _a = this.state, currentPendingValue = _a.currentPendingValue, currentPendingValueValidIndex = _a.currentPendingValueValidIndex;\n if (this.props.autoComplete === 'on') {\n // If autoComplete is on while allow freeform is off,\n // we will remember the key press and build up a string to attempt to match\n // as long as characters are typed within a the timeout span of each other,\n // otherwise we will clear the string and start building a new one on the next keypress.\n // Also, only do this processing if we have a non-empty value\n if (updatedValue !== '') {\n // If we have a pending autocomplete clearing task,\n // we know that the user is typing with key press happening\n // within the timeout of each other so remove the clearing task\n // and continue building the pending value with the updated value\n if (this._autoCompleteTimeout) {\n this._async.clearTimeout(this._autoCompleteTimeout);\n this._autoCompleteTimeout = undefined;\n updatedValue = normalizeToString(currentPendingValue) + updatedValue;\n }\n var originalUpdatedValue = updatedValue;\n updatedValue = updatedValue.toLocaleLowerCase();\n // If autoComplete is on, attempt to find a match where the text of an option starts with the updated value\n var items = currentOptions\n .map(function (item, i) { return (__assign(__assign({}, item), { index: i })); })\n .filter(function (option) { return isNormalOption(option) && option.text.toLocaleLowerCase().indexOf(updatedValue) === 0; });\n // If we found a match, update the state\n if (items.length > 0) {\n this._setPendingInfo(originalUpdatedValue, items[0].index, getPreviewText(items[0]));\n }\n // Schedule a timeout to clear the pending value after the timeout span\n this._autoCompleteTimeout = this._async.setTimeout(function () {\n _this._autoCompleteTimeout = undefined;\n }, ReadOnlyPendingAutoCompleteTimeout);\n return;\n }\n }\n // If we get here, either autoComplete is on or we did not find a match with autoComplete on.\n // Remember we are not allowing freeform, so at this point, if we have a pending valid value index\n // use that; otherwise use the selectedIndex\n var index = currentPendingValueValidIndex >= 0 ? currentPendingValueValidIndex : this._getFirstSelectedIndex();\n // Since we are not allowing freeform, we need to\n // set both the pending and suggested values/index\n // to allow us to select all content in the input to\n // give the illusion that we are readonly (e.g. freeform off)\n this._setPendingInfoFromIndex(index);\n };\n ComboBoxInternal.prototype._getFirstSelectedIndex = function () {\n var selectedIndices = this.props.hoisted.selectedIndices;\n return (selectedIndices === null || selectedIndices === void 0 ? void 0 : selectedIndices.length) ? selectedIndices[0] : -1;\n };\n /**\n * Walk along the options starting at the index, stepping by the delta (positive or negative)\n * looking for the next valid selectable index (e.g. skipping headings and dividers)\n * @param index - the index to get the next selectable index from\n * @param delta - optional delta to step by when finding the next index, defaults to 0\n * @returns - the next valid selectable index. If the new index is outside of the bounds,\n * it will snap to the edge of the options array. If delta == 0 and the given index is not selectable\n */\n ComboBoxInternal.prototype._getNextSelectableIndex = function (index, searchDirection) {\n var currentOptions = this.props.hoisted.currentOptions;\n var newIndex = index + searchDirection;\n newIndex = Math.max(0, Math.min(currentOptions.length - 1, newIndex));\n if (!indexWithinBounds(currentOptions, newIndex)) {\n return -1;\n }\n var option = currentOptions[newIndex];\n if (!isSelectableOption(option) || option.hidden === true) {\n // Should we continue looking for an index to select?\n if (searchDirection !== SearchDirection.none &&\n ((newIndex > 0 && searchDirection < SearchDirection.none) ||\n (newIndex >= 0 && newIndex < currentOptions.length && searchDirection > SearchDirection.none))) {\n newIndex = this._getNextSelectableIndex(newIndex, searchDirection);\n }\n else {\n // If we cannot perform a useful search just return the index we were given\n return index;\n }\n }\n // We have the next valid selectable index, return it\n return newIndex;\n };\n /**\n * Set the selected index. Note, this is\n * the \"real\" selected index, not the pending selected index\n * @param index - the index to set (or the index to set from if a search direction is provided)\n * @param searchDirection - the direction to search along the options from the given index\n */\n ComboBoxInternal.prototype._setSelectedIndex = function (index, submitPendingValueEvent, searchDirection) {\n if (searchDirection === void 0) { searchDirection = SearchDirection.none; }\n var _a = this.props, onChange = _a.onChange, onPendingValueChanged = _a.onPendingValueChanged, _b = _a.hoisted, initialIndices = _b.selectedIndices, currentOptions = _b.currentOptions;\n // Clone currentOptions and selectedIndices so we don't mutate state\n var selectedIndices = initialIndices ? initialIndices.slice() : [];\n var changedOptions = currentOptions.slice();\n // Find the next selectable index, if searchDirection is none\n // we will get our starting index back\n index = this._getNextSelectableIndex(index, searchDirection);\n if (!indexWithinBounds(currentOptions, index)) {\n return;\n }\n // Are we at a new index? If so, update the state, otherwise\n // there is nothing to do\n if (this.props.multiSelect ||\n selectedIndices.length < 1 ||\n (selectedIndices.length === 1 && selectedIndices[0] !== index)) {\n var option = __assign({}, currentOptions[index]);\n // if option doesn't existing, or option is disabled, we noop\n if (!option || option.disabled) {\n return;\n }\n if (this.props.multiSelect) {\n // Setting the initial state of option.selected in Multi-select combo box by checking the\n // selectedIndices array and overriding the undefined issue\n option.selected = option.selected !== undefined ? !option.selected : selectedIndices.indexOf(index) < 0;\n // handle changing all options if SelectAll is changed\n if (option.itemType === SelectableOptionMenuItemType.SelectAll) {\n selectedIndices = [];\n // if select all is set to checked, push all selectable option indices\n if (option.selected) {\n currentOptions.forEach(function (currentOption, i) {\n if (!currentOption.disabled && isSelectableOption(currentOption)) {\n selectedIndices.push(i);\n changedOptions[i] = __assign(__assign({}, currentOption), { selected: true });\n }\n });\n }\n // otherwise un-check all options\n else {\n changedOptions = currentOptions.map(function (currentOption) { return (__assign(__assign({}, currentOption), { selected: false })); });\n }\n }\n // otherwise update the individual option\n else {\n if (option.selected && selectedIndices.indexOf(index) < 0) {\n selectedIndices.push(index);\n }\n else if (!option.selected && selectedIndices.indexOf(index) >= 0) {\n selectedIndices = selectedIndices.filter(function (value) { return value !== index; });\n }\n changedOptions[index] = option;\n // If SelectAll exists and another option was toggled, update the SelectAll option's state\n var selectAllOption = changedOptions.filter(function (o) { return o.itemType === SelectableOptionMenuItemType.SelectAll; })[0];\n if (selectAllOption) {\n var selectAllState = this._isSelectAllChecked(selectedIndices);\n var selectAllIndex_1 = changedOptions.indexOf(selectAllOption);\n if (selectAllState) {\n selectedIndices.push(selectAllIndex_1);\n changedOptions[selectAllIndex_1] = __assign(__assign({}, selectAllOption), { selected: true });\n }\n else {\n selectedIndices = selectedIndices.filter(function (value) { return value !== selectAllIndex_1; });\n changedOptions[selectAllIndex_1] = __assign(__assign({}, selectAllOption), { selected: false });\n }\n }\n }\n }\n else {\n selectedIndices[0] = index;\n }\n submitPendingValueEvent.persist();\n // Only setState if combo box is uncontrolled.\n if (this.props.selectedKey || this.props.selectedKey === null) {\n // If combo box value is changed, revert preview first\n if (this._hasPendingValue && onPendingValueChanged) {\n onPendingValueChanged();\n this._hasPendingValue = false;\n }\n }\n else {\n this.props.hoisted.setSelectedIndices(selectedIndices);\n this.props.hoisted.setCurrentOptions(changedOptions);\n // If ComboBox value is changed, revert preview first\n if (this._hasPendingValue && onPendingValueChanged) {\n onPendingValueChanged();\n this._hasPendingValue = false;\n }\n }\n // Call onChange after state is updated\n if (onChange) {\n onChange(submitPendingValueEvent, option, index, undefined);\n }\n }\n if (this.props.multiSelect && this.state.isOpen) {\n return;\n }\n // clear all of the pending info\n this._clearPendingInfo();\n };\n /**\n * Submit a pending value if there is one\n */\n ComboBoxInternal.prototype._submitPendingValue = function (submitPendingValueEvent) {\n var _a;\n var _b = this.props, onChange = _b.onChange, allowFreeform = _b.allowFreeform, autoComplete = _b.autoComplete, multiSelect = _b.multiSelect, hoisted = _b.hoisted;\n var currentOptions = hoisted.currentOptions;\n var _c = this.state, currentPendingValue = _c.currentPendingValue, currentPendingValueValidIndex = _c.currentPendingValueValidIndex, currentPendingValueValidIndexOnHover = _c.currentPendingValueValidIndexOnHover;\n var selectedIndices = this.props.hoisted.selectedIndices;\n // Do not submit any pending value if we\n // have already initiated clearing the pending info\n if (this._processingClearPendingInfo) {\n return;\n }\n // If we allow freeform we need to handle that\n if (allowFreeform) {\n // if currentPendingValue is null or undefined the user did not submit anything\n // (not even empty because we would have stored that as the pending value)\n if (currentPendingValue === null || currentPendingValue === undefined) {\n // if a user did not type anything they may just hovered over an item\n if (currentPendingValueValidIndexOnHover >= 0) {\n this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent);\n this._clearPendingInfo();\n }\n return;\n }\n // Check to see if the user typed an exact match\n if (indexWithinBounds(currentOptions, currentPendingValueValidIndex)) {\n var pendingOptionText = getPreviewText(currentOptions[currentPendingValueValidIndex]).toLocaleLowerCase();\n var autofill = this._autofill.current;\n // By exact match, that means: our pending value is the same as the pending option text OR\n // the pending option starts with the pending value and we have an \"autoComplete\" selection\n // where the total length is equal to pending option length OR\n // the live value in the underlying input matches the pending option; update the state\n if (currentPendingValue.toLocaleLowerCase() === pendingOptionText ||\n (autoComplete &&\n pendingOptionText.indexOf(currentPendingValue.toLocaleLowerCase()) === 0 && (autofill === null || autofill === void 0 ? void 0 : autofill.isValueSelected) &&\n currentPendingValue.length + (autofill.selectionEnd - autofill.selectionStart) ===\n pendingOptionText.length) ||\n ((_a = autofill === null || autofill === void 0 ? void 0 : autofill.inputElement) === null || _a === void 0 ? void 0 : _a.value.toLocaleLowerCase()) === pendingOptionText) {\n this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent);\n if (multiSelect && this.state.isOpen) {\n return;\n }\n this._clearPendingInfo();\n return;\n }\n }\n if (onChange) {\n if (onChange) {\n // trigger onChange to clear value\n onChange(submitPendingValueEvent, undefined, undefined, currentPendingValue);\n }\n }\n else {\n // If we are not controlled, create a new selected option\n var newOption = {\n key: currentPendingValue || getId(),\n text: normalizeToString(currentPendingValue),\n };\n // If it's multiselect, set selected state to true\n if (multiSelect) {\n newOption.selected = true;\n }\n var newOptions = currentOptions.concat([newOption]);\n if (selectedIndices) {\n if (!multiSelect) {\n selectedIndices = [];\n }\n selectedIndices.push(newOptions.length - 1);\n }\n hoisted.setCurrentOptions(newOptions);\n hoisted.setSelectedIndices(selectedIndices);\n }\n }\n else if (currentPendingValueValidIndex >= 0) {\n // Since we are not allowing freeform, we must have a matching\n // to be able to update state\n this._setSelectedIndex(currentPendingValueValidIndex, submitPendingValueEvent);\n }\n else if (currentPendingValueValidIndexOnHover >= 0) {\n // If all else failed and we were hovering over an item, select it\n this._setSelectedIndex(currentPendingValueValidIndexOnHover, submitPendingValueEvent);\n }\n // Finally, clear the pending info\n this._clearPendingInfo();\n };\n ComboBoxInternal.prototype._onCalloutLayerMounted = function () {\n // In persistMenu mode _onLayerMounted is only called once for the lifetime\n // of the component. Any functionality required for callout \"on mount\" can\n // go here so that we can also call it again during callout dismissal to reset\n // object state.\n this._gotMouseMove = false;\n };\n // Render separator\n ComboBoxInternal.prototype._renderSeparator = function (item) {\n var index = item.index, key = item.key;\n if (index && index > 0) {\n return React.createElement(\"div\", { role: \"separator\", key: key, className: this._classNames.divider });\n }\n return null;\n };\n ComboBoxInternal.prototype._renderHeader = function (item) {\n var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOptionContent : _a;\n return (React.createElement(\"div\", { id: item.id, key: item.key, className: this._classNames.header }, onRenderOption(item, this._onRenderOptionContent)));\n };\n /**\n * If we are coming from a mouseOut:\n * there is no visible selected option.\n *\n * Else if We are hovering over an item:\n * that gets the selected look.\n *\n * Else:\n * Use the current valid pending index if it exists OR\n * we do not have a valid index and we currently have a pending input value,\n * otherwise use the selected index\n * */\n ComboBoxInternal.prototype._isOptionHighlighted = function (index) {\n var currentPendingValueValidIndexOnHover = this.state.currentPendingValueValidIndexOnHover;\n // If the hover state is set to clearAll, don't show a selected index.\n // Note, this happens when the user moused out of the menu items\n if (currentPendingValueValidIndexOnHover === HoverStatus.clearAll) {\n return false;\n }\n return currentPendingValueValidIndexOnHover >= 0\n ? currentPendingValueValidIndexOnHover === index\n : this._isOptionSelected(index);\n };\n ComboBoxInternal.prototype._isOptionSelected = function (index) {\n return this._getPendingSelectedIndex(true /* includePendingValue */) === index;\n };\n ComboBoxInternal.prototype._isOptionChecked = function (index) {\n if (this.props.multiSelect && index !== undefined && this.props.hoisted.selectedIndices) {\n var idxOfSelectedIndex = -1;\n idxOfSelectedIndex = this.props.hoisted.selectedIndices.indexOf(index);\n return idxOfSelectedIndex >= 0;\n }\n return false;\n };\n ComboBoxInternal.prototype._isOptionIndeterminate = function (index) {\n var _a = this.props, multiSelect = _a.multiSelect, hoisted = _a.hoisted;\n if (multiSelect && index !== undefined && hoisted.selectedIndices && hoisted.currentOptions) {\n var option = hoisted.currentOptions[index];\n if (option && option.itemType === SelectableOptionMenuItemType.SelectAll) {\n return hoisted.selectedIndices.length > 0 && !this._isSelectAllChecked();\n }\n }\n return false;\n };\n ComboBoxInternal.prototype._isSelectAllChecked = function (testIndices) {\n var _a = this.props, multiSelect = _a.multiSelect, hoisted = _a.hoisted;\n var selectAllOption = hoisted.currentOptions.find(function (option) { return option.itemType === SelectableOptionMenuItemType.SelectAll; });\n var selectedIndices = testIndices || hoisted.selectedIndices;\n if (!multiSelect || !selectedIndices || !selectAllOption) {\n return false;\n }\n // start by not including the select all option itself\n var selectAllIndex = hoisted.currentOptions.indexOf(selectAllOption);\n var compareSelectedIndices = selectedIndices.filter(function (value) { return value !== selectAllIndex; });\n // get array of selectable options, excluding disabled options, headers, and dividers\n var selectableOptions = hoisted.currentOptions.filter(function (option) {\n return !option.disabled && option.itemType !== SelectableOptionMenuItemType.SelectAll && isSelectableOption(option);\n });\n return compareSelectedIndices.length === selectableOptions.length;\n };\n /**\n * Gets the pending selected index taking into account valueValidIndex and selectedIndex\n * @param includeCurrentPendingValue - Should we include the currentPendingValue when\n * finding the index\n */\n ComboBoxInternal.prototype._getPendingSelectedIndex = function (includeCurrentPendingValue) {\n var _a = this.state, currentPendingValueValidIndex = _a.currentPendingValueValidIndex, currentPendingValue = _a.currentPendingValue;\n return currentPendingValueValidIndex >= 0 ||\n (includeCurrentPendingValue && currentPendingValue !== null && currentPendingValue !== undefined)\n ? currentPendingValueValidIndex\n : this.props.multiSelect\n ? 0\n : this._getFirstSelectedIndex();\n };\n /**\n * Scroll the selected element into view\n */\n ComboBoxInternal.prototype._scrollIntoView = function () {\n var _a = this.props, onScrollToItem = _a.onScrollToItem, scrollSelectedToTop = _a.scrollSelectedToTop;\n var _b = this.state, currentPendingValueValidIndex = _b.currentPendingValueValidIndex, currentPendingValue = _b.currentPendingValue;\n if (onScrollToItem) {\n // Use the custom scroll handler\n onScrollToItem(currentPendingValueValidIndex >= 0 || currentPendingValue !== ''\n ? currentPendingValueValidIndex\n : this._getFirstSelectedIndex());\n }\n else if (this._selectedElement.current && this._selectedElement.current.offsetParent) {\n var alignToTop = true;\n // We are using refs, scroll the ref into view\n if (this._comboBoxMenu.current && this._comboBoxMenu.current.offsetParent) {\n var scrollableParent = this._comboBoxMenu.current.offsetParent;\n var selectedElement = this._selectedElement.current.offsetParent;\n var _c = selectedElement, offsetHeight = _c.offsetHeight, offsetTop = _c.offsetTop;\n var _d = scrollableParent, parentOffsetHeight = _d.offsetHeight, scrollTop = _d.scrollTop;\n var isAbove = offsetTop < scrollTop;\n var isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n if (isAbove || scrollSelectedToTop) {\n alignToTop = false;\n scrollableParent.scrollTo(0, offsetTop);\n }\n else if (isBelow) {\n scrollableParent.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);\n }\n }\n // if _comboboxMenu doesn't exist, fall back to scrollIntoView\n else {\n this._selectedElement.current.offsetParent.scrollIntoView(alignToTop);\n }\n }\n };\n /**\n * Click handler for the menu items\n * to select the item and also close the menu\n * @param index - the index of the item that was clicked\n */\n ComboBoxInternal.prototype._onItemClick = function (item) {\n var _this = this;\n var onItemClick = this.props.onItemClick;\n var index = item.index;\n return function (ev) {\n // only close the callout when it's in single-select mode\n if (!_this.props.multiSelect) {\n // ensure that focus returns to the input, not the button\n _this._autofill.current && _this._autofill.current.focus();\n _this.setState({\n isOpen: false,\n });\n }\n // Continue processing the click only after\n // performing menu close / control focus(inner working)\n onItemClick && onItemClick(ev, item, index);\n _this._setSelectedIndex(index, ev);\n };\n };\n /**\n * Reset the selected index by clearing the\n * input (of any pending text), clearing the pending state,\n * and setting the suggested display value to the last\n * selected state text\n */\n ComboBoxInternal.prototype._resetSelectedIndex = function () {\n var currentOptions = this.props.hoisted.currentOptions;\n this._clearPendingInfo();\n var selectedIndex = this._getFirstSelectedIndex();\n if (selectedIndex > 0 && selectedIndex < currentOptions.length) {\n this.props.hoisted.setSuggestedDisplayValue(currentOptions[selectedIndex].text);\n }\n else if (this.props.text) {\n // If we had a value initially, restore it\n this.props.hoisted.setSuggestedDisplayValue(this.props.text);\n }\n };\n /**\n * Clears the pending info state\n */\n ComboBoxInternal.prototype._clearPendingInfo = function () {\n this._processingClearPendingInfo = true;\n this.props.hoisted.setSuggestedDisplayValue(undefined);\n this.setState({\n currentPendingValue: undefined,\n currentPendingValueValidIndex: -1,\n currentPendingValueValidIndexOnHover: HoverStatus.default,\n }, this._onAfterClearPendingInfo);\n };\n /**\n * Set the pending info\n * @param currentPendingValue - new pending value to set\n * @param currentPendingValueValidIndex - new pending value index to set\n * @param suggestedDisplayValue - new suggest display value to set\n */\n ComboBoxInternal.prototype._setPendingInfo = function (currentPendingValue, currentPendingValueValidIndex, suggestedDisplayValue) {\n if (currentPendingValueValidIndex === void 0) { currentPendingValueValidIndex = -1; }\n if (this._processingClearPendingInfo) {\n return;\n }\n this.props.hoisted.setSuggestedDisplayValue(suggestedDisplayValue);\n this.setState({\n currentPendingValue: normalizeToString(currentPendingValue),\n currentPendingValueValidIndex: currentPendingValueValidIndex,\n currentPendingValueValidIndexOnHover: HoverStatus.default,\n });\n };\n /**\n * Set the pending info from the given index\n * @param index - the index to set the pending info from\n */\n ComboBoxInternal.prototype._setPendingInfoFromIndex = function (index) {\n var currentOptions = this.props.hoisted.currentOptions;\n if (index >= 0 && index < currentOptions.length) {\n var option = currentOptions[index];\n this._setPendingInfo(getPreviewText(option), index, getPreviewText(option));\n }\n else {\n this._clearPendingInfo();\n }\n };\n /**\n * Sets the pending info for the combo box\n * @param index - the index to search from\n * @param searchDirection - the direction to search\n */\n ComboBoxInternal.prototype._setPendingInfoFromIndexAndDirection = function (index, searchDirection) {\n var currentOptions = this.props.hoisted.currentOptions;\n // update index to allow content to wrap\n if (searchDirection === SearchDirection.forward && index >= currentOptions.length - 1) {\n index = -1;\n }\n else if (searchDirection === SearchDirection.backward && index <= 0) {\n index = currentOptions.length;\n }\n // get the next \"valid\" index\n var indexUpdate = this._getNextSelectableIndex(index, searchDirection);\n // if the two indices are equal we didn't move and\n // we should attempt to get get the first/last \"valid\" index to use\n // (Note, this takes care of the potential cases where the first/last\n // item is not focusable), otherwise use the updated index\n if (index === indexUpdate) {\n if (searchDirection === SearchDirection.forward) {\n index = this._getNextSelectableIndex(-1, searchDirection);\n }\n else if (searchDirection === SearchDirection.backward) {\n index = this._getNextSelectableIndex(currentOptions.length, searchDirection);\n }\n }\n else {\n index = indexUpdate;\n }\n if (indexWithinBounds(currentOptions, index)) {\n this._setPendingInfoFromIndex(index);\n }\n };\n ComboBoxInternal.prototype._notifyPendingValueChanged = function (prevState) {\n var onPendingValueChanged = this.props.onPendingValueChanged;\n if (!onPendingValueChanged) {\n return;\n }\n var currentOptions = this.props.hoisted.currentOptions;\n var _a = this.state, currentPendingValue = _a.currentPendingValue, currentPendingValueValidIndex = _a.currentPendingValueValidIndex, currentPendingValueValidIndexOnHover = _a.currentPendingValueValidIndexOnHover;\n var newPendingIndex = undefined;\n var newPendingValue = undefined;\n if (currentPendingValueValidIndexOnHover !== prevState.currentPendingValueValidIndexOnHover &&\n indexWithinBounds(currentOptions, currentPendingValueValidIndexOnHover)) {\n // Set new pending index if hover index was changed\n newPendingIndex = currentPendingValueValidIndexOnHover;\n }\n else if (currentPendingValueValidIndex !== prevState.currentPendingValueValidIndex &&\n indexWithinBounds(currentOptions, currentPendingValueValidIndex)) {\n // Set new pending index if currentPendingValueValidIndex was changed\n newPendingIndex = currentPendingValueValidIndex;\n }\n else if (currentPendingValue !== prevState.currentPendingValue) {\n // Set pendingValue in the case it was changed and no index was changed\n newPendingValue = currentPendingValue;\n }\n // Notify when there is a new pending index/value. Also, if there is a pending value, it needs to send undefined.\n if (newPendingIndex !== undefined || newPendingValue !== undefined || this._hasPendingValue) {\n onPendingValueChanged(newPendingIndex !== undefined ? currentOptions[newPendingIndex] : undefined, newPendingIndex, newPendingValue);\n this._hasPendingValue = newPendingIndex !== undefined || newPendingValue !== undefined;\n }\n };\n /**\n * Sets the isOpen state and updates focusInputAfterClose\n */\n ComboBoxInternal.prototype._setOpenStateAndFocusOnClose = function (isOpen, focusInputAfterClose) {\n this._focusInputAfterClose = focusInputAfterClose;\n this.setState({\n isOpen: isOpen,\n });\n };\n ComboBoxInternal.prototype._onOptionMouseEnter = function (index) {\n if (this._shouldIgnoreMouseEvent()) {\n return;\n }\n this.setState({\n currentPendingValueValidIndexOnHover: index,\n });\n };\n ComboBoxInternal.prototype._onOptionMouseMove = function (index) {\n this._gotMouseMove = true;\n if (!this._isScrollIdle || this.state.currentPendingValueValidIndexOnHover === index) {\n return;\n }\n this.setState({\n currentPendingValueValidIndexOnHover: index,\n });\n };\n ComboBoxInternal.prototype._shouldIgnoreMouseEvent = function () {\n return !this._isScrollIdle || !this._gotMouseMove;\n };\n /**\n * Handle dismissing the menu and eating the required key event when disabled\n * @param ev - the keyboard event that was fired\n */\n ComboBoxInternal.prototype._handleInputWhenDisabled = function (ev) {\n // If we are disabled, close the menu (if needed)\n // and eat all keystrokes other than TAB or ESC\n if (this.props.disabled) {\n if (this.state.isOpen) {\n this.setState({ isOpen: false });\n }\n // When disabled stop propagation and prevent default\n // of the event unless we have a tab, escape, or function key\n if (ev !== null &&\n // eslint-disable-next-line deprecation/deprecation\n ev.which !== KeyCodes.tab &&\n // eslint-disable-next-line deprecation/deprecation\n ev.which !== KeyCodes.escape &&\n // eslint-disable-next-line deprecation/deprecation\n (ev.which < 112 /* F1 */ || ev.which > 123) /* F12 */) {\n ev.stopPropagation();\n ev.preventDefault();\n }\n }\n };\n ComboBoxInternal.prototype._handleTouchAndPointerEvent = function () {\n var _this = this;\n // If we already have an existing timeout from a previous touch and pointer event\n // cancel that timeout so we can set a nwe one.\n if (this._lastTouchTimeoutId !== undefined) {\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 /**\n * Get the styles for the current option.\n * @param item - Item props for the current option\n */\n ComboBoxInternal.prototype._getCaretButtonStyles = function () {\n var customCaretDownButtonStyles = this.props.caretDownButtonStyles;\n return getCaretDownButtonStyles(this.props.theme, customCaretDownButtonStyles);\n };\n /**\n * Get the styles for the current option.\n * @param item - Item props for the current option\n */\n ComboBoxInternal.prototype._getCurrentOptionStyles = function (item) {\n var customStylesForAllOptions = this.props.comboBoxOptionStyles;\n var customStylesForCurrentOption = item.styles;\n return getOptionStyles(this.props.theme, customStylesForAllOptions, customStylesForCurrentOption, this._isPendingOption(item), item.hidden, this._isOptionHighlighted(item.index));\n };\n /**\n * Get the aria-activedescendant value for the combo box.\n * @returns the id of the current focused combo item, otherwise the id of the currently selected element,\n * null otherwise\n */\n ComboBoxInternal.prototype._getAriaActiveDescendantValue = function () {\n var selectedIndices = this.props.hoisted.selectedIndices;\n var _a = this.state, isOpen = _a.isOpen, currentPendingValueValidIndex = _a.currentPendingValueValidIndex;\n var descendantText = isOpen && (selectedIndices === null || selectedIndices === void 0 ? void 0 : selectedIndices.length) ? this._id + '-list' + selectedIndices[0] : undefined;\n if (isOpen && this._hasFocus() && currentPendingValueValidIndex !== -1) {\n descendantText = this._id + '-list' + currentPendingValueValidIndex;\n }\n return descendantText;\n };\n /**\n * Get the aria autocomplete value for the combo box\n * @returns 'inline' if auto-complete automatically dynamic, 'both' if we have a list of possible values to pick from\n * and can dynamically populate input, and 'none' if auto-complete is not enabled as we can't give user inputs.\n */\n ComboBoxInternal.prototype._getAriaAutoCompleteValue = function () {\n var autoComplete = !this.props.disabled && this.props.autoComplete === 'on';\n return autoComplete ? (this.props.allowFreeform ? 'inline' : 'both') : 'none';\n };\n ComboBoxInternal.prototype._isPendingOption = function (item) {\n return item && item.index === this.state.currentPendingValueValidIndex;\n };\n /**\n * Returns true if the component has some kind of focus. If it's either focusing or if it's focused\n */\n ComboBoxInternal.prototype._hasFocus = function () {\n return this.state.focusState !== 'none';\n };\n ComboBoxInternal = __decorate([\n customizable('ComboBox', ['theme', 'styles'], true)\n ], ComboBoxInternal);\n return ComboBoxInternal;\n}(React.Component));\n/**\n * Get the indices of the options that are marked as selected\n * @param options - the combo box options\n * @param selectedKeys - the known selected keys to find\n * @returns - an array of the indices of the selected options, empty array if nothing is selected\n */\nfunction getSelectedIndices(options, selectedKeys) {\n if (!options || !selectedKeys) {\n return [];\n }\n var selectedIndices = {};\n options.forEach(function (option, index) {\n if (option.selected) {\n selectedIndices[index] = true;\n }\n });\n var _loop_1 = function (selectedKey) {\n var index = findIndex(options, function (option) { return option.key === selectedKey; });\n if (index > -1) {\n selectedIndices[index] = true;\n }\n };\n for (var _i = 0, selectedKeys_1 = selectedKeys; _i < selectedKeys_1.length; _i++) {\n var selectedKey = selectedKeys_1[_i];\n _loop_1(selectedKey);\n }\n return Object.keys(selectedIndices).map(Number).sort();\n}\n/**\n * Given default selected key(s) and selected key(s), return the selected keys(s).\n * When default selected key(s) are available, they take precedence and return them instead of selected key(s).\n *\n * @returns No matter what specific types the input parameters are, always return an array of\n * either strings or numbers instead of primitive type. This normalization makes caller's logic easier.\n */\nfunction buildDefaultSelectedKeys(defaultSelectedKey, selectedKey) {\n var selectedKeys = buildSelectedKeys(defaultSelectedKey);\n if (selectedKeys.length) {\n return selectedKeys;\n }\n return buildSelectedKeys(selectedKey);\n}\nfunction buildSelectedKeys(selectedKey) {\n if (selectedKey === undefined) {\n return [];\n }\n // need to cast here so typescript does not complain\n return (selectedKey instanceof Array ? selectedKey : [selectedKey]);\n}\nfunction normalizeToString(value) {\n return value || '';\n}\n/**\n * Is the index within the bounds of the array?\n * @param options - options to check if the index is valid for\n * @param index - the index to check\n * @returns - true if the index is valid for the given options, false otherwise\n */\nfunction indexWithinBounds(options, index) {\n return !!options && index >= 0 && index < options.length;\n}\n/** Whether this is a normal option, not a header or divider or select all. */\nfunction isNormalOption(option) {\n return (option.itemType !== SelectableOptionMenuItemType.Header &&\n option.itemType !== SelectableOptionMenuItemType.Divider &&\n option.itemType !== SelectableOptionMenuItemType.SelectAll);\n}\n/** Whether this is a selectable option, not a header or divider. */\nfunction isSelectableOption(option) {\n return (option.itemType !== SelectableOptionMenuItemType.Header && option.itemType !== SelectableOptionMenuItemType.Divider);\n}\n/**\n * For scenarios where the option's `text` prop contains embedded styles, we use the option's\n * `ariaLabel` value as the text in the input and for autocomplete matching. We know to use this\n * when the `useAriaLabelAsText` prop is set to true.\n */\nfunction getPreviewText(item) {\n return item.useAriaLabelAsText && item.ariaLabel ? item.ariaLabel : item.text;\n}\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}\n//# sourceMappingURL=ComboBox.js.map","import { styled } from '../../Utilities';\nimport { ColorPickerBase } from './ColorPicker.base';\nimport { getStyles } from './ColorPicker.styles';\nexport var ColorPicker = styled(ColorPickerBase, getStyles, undefined, { scope: 'ColorPicker' });\n//# sourceMappingURL=ColorPicker.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyles } from '../../Styling';\nexport var getClassNames = memoizeFunction(function (styles, className, isOpen, disabled, required, focused, allowFreeForm, hasErrorMessage) {\n return {\n container: mergeStyles('ms-ComboBox-container', className, styles.container),\n label: mergeStyles(styles.label, disabled && styles.labelDisabled),\n root: mergeStyles('ms-ComboBox', hasErrorMessage ? styles.rootError : isOpen && 'is-open', required && 'is-required', styles.root, !allowFreeForm && styles.rootDisallowFreeForm, hasErrorMessage && !focused ? styles.rootError : !disabled && focused && styles.rootFocused, !disabled && {\n selectors: {\n ':hover': hasErrorMessage ? styles.rootError : !isOpen && !focused && styles.rootHovered,\n ':active': hasErrorMessage ? styles.rootError : styles.rootPressed,\n ':focus': hasErrorMessage ? styles.rootError : styles.rootFocused,\n },\n }, disabled && ['is-disabled', styles.rootDisabled]),\n input: mergeStyles('ms-ComboBox-Input', styles.input, disabled && styles.inputDisabled),\n errorMessage: mergeStyles(styles.errorMessage),\n callout: mergeStyles('ms-ComboBox-callout', styles.callout),\n optionsContainerWrapper: mergeStyles('ms-ComboBox-optionsContainerWrapper', styles.optionsContainerWrapper),\n optionsContainer: mergeStyles('ms-ComboBox-optionsContainer', styles.optionsContainer),\n header: mergeStyles('ms-ComboBox-header', styles.header),\n divider: mergeStyles('ms-ComboBox-divider', styles.divider),\n screenReaderText: mergeStyles(styles.screenReaderText),\n };\n});\nexport var getComboBoxOptionClassNames = memoizeFunction(function (styles) {\n return {\n optionText: mergeStyles('ms-ComboBox-optionText', styles.optionText),\n root: mergeStyles('ms-ComboBox-option', styles.root, {\n selectors: {\n ':hover': styles.rootHovered,\n ':focus': styles.rootFocused,\n ':active': styles.rootPressed,\n },\n }),\n optionTextWrapper: mergeStyles(styles.optionTextWrapper),\n };\n});\n//# sourceMappingURL=ComboBox.classNames.js.map","export function getAllSelectedOptions(options, selectedIndices) {\n var selectedOptions = [];\n for (var _i = 0, selectedIndices_1 = selectedIndices; _i < selectedIndices_1.length; _i++) {\n var index = selectedIndices_1[_i];\n var option = options[index];\n if (option) {\n selectedOptions.push(option);\n }\n }\n return selectedOptions;\n}\n//# sourceMappingURL=SelectableOption.js.map","/**\n * {@docCategory List}\n */\nexport var ScrollToMode = {\n /**\n * Does not make any consideration to where in the viewport the item should align to.\n */\n auto: 0,\n /**\n * Attempts to scroll the list so the top of the desired item is aligned with the top of the viewport.\n */\n top: 1,\n /**\n * Attempts to scroll the list so the bottom of the desired item is aligned with the bottom of the viewport.\n */\n bottom: 2,\n /**\n * Attempts to scroll the list so the desired item is in the exact center of the viewport.\n */\n center: 3,\n};\n//# sourceMappingURL=List.types.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, css, divProperties, findIndex, findScrollableParent, getNativeProps, getParent, getWindow, initializeComponentRef, } from '../../Utilities';\nimport { ScrollToMode } from './List.types';\nimport { composeRenderFunction } from '../../Utilities';\nvar RESIZE_DELAY = 16;\nvar MIN_SCROLL_UPDATE_DELAY = 100;\nvar MAX_SCROLL_UPDATE_DELAY = 500;\nvar IDLE_DEBOUNCE_DELAY = 200;\n// The amount of time to wait before declaring that the list isn't scrolling\nvar DONE_SCROLLING_WAIT = 500;\nvar DEFAULT_ITEMS_PER_PAGE = 10;\nvar DEFAULT_PAGE_HEIGHT = 30;\nvar DEFAULT_RENDERED_WINDOWS_BEHIND = 2;\nvar DEFAULT_RENDERED_WINDOWS_AHEAD = 2;\nvar PAGE_KEY_PREFIX = 'page-';\nvar SPACER_KEY_PREFIX = 'spacer-';\nvar EMPTY_RECT = {\n top: -1,\n bottom: -1,\n left: -1,\n right: -1,\n width: 0,\n height: 0,\n};\n// Naming expensive measures so that they're named in profiles.\nvar _measurePageRect = function (element) { return element.getBoundingClientRect(); };\nvar _measureSurfaceRect = _measurePageRect;\nvar _measureScrollRect = _measurePageRect;\n/**\n * The List renders virtualized pages of items. Each page's item count is determined by the getItemCountForPage callback\n * if provided by the caller, or 10 as default. Each page's height is determined by the getPageHeight callback if\n * provided by the caller, or by cached measurements if available, or by a running average, or a default fallback.\n *\n * The algorithm for rendering pages works like this:\n *\n * 1. Predict visible pages based on \"current measure data\" (page heights, surface position, visible window)\n * 2. If changes are necessary, apply changes (add/remove pages)\n * 3. For pages that are added, measure the page heights if we need to using getBoundingClientRect\n * 4. If measurements don't match predictions, update measure data and goto step 1 asynchronously\n *\n * Measuring too frequently can pull performance down significantly. To compensate, we cache measured values so that\n * we can avoid re-measuring during operations that should not alter heights, like scrolling.\n *\n * To optimize glass rendering performance, onShouldVirtualize can be set. When onShouldVirtualize return false,\n * List will run in fast mode (not virtualized) to render all items without any measurements to improve page load time.\n * And we start doing measurements and rendering in virtualized mode when items grows larger than this threshold.\n *\n * However, certain operations can make measure data stale. For example, resizing the list, or passing in new props,\n * or forcing an update change cause pages to shrink/grow. When these operations occur, we increment a measureVersion\n * number, which we associate with cached measurements and use to determine if a remeasure should occur.\n */\nvar List = /** @class */ (function (_super) {\n __extends(List, _super);\n function List(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._surface = React.createRef();\n _this._pageRefs = {};\n _this._getDerivedStateFromProps = function (nextProps, previousState) {\n if (nextProps.items !== _this.props.items ||\n nextProps.renderCount !== _this.props.renderCount ||\n nextProps.startIndex !== _this.props.startIndex ||\n nextProps.version !== _this.props.version) {\n // We have received new items so we want to make sure that initially we only render a single window to\n // fill the currently visible rect, and then later render additional windows.\n _this._resetRequiredWindows();\n _this._requiredRect = null;\n _this._measureVersion++;\n _this._invalidatePageCache();\n return _this._updatePages(nextProps, previousState);\n }\n return previousState;\n };\n _this._onRenderRoot = function (props) {\n var rootRef = props.rootRef, surfaceElement = props.surfaceElement, divProps = props.divProps;\n return (React.createElement(\"div\", __assign({ ref: rootRef }, divProps), surfaceElement));\n };\n _this._onRenderSurface = function (props) {\n var surfaceRef = props.surfaceRef, pageElements = props.pageElements, divProps = props.divProps;\n return (React.createElement(\"div\", __assign({ ref: surfaceRef }, divProps), pageElements));\n };\n _this._onRenderPage = function (pageProps, defaultRender) {\n var _a = _this.props, onRenderCell = _a.onRenderCell, role = _a.role;\n var _b = pageProps.page, _c = _b.items, items = _c === void 0 ? [] : _c, startIndex = _b.startIndex, divProps = __rest(pageProps, [\"page\"]);\n // only assign list item role if no role is assigned\n var cellRole = role === undefined ? 'listitem' : 'presentation';\n var cells = [];\n for (var i = 0; i < items.length; i++) {\n var index = startIndex + i;\n var item = items[i];\n var itemKey = _this.props.getKey ? _this.props.getKey(item, index) : item && item.key;\n if (itemKey === null || itemKey === undefined) {\n itemKey = index;\n }\n cells.push(React.createElement(\"div\", { role: cellRole, className: 'ms-List-cell', key: itemKey, \"data-list-index\": index, \"data-automationid\": \"ListCell\" }, onRenderCell &&\n onRenderCell(item, index, !_this.props.ignoreScrollingState ? _this.state.isScrolling : undefined)));\n }\n return React.createElement(\"div\", __assign({}, divProps), cells);\n };\n initializeComponentRef(_this);\n _this.state = {\n pages: [],\n isScrolling: false,\n getDerivedStateFromProps: _this._getDerivedStateFromProps,\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._estimatedPageHeight = 0;\n _this._totalEstimates = 0;\n _this._requiredWindowsAhead = 0;\n _this._requiredWindowsBehind = 0;\n // Track the measure version for everything.\n _this._measureVersion = 0;\n // Ensure that scrolls are lazy updated.\n _this._onAsyncScroll = _this._async.debounce(_this._onAsyncScroll, MIN_SCROLL_UPDATE_DELAY, {\n leading: false,\n maxWait: MAX_SCROLL_UPDATE_DELAY,\n });\n _this._onAsyncIdle = _this._async.debounce(_this._onAsyncIdle, IDLE_DEBOUNCE_DELAY, {\n leading: false,\n });\n _this._onAsyncResize = _this._async.debounce(_this._onAsyncResize, RESIZE_DELAY, {\n leading: false,\n });\n _this._onScrollingDone = _this._async.debounce(_this._onScrollingDone, DONE_SCROLLING_WAIT, {\n leading: false,\n });\n _this._cachedPageHeights = {};\n _this._estimatedPageHeight = 0;\n _this._focusedIndex = -1;\n _this._pageCache = {};\n return _this;\n }\n List.getDerivedStateFromProps = function (nextProps, previousState) {\n return previousState.getDerivedStateFromProps(nextProps, previousState);\n };\n Object.defineProperty(List.prototype, \"pageRefs\", {\n get: function () {\n return this._pageRefs;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Scroll to the given index. By default will bring the page the specified item is on into the view. If a callback\n * to measure the height of an individual item is specified, will only scroll to bring the specific item into view.\n *\n * Note: with items of variable height and no passed in `getPageHeight` method, the list might jump after scrolling\n * when windows before/ahead are being rendered, and the estimated height is replaced using actual elements.\n *\n * @param index - Index of item to scroll to\n * @param measureItem - Optional callback to measure the height of an individual item\n * @param scrollToMode - Optional defines where in the window the item should be positioned to when scrolling\n */\n List.prototype.scrollToIndex = function (index, measureItem, scrollToMode) {\n if (scrollToMode === void 0) { scrollToMode = ScrollToMode.auto; }\n var startIndex = this.props.startIndex;\n var renderCount = this._getRenderCount();\n var endIndex = startIndex + renderCount;\n var allowedRect = this._allowedRect;\n var scrollTop = 0;\n var itemsPerPage = 1;\n for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {\n var pageSpecification = this._getPageSpecification(itemIndex, allowedRect);\n var pageHeight = pageSpecification.height;\n itemsPerPage = pageSpecification.itemCount;\n var requestedIndexIsInPage = itemIndex <= index && itemIndex + itemsPerPage > index;\n if (requestedIndexIsInPage) {\n // We have found the page. If the user provided a way to measure an individual item, we will try to scroll in\n // just the given item, otherwise we'll only bring the page into view\n if (measureItem && this._scrollElement) {\n var scrollRect = _measureScrollRect(this._scrollElement);\n var scrollWindow = {\n top: this._scrollElement.scrollTop,\n bottom: this._scrollElement.scrollTop + scrollRect.height,\n };\n // Adjust for actual item position within page\n var itemPositionWithinPage = index - itemIndex;\n for (var itemIndexInPage = 0; itemIndexInPage < itemPositionWithinPage; ++itemIndexInPage) {\n scrollTop += measureItem(itemIndex + itemIndexInPage);\n }\n var scrollBottom = scrollTop + measureItem(index);\n // If scrollToMode is set to something other than auto, we always want to\n // scroll the item into a specific position on the page.\n switch (scrollToMode) {\n case ScrollToMode.top:\n this._scrollElement.scrollTop = scrollTop;\n return;\n case ScrollToMode.bottom:\n this._scrollElement.scrollTop = scrollBottom - scrollRect.height;\n return;\n case ScrollToMode.center:\n this._scrollElement.scrollTop = (scrollTop + scrollBottom - scrollRect.height) / 2;\n return;\n case ScrollToMode.auto:\n default:\n break;\n }\n var itemIsFullyVisible = scrollTop >= scrollWindow.top && scrollBottom <= scrollWindow.bottom;\n if (itemIsFullyVisible) {\n // Item is already visible, do nothing.\n return;\n }\n var itemIsPartiallyAbove = scrollTop < scrollWindow.top;\n var itemIsPartiallyBelow = scrollBottom > scrollWindow.bottom;\n if (itemIsPartiallyAbove) {\n // We will just scroll to 'scrollTop'\n // .------. - scrollTop\n // |Item |\n // | .----|-. - scrollWindow.top\n // '------' |\n // | |\n // '------'\n }\n else if (itemIsPartiallyBelow) {\n // Adjust scrollTop position to just bring in the element\n // .------. - scrollTop\n // | |\n // | .------.\n // '-|----' | - scrollWindow.bottom\n // | Item |\n // '------' - scrollBottom\n scrollTop = scrollBottom - scrollRect.height;\n }\n }\n if (this._scrollElement) {\n this._scrollElement.scrollTop = scrollTop;\n }\n return;\n }\n scrollTop += pageHeight;\n }\n };\n List.prototype.getStartItemIndexInView = function (measureItem) {\n var pages = this.state.pages || [];\n for (var _i = 0, pages_1 = pages; _i < pages_1.length; _i++) {\n var page = pages_1[_i];\n var isPageVisible = !page.isSpacer && (this._scrollTop || 0) >= page.top && (this._scrollTop || 0) <= page.top + page.height;\n if (isPageVisible) {\n if (!measureItem) {\n var rowHeight = Math.floor(page.height / page.itemCount);\n return page.startIndex + Math.floor((this._scrollTop - page.top) / rowHeight);\n }\n else {\n var totalRowHeight = 0;\n for (var itemIndex = page.startIndex; itemIndex < page.startIndex + page.itemCount; itemIndex++) {\n var rowHeight = measureItem(itemIndex);\n if (page.top + totalRowHeight <= this._scrollTop &&\n this._scrollTop < page.top + totalRowHeight + rowHeight) {\n return itemIndex;\n }\n else {\n totalRowHeight += rowHeight;\n }\n }\n }\n }\n }\n return 0;\n };\n List.prototype.componentDidMount = function () {\n this.setState(this._updatePages(this.props, this.state));\n this._measureVersion++;\n this._scrollElement = findScrollableParent(this._root.current);\n this._events.on(window, 'resize', this._onAsyncResize);\n if (this._root.current) {\n this._events.on(this._root.current, 'focus', this._onFocus, true);\n }\n if (this._scrollElement) {\n this._events.on(this._scrollElement, 'scroll', this._onScroll);\n this._events.on(this._scrollElement, 'scroll', this._onAsyncScroll);\n }\n };\n List.prototype.componentDidUpdate = function (previousProps, previousState) {\n // Multiple updates may have been queued, so the callback will reflect all of them.\n // Re-fetch the current props and states to avoid using a stale props or state captured in the closure.\n var finalProps = this.props;\n var finalState = this.state;\n if (this.state.pagesVersion !== previousState.pagesVersion) {\n // If we weren't provided with the page height, measure the pages\n if (!finalProps.getPageHeight) {\n // If measured version is invalid since we've updated the DOM\n var heightsChanged = this._updatePageMeasurements(finalState.pages);\n // On first render, we should re-measure so that we don't get a visual glitch.\n if (heightsChanged) {\n this._materializedRect = null;\n if (!this._hasCompletedFirstRender) {\n this._hasCompletedFirstRender = true;\n this.setState(this._updatePages(finalProps, finalState));\n }\n else {\n this._onAsyncScroll();\n }\n }\n else {\n // Enqueue an idle bump.\n this._onAsyncIdle();\n }\n }\n else {\n // Enqueue an idle bump\n this._onAsyncIdle();\n }\n // Notify the caller that rendering the new pages has completed\n if (finalProps.onPagesUpdated) {\n finalProps.onPagesUpdated(finalState.pages);\n }\n }\n };\n List.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n delete this._scrollElement;\n };\n List.prototype.shouldComponentUpdate = function (newProps, newState) {\n var oldPages = this.state.pages;\n var newPages = newState.pages;\n var shouldComponentUpdate = false;\n // Update if the page stops scrolling\n if (!newState.isScrolling && this.state.isScrolling) {\n return true;\n }\n if (newProps.version !== this.props.version) {\n return true;\n }\n if (newProps.items === this.props.items && oldPages.length === newPages.length) {\n for (var i = 0; i < oldPages.length; i++) {\n var oldPage = oldPages[i];\n var newPage = newPages[i];\n if (oldPage.key !== newPage.key || oldPage.itemCount !== newPage.itemCount) {\n shouldComponentUpdate = true;\n break;\n }\n }\n }\n else {\n shouldComponentUpdate = true;\n }\n return shouldComponentUpdate;\n };\n List.prototype.forceUpdate = function () {\n this._invalidatePageCache();\n // Ensure that when the list is force updated we update the pages first before render.\n this._updateRenderRects(this.props, this.state, true);\n this.setState(this._updatePages(this.props, this.state));\n this._measureVersion++;\n _super.prototype.forceUpdate.call(this);\n };\n /**\n * Get the current height the list and it's pages.\n */\n List.prototype.getTotalListHeight = function () {\n return this._surfaceRect.height;\n };\n List.prototype.render = function () {\n var _a = this.props, className = _a.className, _b = _a.role, role = _b === void 0 ? 'list' : _b, onRenderSurface = _a.onRenderSurface, onRenderRoot = _a.onRenderRoot;\n var _c = this.state.pages, pages = _c === void 0 ? [] : _c;\n var pageElements = [];\n var divProps = getNativeProps(this.props, divProperties);\n for (var _i = 0, pages_2 = pages; _i < pages_2.length; _i++) {\n var page = pages_2[_i];\n pageElements.push(this._renderPage(page));\n }\n var finalOnRenderSurface = onRenderSurface\n ? composeRenderFunction(onRenderSurface, this._onRenderSurface)\n : this._onRenderSurface;\n var finalOnRenderRoot = onRenderRoot\n ? composeRenderFunction(onRenderRoot, this._onRenderRoot)\n : this._onRenderRoot;\n return finalOnRenderRoot({\n rootRef: this._root,\n pages: pages,\n surfaceElement: finalOnRenderSurface({\n surfaceRef: this._surface,\n pages: pages,\n pageElements: pageElements,\n divProps: {\n role: 'presentation',\n className: 'ms-List-surface',\n },\n }),\n divProps: __assign(__assign({}, divProps), { className: css('ms-List', className), role: pageElements.length > 0 ? role : undefined }),\n });\n };\n List.prototype._shouldVirtualize = function (props) {\n if (props === void 0) { props = this.props; }\n var onShouldVirtualize = props.onShouldVirtualize;\n return !onShouldVirtualize || onShouldVirtualize(props);\n };\n /**\n * when props.items change or forceUpdate called, throw away cached pages\n */\n List.prototype._invalidatePageCache = function () {\n this._pageCache = {};\n };\n List.prototype._renderPage = function (page) {\n var _this = this;\n var usePageCache = this.props.usePageCache;\n var cachedPage;\n // if usePageCache is set and cached page element can be found, just return cached page\n if (usePageCache) {\n cachedPage = this._pageCache[page.key];\n if (cachedPage && cachedPage.pageElement) {\n return cachedPage.pageElement;\n }\n }\n var pageStyle = this._getPageStyle(page);\n var _a = this.props.onRenderPage, onRenderPage = _a === void 0 ? this._onRenderPage : _a;\n var pageElement = onRenderPage({\n page: page,\n className: 'ms-List-page',\n key: page.key,\n ref: function (newRef) {\n _this._pageRefs[page.key] = newRef;\n },\n style: pageStyle,\n role: 'presentation',\n }, this._onRenderPage);\n // cache the first page for now since it is re-rendered a lot times unnecessarily.\n // todo: a more aggresive caching mechanism is to cache pages constaining the items not changed.\n // now we re-render pages too frequently, for example, props.items increased from 30 to 60, although the\n // first 30 items did not change, we still re-rendered all of them in this props.items change.\n if (usePageCache && page.startIndex === 0) {\n this._pageCache[page.key] = {\n page: page,\n pageElement: pageElement,\n };\n }\n return pageElement;\n };\n /** Generate the style object for the page. */\n List.prototype._getPageStyle = function (page) {\n var getPageStyle = this.props.getPageStyle;\n return __assign(__assign({}, (getPageStyle ? getPageStyle(page) : {})), (!page.items\n ? {\n height: page.height,\n }\n : {}));\n };\n /** Track the last item index focused so that we ensure we keep it rendered. */\n List.prototype._onFocus = function (ev) {\n var target = ev.target;\n while (target !== this._surface.current) {\n var indexString = target.getAttribute('data-list-index');\n if (indexString) {\n this._focusedIndex = Number(indexString);\n break;\n }\n target = getParent(target);\n }\n };\n /**\n * Called synchronously to reset the required render range to 0 on scrolling. After async scroll has executed,\n * we will call onAsyncIdle which will reset it back to it's correct value.\n */\n List.prototype._onScroll = function () {\n if (!this.state.isScrolling && !this.props.ignoreScrollingState) {\n this.setState({ isScrolling: true });\n }\n this._resetRequiredWindows();\n this._onScrollingDone();\n };\n List.prototype._resetRequiredWindows = function () {\n this._requiredWindowsAhead = 0;\n this._requiredWindowsBehind = 0;\n };\n /**\n * Debounced method to asynchronously update the visible region on a scroll event.\n */\n List.prototype._onAsyncScroll = function () {\n this._updateRenderRects(this.props, this.state);\n // Only update pages when the visible rect falls outside of the materialized rect.\n if (!this._materializedRect || !_isContainedWithin(this._requiredRect, this._materializedRect)) {\n this.setState(this._updatePages(this.props, this.state));\n }\n else {\n // console.log('requiredRect contained in materialized', this._requiredRect, this._materializedRect);\n }\n };\n /**\n * This is an async debounced method that will try and increment the windows we render. If we can increment\n * either, we increase the amount we render and re-evaluate.\n */\n List.prototype._onAsyncIdle = function () {\n var _a = this.props, renderedWindowsAhead = _a.renderedWindowsAhead, renderedWindowsBehind = _a.renderedWindowsBehind;\n var _b = this, requiredWindowsAhead = _b._requiredWindowsAhead, requiredWindowsBehind = _b._requiredWindowsBehind;\n var windowsAhead = Math.min(renderedWindowsAhead, requiredWindowsAhead + 1);\n var windowsBehind = Math.min(renderedWindowsBehind, requiredWindowsBehind + 1);\n if (windowsAhead !== requiredWindowsAhead || windowsBehind !== requiredWindowsBehind) {\n // console.log('idling', windowsBehind, windowsAhead);\n this._requiredWindowsAhead = windowsAhead;\n this._requiredWindowsBehind = windowsBehind;\n this._updateRenderRects(this.props, this.state);\n this.setState(this._updatePages(this.props, this.state));\n }\n if (renderedWindowsAhead > windowsAhead || renderedWindowsBehind > windowsBehind) {\n // Async increment on next tick.\n this._onAsyncIdle();\n }\n };\n /**\n * Function to call when the list is done scrolling.\n * This function is debounced.\n */\n List.prototype._onScrollingDone = function () {\n if (!this.props.ignoreScrollingState) {\n this.setState({ isScrolling: false });\n }\n };\n List.prototype._onAsyncResize = function () {\n this.forceUpdate();\n };\n List.prototype._updatePages = function (nextProps, previousState) {\n // console.log('updating pages');\n if (!this._requiredRect) {\n this._updateRenderRects(nextProps, previousState);\n }\n var newListState = this._buildPages(nextProps, previousState);\n var oldListPages = previousState.pages;\n this._notifyPageChanges(oldListPages, newListState.pages, this.props);\n return __assign(__assign(__assign({}, previousState), newListState), { pagesVersion: {} });\n };\n /**\n * Notify consumers that the rendered pages have changed\n * @param oldPages - The old pages\n * @param newPages - The new pages\n * @param props - The props to use\n */\n List.prototype._notifyPageChanges = function (oldPages, newPages, props) {\n var onPageAdded = props.onPageAdded, onPageRemoved = props.onPageRemoved;\n if (onPageAdded || onPageRemoved) {\n var renderedIndexes = {};\n for (var _i = 0, oldPages_1 = oldPages; _i < oldPages_1.length; _i++) {\n var page = oldPages_1[_i];\n if (page.items) {\n renderedIndexes[page.startIndex] = page;\n }\n }\n for (var _a = 0, newPages_1 = newPages; _a < newPages_1.length; _a++) {\n var page = newPages_1[_a];\n if (page.items) {\n if (!renderedIndexes[page.startIndex]) {\n this._onPageAdded(page);\n }\n else {\n delete renderedIndexes[page.startIndex];\n }\n }\n }\n for (var index in renderedIndexes) {\n if (renderedIndexes.hasOwnProperty(index)) {\n this._onPageRemoved(renderedIndexes[index]);\n }\n }\n }\n };\n List.prototype._updatePageMeasurements = function (pages) {\n var heightChanged = false;\n // when not in virtualize mode, we render all the items without page measurement\n if (!this._shouldVirtualize()) {\n return heightChanged;\n }\n for (var i = 0; i < pages.length; i++) {\n var page = pages[i];\n if (page.items) {\n heightChanged = this._measurePage(page) || heightChanged;\n }\n }\n return heightChanged;\n };\n /**\n * Given a page, measure its dimensions, update cache.\n * @returns True if the height has changed.\n */\n List.prototype._measurePage = function (page) {\n var hasChangedHeight = false;\n var pageElement = this._pageRefs[page.key];\n var cachedHeight = this._cachedPageHeights[page.startIndex];\n // console.log(' * measure attempt', page.startIndex, cachedHeight);\n if (pageElement &&\n this._shouldVirtualize() &&\n (!cachedHeight || cachedHeight.measureVersion !== this._measureVersion)) {\n var newClientRect = {\n width: pageElement.clientWidth,\n height: pageElement.clientHeight,\n };\n if (newClientRect.height || newClientRect.width) {\n hasChangedHeight = page.height !== newClientRect.height;\n // console.warn(' *** expensive page measure', page.startIndex, page.height, newClientRect.height);\n page.height = newClientRect.height;\n this._cachedPageHeights[page.startIndex] = {\n height: newClientRect.height,\n measureVersion: this._measureVersion,\n };\n this._estimatedPageHeight = Math.round((this._estimatedPageHeight * this._totalEstimates + newClientRect.height) / (this._totalEstimates + 1));\n this._totalEstimates++;\n }\n }\n return hasChangedHeight;\n };\n /** Called when a page has been added to the DOM. */\n List.prototype._onPageAdded = function (page) {\n var onPageAdded = this.props.onPageAdded;\n // console.log('page added', page.startIndex, this.state.pages.map(page => page.key).join(', '));\n if (onPageAdded) {\n onPageAdded(page);\n }\n };\n /** Called when a page has been removed from the DOM. */\n List.prototype._onPageRemoved = function (page) {\n var onPageRemoved = this.props.onPageRemoved;\n // console.log(' --- page removed', page.startIndex, this.state.pages.map(page => page.key).join(', '));\n if (onPageRemoved) {\n onPageRemoved(page);\n }\n };\n /** Build up the pages that should be rendered. */\n List.prototype._buildPages = function (props, state) {\n var renderCount = props.renderCount;\n var items = props.items, startIndex = props.startIndex, getPageHeight = props.getPageHeight;\n renderCount = this._getRenderCount(props);\n var materializedRect = __assign({}, EMPTY_RECT);\n var pages = [];\n var itemsPerPage = 1;\n var pageTop = 0;\n var currentSpacer = null;\n var focusedIndex = this._focusedIndex;\n var endIndex = startIndex + renderCount;\n var shouldVirtualize = this._shouldVirtualize(props);\n // First render is very important to track; when we render cells, we have no idea of estimated page height.\n // So we should default to rendering only the first page so that we can get information.\n // However if the user provides a measure function, let's just assume they know the right heights.\n var isFirstRender = this._estimatedPageHeight === 0 && !getPageHeight;\n var allowedRect = this._allowedRect;\n var _loop_1 = function (itemIndex) {\n var pageSpecification = this_1._getPageSpecification(itemIndex, allowedRect);\n var pageHeight = pageSpecification.height;\n var pageData = pageSpecification.data;\n var key = pageSpecification.key;\n itemsPerPage = pageSpecification.itemCount;\n var pageBottom = pageTop + pageHeight - 1;\n var isPageRendered = findIndex(state.pages, function (page) { return !!page.items && page.startIndex === itemIndex; }) > -1;\n var isPageInAllowedRange = !allowedRect || (pageBottom >= allowedRect.top && pageTop <= allowedRect.bottom);\n var isPageInRequiredRange = !this_1._requiredRect || (pageBottom >= this_1._requiredRect.top && pageTop <= this_1._requiredRect.bottom);\n var isPageVisible = (!isFirstRender && (isPageInRequiredRange || (isPageInAllowedRange && isPageRendered))) || !shouldVirtualize;\n var isPageFocused = focusedIndex >= itemIndex && focusedIndex < itemIndex + itemsPerPage;\n var isFirstPage = itemIndex === startIndex;\n // console.log('building page', itemIndex, 'pageTop: ' + pageTop, 'inAllowed: ' +\n // isPageInAllowedRange, 'inRequired: ' + isPageInRequiredRange);\n // Only render whats visible, focused, or first page,\n // or when running in fast rendering mode (not in virtualized mode), we render all current items in pages\n if (isPageVisible || isPageFocused || isFirstPage) {\n if (currentSpacer) {\n pages.push(currentSpacer);\n currentSpacer = null;\n }\n var itemsInPage = Math.min(itemsPerPage, endIndex - itemIndex);\n var newPage = this_1._createPage(key, items.slice(itemIndex, itemIndex + itemsInPage), itemIndex, undefined, undefined, pageData);\n newPage.top = pageTop;\n newPage.height = pageHeight;\n if (this_1._visibleRect && this_1._visibleRect.bottom) {\n newPage.isVisible = pageBottom >= this_1._visibleRect.top && pageTop <= this_1._visibleRect.bottom;\n }\n pages.push(newPage);\n if (isPageInRequiredRange && this_1._allowedRect) {\n _mergeRect(materializedRect, {\n top: pageTop,\n bottom: pageBottom,\n height: pageHeight,\n left: allowedRect.left,\n right: allowedRect.right,\n width: allowedRect.width,\n });\n }\n }\n else {\n if (!currentSpacer) {\n currentSpacer = this_1._createPage(SPACER_KEY_PREFIX + itemIndex, undefined, itemIndex, 0, undefined, pageData, true /*isSpacer*/);\n }\n currentSpacer.height = (currentSpacer.height || 0) + (pageBottom - pageTop) + 1;\n currentSpacer.itemCount += itemsPerPage;\n }\n pageTop += pageBottom - pageTop + 1;\n // in virtualized mode, we render need to render first page then break and measure,\n // otherwise, we render all items without measurement to make rendering fast\n if (isFirstRender && shouldVirtualize) {\n return \"break\";\n }\n };\n var this_1 = this;\n for (var itemIndex = startIndex; itemIndex < endIndex; itemIndex += itemsPerPage) {\n var state_1 = _loop_1(itemIndex);\n if (state_1 === \"break\")\n break;\n }\n if (currentSpacer) {\n currentSpacer.key = SPACER_KEY_PREFIX + 'end';\n pages.push(currentSpacer);\n }\n this._materializedRect = materializedRect;\n // console.log('materialized: ', materializedRect);\n return __assign(__assign({}, state), { pages: pages, measureVersion: this._measureVersion });\n };\n List.prototype._getPageSpecification = function (itemIndex, visibleRect) {\n var getPageSpecification = this.props.getPageSpecification;\n if (getPageSpecification) {\n var pageData = getPageSpecification(itemIndex, visibleRect);\n var _a = pageData.itemCount, itemCount = _a === void 0 ? this._getItemCountForPage(itemIndex, visibleRect) : _a;\n var _b = pageData.height, height = _b === void 0 ? this._getPageHeight(itemIndex, visibleRect, itemCount) : _b;\n return {\n itemCount: itemCount,\n height: height,\n data: pageData.data,\n key: pageData.key,\n };\n }\n else {\n var itemCount = this._getItemCountForPage(itemIndex, visibleRect);\n return {\n itemCount: itemCount,\n height: this._getPageHeight(itemIndex, visibleRect, itemCount),\n };\n }\n };\n /**\n * Get the pixel height of a give page. Will use the props getPageHeight first, and if not provided, fallback to\n * cached height, or estimated page height, or default page height.\n */\n List.prototype._getPageHeight = function (itemIndex, visibleRect, itemsPerPage) {\n if (this.props.getPageHeight) {\n return this.props.getPageHeight(itemIndex, visibleRect, itemsPerPage);\n }\n else {\n var cachedHeight = this._cachedPageHeights[itemIndex];\n return cachedHeight ? cachedHeight.height : this._estimatedPageHeight || DEFAULT_PAGE_HEIGHT;\n }\n };\n List.prototype._getItemCountForPage = function (itemIndex, visibileRect) {\n var itemsPerPage = this.props.getItemCountForPage\n ? this.props.getItemCountForPage(itemIndex, visibileRect)\n : DEFAULT_ITEMS_PER_PAGE;\n return itemsPerPage ? itemsPerPage : DEFAULT_ITEMS_PER_PAGE;\n };\n List.prototype._createPage = function (pageKey, items, startIndex, count, style, data, isSpacer) {\n if (startIndex === void 0) { startIndex = -1; }\n if (count === void 0) { count = items ? items.length : 0; }\n if (style === void 0) { style = {}; }\n pageKey = pageKey || PAGE_KEY_PREFIX + startIndex;\n var cachedPage = this._pageCache[pageKey];\n if (cachedPage && cachedPage.page) {\n return cachedPage.page;\n }\n return {\n key: pageKey,\n startIndex: startIndex,\n itemCount: count,\n items: items,\n style: style,\n top: 0,\n height: 0,\n data: data,\n isSpacer: isSpacer || false,\n };\n };\n List.prototype._getRenderCount = function (props) {\n var _a = props || this.props, items = _a.items, startIndex = _a.startIndex, renderCount = _a.renderCount;\n return renderCount === undefined ? (items ? items.length - startIndex : 0) : renderCount;\n };\n /** Calculate the visible rect within the list where top: 0 and left: 0 is the top/left of the list. */\n List.prototype._updateRenderRects = function (props, state, forceUpdate) {\n var renderedWindowsAhead = props.renderedWindowsAhead, renderedWindowsBehind = props.renderedWindowsBehind;\n var pages = state.pages;\n // when not in virtualize mode, we render all items without measurement to optimize page rendering perf\n if (!this._shouldVirtualize(props)) {\n return;\n }\n var surfaceRect = this._surfaceRect || __assign({}, EMPTY_RECT);\n var scrollHeight = this._scrollElement && this._scrollElement.scrollHeight;\n var scrollTop = this._scrollElement ? this._scrollElement.scrollTop : 0;\n // WARNING: EXPENSIVE CALL! We need to know the surface top relative to the window.\n // This needs to be called to recalculate when new pages should be loaded.\n // We check to see how far we've scrolled and if it's further than a third of a page we run it again.\n if (this._surface.current &&\n (forceUpdate ||\n !pages ||\n !this._surfaceRect ||\n !scrollHeight ||\n scrollHeight !== this._scrollHeight ||\n Math.abs(this._scrollTop - scrollTop) > this._estimatedPageHeight / 3)) {\n surfaceRect = this._surfaceRect = _measureSurfaceRect(this._surface.current);\n this._scrollTop = scrollTop;\n }\n // If the scroll height has changed, something in the container likely resized and\n // we should redo the page heights incase their content resized.\n if (forceUpdate || !scrollHeight || scrollHeight !== this._scrollHeight) {\n this._measureVersion++;\n }\n this._scrollHeight = scrollHeight || 0;\n // If the surface is above the container top or below the container bottom, or if this is not the first\n // render return empty rect.\n // The first time the list gets rendered we need to calculate the rectangle. The width of the list is\n // used to calculate the width of the list items.\n var visibleTop = Math.max(0, -surfaceRect.top);\n var win = getWindow(this._root.current);\n var visibleRect = {\n top: visibleTop,\n left: surfaceRect.left,\n bottom: visibleTop + win.innerHeight,\n right: surfaceRect.right,\n width: surfaceRect.width,\n height: win.innerHeight,\n };\n // The required/allowed rects are adjusted versions of the visible rect.\n this._requiredRect = _expandRect(visibleRect, this._requiredWindowsBehind, this._requiredWindowsAhead);\n this._allowedRect = _expandRect(visibleRect, renderedWindowsBehind, renderedWindowsAhead);\n // store the visible rect for later use.\n this._visibleRect = visibleRect;\n };\n List.defaultProps = {\n startIndex: 0,\n onRenderCell: function (item, index, containsFocus) { return React.createElement(React.Fragment, null, (item && item.name) || ''); },\n renderedWindowsAhead: DEFAULT_RENDERED_WINDOWS_AHEAD,\n renderedWindowsBehind: DEFAULT_RENDERED_WINDOWS_BEHIND,\n };\n return List;\n}(React.Component));\nexport { List };\nfunction _expandRect(rect, pagesBefore, pagesAfter) {\n var top = rect.top - pagesBefore * rect.height;\n var height = rect.height + (pagesBefore + pagesAfter) * rect.height;\n return {\n top: top,\n bottom: top + height,\n height: height,\n left: rect.left,\n right: rect.right,\n width: rect.width,\n };\n}\nfunction _isContainedWithin(innerRect, outerRect) {\n return (innerRect.top >= outerRect.top &&\n innerRect.left >= outerRect.left &&\n innerRect.bottom <= outerRect.bottom &&\n innerRect.right <= outerRect.right);\n}\nfunction _mergeRect(targetRect, newRect) {\n targetRect.top = newRect.top < targetRect.top || targetRect.top === -1 ? newRect.top : targetRect.top;\n targetRect.left = newRect.left < targetRect.left || targetRect.left === -1 ? newRect.left : targetRect.left;\n targetRect.bottom =\n newRect.bottom > targetRect.bottom || targetRect.bottom === -1 ? newRect.bottom : targetRect.bottom;\n targetRect.right = newRect.right > targetRect.right || targetRect.right === -1 ? newRect.right : targetRect.right;\n targetRect.width = targetRect.right - targetRect.left + 1;\n targetRect.height = targetRect.bottom - targetRect.top + 1;\n return targetRect;\n}\n//# sourceMappingURL=List.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { ComboBox } from './ComboBox';\nimport { List } from '../../List';\nimport { initializeComponentRef } from '../../Utilities';\nvar VirtualizedComboBox = /** @class */ (function (_super) {\n __extends(VirtualizedComboBox, _super);\n function VirtualizedComboBox(props) {\n var _this = _super.call(this, props) || this;\n /** The combo box element */\n _this._comboBox = React.createRef();\n /** The virtualized list element */\n _this._list = React.createRef();\n _this._onRenderList = function (props) {\n var id = props.id, onRenderItem = props.onRenderItem;\n // Render virtualized list\n return (React.createElement(List, { componentRef: _this._list, role: \"listbox\", id: id + \"-list\", \"aria-labelledby\": id + \"-label\", items: props.options, \n // eslint-disable-next-line react/jsx-no-bind\n onRenderCell: onRenderItem ? function (item) { return onRenderItem(item); } : function () { return null; } }));\n };\n _this._onScrollToItem = function (itemIndex) {\n // We are using the List component, call scrollToIndex\n _this._list.current && _this._list.current.scrollToIndex(itemIndex);\n };\n initializeComponentRef(_this);\n return _this;\n }\n Object.defineProperty(VirtualizedComboBox.prototype, \"selectedOptions\", {\n /**\n * All selected options\n */\n get: function () {\n if (this._comboBox.current) {\n return this._comboBox.current.selectedOptions;\n }\n return [];\n },\n enumerable: false,\n configurable: true\n });\n VirtualizedComboBox.prototype.dismissMenu = function () {\n if (this._comboBox.current) {\n return this._comboBox.current.dismissMenu();\n }\n };\n VirtualizedComboBox.prototype.focus = function (shouldOpenOnFocus, useFocusAsync) {\n if (this._comboBox.current) {\n this._comboBox.current.focus(shouldOpenOnFocus, useFocusAsync);\n return true;\n }\n return false;\n };\n VirtualizedComboBox.prototype.render = function () {\n return (React.createElement(ComboBox, __assign({}, this.props, { componentRef: this._comboBox, onRenderList: this._onRenderList, onScrollToItem: this._onScrollToItem })));\n };\n return VirtualizedComboBox;\n}(React.Component));\nexport { VirtualizedComboBox };\n//# sourceMappingURL=VirtualizedComboBox.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeytipManager } from '../../utilities/keytips/KeytipManager';\nimport { useConst, usePrevious } from '@fluentui/react-hooks';\nvar registerPersistedKeytips = function (keytipsToRegister, keytipManager, registeredPersistedKeytips) {\n for (var _i = 0, keytipsToRegister_1 = keytipsToRegister; _i < keytipsToRegister_1.length; _i++) {\n var keytip = keytipsToRegister_1[_i];\n var uniqueID = keytipManager.register(keytip, true);\n // Update map\n registeredPersistedKeytips[uniqueID] = keytip;\n }\n};\nvar unregisterPersistedKeytips = function (keytipManager, registeredPersistedKeytips) {\n for (var _i = 0, _a = Object.keys(registeredPersistedKeytips); _i < _a.length; _i++) {\n var uniqueID = _a[_i];\n keytipManager.unregister(registeredPersistedKeytips[uniqueID], uniqueID, true);\n delete registeredPersistedKeytips[uniqueID];\n }\n};\nvar useKeytipRegistrations = function (registeredPersistedKeytips, keytipsToRegister, keytipManager) {\n var prevPersistedKeytips = usePrevious(registeredPersistedKeytips);\n // Update\n React.useEffect(function () {\n if (prevPersistedKeytips) {\n // Unregister old keytips\n unregisterPersistedKeytips(keytipManager, prevPersistedKeytips);\n // Register new keytips\n registerPersistedKeytips(keytipsToRegister, keytipManager, registeredPersistedKeytips);\n }\n });\n // Mount/Unmount\n React.useEffect(function () {\n // Register on mount\n registerPersistedKeytips(keytipsToRegister, keytipManager, registeredPersistedKeytips);\n return function () {\n // Unregister on unmount\n unregisterPersistedKeytips(keytipManager, registeredPersistedKeytips);\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n};\nexport var OverflowButton = function (props) {\n var keytipManager = KeytipManager.getInstance();\n var className = props.className, overflowItems = props.overflowItems, keytipSequences = props.keytipSequences, itemSubMenuProvider = props.itemSubMenuProvider, onRenderOverflowButton = props.onRenderOverflowButton;\n var persistedKeytips = useConst({});\n // Gets the subMenu for an overflow item\n var getSubMenuForItem = React.useCallback(function (item) {\n // Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps\n if (itemSubMenuProvider) {\n return itemSubMenuProvider(item);\n }\n if (item.subMenuProps) {\n return item.subMenuProps.items;\n }\n return undefined;\n }, [itemSubMenuProvider]);\n var _a = React.useMemo(function () {\n var newKeytipsToRegister = [];\n var newOverflowItems = [];\n if (keytipSequences) {\n overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.forEach(function (overflowItem) {\n var _a;\n var keytip = overflowItem.keytipProps;\n if (keytip) {\n // Create persisted keytip\n var persistedKeytip = {\n content: keytip.content,\n keySequences: keytip.keySequences,\n disabled: keytip.disabled || !!(overflowItem.disabled || overflowItem.isDisabled),\n hasDynamicChildren: keytip.hasDynamicChildren,\n hasMenu: keytip.hasMenu,\n };\n if (keytip.hasDynamicChildren || getSubMenuForItem(overflowItem)) {\n // If the keytip has a submenu or children nodes, change onExecute to persistedKeytipExecute\n persistedKeytip.onExecute = keytipManager.menuExecute.bind(keytipManager, keytipSequences, (_a = overflowItem === null || overflowItem === void 0 ? void 0 : overflowItem.keytipProps) === null || _a === void 0 ? void 0 : _a.keySequences);\n persistedKeytip.hasOverflowSubMenu = true;\n }\n else {\n // If the keytip doesn't have a submenu, just execute the original function\n persistedKeytip.onExecute = keytip.onExecute;\n }\n newKeytipsToRegister.push(persistedKeytip);\n // Add the overflow sequence to this item\n var newOverflowItem = __assign(__assign({}, overflowItem), { keytipProps: __assign(__assign({}, keytip), { overflowSetSequence: keytipSequences }) });\n newOverflowItems === null || newOverflowItems === void 0 ? void 0 : newOverflowItems.push(newOverflowItem);\n }\n else {\n // Nothing to change, add overflowItem to list\n newOverflowItems === null || newOverflowItems === void 0 ? void 0 : newOverflowItems.push(overflowItem);\n }\n });\n }\n else {\n newOverflowItems = overflowItems;\n }\n return { modifiedOverflowItems: newOverflowItems, keytipsToRegister: newKeytipsToRegister };\n }, [overflowItems, getSubMenuForItem, keytipManager, keytipSequences]), modifiedOverflowItems = _a.modifiedOverflowItems, keytipsToRegister = _a.keytipsToRegister;\n useKeytipRegistrations(persistedKeytips, keytipsToRegister, keytipManager);\n return React.createElement(\"div\", { className: className }, onRenderOverflowButton(modifiedOverflowItems));\n};\n//# sourceMappingURL=OverflowButton.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, divProperties, elementContains, getNativeProps, focusFirstChild } from '../../Utilities';\nimport { OverflowButton } from './OverflowButton';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'OverflowSet';\nvar useComponentRef = function (props, divContainer) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n var focusSucceeded = false;\n if (divContainer.current) {\n focusSucceeded = focusFirstChild(divContainer.current);\n }\n return focusSucceeded;\n },\n focusElement: function (childElement) {\n var focusSucceeded = false;\n if (!childElement) {\n return false;\n }\n if (divContainer.current && elementContains(divContainer.current, childElement)) {\n childElement.focus();\n focusSucceeded = document.activeElement === childElement;\n }\n return focusSucceeded;\n },\n }); }, [divContainer]);\n};\nexport var OverflowSetBase = React.forwardRef(function (props, forwardedRef) {\n var divContainer = React.useRef(null);\n var mergedRef = useMergedRefs(divContainer, forwardedRef);\n useComponentRef(props, divContainer);\n var items = props.items, overflowItems = props.overflowItems, className = props.className, styles = props.styles, vertical = props.vertical, role = props.role, _a = props.overflowSide, overflowSide = _a === void 0 ? 'end' : _a, onRenderItem = props.onRenderItem;\n var classNames = getClassNames(styles, { className: className, vertical: vertical });\n var showOverflow = !!overflowItems && overflowItems.length > 0;\n return (React.createElement(\"div\", __assign({}, getNativeProps(props, divProperties), { role: role || 'group', \"aria-orientation\": role === 'menubar' ? (vertical === true ? 'vertical' : 'horizontal') : undefined, className: classNames.root, ref: mergedRef }),\n overflowSide === 'start' && showOverflow && React.createElement(OverflowButton, __assign({}, props, { className: classNames.overflowButton })),\n items &&\n items.map(function (item, i) { return (React.createElement(\"div\", { className: classNames.item, key: item.key, role: \"none\" }, onRenderItem(item))); }),\n overflowSide === 'end' && showOverflow && React.createElement(OverflowButton, __assign({}, props, { className: classNames.overflowButton }))));\n});\nOverflowSetBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=OverflowSet.base.js.map","var overflowItemStyle = {\n flexShrink: 0,\n display: 'inherit',\n};\nexport var getStyles = function (props) {\n var className = props.className, vertical = props.vertical;\n return {\n root: [\n 'ms-OverflowSet',\n {\n position: 'relative',\n display: 'flex',\n flexWrap: 'nowrap',\n },\n vertical && { flexDirection: 'column' },\n className,\n ],\n item: ['ms-OverflowSet-item', overflowItemStyle],\n overflowButton: ['ms-OverflowSet-overflowButton', overflowItemStyle],\n };\n};\n//# sourceMappingURL=OverflowSet.styles.js.map","import { styled } from '../../Utilities';\nimport { OverflowSetBase } from './OverflowSet.base';\nimport { getStyles } from './OverflowSet.styles';\nexport var OverflowSet = styled(OverflowSetBase, getStyles, undefined, {\n scope: 'OverflowSet',\n});\n//# sourceMappingURL=OverflowSet.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, __extends, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, nullRender, getNativeProps, divProperties, composeComponentAs, initializeComponentRef, } from '../../Utilities';\nimport { OverflowSet } from '../../OverflowSet';\nimport { ResizeGroup } from '../../ResizeGroup';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { CommandBarButton } from '../../Button';\nimport { TooltipHost } from '../../Tooltip';\nimport { getCommandButtonStyles } from './CommandBar.styles';\nvar getClassNames = classNamesFunction();\nvar CommandBarBase = /** @class */ (function (_super) {\n __extends(CommandBarBase, _super);\n function CommandBarBase(props) {\n var _this = _super.call(this, props) || this;\n _this._overflowSet = React.createRef();\n _this._resizeGroup = React.createRef();\n _this._onRenderData = function (data) {\n var _a = _this.props, ariaLabel = _a.ariaLabel, primaryGroupAriaLabel = _a.primaryGroupAriaLabel, farItemsGroupAriaLabel = _a.farItemsGroupAriaLabel;\n var hasSecondSet = data.farItems && data.farItems.length > 0;\n return (React.createElement(FocusZone, { className: css(_this._classNames.root), direction: FocusZoneDirection.horizontal, role: 'menubar', \"aria-label\": ariaLabel },\n React.createElement(OverflowSet, { role: hasSecondSet ? 'group' : 'none', \"aria-label\": hasSecondSet ? primaryGroupAriaLabel : undefined, componentRef: _this._overflowSet, className: css(_this._classNames.primarySet), items: data.primaryItems, overflowItems: data.overflowItems.length ? data.overflowItems : undefined, onRenderItem: _this._onRenderItem, onRenderOverflowButton: _this._onRenderOverflowButton }),\n hasSecondSet && (React.createElement(OverflowSet, { role: \"group\", \"aria-label\": farItemsGroupAriaLabel, className: css(_this._classNames.secondarySet), items: data.farItems, onRenderItem: _this._onRenderItem, onRenderOverflowButton: nullRender }))));\n };\n _this._onRenderItem = function (item) {\n if (item.onRender) {\n // These are the top level items, there is no relevant menu dismissing function to\n // provide for the IContextualMenuItem onRender function. Pass in a no op function instead.\n return item.onRender(item, function () { return undefined; });\n }\n // eslint-disable-next-line deprecation/deprecation\n var itemText = item.text || item.name;\n var commandButtonProps = __assign(__assign({ allowDisabledFocus: true, role: 'menuitem' }, item), { styles: getCommandButtonStyles(item.buttonStyles), className: css('ms-CommandBarItem-link', item.className), text: !item.iconOnly ? itemText : undefined, menuProps: item.subMenuProps, onClick: _this._onButtonClick(item) });\n if (item.iconOnly && (itemText !== undefined || item.tooltipHostProps)) {\n return (React.createElement(TooltipHost, __assign({ role: \"none\", content: itemText, setAriaDescribedBy: false }, item.tooltipHostProps), _this._commandButton(item, commandButtonProps)));\n }\n return _this._commandButton(item, commandButtonProps);\n };\n _this._commandButton = function (item, props) {\n var ButtonAs = _this.props.buttonAs;\n var CommandBarButtonAs = item.commandBarButtonAs;\n var DefaultButtonAs = CommandBarButton;\n // The prop types between these three possible implementations overlap enough that a force-cast is safe.\n var Type = DefaultButtonAs;\n if (CommandBarButtonAs) {\n Type = composeComponentAs(CommandBarButtonAs, Type);\n }\n if (ButtonAs) {\n Type = composeComponentAs(ButtonAs, Type);\n }\n // Always pass the default implementation to the override so it may be composed.\n return React.createElement(Type, __assign({}, props));\n };\n _this._onRenderOverflowButton = function (overflowItems) {\n var _a = _this.props.overflowButtonProps, overflowButtonProps = _a === void 0 ? {} : _a;\n var combinedOverflowItems = __spreadArrays((overflowButtonProps.menuProps ? overflowButtonProps.menuProps.items : []), overflowItems);\n var overflowProps = __assign(__assign({ role: 'menuitem' }, overflowButtonProps), { styles: __assign({ menuIcon: { fontSize: '17px' } }, overflowButtonProps.styles), className: css('ms-CommandBar-overflowButton', overflowButtonProps.className), menuProps: __assign(__assign({}, overflowButtonProps.menuProps), { items: combinedOverflowItems }), menuIconProps: __assign({ iconName: 'More' }, overflowButtonProps.menuIconProps) });\n var OverflowButtonType = _this.props.overflowButtonAs\n ? composeComponentAs(_this.props.overflowButtonAs, CommandBarButton)\n : CommandBarButton;\n return React.createElement(OverflowButtonType, __assign({}, overflowProps));\n };\n _this._onReduceData = function (data) {\n var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataReduced = _a.onDataReduced;\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;\n // Use first item if shiftOnReduce, otherwise use last item\n var movedItem = primaryItems[shiftOnReduce ? 0 : primaryItems.length - 1];\n if (movedItem !== undefined) {\n movedItem.renderedInOverflow = true;\n overflowItems = __spreadArrays([movedItem], overflowItems);\n primaryItems = shiftOnReduce ? primaryItems.slice(1) : primaryItems.slice(0, -1);\n var newData = __assign(__assign({}, data), { primaryItems: primaryItems, overflowItems: overflowItems });\n cacheKey = _this._computeCacheKey({ primaryItems: primaryItems, overflow: overflowItems.length > 0 });\n if (onDataReduced) {\n onDataReduced(movedItem);\n }\n newData.cacheKey = cacheKey;\n return newData;\n }\n return undefined;\n };\n _this._onGrowData = function (data) {\n var _a = _this.props, shiftOnReduce = _a.shiftOnReduce, onDataGrown = _a.onDataGrown;\n var minimumOverflowItems = data.minimumOverflowItems;\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems, cacheKey = data.cacheKey;\n var movedItem = overflowItems[0];\n // Make sure that moved item exists and is not one of the original overflow items\n if (movedItem !== undefined && overflowItems.length > minimumOverflowItems) {\n movedItem.renderedInOverflow = false;\n overflowItems = overflowItems.slice(1);\n // if shiftOnReduce, movedItem goes first, otherwise, last.\n primaryItems = shiftOnReduce ? __spreadArrays([movedItem], primaryItems) : __spreadArrays(primaryItems, [movedItem]);\n var newData = __assign(__assign({}, data), { primaryItems: primaryItems, overflowItems: overflowItems });\n cacheKey = _this._computeCacheKey({ primaryItems: primaryItems, overflow: overflowItems.length > 0 });\n if (onDataGrown) {\n onDataGrown(movedItem);\n }\n newData.cacheKey = cacheKey;\n return newData;\n }\n return undefined;\n };\n initializeComponentRef(_this);\n return _this;\n }\n CommandBarBase.prototype.render = function () {\n var _a = this.props, items = _a.items, overflowItems = _a.overflowItems, farItems = _a.farItems, styles = _a.styles, theme = _a.theme, dataDidRender = _a.dataDidRender, _b = _a.onReduceData, onReduceData = _b === void 0 ? this._onReduceData : _b, _c = _a.onGrowData, onGrowData = _c === void 0 ? this._onGrowData : _c, _d = _a.resizeGroupAs, ResizeGroupAs = _d === void 0 ? ResizeGroup : _d;\n var commandBarData = {\n primaryItems: __spreadArrays(items),\n overflowItems: __spreadArrays(overflowItems),\n minimumOverflowItems: __spreadArrays(overflowItems).length,\n farItems: farItems,\n cacheKey: this._computeCacheKey({\n primaryItems: __spreadArrays(items),\n overflow: overflowItems && overflowItems.length > 0,\n }),\n };\n this._classNames = getClassNames(styles, { theme: theme });\n // ResizeGroup will render these attributes to the root