} Accounts - accounts saved in the cache\r\n * @ignore\r\n */\r\n UserAgentApplication.prototype.getUniqueAccounts = function (accounts) {\r\n if (!accounts || accounts.length <= 1) {\r\n return accounts;\r\n }\r\n var flags = [];\r\n var uniqueAccounts = [];\r\n for (var index = 0; index < accounts.length; ++index) {\r\n if (accounts[index].homeAccountIdentifier && flags.indexOf(accounts[index].homeAccountIdentifier) === -1) {\r\n flags.push(accounts[index].homeAccountIdentifier);\r\n uniqueAccounts.push(accounts[index]);\r\n }\r\n }\r\n return uniqueAccounts;\r\n };\r\n // #endregion\r\n // #region Angular\r\n /**\r\n * @hidden\r\n *\r\n * Broadcast messages - Used only for Angular? *\r\n * @param eventName\r\n * @param data\r\n */\r\n UserAgentApplication.prototype.broadcast = function (eventName, data) {\r\n var evt = new CustomEvent(eventName, { detail: data });\r\n window.dispatchEvent(evt);\r\n };\r\n /**\r\n * @hidden\r\n *\r\n * Helper function to retrieve the cached token\r\n *\r\n * @param scopes\r\n * @param {@link Account} account\r\n * @param state\r\n * @return {@link AuthResponse} AuthResponse\r\n */\r\n UserAgentApplication.prototype.getCachedTokenInternal = function (scopes, account, state, correlationId) {\r\n // Get the current session's account object\r\n var accountObject = account || this.getAccount();\r\n if (!accountObject) {\r\n return null;\r\n }\r\n // Construct AuthenticationRequest based on response type; set \"redirectUri\" from the \"request\" which makes this call from Angular - for this.getRedirectUri()\r\n var newAuthority = this.authorityInstance ? this.authorityInstance : AuthorityFactory.CreateInstance(this.authority, this.config.auth.validateAuthority);\r\n var responseType = this.getTokenType(accountObject, scopes);\r\n var serverAuthenticationRequest = new ServerRequestParameters(newAuthority, this.clientId, responseType, this.getRedirectUri(), scopes, state, correlationId);\r\n // get cached token\r\n return this.getCachedToken(serverAuthenticationRequest, account);\r\n };\r\n /**\r\n * @hidden\r\n *\r\n * Get scopes for the Endpoint - Used in Angular to track protected and unprotected resources without interaction from the developer app\r\n * Note: Please check if we need to set the \"redirectUri\" from the \"request\" which makes this call from Angular - for this.getRedirectUri()\r\n *\r\n * @param endpoint\r\n */\r\n UserAgentApplication.prototype.getScopesForEndpoint = function (endpoint) {\r\n // if user specified list of unprotectedResources, no need to send token to these endpoints, return null.\r\n if (this.config.framework.unprotectedResources.length > 0) {\r\n for (var i = 0; i < this.config.framework.unprotectedResources.length; i++) {\r\n if (endpoint.indexOf(this.config.framework.unprotectedResources[i]) > -1) {\r\n return null;\r\n }\r\n }\r\n }\r\n // process all protected resources and send the matched one\r\n if (this.config.framework.protectedResourceMap.size > 0) {\r\n for (var _i = 0, _a = Array.from(this.config.framework.protectedResourceMap.keys()); _i < _a.length; _i++) {\r\n var key = _a[_i];\r\n // configEndpoint is like /api/Todo requested endpoint can be /api/Todo/1\r\n if (endpoint.indexOf(key) > -1) {\r\n return this.config.framework.protectedResourceMap.get(key);\r\n }\r\n }\r\n }\r\n /*\r\n * default resource will be clientid if nothing specified\r\n * App will use idtoken for calls to itself\r\n * check if it's staring from http or https, needs to match with app host\r\n */\r\n if (endpoint.indexOf(\"http://\") > -1 || endpoint.indexOf(\"https://\") > -1) {\r\n if (UrlUtils.getHostFromUri(endpoint) === UrlUtils.getHostFromUri(this.getRedirectUri())) {\r\n return new Array(this.clientId);\r\n }\r\n }\r\n else {\r\n /*\r\n * in angular level, the url for $http interceptor call could be relative url,\r\n * if it's relative call, we'll treat it as app backend call.\r\n */\r\n return new Array(this.clientId);\r\n }\r\n // if not the app's own backend or not a domain listed in the endpoints structure\r\n return null;\r\n };\r\n /**\r\n * Return boolean flag to developer to help inform if login is in progress\r\n * @returns {boolean} true/false\r\n */\r\n UserAgentApplication.prototype.getLoginInProgress = function () {\r\n return this.cacheStorage.isInteractionInProgress(true);\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * @param loginInProgress\r\n */\r\n UserAgentApplication.prototype.setInteractionInProgress = function (inProgress) {\r\n this.cacheStorage.setInteractionInProgress(inProgress);\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * @param loginInProgress\r\n */\r\n UserAgentApplication.prototype.setloginInProgress = function (loginInProgress) {\r\n this.setInteractionInProgress(loginInProgress);\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * returns the status of acquireTokenInProgress\r\n */\r\n UserAgentApplication.prototype.getAcquireTokenInProgress = function () {\r\n return this.cacheStorage.isInteractionInProgress(true);\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * @param acquireTokenInProgress\r\n */\r\n UserAgentApplication.prototype.setAcquireTokenInProgress = function (acquireTokenInProgress) {\r\n this.setInteractionInProgress(acquireTokenInProgress);\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * returns the logger handle\r\n */\r\n UserAgentApplication.prototype.getLogger = function () {\r\n return this.logger;\r\n };\r\n /**\r\n * Sets the logger callback.\r\n * @param logger Logger callback\r\n */\r\n UserAgentApplication.prototype.setLogger = function (logger) {\r\n this.logger = logger;\r\n };\r\n // #endregion\r\n // #region Getters and Setters\r\n /**\r\n * Use to get the redirect uri configured in MSAL or null.\r\n * Evaluates redirectUri if its a function, otherwise simply returns its value.\r\n *\r\n * @returns {string} redirect URL\r\n */\r\n UserAgentApplication.prototype.getRedirectUri = function (reqRedirectUri) {\r\n if (reqRedirectUri) {\r\n return reqRedirectUri;\r\n }\r\n else if (typeof this.config.auth.redirectUri === \"function\") {\r\n return this.config.auth.redirectUri();\r\n }\r\n return this.config.auth.redirectUri;\r\n };\r\n /**\r\n * Use to get the post logout redirect uri configured in MSAL or null.\r\n * Evaluates postLogoutredirectUri if its a function, otherwise simply returns its value.\r\n *\r\n * @returns {string} post logout redirect URL\r\n */\r\n UserAgentApplication.prototype.getPostLogoutRedirectUri = function () {\r\n if (typeof this.config.auth.postLogoutRedirectUri === \"function\") {\r\n return this.config.auth.postLogoutRedirectUri();\r\n }\r\n return this.config.auth.postLogoutRedirectUri;\r\n };\r\n /**\r\n * Use to get the current {@link Configuration} object in MSAL\r\n *\r\n * @returns {@link Configuration}\r\n */\r\n UserAgentApplication.prototype.getCurrentConfiguration = function () {\r\n if (!this.config) {\r\n throw ClientConfigurationError.createNoSetConfigurationError();\r\n }\r\n return this.config;\r\n };\r\n /**\r\n * @ignore\r\n *\r\n * Utils function to create the Authentication\r\n * @param {@link account} account object\r\n * @param scopes\r\n *\r\n * @returns {string} token type: token, id_token or id_token token\r\n *\r\n */\r\n UserAgentApplication.prototype.getTokenType = function (accountObject, scopes) {\r\n var accountsMatch = Account.compareAccounts(accountObject, this.getAccount());\r\n return ServerRequestParameters.determineResponseType(accountsMatch, scopes);\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * Sets the cachekeys for and stores the account information in cache\r\n * @param account\r\n * @param state\r\n * @hidden\r\n */\r\n UserAgentApplication.prototype.setAccountCache = function (account, state) {\r\n // Cache acquireTokenAccountKey\r\n var accountId = account ? this.getAccountId(account) : Constants.no_account;\r\n var acquireTokenAccountKey = AuthCache.generateAcquireTokenAccountKey(accountId, state);\r\n this.cacheStorage.setItem(acquireTokenAccountKey, JSON.stringify(account));\r\n };\r\n /**\r\n * @hidden\r\n * @ignore\r\n *\r\n * Sets the cacheKey for and stores the authority information in cache\r\n * @param state\r\n * @param authority\r\n * @hidden\r\n */\r\n UserAgentApplication.prototype.setAuthorityCache = function (state, authority) {\r\n // Cache authorityKey\r\n var authorityKey = AuthCache.generateAuthorityKey(state);\r\n this.cacheStorage.setItem(authorityKey, UrlUtils.CanonicalizeUri(authority), this.inCookie);\r\n };\r\n /**\r\n * Updates account, authority, and nonce in cache\r\n * @param serverAuthenticationRequest\r\n * @param account\r\n * @hidden\r\n * @ignore\r\n */\r\n UserAgentApplication.prototype.updateCacheEntries = function (serverAuthenticationRequest, account, isLoginCall, loginStartPage) {\r\n // Cache Request Originator Page\r\n if (loginStartPage) {\r\n this.cacheStorage.setItem(AuthCache.generateTemporaryCacheKey(TemporaryCacheKeys.LOGIN_REQUEST, serverAuthenticationRequest.state), loginStartPage, this.inCookie);\r\n }\r\n // Cache account and authority\r\n if (isLoginCall) {\r\n // Cache the state\r\n this.cacheStorage.setItem(AuthCache.generateTemporaryCacheKey(TemporaryCacheKeys.STATE_LOGIN, serverAuthenticationRequest.state), serverAuthenticationRequest.state, this.inCookie);\r\n }\r\n else {\r\n this.setAccountCache(account, serverAuthenticationRequest.state);\r\n }\r\n // Cache authorityKey\r\n this.setAuthorityCache(serverAuthenticationRequest.state, serverAuthenticationRequest.authority);\r\n // Cache nonce\r\n this.cacheStorage.setItem(AuthCache.generateTemporaryCacheKey(TemporaryCacheKeys.NONCE_IDTOKEN, serverAuthenticationRequest.state), serverAuthenticationRequest.nonce, this.inCookie);\r\n };\r\n /**\r\n * Returns the unique identifier for the logged in account\r\n * @param account\r\n * @hidden\r\n * @ignore\r\n */\r\n UserAgentApplication.prototype.getAccountId = function (account) {\r\n // return `${account.accountIdentifier}` + Constants.resourceDelimiter + `${account.homeAccountIdentifier}`;\r\n var accountId;\r\n if (!StringUtils.isEmpty(account.homeAccountIdentifier)) {\r\n accountId = account.homeAccountIdentifier;\r\n }\r\n else {\r\n accountId = Constants.no_account;\r\n }\r\n return accountId;\r\n };\r\n /**\r\n * @ignore\r\n * @param extraQueryParameters\r\n *\r\n * Construct 'tokenRequest' from the available data in adalIdToken\r\n */\r\n UserAgentApplication.prototype.buildIDTokenRequest = function (request) {\r\n var tokenRequest = {\r\n scopes: Constants.oidcScopes,\r\n authority: this.authority,\r\n account: this.getAccount(),\r\n extraQueryParameters: request.extraQueryParameters,\r\n correlationId: request.correlationId\r\n };\r\n return tokenRequest;\r\n };\r\n /**\r\n * @ignore\r\n * @param config\r\n * @param clientId\r\n *\r\n * Construct TelemetryManager from Configuration\r\n */\r\n UserAgentApplication.prototype.getTelemetryManagerFromConfig = function (config, clientId) {\r\n if (!config) { // if unset\r\n return TelemetryManager.getTelemetrymanagerStub(clientId, this.logger);\r\n }\r\n // if set then validate\r\n var applicationName = config.applicationName, applicationVersion = config.applicationVersion, telemetryEmitter = config.telemetryEmitter;\r\n if (!applicationName || !applicationVersion || !telemetryEmitter) {\r\n throw ClientConfigurationError.createTelemetryConfigError(config);\r\n }\r\n // if valid then construct\r\n var telemetryPlatform = {\r\n applicationName: applicationName,\r\n applicationVersion: applicationVersion\r\n };\r\n var telemetryManagerConfig = {\r\n platform: telemetryPlatform,\r\n clientId: clientId\r\n };\r\n return new TelemetryManager(telemetryManagerConfig, telemetryEmitter, this.logger);\r\n };\r\n return UserAgentApplication;\r\n}());\r\nexport { UserAgentApplication };\r\n//# sourceMappingURL=UserAgentApplication.js.map","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nimport { UserAgentApplication } from 'msal';\nimport { TelemetryEvents } from '@employee-experience/common/lib/TelemetryEvents';\nexport class MSALClient {\n constructor(options, telemetryClient) {\n this.config = options;\n this.authContext = new UserAgentApplication(Object.assign(Object.assign({}, options), { cache: Object.assign({ cacheLocation: 'sessionStorage', storeAuthStateInCookie: this.isIE() }, options.cache), auth: options.auth }));\n this.telemetryClient = telemetryClient;\n // eslint-disable-next-line @typescript-eslint/no-empty-function\n this.authContext.handleRedirectCallback(() => { });\n }\n login(loginOptions = {}) {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n this.telemetryClient.trackTrace({\n message: TelemetryEvents.UserLogInRequested,\n });\n try {\n this.authContext.loginRedirect({\n scopes: loginOptions === null || loginOptions === void 0 ? void 0 : loginOptions.scopes,\n });\n resolve();\n }\n catch (ex) {\n this.telemetryClient.trackTrace({\n message: TelemetryEvents.UserLoginFailed,\n });\n reject(ex);\n }\n });\n });\n }\n logOut() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n this.telemetryClient.trackTrace({\n message: TelemetryEvents.UserLogOutRequested,\n });\n try {\n this.authContext.logout();\n resolve();\n }\n catch (ex) {\n this.telemetryClient.trackTrace({\n message: TelemetryEvents.UserLogOutFailed,\n });\n reject(ex);\n }\n });\n });\n }\n getUser() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n try {\n const user = this.authContext.getAccount();\n if (!user)\n return resolve(null);\n resolve({\n id: user.userName,\n email: user.userName,\n name: user.name,\n oid: user.accountIdentifier,\n });\n }\n catch (ex) {\n reject(ex);\n }\n });\n });\n }\n getUserId() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {\n try {\n const user = yield this.getUser();\n resolve(user ? user.id : null);\n }\n catch (ex) {\n reject(ex);\n }\n }));\n });\n }\n isLoggedIn() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {\n try {\n resolve((yield this.getUser()) !== null);\n }\n catch (ex) {\n reject(ex);\n }\n }));\n });\n }\n acquireToken(scopes) {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => {\n var _a, _b;\n let normalizedScopes = [];\n if (typeof scopes === 'string')\n normalizedScopes.push(scopes + '/.default');\n else\n normalizedScopes = [...scopes];\n this.authContext\n .acquireTokenSilent({\n scopes: normalizedScopes,\n authority: (_a = this.config.auth) === null || _a === void 0 ? void 0 : _a.authority,\n redirectUri: ((_b = this.config.auth) === null || _b === void 0 ? void 0 : _b.redirectUri) ||\n window.location.origin,\n })\n .then((tokenResponse) => {\n resolve(tokenResponse.accessToken);\n })\n .catch(() => {\n var _a, _b;\n this.authContext.acquireTokenRedirect({\n scopes: normalizedScopes,\n authority: (_a = this.config.auth) === null || _a === void 0 ? void 0 : _a.authority,\n redirectUri: ((_b = this.config.auth) === null || _b === void 0 ? void 0 : _b.redirectUri) ||\n window.location.origin,\n });\n });\n });\n });\n }\n isIE() {\n const ua = window.navigator.userAgent;\n const msie = ua.indexOf('MSIE ') > -1;\n const msie11 = ua.indexOf('Trident/') > -1;\n return msie || msie11;\n }\n}\n//# sourceMappingURL=MSALClient.js.map","var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {\n function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }\n return new (P || (P = Promise))(function (resolve, reject) {\n function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }\n function rejected(value) { try { step(generator[\"throw\"](value)); } catch (e) { reject(e); } }\n function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }\n step((generator = generator.apply(thisArg, _arguments || [])).next());\n });\n};\nexport class UsageClient {\n constructor(httpClient, usageTelemetryConfig) {\n this.localStorageKey = '__Core.UserAttribute.UsageUserId__';\n this.sesionDurationConfig = '__Core.UserAttribute.sessionDurationConfig__';\n this.getUsageConfig = () => this.usageTelemetryConfig;\n this.usageTelemetryConfig = usageTelemetryConfig;\n this.httpClient = httpClient;\n }\n getUsageUserId() {\n return __awaiter(this, void 0, void 0, function* () {\n return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function* () {\n try {\n //TODO: ras1 => add redux support (06-20: Defered this from v3, as it involves, redux handles from client side)\n let usageUserId = '';\n if (this.usageTelemetryConfig.usageApi.cache ===\n 'localStorage') {\n usageUserId = localStorage.getItem(this.localStorageKey);\n localStorage.setItem(this.sesionDurationConfig, this.usageTelemetryConfig.sessionDurationMinutes.toString());\n }\n const invalidUserIds = [\n '',\n 'NOTFOUND',\n 'NOTUPNFOUND',\n 'ERROR',\n 'UNDEFINED',\n 'UNINITIALIZED',\n ];\n if (usageUserId &&\n invalidUserIds.indexOf(usageUserId.trim().toUpperCase()) < 0) {\n resolve(usageUserId);\n }\n else {\n const { data: content, } = yield this.httpClient.request({\n url: this.usageTelemetryConfig.usageApi.url,\n resource: this.usageTelemetryConfig.usageApi\n .resourceId,\n header: this.usageTelemetryConfig.usageApi\n .headers,\n }, { silentError: true });\n if (content && content.UsageUserId) {\n if (this.usageTelemetryConfig.usageApi.cache ===\n 'localStorage') {\n localStorage.setItem(this.localStorageKey, content.UsageUserId);\n }\n resolve(content.UsageUserId);\n }\n else {\n reject();\n }\n }\n }\n catch (_a) {\n reject();\n }\n }));\n });\n }\n}\n//# sourceMappingURL=UsageClient.js.map","import styled from 'styled-components';\nexport const HeaderRoot = styled.div `\n position: fixed;\n top: 0;\n width: 100%;\n z-index: 10000;\n`;\n//# sourceMappingURL=Header.styled.js.map","import { __assign } from \"tslib\";\nimport { CoherenceTheme, FontSizes } from '@cseo/styles';\nimport { CommandBarButton, css, mergeStyleSets, TooltipHost } from '@fluentui/react';\nimport React from 'react';\nexport function onRenderCommandBarButton(item) {\n var Styles = HeaderActionsStyles;\n var buttonClassName = item.renderedInOverflow ? Styles.rightItemButtonOverflow : Styles.rightItemButton;\n var buttonIconClassName = item.renderedInOverflow ? Styles.rightItemButtonOverflowIcon : Styles.rightItemButtonIcon;\n var requestedClassName = item.iconProps ? item.iconProps.className : undefined;\n var iconPropsClassName = requestedClassName ? css(requestedClassName, buttonIconClassName) : buttonIconClassName;\n var iconOnly = !item.renderedInOverflow;\n var itemText = item.text || item.name;\n var commandButtonProps = __assign(__assign({ allowDisabledFocus: true, role: 'menuitem' }, item), { text: !iconOnly ? itemText : undefined, checked: item.checked, menuProps: item.subMenuProps, iconProps: __assign(__assign({}, item.iconProps), { className: iconPropsClassName }), iconOnly: iconOnly, onClick: _onButtonClick(item), className: css('ms-CommandBarItem-link', buttonClassName, item.className), styles: __assign({ root: { height: '48px' }, label: { whiteSpace: 'nowrap', marginLeft: '10px' } }, item.buttonStyles), title: '' });\n if (itemText !== undefined) {\n return (React.createElement(TooltipHost, __assign({ content: itemText }, item.tooltipHostProps), _commandButton(item, commandButtonProps)));\n }\n return _commandButton(item, commandButtonProps);\n}\nfunction _commandButton(item, props) {\n if (item.commandBarButtonAs) {\n var Type = item.commandBarButtonAs;\n return React.createElement(Type, __assign({}, props));\n }\n return React.createElement(CommandBarButton, __assign({}, props));\n}\nfunction _onButtonClick(item) {\n return function (ev) {\n if (item.onClick) {\n item.onClick(ev, item);\n }\n };\n}\nvar buttonWidth = 48;\nexport var HeaderActionsStyles = mergeStyleSets({\n rightItemButton: {\n width: buttonWidth + 'px',\n height: buttonWidth + 'px',\n backgroundColor: 'transparent',\n selectors: {\n ':hover': {\n backgroundColor: CoherenceTheme.palette.themeDarkAlt,\n selectors: {\n '.notification-badge': {\n color: CoherenceTheme.palette.themeDarkAlt,\n backgroundColor: CoherenceTheme.palette.white\n }\n }\n },\n ':active': {\n backgroundColor: CoherenceTheme.palette.themeDarker,\n selectors: {\n '.notification-badge': {\n color: CoherenceTheme.palette.themeDarker,\n backgroundColor: CoherenceTheme.palette.white\n }\n }\n },\n '&.is-checked': {\n backgroundColor: CoherenceTheme.palette.themeDarker,\n selectors: {\n '.notification-badge': {\n color: CoherenceTheme.palette.themeDarker,\n backgroundColor: CoherenceTheme.palette.white\n }\n }\n }\n }\n },\n rightItemButtonOverflow: {\n width: '100%',\n height: buttonWidth + 'px',\n backgroundColor: CoherenceTheme.palette.white,\n color: CoherenceTheme.palette.neutralPrimary,\n textAlign: 'left'\n },\n rightItemButtonIcon: {\n color: CoherenceTheme.palette.white + ' !important',\n backgroundColor: 'transparent !important',\n fontSize: FontSizes.size16\n },\n rightItemButtonOverflowIcon: {\n color: CoherenceTheme.palette.neutralPrimary + ' !important',\n fontSize: FontSizes.size14,\n margin: '0px',\n paddingLeft: '14px'\n }\n});\n//# sourceMappingURL=CoherenceHeaderHelpers.js.map","import { DefaultTypography } from '@cseo/styles';\nimport { mergeStyles, mergeStyleSets } from '@fluentui/react';\nexport var getStyles = function (props) {\n var theme = props.theme;\n return {\n root: {},\n searchbox: {},\n autoSuggestDropdown: mergeStyles({\n displayName: 'AutoSuggestDropdownStyles',\n backgroundColor: theme.palette.white,\n boxShadow: '0px 3.2px 7.2px rgba(0, 0, 0, 0.132), 0px 0.6px 1.8px rgba(0, 0, 0, 0.108)',\n borderRadius: '2px'\n }),\n searchSuggestionList: mergeStyles({\n paddingTop: '8px'\n }),\n searchSuggestionItem: {},\n errorMessage: mergeStyles({\n displayName: 'EmptyDropDown',\n paddingTop: '16px',\n paddingBottom: '16px',\n alignContent: 'center',\n textAlign: 'center'\n }),\n suggestionCategoryHeader: mergeStyles(TypeHierarchy.base, {\n displayName: 'SuggestionCategoryHeader',\n height: '32px',\n paddingRight: '16px',\n paddingLeft: '16px'\n }),\n showMoreResultsLink: mergeStyles({\n textAlign: 'center',\n color: theme.palette.themeDark,\n height: '49px',\n borderTop: \"1px solid \" + theme.palette.neutralLighter,\n alignItems: 'center'\n })\n };\n};\nexport var searchBoxStyles = function (theme) {\n return {\n root: {\n backgroundColor: theme.palette.themeLighter,\n border: '1px solid transparent',\n selectors: {\n ':hover': {\n backgroundColor: theme.palette.white,\n border: '1px solid transparent'\n },\n ':focus-within': {\n backgroundColor: theme.palette.white,\n border: '1px solid transparent'\n },\n ':after': {\n top: '0px',\n bottom: '0px',\n left: '0px',\n right: '0px',\n border: '1px solid transparent'\n }\n }\n },\n field: {\n selectors: {\n '::placeholder': {\n color: theme.palette.themePrimary\n }\n }\n }\n };\n};\nexport var TypeHierarchy = mergeStyleSets({\n base: DefaultTypography.base,\n body: DefaultTypography.body,\n caption: DefaultTypography.caption\n});\nexport var EmptyDropDown = mergeStyles({\n displayName: 'EmptyDropDown',\n paddingTop: '16px',\n paddingBottom: '16px',\n alignContent: 'center',\n textAlign: 'center'\n});\nexport var SearchLoader = function (theme) {\n return mergeStyles(EmptyDropDown, {\n displayName: 'SearchLoader',\n color: theme.palette.themePrimary\n });\n};\nexport var SuggestionItemStyle = function (theme) {\n return {\n details: {\n paddingLeft: '12px'\n },\n primaryText: mergeStyles(TypeHierarchy.body, { color: theme.palette.neutralPrimary }),\n secondaryText: mergeStyles(TypeHierarchy.caption, { color: theme.palette.neutralSecondary })\n };\n};\nexport var sidePadding = mergeStyles({\n displayName: 'sidePadding',\n paddingRight: '16px',\n paddingLeft: '16px'\n});\nexport var suggestionRowHoverState = function (theme) {\n return mergeStyles({\n displayName: 'suggestionRowHoverState',\n selectors: {\n ':hover': {\n backgroundColor: theme.palette.neutralLighter\n }\n }\n });\n};\nexport var bottomBorder = function (theme) {\n return mergeStyles({\n displayName: 'bottomBorder',\n borderBottom: \"1px solid \" + theme.palette.neutralLighter\n });\n};\nexport var SuggestionRowStyle = mergeStyles({\n height: '49px',\n width: '-webkit-fill-available'\n});\nexport var suggestionRowCommandBtnStyles = function (theme) {\n return {\n flexContainer: {\n borderBottom: \"1px solid \" + theme.palette.neutralLighter\n },\n root: mergeStyles(sidePadding, SuggestionRowStyle, suggestionRowHoverState(theme))\n };\n};\nexport var RecentSearchBtnStyles = function (theme) {\n return {\n icon: {\n fontSize: '28px',\n marginLeft: '0px',\n marginRight: '16px',\n color: theme.palette.neutralPrimaryAlt\n },\n root: mergeStyles(sidePadding, SuggestionRowStyle, suggestionRowHoverState(theme)),\n flexContainer: {\n borderBottom: \"1px solid \" + theme.palette.neutralLighter\n }\n };\n};\nexport var zeroSidePadding = mergeStyles({\n displayName: 'zeroSidePadding',\n paddingLeft: '0px',\n paddingRight: '0px'\n});\nexport var fullSearchResultsSeparatorStyles = mergeStyles({\n displayName: 'fullSearchResultsSeparatorStyles',\n paddingTop: '0px',\n paddingBottom: '0px',\n height: '1px'\n});\nexport var RecentSearchText = function (theme) {\n return mergeStyles(DefaultTypography.body, {\n displayName: 'RecentSearchText',\n color: theme.palette.neutralPrimary,\n lineHeight: '19px'\n });\n};\nexport var SuggestionCategoryHeaderText = function (theme) {\n return mergeStyles(TypeHierarchy.base, {\n displayName: 'SuggestionCategoryHeaderText',\n color: theme.palette.neutralDark,\n lineHeight: '32px'\n });\n};\nexport var ShowMoreLinkStyles = mergeStyles({\n border: 'none',\n marginTop: '11px'\n});\nexport var SearchPersonaCoinStylesSqaure = {\n image: {\n borderRadius: 2\n },\n initials: {\n borderRadius: 2\n }\n};\nexport var SearchPersonaCoinStylesRound = {\n image: {\n borderRadius: 25\n },\n initials: {\n borderRadius: 25\n }\n};\nexport var divGlobalSearch = mergeStyles({\n displayName: 'divGlobalSearch',\n paddingTop: '4% !important',\n height: '90vh !important'\n});\nexport var announcedBGColor = function (theme) {\n return {\n screenReaderText: {\n backgroundColor: theme.palette.white\n }\n };\n};\n//# sourceMappingURL=GlobalSearch.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport { Persona, PersonaSize } from '@fluentui/react';\nimport React from 'react';\nimport { SearchPersonaCoinStylesRound, SearchPersonaCoinStylesSqaure, SuggestionItemStyle } from './GlobalSearch.styles';\nvar SearchPersona = (function (_super) {\n __extends(SearchPersona, _super);\n function SearchPersona() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n SearchPersona.prototype.render = function () {\n var _a = this.props, text = _a.text, secondaryText = _a.secondaryText, isPerson = _a.isPerson, imageUrl = _a.imageUrl, theme = _a.theme;\n var _isPerson = isPerson !== null && isPerson !== undefined ? isPerson : false;\n var personaProps = {\n text: text,\n secondaryText: (secondaryText !== null && secondaryText !== undefined) ? secondaryText : '',\n imageUrl: (imageUrl !== null && imageUrl !== undefined) ? imageUrl : ''\n };\n return (React.createElement(Persona, __assign({}, personaProps, { size: PersonaSize.size72, coinSize: 32, coinProps: { styles: _isPerson ? SearchPersonaCoinStylesRound : SearchPersonaCoinStylesSqaure }, styles: SuggestionItemStyle(theme), allowPhoneInitials: true })));\n };\n return SearchPersona;\n}(React.Component));\nexport { SearchPersona };\n//# sourceMappingURL=SearchPersona.js.map","import { __extends } from \"tslib\";\nimport { Announced, Callout, CommandButton, DirectionalHint, FocusZone, FocusZoneDirection, FontIcon, getFirstFocusable, getId, getLastFocusable, initializeComponentRef, KeyCodes, Link, mergeStyles, safeRequestAnimationFrame, Spinner, SpinnerSize, Stack, Text } from '@fluentui/react';\nimport React from 'react';\nimport { announcedBGColor, RecentSearchBtnStyles, RecentSearchText, SearchLoader, ShowMoreLinkStyles, SuggestionCategoryHeaderText, suggestionRowCommandBtnStyles } from './GlobalSearch.styles';\nimport { ErrorMessage } from './InternalGlobalSearch.types';\nimport { SearchPersona } from './SearchPersona';\nvar AutoSuggestDropdown = (function (_super) {\n __extends(AutoSuggestDropdown, _super);\n function AutoSuggestDropdown(props) {\n var _this = _super.call(this, props) || this;\n _this._focusZone = React.createRef();\n _this._host = React.createRef();\n _this._requestAnimationFrame = safeRequestAnimationFrame(_this);\n _this._onRenderRecentSearchRow = function (recentSearchItem, index) {\n return (React.createElement(Stack, { grow: true, verticalFill: true, key: recentSearchItem.id + index },\n React.createElement(CommandButton, { key: 'recentSearch' + index + recentSearchItem.text, iconProps: { iconName: 'Clock' }, className: mergeStyles(_this.props.styles.searchSuggestionItem), styles: RecentSearchBtnStyles(_this.props.theme), ariaLabel: recentSearchItem.text, role: 'link', \"data-is-focusable\": true, onClick: function () { return _this._onClickSuggestion(recentSearchItem); } },\n React.createElement(\"div\", { className: RecentSearchText(_this.props.theme) }, recentSearchItem.text))));\n };\n _this._onRenderSuggestionsList = function (suggestions, recentSearchTexts) {\n return (React.createElement(Stack, { grow: true, verticalFill: true },\n React.createElement(\"div\", null, recentSearchTexts.map(function (text, index) {\n return _this._onRenderRecentSearchRow(text, index);\n })),\n React.createElement(\"div\", null, suggestions.map(function (obj) {\n var category = obj.category !== null && obj.category !== undefined ? obj.category : '';\n var _suggestionItems = obj.suggestions.slice(0, _this.props.suggestionsCount);\n return React.createElement(Stack, { grow: true, verticalFill: true, className: mergeStyles(_this.props.styles.searchSuggestionList), key: category },\n React.createElement(\"div\", { className: mergeStyles(_this.props.styles.suggestionCategoryHeader) },\n React.createElement(Text, { className: SuggestionCategoryHeaderText(_this.props.theme), id: category }, category)),\n _suggestionItems.map(function (x, index) {\n return (React.createElement(CommandButton, { key: 'searchsuggestion' + index + x.text, className: mergeStyles(_this.props.styles.searchSuggestionItem), styles: suggestionRowCommandBtnStyles(_this.props.theme), role: 'link', ariaLabel: x.text, \"data-is-focusable\": true, \"aria-describedby\": category, onClick: function () { return _this._onClickSuggestion(x, category); } },\n React.createElement(SearchPersona, { key: x.text, text: x.text, secondaryText: x.secondaryText, isPerson: x.isPerson, imageUrl: x.imageUrl, theme: _this.props.theme })));\n }));\n })),\n suggestions.length > 0 &&\n React.createElement(\"div\", { className: mergeStyles(_this.props.styles.showMoreResultsLink) },\n React.createElement(Link, { className: ShowMoreLinkStyles, onClick: _this._onShowMoreResults, role: 'link', \"aria-label\": 'Show more results' }, \"Show more results\"))));\n };\n _this._onClickSuggestion = function (suggestion, category) {\n if (_this.props.OnClickSuggestionItem) {\n _this.props.OnClickSuggestionItem(suggestion, category);\n }\n };\n _this._onShowMoreResults = function () {\n if (_this.props.OnShowMoreResults) {\n _this.props.OnShowMoreResults();\n }\n };\n _this._onZoneKeyDown = function (ev) {\n var elementToFocus;\n var containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n switch (ev.which) {\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n _this.props.CloseAutosuggest();\n }\n else {\n if (_this._host.current) {\n elementToFocus = getLastFocusable(_this._host.current, _this._host.current.lastChild, true);\n }\n }\n break;\n case KeyCodes.home:\n case KeyCodes.end:\n case KeyCodes.pageUp:\n case KeyCodes.pageDown:\n break;\n case KeyCodes.enter:\n return;\n case KeyCodes.down:\n if (!containsExpandCollapseModifier && _this._host.current) {\n elementToFocus = getFirstFocusable(_this._host.current, _this._host.current.firstChild, true);\n }\n break;\n case KeyCodes.escape:\n _this.props.CloseAutosuggest();\n break;\n case KeyCodes.tab:\n _this.props.CloseAutosuggest();\n return;\n default:\n return;\n }\n if (elementToFocus) {\n elementToFocus.focus();\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this.focus = function () {\n if (_this._focusZone.current) {\n _this._requestAnimationFrame(function () {\n if (_this._focusZone.current) {\n _this._focusZone.current.focus();\n }\n });\n }\n };\n initializeComponentRef(_this);\n return _this;\n }\n AutoSuggestDropdown.prototype.render = function () {\n var _a = this.props, recentSearchTexts = _a.recentSearchTexts, target = _a.target, suggestions = _a.suggestions, isLoading = _a.isLoading, showSearchSuggestions = _a.showSearchSuggestions, OnCalloutDismissCallback = _a.OnCalloutDismissCallback, isError = _a.isError, errorMessage = _a.errorMessage, recentSearchTextsCount = _a.recentSearchTextsCount, searchCategoryCount = _a.searchCategoryCount, id = _a.id, styles = _a.styles, theme = _a.theme;\n var _recentSearchTexts = (recentSearchTexts && recentSearchTexts.length > 0) ? recentSearchTexts.slice(0, recentSearchTextsCount) : [];\n var _suggestions = (suggestions && suggestions.length > 0) ? suggestions.slice(0, searchCategoryCount) : [];\n var _isLoading = (isLoading === null || isLoading === undefined) ? false : isLoading;\n var _isError = (isError === null || isError === undefined) ? false : isError;\n var _errorMessage = (errorMessage === null || errorMessage === undefined || errorMessage === '') ? ErrorMessage : errorMessage;\n var _id = (id !== null || id !== undefined) ? id : getId();\n return React.createElement(Callout, { id: _id, isBeakVisible: false, gapSpace: 6, doNotLayer: false, directionalHintFixed: true, directionalHint: DirectionalHint.bottomLeftEdge, minPagePadding: 0, coverTarget: false, target: target.current, alignTargetEdge: false, onDismiss: OnCalloutDismissCallback, className: mergeStyles(styles.autoSuggestDropdown), calloutWidth: target.current ? target.current.clientWidth : 0, role: \"dialog\", \"aria-label\": \"Search dialog\" },\n _suggestions.length > 0 && React.createElement(Announced, { styles: announcedBGColor(theme), message: _suggestions.length + ' search results found' }),\n React.createElement(\"div\", { id: 'autoSuggestdropdownCallout', onKeyDown: this._onZoneKeyDown, ref: this._host },\n React.createElement(FocusZone, { direction: FocusZoneDirection.vertical, ref: this._focusZone }, _isError ?\n React.createElement(\"div\", { className: mergeStyles(styles.errorMessage) },\n React.createElement(FontIcon, { iconName: 'Warning' }),\n React.createElement(Text, { variant: 'medium' }, _errorMessage))\n :\n _isLoading\n ?\n React.createElement(\"div\", null,\n React.createElement(Spinner, { className: SearchLoader(theme), size: SpinnerSize.small, label: 'Loading...', ariaLive: 'polite', labelPosition: 'right' }))\n : showSearchSuggestions\n ? this._onRenderSuggestionsList(_suggestions, _recentSearchTexts)\n : React.createElement(React.Fragment, null))));\n };\n return AutoSuggestDropdown;\n}(React.Component));\nexport { AutoSuggestDropdown };\n//# sourceMappingURL=AutoSuggestDropdown.js.map","import { __spreadArrays } from \"tslib\";\nvar _recentSearchTexts = [];\nexport function GetRecentSearchTexts() {\n return __spreadArrays(_recentSearchTexts);\n}\nexport function SetRecentSearchTexts(recentSearches, count) {\n _recentSearchTexts = recentSearches.splice(0, count);\n return __spreadArrays(_recentSearchTexts);\n}\nexport var ErrorMessage = 'Some error occurred. Please try again';\n//# sourceMappingURL=InternalGlobalSearch.types.js.map","import { __extends } from \"tslib\";\nimport { classNamesFunction, getId, KeyCodes, SearchBox } from '@fluentui/react';\nimport React from 'react';\nimport { AutoSuggestDropdown } from './AutoSuggestDropdown';\nimport { searchBoxStyles } from './GlobalSearch.styles';\nimport { GetOnSearchDetailsView, RecentSearchTextsCount, SearchSuggestionCount, TotalSearchCategoryCount } from './GlobalSearch.types';\nvar getClassNames = classNamesFunction();\nvar GlobalSearchBase = (function (_super) {\n __extends(GlobalSearchBase, _super);\n function GlobalSearchBase(props) {\n var _this = _super.call(this, props) || this;\n _this.searchRootRef = React.createRef();\n _this.searchInputRef = React.createRef();\n _this._autoSuggestionRef = React.createRef();\n _this._getPlaceholderText = function () {\n if (_this.props.placeholder)\n return _this.props.placeholder;\n else if (_this.props.headerLabel)\n return 'Search ' + _this.props.headerLabel;\n return 'Search app';\n };\n _this._onSearchCallback = function (newSearchText) {\n if (newSearchText !== '') {\n _this.setState({\n isOpen: false,\n searchText: newSearchText,\n showSearchSuggestions: true\n }, function () {\n if (_this.props.onSearch) {\n _this.props.onSearch(newSearchText);\n }\n if (_this.props.onShowMoreResultsCallback) {\n _this.props.onShowMoreResultsCallback(newSearchText);\n }\n });\n }\n };\n _this._onChangeCallback = function (event, newSearchText) {\n if (newSearchText !== '') {\n _this.setState({\n isOpen: !GetOnSearchDetailsView(),\n searchText: newSearchText,\n showSearchSuggestions: true\n }, function () {\n if (_this.props.onChange && !GetOnSearchDetailsView()) {\n _this.props.onChange(event, newSearchText);\n }\n else if (_this.props.onShowMoreResultsCallback) {\n _this.props.onShowMoreResultsCallback(newSearchText !== null && newSearchText !== undefined ? newSearchText : '');\n }\n });\n }\n };\n _this._onBlurCallback = function () {\n if (_this.state.isOpen) {\n return;\n }\n if (GetOnSearchDetailsView()) {\n _this.setState({\n isOpen: false,\n showSearchSuggestions: false,\n isError: false\n });\n }\n else {\n _this.setState({\n isOpen: false,\n searchText: '',\n showSearchSuggestions: false,\n isError: false\n });\n }\n if (_this.props.OnBlurCallback !== undefined) {\n _this.props.OnBlurCallback();\n }\n };\n _this._onClearCallback = function () {\n _this.setState({\n searchText: '',\n showSearchSuggestions: false,\n isError: false\n });\n if (_this.props && _this.props.onClear) {\n _this.props.onClear();\n }\n };\n _this._onFocusCallback = function () {\n var _a;\n if (!_this.state.isOpen) {\n _this.setState({\n isOpen: true,\n showSearchSuggestions: true\n });\n if (_this.props && _this.props.OnFocusCallback) {\n _this.props.OnFocusCallback();\n }\n (_a = _this.searchInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n };\n _this._onCalloutDismissCallback = function () {\n _this.setState({\n isOpen: false,\n showSearchSuggestions: false,\n isError: false\n }, function () {\n _this._onBlurCallback();\n });\n };\n _this._closeAutosuggestDropdown = function () {\n _this.setState({\n isOpen: false,\n showSearchSuggestions: false,\n isError: false\n });\n };\n _this._onShowMoreResultsClick = function () {\n _this.setState({\n isOpen: false\n }, function () {\n if (_this.props.onShowMoreResultsCallback && _this.state.searchText) {\n _this.props.onShowMoreResultsCallback(_this.state.searchText);\n }\n });\n };\n _this._onClickSuggestionItem = function (item, category) {\n _this.setState({\n isOpen: false\n }, function () {\n if (_this.props.OnClickSuggestionItem) {\n _this.props.OnClickSuggestionItem(item, category);\n }\n });\n };\n _this._onDropdownKeyDown = function (ev) {\n var _a, _b;\n var isOpen = _this.state.isOpen;\n switch (ev.which) {\n case KeyCodes.enter:\n _this.setState({\n isOpen: !isOpen\n });\n break;\n case KeyCodes.escape:\n if (!isOpen) {\n return;\n }\n _this.setState({\n isOpen: false\n });\n break;\n case KeyCodes.up:\n if (isOpen) {\n _this.setState({ isOpen: false });\n break;\n }\n return;\n case KeyCodes.down:\n if (isOpen) {\n (_a = _this._autoSuggestionRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n else {\n (_b = _this.searchInputRef.current) === null || _b === void 0 ? void 0 : _b.focus();\n }\n ev.stopPropagation();\n ev.preventDefault();\n break;\n case KeyCodes.home:\n break;\n case KeyCodes.end:\n break;\n case KeyCodes.space:\n break;\n case KeyCodes.tab:\n break;\n default:\n }\n };\n _this._id = getId();\n _this._autoSuggestDropdownId = 'autoSuggestionDropDown' + _this._id;\n _this.state = {\n isOpen: false,\n searchText: undefined,\n showSearchSuggestions: false,\n isError: (_this.props.isError !== null && _this.props.isError !== undefined) ? _this.props.isError : false\n };\n return _this;\n }\n GlobalSearchBase.prototype.componentWillReceiveProps = function (nextProps) {\n if ((this.props.isError !== nextProps.isError) || (!GetOnSearchDetailsView() && !this.state.isOpen)) {\n this.setState({\n isError: (nextProps.isError !== null && nextProps !== undefined) ? nextProps.isError : false,\n searchText: !GetOnSearchDetailsView() && !this.state.isOpen ? '' : this.state.searchText\n });\n }\n };\n GlobalSearchBase.prototype.render = function () {\n var _a = this.props, isLoading = _a.isLoading, recentSearchTexts = _a.recentSearchTexts, suggestions = _a.suggestions, errorMessage = _a.errorMessage, onEscape = _a.onEscape, disabled = _a.disabled, styles = _a.styles, theme = _a.theme, iconProps = _a.iconProps;\n var _b = this.state, searchText = _b.searchText, isOpen = _b.isOpen, showSearchSuggestions = _b.showSearchSuggestions, isError = _b.isError;\n var _theme = theme;\n var classNames = getClassNames(styles, { theme: _theme });\n return (React.createElement(\"div\", { role: \"search\" },\n React.createElement(\"div\", { ref: this.searchRootRef, onFocus: this._onFocusCallback, onBlur: this._onBlurCallback, \"aria-owns\": isOpen ? this._autoSuggestDropdownId : undefined, \"data-is-focusable\": true, onKeyDown: this._onDropdownKeyDown, className: classNames.root, id: 'coherenceSearchBase' },\n React.createElement(\"label\", { htmlFor: 'searchbox', style: { display: 'none' } }, this._getPlaceholderText()),\n React.createElement(SearchBox, { id: 'searchbox', componentRef: this.searchInputRef, disabled: disabled, placeholder: this._getPlaceholderText(), onSearch: this._onSearchCallback, onChange: this._onChangeCallback, onClear: this._onClearCallback, onEscape: onEscape, styles: searchBoxStyles(_theme), value: searchText, className: classNames.searchbox, iconProps: iconProps })),\n isOpen ?\n React.createElement(AutoSuggestDropdown, { target: this.searchRootRef, id: this._autoSuggestDropdownId, showSearchSuggestions: showSearchSuggestions, recentSearchTexts: recentSearchTexts, suggestions: (suggestions !== null && suggestions !== undefined) ? suggestions : [], isLoading: isLoading, OnCalloutDismissCallback: this._onCalloutDismissCallback, OnClickSuggestionItem: this._onClickSuggestionItem, OnShowMoreResults: this._onShowMoreResultsClick, isError: isError, errorMessage: errorMessage, recentSearchTextsCount: RecentSearchTextsCount, searchCategoryCount: TotalSearchCategoryCount, suggestionsCount: SearchSuggestionCount, CloseAutosuggest: this._closeAutosuggestDropdown, componentRef: this._autoSuggestionRef, styles: classNames, theme: _theme })\n :\n React.createElement(React.Fragment, null)));\n };\n return GlobalSearchBase;\n}(React.Component));\nexport { GlobalSearchBase };\n//# sourceMappingURL=GlobalSearch.base.js.map","export var RecentSearchTextsCount = 3;\nexport var SearchSuggestionCount = 2;\nexport var TotalSearchCategoryCount = 5;\nvar _onSearchDetailsView = false;\nexport function GetOnSearchDetailsView() {\n return _onSearchDetailsView;\n}\nexport function SetOnsearchDetailsView(onView) {\n _onSearchDetailsView = onView;\n}\n//# sourceMappingURL=GlobalSearch.types.js.map","import { styled } from '@fluentui/react';\nimport { GlobalSearchBase } from './GlobalSearch.base';\nimport { getStyles } from './GlobalSearch.styles';\nexport var GlobalSearch = styled(GlobalSearchBase, getStyles);\n//# sourceMappingURL=GlobalSearch.js.map","import { __assign, __extends } from \"tslib\";\nimport { memoizeFunction, mergeStyleSets } from '@fluentui/react';\nimport React from 'react';\nimport { onRenderCommandBarButton } from '../Common/CoherenceHeaderHelpers';\nimport { GlobalSearch } from './GlobalSearch/GlobalSearch';\nvar SearchBoxOverlay = (function (_super) {\n __extends(SearchBoxOverlay, _super);\n function SearchBoxOverlay() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._searchBoxRef = React.createRef();\n _this._onSearch = function (value) {\n var _a = _this.props, dismissOnSearch = _a.dismissOnSearch, onClose = _a.onClose, searchBoxProps = _a.searchBoxProps;\n if (searchBoxProps && searchBoxProps.onSearch) {\n searchBoxProps.onSearch(value);\n }\n if (dismissOnSearch !== false) {\n onClose();\n }\n };\n _this._onChange = function (event, value) {\n var _a = _this.props, dismissOnSearch = _a.dismissOnSearch, onClose = _a.onClose, searchBoxProps = _a.searchBoxProps;\n if (searchBoxProps && searchBoxProps.onChange) {\n searchBoxProps.onChange(event, value);\n }\n if (dismissOnSearch !== false) {\n onClose();\n }\n };\n _this._onClear = function () {\n var _a = _this.props, dismissOnClear = _a.dismissOnClear, onClose = _a.onClose, searchBoxProps = _a.searchBoxProps;\n if (searchBoxProps && searchBoxProps.onClear) {\n searchBoxProps.onClear();\n }\n if (dismissOnClear !== false) {\n onClose();\n }\n };\n _this._onEscape = function () {\n var _a = _this.props, searchBoxProps = _a.searchBoxProps, onClose = _a.onClose;\n if (searchBoxProps && searchBoxProps.onEscape) {\n searchBoxProps.onEscape();\n }\n onClose();\n };\n _this._getStyles = function () {\n return getStylesInternal();\n };\n return _this;\n }\n SearchBoxOverlay.prototype.componentDidMount = function () {\n if (this._searchBoxRef.current) {\n this._searchBoxRef.current.focus();\n }\n };\n SearchBoxOverlay.prototype.render = function () {\n var _a = this.props, searchBoxProps = _a.searchBoxProps, onClose = _a.onClose;\n var Styles = this._getStyles();\n return (React.createElement(\"div\", { className: Styles.root },\n React.createElement(\"div\", { className: Styles.searchBoxRoot },\n React.createElement(GlobalSearch, __assign({}, searchBoxProps, { onSearch: this._onSearch, onChange: this._onChange, onClear: this._onClear, onEscape: this._onEscape, placeholder: searchBoxProps && searchBoxProps.placeholder ? searchBoxProps.placeholder : 'Search' }))),\n React.createElement(\"div\", { className: Styles.closeButtonRoot }, onRenderCommandBarButton({\n key: 'CloseSearch',\n ariaLabel: 'Close search',\n iconOnly: true,\n iconProps: {\n iconName: 'ChromeClose'\n },\n onClick: onClose\n }))));\n };\n return SearchBoxOverlay;\n}(React.Component));\nexport { SearchBoxOverlay };\nvar buttonWidth = 48;\nvar getStylesInternal = memoizeFunction(function () {\n return mergeStyleSets({\n root: {\n width: '100%',\n display: 'grid',\n gridTemplateColumns: '1fr ' + buttonWidth + 'px',\n justifyContent: 'center'\n },\n searchBoxRoot: {\n marginLeft: '8px',\n alignSelf: 'center'\n },\n closeButtonRoot: {}\n });\n});\n//# sourceMappingURL=SearchBoxOverlay.js.map","import { __assign, __extends, __spreadArrays } from \"tslib\";\nimport { CoherenceTheme, FontSizes } from '@cseo/styles';\nimport { CommandBarButton, css, initializeIcons, Link, memoizeFunction, mergeStyleSets, OverflowSet, ResizeGroup } from '@fluentui/react';\nimport React from 'react';\nimport { HeaderActionsStyles, onRenderCommandBarButton } from '../Common/CoherenceHeaderHelpers';\nimport { GlobalSearch } from './GlobalSearch/GlobalSearch';\nimport { SearchBoxOverlay } from './SearchBoxOverlay';\nvar buttonWidth = 48;\nvar getStylesInternal = memoizeFunction(function (numRightItems, theme) {\n return mergeStyleSets({\n root: {\n backgroundColor: theme ? theme.palette.themePrimary : CoherenceTheme.palette.themePrimary,\n fontFamily: \"'Segoe UI', 'Segoe UI Web(West European)', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Roboto', 'Helvetica Neue', 'sans-serif'\",\n alignItems: 'center',\n height: '48px',\n overflow: 'hidden',\n display: 'grid',\n gridTemplateColumns: '1fr 468px 1fr',\n selectors: {\n '@media (min-width:1366px) and (max-width: 1920px)': {\n gridTemplateColumns: '1fr 468px 1fr'\n },\n '@media (min-width:1024px) and (max-width: 1365px)': {\n gridTemplateColumns: '1fr 468px 1fr'\n },\n '@media (min-width:640px) and (max-width: 1023px)': {\n gridTemplateColumns: '1fr 274px 1fr'\n },\n '@media (min-width: 320px) and (max-width: 639px)': {\n gridTemplateColumns: '1fr ' + buttonWidth + 'px ' + (numRightItems * buttonWidth) + 'px'\n },\n '@media (max-width: 320px)': {\n gridTemplateColumns: '1fr ' + buttonWidth + 'px ' + (numRightItems * buttonWidth) + 'px'\n }\n }\n },\n titleContainer: {\n height: '100%',\n paddingLeft: '16px',\n paddingRight: '12px',\n alignSelf: 'center',\n fontSize: '16px',\n overflow: 'hidden',\n minWidth: '160px',\n display: 'flex',\n alignItems: 'center'\n },\n searchBoxContainer: {\n alignSelf: 'center'\n },\n floatingSearchRoot: {\n width: '100%',\n backgroundColor: theme ? theme.palette.themePrimary : CoherenceTheme.palette.themePrimary\n },\n rightItemsContainer: {\n height: '48px',\n overflow: 'hidden'\n },\n overflowSet: {}\n });\n});\nvar resizeGroupStyles = {\n flex: 1,\n overflow: 'hidden'\n};\nvar actionsGroupResizeGroupContainer = {\n display: 'flex',\n justifyContent: 'flex-end'\n};\nvar actionsGroupOverflowSetStyles = {\n root: {\n justifyContent: 'flex-end'\n }\n};\ninitializeIcons();\nvar HeaderBanner = (function (_super) {\n __extends(HeaderBanner, _super);\n function HeaderBanner(props) {\n var _this = _super.call(this, props) || this;\n _this._actionsResizeGroup = React.createRef();\n _this._onRenderSearchBoxData = function (data) {\n var _a = _this.props, searchBoxProps = _a.searchBoxProps, headerLabel = _a.headerLabel;\n if (data.renderState === 'ButtonOnly') {\n return (onRenderCommandBarButton({\n key: 'Search button',\n name: 'Search',\n ariaLabel: 'Search button. Select to activate search box.',\n iconProps: {\n iconName: 'Search'\n },\n onClick: _this._onSearchOverlayOpen\n }));\n }\n else {\n return (React.createElement(GlobalSearch, __assign({ role: \"search\" }, searchBoxProps, { headerLabel: headerLabel, suggestions: ((searchBoxProps === null || searchBoxProps === void 0 ? void 0 : searchBoxProps.suggestions) !== null && (searchBoxProps === null || searchBoxProps === void 0 ? void 0 : searchBoxProps.suggestions) !== undefined) ? searchBoxProps === null || searchBoxProps === void 0 ? void 0 : searchBoxProps.suggestions : [], onSearch: _this._onSearch, onChange: _this._onChange })));\n }\n };\n _this._onSearch = function (newValue) {\n var searchBoxProps = _this.props.searchBoxProps;\n _this.setState({\n searchText: newValue\n });\n if (searchBoxProps && searchBoxProps.onSearch) {\n searchBoxProps.onSearch(newValue);\n }\n };\n _this._onChange = function (event, newValue) {\n var searchBoxProps = _this.props.searchBoxProps;\n _this.setState({\n searchText: newValue\n });\n if (searchBoxProps && searchBoxProps.onChange) {\n searchBoxProps.onChange(event, newValue);\n }\n };\n _this._onRenderActionsGroup = function (data) {\n var overflowSetProps = _this.props.overflowSetProps;\n var Styles = _this._getStyles();\n return (React.createElement(OverflowSet, __assign({}, overflowSetProps, { role: undefined, doNotContainWithinFocusZone: true, className: Styles.overflowSet, items: data.primaryItems, overflowItems: data.overflowItems, onRenderItem: onRenderCommandBarButton, onRenderOverflowButton: _this._onRenderActionsOverflowButton, styles: actionsGroupOverflowSetStyles })));\n };\n _this._onSearchBoxReduceData = function (data) {\n var renderState = data.renderState;\n if (renderState !== 'ButtonOnly') {\n var newData = __assign(__assign({}, data), { renderState: 'ButtonOnly' });\n newData.cacheKey = _this._computeSearchBoxCacheKey(newData);\n return newData;\n }\n return undefined;\n };\n _this._onSearchBoxGrowData = function (data) {\n var renderState = data.renderState;\n if (renderState !== 'SearchBox') {\n var newData = __assign(__assign({}, data), { renderState: 'SearchBox' });\n newData.cacheKey = _this._computeSearchBoxCacheKey(newData);\n return newData;\n }\n return undefined;\n };\n _this._onSearchOverlayOpen = function () {\n _this.setState({ isFloatingSearchVisible: true });\n };\n _this._onSearchOverlayClose = function () {\n _this.setState({ isFloatingSearchVisible: false });\n };\n _this._onSearchChange = function (event, value) {\n var searchBoxProps = _this.props.searchBoxProps;\n _this.setState({ searchText: value });\n if (searchBoxProps && searchBoxProps.onChange) {\n searchBoxProps.onChange(event, value);\n }\n };\n _this._onSearchClear = function () {\n var searchBoxProps = _this.props.searchBoxProps;\n _this.setState({ searchText: undefined });\n if (searchBoxProps && searchBoxProps.onClear) {\n searchBoxProps.onClear();\n }\n };\n _this._onRenderActionsOverflowButton = function (overflowItems) {\n var combinedOverflowItems = overflowItems.map(function (x) { return (__assign(__assign({}, x), { renderedInOverflow: true, onRender: onRenderCommandBarButton })); });\n var overflowProps = {\n id: 'coher-header-overflow-button-id',\n checked: overflowItems.some(function (i) { return i.checked === true; }),\n ariaLabel: 'Access additional app options. Select to open menu',\n className: css('ms-CommandBar-overflowButton', HeaderActionsStyles.rightItemButton),\n menuProps: { items: combinedOverflowItems, isBeakVisible: false },\n menuIconProps: {\n iconName: 'More',\n className: HeaderActionsStyles.rightItemButtonIcon\n },\n styles: {\n menuIcon: {\n color: (_this.props.theme ? _this.props.theme.palette.white : CoherenceTheme.palette.white) + ' !important',\n backgroundColor: 'transparent !important',\n fontSize: FontSizes.size16\n }\n }\n };\n return React.createElement(CommandBarButton, __assign({}, overflowProps));\n };\n _this._onActionsReduceData = function (data) {\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems;\n if (primaryItems && primaryItems.length) {\n var movedItems = primaryItems.map(function (x) { return (__assign(__assign({}, x), { renderedInOverflow: true })); });\n var newData = __assign(__assign({}, data), { primaryItems: [], overflowItems: __spreadArrays(overflowItems, movedItems) });\n newData.cacheKey = _this._computeActionsCacheKey(newData);\n return newData;\n }\n return undefined;\n };\n _this._onActionsGrowData = function (data) {\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems;\n if (overflowItems && overflowItems.length) {\n var movedItems = overflowItems.map(function (x) { return (__assign(__assign({}, x), { renderedInOverflow: false })); });\n var newData = __assign(__assign({}, data), { primaryItems: __spreadArrays(primaryItems, movedItems), overflowItems: [] });\n newData.cacheKey = _this._computeActionsCacheKey(newData);\n return newData;\n }\n return undefined;\n };\n _this._getActionsCount = function () {\n var actions = _this.props.actions;\n var count = 0;\n if (actions && actions.flexItems && actions.flexItems.length) {\n count++;\n }\n if (actions && actions.staticItems && actions.staticItems.length) {\n count++;\n }\n return count;\n };\n _this._getStyles = function () {\n return getStylesInternal(_this._getActionsCount(), _this.props.theme);\n };\n _this.state = {\n isFloatingSearchVisible: false,\n searchText: undefined\n };\n return _this;\n }\n HeaderBanner.prototype.render = function () {\n if (this.state.isFloatingSearchVisible) {\n return this._renderFloatingSearchBox();\n }\n else {\n var Styles = this._getStyles();\n return (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: Styles.root, role: 'banner', \"aria-label\": this.props.headerLabel },\n React.createElement(\"div\", { className: Styles.titleContainer }, this._renderAppName()),\n React.createElement(\"div\", { className: Styles.searchBoxContainer }, this._renderSearchBox()),\n React.createElement(\"div\", { className: Styles.rightItemsContainer, role: 'menubar' }, this._renderActionsGroup()))));\n }\n };\n HeaderBanner.prototype.remeasure = function () {\n if (this._actionsResizeGroup.current) {\n this._actionsResizeGroup.current.remeasure();\n }\n };\n HeaderBanner.prototype._renderAppName = function () {\n var appNameSettings = this.props.appNameSettings;\n if (!appNameSettings || !appNameSettings.label) {\n return null;\n }\n return (React.createElement(Link, __assign({ href: appNameSettings.linkUrl || '/', \"aria-label\": appNameSettings.ariaLabel }, appNameSettings.linkProps), appNameSettings.label));\n };\n HeaderBanner.prototype._renderSearchBox = function () {\n var searchBoxProps = this.props.searchBoxProps;\n if (!searchBoxProps || !searchBoxProps.enabled) {\n return null;\n }\n else if (searchBoxProps.onRender) {\n return searchBoxProps.onRender();\n }\n var searchBoxData = {\n renderState: 'SearchBox',\n cacheKey: ''\n };\n return (React.createElement(ResizeGroup, { data: searchBoxData, onReduceData: this._onSearchBoxReduceData, onGrowData: this._onSearchBoxGrowData, onRenderData: this._onRenderSearchBoxData, style: resizeGroupStyles }));\n };\n HeaderBanner.prototype._renderFloatingSearchBox = function () {\n var _a = this.props, searchBoxProps = _a.searchBoxProps, headerLabel = _a.headerLabel;\n var searchText = this.state.searchText;\n var Styles = this._getStyles();\n return (React.createElement(\"div\", { className: Styles.floatingSearchRoot },\n React.createElement(SearchBoxOverlay, { searchBoxProps: __assign(__assign({}, searchBoxProps), { onChange: this._onSearchChange, onClear: this._onSearchClear, value: searchText, headerLabel: headerLabel, suggestions: ((searchBoxProps === null || searchBoxProps === void 0 ? void 0 : searchBoxProps.suggestions) !== null && (searchBoxProps === null || searchBoxProps === void 0 ? void 0 : searchBoxProps.suggestions) !== undefined) ? searchBoxProps === null || searchBoxProps === void 0 ? void 0 : searchBoxProps.suggestions : [] }), onClose: this._onSearchOverlayClose, dismissOnClear: false, dismissOnSearch: false })));\n };\n HeaderBanner.prototype._renderActionsGroup = function () {\n var actions = this.props.actions;\n var hasActions = actions && ((actions.flexItems && actions.flexItems.length) || (actions.staticItems && actions.staticItems.length));\n if (!hasActions) {\n return null;\n }\n var actionsData = {\n primaryItems: actions && actions.flexItems ? __spreadArrays(actions.flexItems) : [],\n overflowItems: [],\n cacheKey: ''\n };\n var staticActions = undefined;\n if (actions && actions.staticItems && actions.staticItems.length) {\n staticActions = actions.staticItems.map(function (x) { return onRenderCommandBarButton(x); });\n }\n return (React.createElement(\"div\", { style: actionsGroupResizeGroupContainer },\n React.createElement(ResizeGroup, { componentRef: this._actionsResizeGroup, data: actionsData, onReduceData: this._onActionsReduceData, onGrowData: this._onActionsGrowData, onRenderData: this._onRenderActionsGroup, style: resizeGroupStyles }),\n React.createElement(\"div\", null, staticActions)));\n };\n HeaderBanner.prototype._computeSearchBoxCacheKey = function (data) {\n var renderState = data.renderState;\n return renderState + '';\n };\n HeaderBanner.prototype._computeActionsCacheKey = function (data) {\n var primaryItems = data.primaryItems, overflowItems = data.overflowItems;\n var returnKey = function (acc, current) {\n var cacheKey = current.cacheKey || current.key;\n return acc + cacheKey;\n };\n var primaryKey = primaryItems.reduce(returnKey, '');\n var overflowKey = overflowItems.length ? 'overflow' : '';\n return [primaryKey, overflowKey].join(' ');\n };\n return HeaderBanner;\n}(React.Component));\nexport { HeaderBanner };\n//# sourceMappingURL=HeaderBanner.js.map","export var HeaderPanel;\n(function (HeaderPanel) {\n HeaderPanel[\"ProfilePanel\"] = \"ProfilePanel\";\n HeaderPanel[\"SettingsPanel\"] = \"SettingsPanel\";\n HeaderPanel[\"HelpPanel\"] = \"HelpPanel\";\n HeaderPanel[\"NotificationPanel\"] = \"NotificationPanel\";\n HeaderPanel[\"FeedbackPanel\"] = \"FeedbackPanel\";\n})(HeaderPanel || (HeaderPanel = {}));\n//# sourceMappingURL=Header.types.js.map","import { __assign } from \"tslib\";\nimport { CoherenceTheme } from '@cseo/styles';\nimport { FontWeights, mergeStyleSets, Text } from '@fluentui/react';\nimport React from 'react';\nvar badgeBase = {\n position: 'absolute',\n height: '16px',\n minWidth: '16px',\n borderRadius: '8px',\n fontSize: '10px',\n fontWeight: FontWeights.semibold,\n lineHeight: 16,\n textAlign: 'center',\n paddingLeft: '3px',\n paddingRight: '3px',\n backgroundColor: CoherenceTheme.palette.themeDarker,\n color: CoherenceTheme.palette.white,\n top: '-16px'\n};\nvar Styles = mergeStyleSets({\n badgeContainer: {\n position: 'relative'\n },\n badgeSingleDigit: __assign(__assign({}, badgeBase), { minWidth: '10px', right: '-4px' }),\n badgeDoubleDigits: __assign(__assign({}, badgeBase), { right: '-8px' }),\n badgeTripleDigits: __assign(__assign({}, badgeBase), { right: '-10px' })\n});\nexport function NotificationControl(newItemCount, isPanelOpen, onClickFunction, title, ariaLabel) {\n var ariaLabelText = (newItemCount > 0 && newItemCount <= 99) ? newItemCount + \" new notification\" + (newItemCount !== 1 ? 's' : '') : (newItemCount > 0 ? 'Over 99 new notifications' : 'Notifications');\n return {\n key: 'notifications',\n text: title || 'Notifications',\n value: 'Notifications',\n title: title || 'Notifications',\n ariaLabel: ariaLabel || ariaLabelText,\n checked: isPanelOpen,\n iconProps: {\n iconName: 'Ringer'\n },\n onClick: onClickFunction,\n onRenderIcon: function (props, defaultRender) {\n var badge = (newItemCount < 10)\n ? Styles.badgeSingleDigit\n : (newItemCount < 100)\n ? Styles.badgeDoubleDigits\n : Styles.badgeTripleDigits;\n return (React.createElement(React.Fragment, null,\n defaultRender(props),\n newItemCount > 0 &&\n React.createElement(\"div\", { className: Styles.badgeContainer },\n React.createElement(Text, { className: [badge, 'notification-badge'].join(' ') }, newItemCount <= 99 ? newItemCount : '99+'))));\n }\n };\n}\n//# sourceMappingURL=NotificationControl.js.map","import { __assign, __extends, __spreadArrays } from \"tslib\";\nimport { CoherencePanel } from '@cseo/coherence-panel';\nimport { classNamesFunction, Link, Persona, PersonaCoin, PersonaInitialsColor, PersonaSize } from '@fluentui/react';\nimport React from 'react';\nimport { CoherenceNotificationPanel } from '../notification';\nimport { HeaderBanner } from './Components/HeaderBanner';\nimport { NotificationControl } from './Components/NotificationControl';\nvar CoherenceHeaderBase = (function (_super) {\n __extends(CoherenceHeaderBase, _super);\n function CoherenceHeaderBase(props) {\n var _this = _super.call(this, props) || this;\n _this._getClassNames = classNamesFunction();\n _this._ignoreOverflowButtonFocus = false;\n _this._onFarRightButtonDismissed = function () {\n _this.setState(function (prevState) { return ({\n panelVisible: prevState.nextPanelVisible ? prevState.nextPanelVisible : prevState.panelVisible,\n nextPanelVisible: prevState.nextPanelVisible ? undefined : prevState.nextPanelVisible\n }); }, function () {\n if (!_this.state.panelVisible && !_this._ignoreOverflowButtonFocus) {\n var overflowButton = (document.getElementById('coher-header-overflow-button-id'));\n if (overflowButton) {\n overflowButton.focus();\n }\n _this._ignoreOverflowButtonFocus = true;\n }\n });\n };\n _this._onPanelChange = function (nextPanelType) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n _this.setState(function (prevState) { return ({\n panelVisible: prevState.panelVisible ? undefined : nextPanelType,\n nextPanelVisible: prevState.panelVisible ? nextPanelType : undefined\n }); }, function () {\n _this._ignoreOverflowButtonFocus = nextPanelType === 'Profile';\n });\n var farRightSettings = _this.props.farRightSettings;\n switch (nextPanelType) {\n case 'Notifications':\n (_c = (_a = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings) === null || _a === void 0 ? void 0 : (_b = _a.panelSettings).onClick) === null || _c === void 0 ? void 0 : _c.call(_b);\n break;\n case 'Help':\n (_f = (_d = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.helpSettings) === null || _d === void 0 ? void 0 : (_e = _d.panelSettings).onClick) === null || _f === void 0 ? void 0 : _f.call(_e);\n break;\n case 'Settings':\n (_j = (_g = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.settingsSettings) === null || _g === void 0 ? void 0 : (_h = _g.panelSettings).onClick) === null || _j === void 0 ? void 0 : _j.call(_h);\n break;\n case 'Feedback':\n {\n if (farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.feedbackSettings) {\n _this.setState({ panelVisible: undefined, nextPanelVisible: undefined });\n if (!farRightSettings.feedbackSettings.panelSettings.onClick()) {\n return;\n }\n }\n var launchOptions = ((_k = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.feedbackSettings) === null || _k === void 0 ? void 0 : _k.panelSettings.launchOptions) || {};\n OfficeBrowserFeedback.multiFeedback(launchOptions).catch(function (err) {\n console.log('OCV Feedback Submission Failed with error: ' + err);\n });\n }\n break;\n case 'Profile':\n (_o = (_l = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.profileSettings) === null || _l === void 0 ? void 0 : (_m = _l.panelSettings).onClick) === null || _o === void 0 ? void 0 : _o.call(_m);\n break;\n default:\n break;\n }\n };\n _this._closePanel = function (ev) {\n if ((ev === null || ev === void 0 ? void 0 : ev.type) === 'click' || (ev === null || ev === void 0 ? void 0 : ev.nativeEvent.key) === 'Escape') {\n _this.setState({ panelVisible: undefined, nextPanelVisible: undefined });\n if (_this.props.dismissOpenedPanel && _this.props.onDismissOpenedPanel) {\n _this.props.onDismissOpenedPanel();\n }\n }\n };\n _this._skipToMainClicked = function () {\n var mainTags = document.getElementsByTagName('main');\n if (mainTags.length) {\n mainTags[mainTags.length - 1].focus();\n return;\n }\n var divsWithMain = (document.querySelectorAll('[role=\"main\"]'));\n if (divsWithMain) {\n divsWithMain[divsWithMain.length - 1].focus();\n }\n };\n _this.onClickNotifications = function () {\n _this._onFarRightButtonClicked('Notifications');\n _this.updateNewNotifications();\n };\n _this.updateNewNotifications = function () {\n var _a, _b, _c;\n var farRightSettings = _this.props.farRightSettings;\n (_c = (_a = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings) === null || _a === void 0 ? void 0 : (_b = _a.panelSettings).onPanelOpened) === null || _c === void 0 ? void 0 : _c.call(_b);\n };\n _this.getSettingsControl = function () {\n var _a, _b, _c, _d, _e;\n var buttonSettings = (_b = (_a = _this.props.farRightSettings) === null || _a === void 0 ? void 0 : _a.settingsSettings) === null || _b === void 0 ? void 0 : _b.buttonSettings;\n return {\n key: 'settings',\n text: (_c = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _c !== void 0 ? _c : 'Settings',\n value: 'Settings',\n title: (_d = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _d !== void 0 ? _d : 'Settings',\n ariaLabel: (_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.ariaLabel) !== null && _e !== void 0 ? _e : 'Settings',\n checked: _this.state.panelVisible === 'Settings',\n iconProps: {\n iconName: 'Settings'\n },\n onClick: function () { return _this._onFarRightButtonClicked('Settings'); }\n };\n };\n _this.getHelpControl = function () {\n var _a, _b, _c, _d, _e;\n var buttonSettings = (_b = (_a = _this.props.farRightSettings) === null || _a === void 0 ? void 0 : _a.helpSettings) === null || _b === void 0 ? void 0 : _b.buttonSettings;\n return {\n key: 'help',\n text: (_c = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _c !== void 0 ? _c : 'Help',\n value: 'Help',\n ariaLabel: (_d = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.ariaLabel) !== null && _d !== void 0 ? _d : 'Help',\n title: (_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _e !== void 0 ? _e : 'Help',\n checked: _this.state.panelVisible === 'Help',\n iconProps: {\n iconName: 'Help'\n },\n onClick: function () { return _this._onFarRightButtonClicked('Help'); }\n };\n };\n _this.getFeedbackControl = function () {\n var _a, _b, _c, _d, _e, _f, _g;\n var buttonSettings = (_b = (_a = _this.props.farRightSettings) === null || _a === void 0 ? void 0 : _a.feedbackSettings) === null || _b === void 0 ? void 0 : _b.buttonSettings;\n var ocvButtonIsFocused = ((_d = (_c = _this.props.farRightSettings) === null || _c === void 0 ? void 0 : _c.feedbackSettings) === null || _d === void 0 ? void 0 : _d.panelSettings.ocvButtonIsFocused) || false;\n return {\n id: 'coher-header-ocv-button-id',\n key: 'feedback',\n text: (_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _e !== void 0 ? _e : 'Feedback',\n value: 'Feedback',\n ariaLabel: (_f = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.ariaLabel) !== null && _f !== void 0 ? _f : 'Feedback',\n title: (_g = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _g !== void 0 ? _g : 'Feedback',\n checked: ocvButtonIsFocused,\n iconProps: {\n iconName: 'Emoji2'\n },\n onClick: function () { return _this._onFarRightButtonClicked('Feedback'); }\n };\n };\n _this.getPersonaCoin = function () {\n var _a, _b, _c, _d, _e, _f, _g;\n var buttonSettings = (_b = (_a = _this.props.farRightSettings) === null || _a === void 0 ? void 0 : _a.profileSettings) === null || _b === void 0 ? void 0 : _b.buttonSettings;\n var panelSettings = (_d = (_c = _this.props.farRightSettings) === null || _c === void 0 ? void 0 : _c.profileSettings) === null || _d === void 0 ? void 0 : _d.panelSettings;\n return {\n key: 'filter',\n title: (_f = (_e = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.title) !== null && _e !== void 0 ? _e : panelSettings === null || panelSettings === void 0 ? void 0 : panelSettings.fullName) !== null && _f !== void 0 ? _f : 'Profile',\n ariaLabel: (_g = buttonSettings === null || buttonSettings === void 0 ? void 0 : buttonSettings.ariaLabel) !== null && _g !== void 0 ? _g : 'Profile',\n checked: _this.state.panelVisible === 'Profile',\n iconProps: {\n iconName: 'Filter'\n },\n onClick: function () { return _this._onFarRightButtonClicked('Profile'); },\n onRenderIcon: function () { return (React.createElement(PersonaCoin, { size: PersonaSize.size28, imageUrl: panelSettings === null || panelSettings === void 0 ? void 0 : panelSettings.imageUrl, initialsColor: PersonaInitialsColor.purple, text: panelSettings === null || panelSettings === void 0 ? void 0 : panelSettings.fullName })); }\n };\n };\n _this._onFarRightButtonClicked = function (panel) {\n _this._onPanelChange(_this.state.panelVisible === panel ? undefined : panel);\n };\n _this.getProfile = function () {\n var farRightSettings = _this.props.farRightSettings;\n if (farRightSettings && farRightSettings.profileSettings) {\n var profileSettings_1 = farRightSettings.profileSettings;\n var personaInfo = {\n imageUrl: profileSettings_1.panelSettings.imageUrl,\n initialsColor: PersonaInitialsColor.purple,\n text: profileSettings_1.panelSettings.fullName,\n secondaryText: profileSettings_1.panelSettings.emailAddress\n };\n return (React.createElement(React.Fragment, null,\n React.createElement(Persona, __assign({}, personaInfo, { size: PersonaSize.size72, styles: _this._classNames.subComponentStyles.personaProfile, onRenderTertiaryText: function () {\n if (profileSettings_1.panelSettings.viewAccountLink) {\n return (React.createElement(\"div\", { className: _this._classNames.personaLinkContainer },\n React.createElement(Link, { styles: _this._classNames.subComponentStyles.personaLink, href: profileSettings_1.panelSettings.viewAccountLink, onClick: _this.onClickViewAccount }, \"View Account\")));\n }\n else {\n return null;\n }\n } })),\n React.createElement(\"div\", { className: _this._classNames.dividerStyle }),\n _this.getProfileBody(),\n !(profileSettings_1.panelSettings.hideSignOut) &&\n React.createElement(React.Fragment, null,\n !(profileSettings_1.panelSettings.hideSignOutDivider) && React.createElement(\"div\", { className: _this._classNames.dividerStyle }),\n React.createElement(Link, { styles: _this._classNames.subComponentStyles.personaLink, href: profileSettings_1.panelSettings.logOutLink, onClick: _this.onClickLogOut }, \"Sign out\"))));\n }\n else {\n return null;\n }\n };\n _this.onClickViewAccount = function () {\n var _a, _b, _c, _d;\n (_d = (_b = (_a = _this.props.farRightSettings) === null || _a === void 0 ? void 0 : _a.profileSettings) === null || _b === void 0 ? void 0 : (_c = _b.panelSettings).onViewAccount) === null || _d === void 0 ? void 0 : _d.call(_c);\n };\n _this.onClickLogOut = function () {\n var _a, _b, _c, _d;\n (_d = (_b = (_a = _this.props.farRightSettings) === null || _a === void 0 ? void 0 : _a.profileSettings) === null || _b === void 0 ? void 0 : (_c = _b.panelSettings).onLogOut) === null || _d === void 0 ? void 0 : _d.call(_c);\n };\n _this.getProfileBody = function () {\n var _a;\n var farRightSettings = _this.props.farRightSettings;\n if ((_a = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.profileSettings) === null || _a === void 0 ? void 0 : _a.panelSettings.body) {\n return (React.createElement(React.Fragment, null, farRightSettings.profileSettings.panelSettings.body));\n }\n return null;\n };\n _this.state = {\n panelVisible: undefined,\n nextPanelVisible: undefined\n };\n return _this;\n }\n CoherenceHeaderBase.prototype.componentWillReceiveProps = function (nextProps, prevProps) {\n if (nextProps.dismissOpenedPanel && nextProps.onDismissOpenedPanel\n && nextProps.dismissOpenedPanel !== prevProps.dismissOpenedPanel) {\n this.setState({ panelVisible: undefined, nextPanelVisible: undefined });\n nextProps.onDismissOpenedPanel();\n }\n else if (nextProps.displayPanel != prevProps.displayPanel) {\n if (this.state.panelVisible === undefined) {\n this._onFarRightButtonClicked(nextProps.displayPanel);\n }\n }\n };\n CoherenceHeaderBase.prototype.render = function () {\n var _this = this;\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z;\n var _0 = this.props, appNameSettings = _0.appNameSettings, searchSettings = _0.searchSettings, navbarProps = _0.navbarProps, farRightSettings = _0.farRightSettings, styles = _0.styles, theme = _0.theme;\n var newNotifications = ((_a = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings) === null || _a === void 0 ? void 0 : _a.panelSettings.newNotifications) || -1;\n var notificationItems = ((_b = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings) === null || _b === void 0 ? void 0 : _b.panelSettings.items) || [];\n this._classNames = this._getClassNames(styles, { theme: theme });\n var appNameProps = {\n label: appNameSettings.label,\n linkUrl: appNameSettings.linkUrl,\n linkProps: {\n styles: this._classNames.subComponentStyles.appNameLink\n },\n ariaLabel: (_c = appNameSettings.ariaLabel) !== null && _c !== void 0 ? _c : appNameSettings.label\n };\n var searchBoxProps = searchSettings !== null && searchSettings !== undefined ? searchSettings : {};\n return (React.createElement(React.Fragment, null,\n React.createElement(Link, { href: \"javascript:void(0)\", className: this._classNames.skipToMainLinkStyles, tabIndex: 0, as: 'a', onClick: this._skipToMainClicked, onKeyPress: function (event) {\n var code = event.keyCode || event.which;\n if (code === 13 || code === 32) {\n _this._skipToMainClicked();\n }\n } }, \"Skip to main content\"),\n React.createElement(HeaderBanner, __assign({ headerLabel: this.props.headerLabel }, navbarProps, { theme: theme, actions: {\n flexItems: this._getRightFlexItems(),\n staticItems: this._getRightStaticItems()\n }, appNameSettings: appNameProps, searchBoxProps: __assign(__assign({}, searchBoxProps), { enabled: !!searchSettings }) })),\n React.createElement(CoherenceNotificationPanel, __assign({ titleText: (_e = (_d = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings) === null || _d === void 0 ? void 0 : _d.panelSettings.titleText) !== null && _e !== void 0 ? _e : 'Notifications', isOpen: this.state.panelVisible === 'Notifications' }, (_g = (_f = this.props.farRightSettings) === null || _f === void 0 ? void 0 : _f.notificationsSettings) === null || _g === void 0 ? void 0 : _g.panelSettings, { items: notificationItems, newNotifications: newNotifications, onDismissPanel: this._closePanel, onDismissed: this._onFarRightButtonDismissed, hasCloseButton: false, backButton: (_h = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings) === null || _h === void 0 ? void 0 : _h.panelSettings.backButton })),\n React.createElement(CoherencePanel, __assign({ titleText: (_k = (_j = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.settingsSettings) === null || _j === void 0 ? void 0 : _j.panelSettings.titleText) !== null && _k !== void 0 ? _k : 'Settings', isOpen: this.state.panelVisible === 'Settings' }, (_m = (_l = this.props.farRightSettings) === null || _l === void 0 ? void 0 : _l.settingsSettings) === null || _m === void 0 ? void 0 : _m.panelSettings, { onDismiss: this._closePanel, onDismissed: this._onFarRightButtonDismissed, hasCloseButton: false }), ((_p = (_o = this.props.farRightSettings) === null || _o === void 0 ? void 0 : _o.settingsSettings) === null || _p === void 0 ? void 0 : _p.panelSettings.body) || null),\n React.createElement(CoherencePanel, __assign({ titleText: (_r = (_q = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.helpSettings) === null || _q === void 0 ? void 0 : _q.panelSettings.titleText) !== null && _r !== void 0 ? _r : 'Help', isOpen: this.state.panelVisible === 'Help' }, (_t = (_s = this.props.farRightSettings) === null || _s === void 0 ? void 0 : _s.helpSettings) === null || _t === void 0 ? void 0 : _t.panelSettings, { onDismiss: this._closePanel, onDismissed: this._onFarRightButtonDismissed, hasCloseButton: false }), ((_v = (_u = this.props.farRightSettings) === null || _u === void 0 ? void 0 : _u.helpSettings) === null || _v === void 0 ? void 0 : _v.panelSettings.body) || null),\n React.createElement(CoherencePanel, __assign({ titleText: (_x = (_w = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.profileSettings) === null || _w === void 0 ? void 0 : _w.panelSettings.titleText) !== null && _x !== void 0 ? _x : 'Profile', isOpen: this.state.panelVisible === 'Profile' }, (_z = (_y = this.props.farRightSettings) === null || _y === void 0 ? void 0 : _y.profileSettings) === null || _z === void 0 ? void 0 : _z.panelSettings, { onDismiss: this._closePanel, onDismissed: this._onFarRightButtonDismissed, hasCloseButton: false }), this.getProfile())));\n };\n CoherenceHeaderBase.prototype._getRightFlexItems = function () {\n var farRightSettings = this.props.farRightSettings;\n if (!farRightSettings) {\n return [];\n }\n var items = farRightSettings.additionalItems ? __spreadArrays(farRightSettings.additionalItems) : [];\n if (farRightSettings.notificationsSettings) {\n var newNotifications = farRightSettings.notificationsSettings.panelSettings.newNotifications;\n var notificationButtonSettings = farRightSettings.notificationsSettings.buttonSettings;\n items.push(NotificationControl(newNotifications, this.state.panelVisible === 'Notifications', this.onClickNotifications, notificationButtonSettings === null || notificationButtonSettings === void 0 ? void 0 : notificationButtonSettings.title, notificationButtonSettings === null || notificationButtonSettings === void 0 ? void 0 : notificationButtonSettings.ariaLabel));\n }\n if (farRightSettings.settingsSettings) {\n items.push(this.getSettingsControl());\n }\n if (farRightSettings.helpSettings) {\n items.push(this.getHelpControl());\n }\n if (window.OfficeBrowserFeedback || farRightSettings.feedbackSettings) {\n items.push(this.getFeedbackControl());\n }\n return items;\n };\n CoherenceHeaderBase.prototype._getRightStaticItems = function () {\n var farRightSettings = this.props.farRightSettings;\n var items = [];\n if (farRightSettings && farRightSettings.profileSettings) {\n items.push(this.getPersonaCoin());\n }\n return items;\n };\n return CoherenceHeaderBase;\n}(React.Component));\nexport { CoherenceHeaderBase };\n//# sourceMappingURL=CoherenceHeader.base.js.map","import { styled } from '@fluentui/react';\nimport { CoherenceHeaderBase } from './CoherenceHeader.base';\nimport { getStyles } from './CoherenceHeader.styles';\nexport var CoherenceHeader = styled(CoherenceHeaderBase, getStyles);\n//# sourceMappingURL=CoherenceHeader.js.map","import { ExtendedTypography } from '@cseo/styles';\nimport { HighContrastSelector, mergeStyles } from '@fluentui/react';\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme;\n return {\n dividerStyle: {\n marginTop: '24px',\n marginBottom: '24px',\n height: '1px',\n width: '100%',\n alignSelf: 'center',\n background: theme.palette.neutralQuaternaryAlt\n },\n skipToMainLinkStyles: [\n mergeStyles(ExtendedTypography.size14Semibold),\n {\n width: '100%',\n height: '48px',\n lineHeight: '48px',\n textAlign: 'center',\n verticalAlign: 'true',\n position: 'absolute',\n top: -100,\n zIndex: 1000,\n textDecorationLine: 'underline',\n color: theme.palette.themeDarkAlt + '!important',\n backgroundColor: theme.palette.neutralLighter + '!important',\n selectors: {\n '&:hover, &:active, &:focus': {\n color: theme.palette.themeDarkAlt + '!important',\n backgroundColor: theme.palette.neutralLighter + '!important'\n },\n '&:focus': {\n top: 0\n }\n }\n }\n ],\n personaLinkContainer: {\n padding: '3px'\n },\n subComponentStyles: {\n appNameLink: {\n root: [\n mergeStyles(ExtendedTypography.size16Semibold),\n {\n height: '46px',\n lineHeight: '46px',\n display: 'block',\n overflow: 'hidden',\n maxWidth: '100%',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n color: theme.palette.white + ' !important',\n border: '1px solid transparent',\n selectors: {\n '&:hover, &:active, &:focus, &:active:hover': {\n color: theme.palette.white + ' !important',\n textDecorationLine: 'none'\n },\n '&:focus': {\n borderColor: theme.palette.white + ' !important'\n }\n }\n }\n ]\n },\n searchBox: {\n root: {\n backgroundColor: theme.palette.themeLight,\n border: '1px solid transparent',\n selectors: {\n ':hover': {\n backgroundColor: theme.palette.white,\n border: '1px solid transparent'\n },\n ':focus-within': {\n backgroundColor: theme.palette.white,\n border: '1px solid transparent'\n },\n ':after': {\n top: '0px',\n bottom: '0px',\n left: '0px',\n right: '0px',\n border: '1px solid transparent'\n }\n }\n },\n field: {\n selectors: {\n '::placeholder': {\n color: theme.palette.themeDarkAlt\n }\n }\n }\n },\n personaLink: {\n root: [\n mergeStyles(ExtendedTypography.size14Semibold),\n {\n selectors: {\n ':hover': {\n color: theme.palette.themeDarkAlt\n },\n ':active': {\n color: theme.palette.themeDarker\n },\n ':focus': {\n color: theme.palette.themeDarker\n }\n }\n }\n ]\n },\n personaProfile: {\n root: {},\n details: {},\n primaryText: [mergeStyles(ExtendedTypography.size14Semibold), { color: theme.palette.neutralPrimary }],\n secondaryText: [mergeStyles(ExtendedTypography.size12Regular), { color: theme.palette.neutralPrimary }],\n tertiaryText: {\n marginTop: '12px',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n padding: '1px'\n },\n _a)\n },\n optionalText: {},\n textContent: {}\n }\n }\n };\n};\n//# sourceMappingURL=CoherenceHeader.styles.js.map","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport * as React from 'react';\nimport { HeaderRoot } from './Header.styled';\nimport { CoherenceHeader } from '@cseo/controls/lib/header/CoherenceHeader';\nimport { useUser } from '@employee-experience/common/lib/useUser';\nimport { useGraphPhoto } from '@employee-experience/common/lib/useGraphPhoto';\nimport { HeaderPanel } from './Header.types';\nimport { ComponentContext } from '@employee-experience/common/lib/ComponentContext';\nimport { EventType, UsageEventName } from '@employee-experience/common/lib/Models/UsageTelemetry';\nexport function Header(props) {\n var _a, _b, _c, _d;\n const { farRightSettings, searchSettings } = props, otherProps = __rest(props, [\"farRightSettings\", \"searchSettings\"]);\n const { telemetryClient, authClient } = React.useContext(ComponentContext);\n const user = useUser();\n const photo = useGraphPhoto();\n const searchConfig = searchSettings;\n if (searchConfig) {\n const originalOnSearch = searchConfig.onSearch;\n searchConfig.onSearch = (searchTerm) => {\n if (!originalOnSearch)\n return;\n const searchEvent = {\n subFeature: 'Header.Search',\n businessTransactionId: searchTerm,\n type: EventType.User,\n eventName: UsageEventName.TextChanged,\n };\n telemetryClient.trackEvent(searchEvent);\n originalOnSearch(searchTerm);\n };\n }\n const handleLogOutClicked = () => {\n const logout = {\n subFeature: 'Header.Logout',\n type: EventType.User,\n eventName: UsageEventName.ButtonClicked,\n };\n telemetryClient.trackEvent(logout);\n authClient.logOut().catch();\n };\n const getPanelOpenHandler = (panel) => {\n return () => {\n const panelEvent = {\n subFeature: `Header.${panel.toString()}`,\n type: EventType.User,\n eventName: UsageEventName.PanelOpened,\n businessTransactionId: panel.toString(),\n };\n telemetryClient.trackEvent(panelEvent);\n telemetryClient.startTrackPage(panel);\n };\n };\n const getPanelDismissHandler = (panel) => {\n return () => {\n const panelEvent = {\n subFeature: `Header.${panel.toString()}`,\n type: EventType.User,\n eventName: UsageEventName.PanelClosed,\n businessTransactionId: panel.toString(),\n };\n telemetryClient.trackEvent(panelEvent);\n telemetryClient.stopTrackPage(panel);\n };\n };\n const notificationConfig = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.notificationsSettings;\n if (notificationConfig) {\n notificationConfig.panelSettings.onOpened = getPanelOpenHandler(HeaderPanel.NotificationPanel);\n notificationConfig.panelSettings.onDismissed = getPanelDismissHandler(HeaderPanel.NotificationPanel);\n }\n const settingsConfig = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.settingsSettings;\n if (settingsConfig) {\n settingsConfig.panelSettings.onOpened = getPanelOpenHandler(HeaderPanel.SettingsPanel);\n settingsConfig.panelSettings.onDismissed = getPanelDismissHandler(HeaderPanel.SettingsPanel);\n }\n const helpConfig = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.helpSettings;\n if (helpConfig) {\n helpConfig.panelSettings.onOpened = getPanelOpenHandler(HeaderPanel.HelpPanel);\n helpConfig.panelSettings.onDismissed = getPanelDismissHandler(HeaderPanel.HelpPanel);\n }\n const feedbackConfig = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.feedbackSettings;\n if (feedbackConfig) {\n const prevOnClick = (_a = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.feedbackSettings) === null || _a === void 0 ? void 0 : _a.panelSettings.onClick;\n feedbackConfig.panelSettings.onClick = () => {\n if (!prevOnClick)\n return false;\n getPanelOpenHandler(HeaderPanel.FeedbackPanel);\n return prevOnClick();\n };\n }\n const profileConfig = Object.assign(Object.assign({}, farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.profileSettings), { panelSettings: Object.assign(Object.assign({}, (_b = farRightSettings === null || farRightSettings === void 0 ? void 0 : farRightSettings.profileSettings) === null || _b === void 0 ? void 0 : _b.panelSettings), { logOutLink: 'javascript:void(0);', fullName: (_c = user === null || user === void 0 ? void 0 : user.name) !== null && _c !== void 0 ? _c : '', emailAddress: (_d = user === null || user === void 0 ? void 0 : user.email) !== null && _d !== void 0 ? _d : '', imageUrl: photo || undefined, onLogOut: handleLogOutClicked, onOpened: getPanelOpenHandler(HeaderPanel.ProfilePanel), onDismissed: getPanelDismissHandler(HeaderPanel.ProfilePanel) }) });\n return (React.createElement(HeaderRoot, null,\n React.createElement(CoherenceHeader, Object.assign({}, otherProps, { searchSettings: searchConfig, farRightSettings: Object.assign(Object.assign({}, farRightSettings), { notificationsSettings: notificationConfig, settingsSettings: settingsConfig, helpSettings: helpConfig, feedbackSettings: feedbackConfig, profileSettings: profileConfig }), telemetryHook: telemetryClient }))));\n}\n//# sourceMappingURL=Header.js.map","import styled from 'styled-components';\n// Adds space for nav and header\n// flex for stick footer\nexport const Main = styled.main `\n width: 100%;\n flex: 1 0 auto;\n\n @media (min-width: 1025px) {\n width: calc(100% - 48px);\n margin-left: 48px;\n }\n`;\n//# sourceMappingURL=Main.js.map","export function throwOnUndefinedColor(desiredColor, desiredColorName, callingComponentName) {\n if (!desiredColor) {\n throw new Error(\"M365Theme error: It looks like the app tried to reference a theme color that didn't exist.\\n\\n Double check you're consuming a M365Theme (a super set of Fabric ITheme) and that it has assinged the extension slot.\\n\\n Undefined extension slot: \" + desiredColorName + \"\\n\\n Calling component: \" + callingComponentName + \"\\n\\n 'For more information, please visit https://uifabric.visualstudio.com/iss/_git/m365-admin/?path=%2Fdocs%2Ftheming.md&version=GBmaster';\\n\\n\");\n }\n return desiredColor;\n}\n//# sourceMappingURL=ThrowOnUndefinedColor.js.map","import { getRTL } from 'office-ui-fabric-react';\nexport var getRTLFlipOptOut = function () {\n return getRTL() ? '@noflip' : '';\n};\n//# sourceMappingURL=rtlOptOut.js.map","import { FontSizes, ZIndexes } from 'office-ui-fabric-react';\nimport { throwOnUndefinedColor } from '@m365-admin/customizations';\nimport { getRTLFlipOptOut } from '@m365-admin/utilities';\nvar navScrollBarWidth = 0;\nvar currentZoomLevel = 0;\nvar navDividerHeight = 16;\nvar componentName = 'Nav';\nfunction getScrollBarWidth(nextZoomLevel) {\n if (navScrollBarWidth !== 0 && currentZoomLevel === nextZoomLevel) {\n return navScrollBarWidth;\n }\n currentZoomLevel = nextZoomLevel;\n // Get the browser scrollbar width because they're all different\n var scrollDiv = document.createElement('div');\n scrollDiv.setAttribute('style', 'width: 100px;height: 100px;overflow: scroll;position: absolute;top: -999px;');\n var contentDiv = document.createElement('p');\n contentDiv.setAttribute('style', 'width: 100px;height: 200px;');\n scrollDiv.appendChild(contentDiv);\n document.body.appendChild(scrollDiv);\n navScrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n document.body.removeChild(scrollDiv);\n return navScrollBarWidth;\n}\nvar navFontSize = FontSizes.medium;\nvar navWidth = 280;\nexport var navCollapsedWidth = 48;\nexport var navItemHeight = 40;\nexport var navGroupDividerStyle = function (theme) {\n return {\n display: 'block',\n position: 'relative',\n height: navDividerHeight,\n textAlign: 'center',\n '::after': {\n content: '\" \"',\n width: 'calc(100% - 32px)',\n position: 'absolute',\n height: '1px',\n top: 10,\n left: '16px',\n backgroundColor: theme.palette.neutralTertiaryAlt\n }\n };\n};\nexport var getNavStyles = function (props) {\n var isNavCollapsed = props.isNavCollapsed, shouldScroll = props.shouldScroll, zoomLevel = props.zoomLevel, theme = props.theme;\n var scrollBarWidth = getScrollBarWidth(zoomLevel);\n return {\n root: {\n position: 'relative',\n zIndex: ZIndexes.Nav,\n flex: '0 0 auto'\n },\n navWrapper: [\n {\n overflow: 'hidden',\n height: '100%'\n },\n shouldScroll && {\n ':hover': {\n overflow: 'unset',\n marginTop: 0,\n marginRight: \"-\" + scrollBarWidth + \"px\",\n marginBottom: 0,\n marginLeft: '0px'\n },\n '*[dir=\"rtl\"] &:hover': {\n marginRight: \"0px \" + getRTLFlipOptOut(),\n marginLeft: \"-\" + scrollBarWidth + \"px \" + getRTLFlipOptOut()\n }\n }\n ],\n navContainer: [\n {\n width: navWidth + scrollBarWidth,\n backgroundColor: throwOnUndefinedColor(theme.semanticColors.navBackground, 'navBackground', componentName),\n color: theme.semanticColors.buttonText,\n transitionProperty: 'width',\n transitionDuration: '.2s',\n userSelect: 'none',\n fontSize: navFontSize,\n overflowY: 'scroll',\n overflowX: 'hidden',\n marginRight: \"-\" + scrollBarWidth + \"px\",\n marginLeft: '0px',\n height: '100%',\n '*[dir=\"rtl\"] &': {\n marginRight: \"0px \" + getRTLFlipOptOut(),\n marginLeft: \"-\" + scrollBarWidth + \"px \" + getRTLFlipOptOut()\n }\n },\n isNavCollapsed && {\n width: navCollapsedWidth + scrollBarWidth\n },\n shouldScroll && {\n ':hover': {\n margin: '0px'\n }\n }\n ],\n navGroup: {\n margin: 0,\n padding: 0,\n listStyle: 'none'\n },\n navGroupDivider: navGroupDividerStyle(theme)\n };\n};\n//# sourceMappingURL=Nav.styles.js.map","import { FontSizes, getFocusStyle, HighContrastSelector } from 'office-ui-fabric-react';\nimport { throwOnUndefinedColor } from '@m365-admin/customizations';\nimport { getRTLFlipOptOut } from '@m365-admin/utilities';\nimport { navItemHeight } from './Nav.styles';\nvar navIconSize = FontSizes.icon;\nvar navChildItemHeight = 32;\nvar componentName = 'NavLink';\nexport var getNavLinkStyles = function (props) {\n var _a;\n var isNavCollapsed = props.isNavCollapsed, isExpanded = props.isExpanded, hasNestedMenu = props.hasNestedMenu, isSelected = props.isSelected, hasSelectedNestedLink = props.hasSelectedNestedLink, isNested = props.isNested, theme = props.theme, hasIcon = props.hasIcon, preserveIconSpace = props.preserveIconSpace;\n var selectedMarkerOffset = !isNavCollapsed && isNested ? '34px' : '4px';\n return {\n root: [\n theme.fonts.medium,\n getFocusStyle(theme),\n {\n minHeight: isNested ? navChildItemHeight : navItemHeight,\n color: theme.semanticColors.buttonText,\n textDecoration: 'none',\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'nowrap',\n alignItems: 'center',\n cursor: 'pointer',\n position: 'relative',\n width: '100%',\n background: 'transparent',\n border: 'none',\n padding: 0,\n textAlign: 'inherit',\n ':hover': {\n backgroundColor: throwOnUndefinedColor(theme.semanticColors.navItemBackgroundHovered, 'navItemBackgroundHovered', componentName)\n },\n ':active': {\n backgroundColor: throwOnUndefinedColor(theme.semanticColors.navItemBackgroundPressed, 'navItemBackgroundPressed', componentName)\n }\n }\n ],\n iconContainer: [\n {\n display: 'flex',\n flex: \"0 0 \" + (hasIcon || isNested || preserveIconSpace ? 48 : 16) + \"px\",\n alignItems: 'center',\n justifyContent: 'center',\n '::before': [\n (_a = {\n content: '\" \"',\n position: 'absolute',\n left: selectedMarkerOffset,\n width: '4px',\n height: '24px',\n backgroundColor: theme.palette.accent,\n opacity: 0,\n transition: 'opacity 300ms'\n },\n _a[HighContrastSelector] = {\n backgroundColor: 'Highlight'\n },\n _a),\n isNested && {\n height: '18px',\n top: '7px'\n },\n // Nav is open, L2 menu collapsed, L2 has a selected link => true\n ((!isNavCollapsed && !isExpanded && hasSelectedNestedLink) ||\n // Nav is open, is an L2 menu, is selected => true\n (!isNavCollapsed && !hasNestedMenu && isSelected) ||\n // Nav is closed, is selected regardless of L1 or L2 => true\n (isNavCollapsed && isSelected)) && {\n opacity: 1\n }\n ],\n '*[dir=\"rtl\"] &::before': {\n right: selectedMarkerOffset + \" \" + getRTLFlipOptOut()\n }\n },\n isNavCollapsed &&\n isNested && {\n flex: '0 0 12px'\n }\n ],\n icon: {\n fontSize: navIconSize,\n color: theme.palette.neutralPrimary\n },\n secondaryIcon: [\n {\n flex: \"0 0 \" + (hasNestedMenu ? '48px' : '16px'),\n fontSize: theme.fonts.small.fontSize,\n color: theme.palette.neutralPrimary,\n transition: 'transform 200ms',\n textAlign: 'center'\n },\n isExpanded && {\n transform: 'rotate(-180deg)'\n }\n ],\n text: [\n {\n flex: '1 1 auto',\n textOverflow: 'ellipsis',\n overflowX: 'hidden',\n whiteSpace: 'nowrap',\n color: theme.palette.neutralPrimary,\n pointerEvents: 'none'\n }\n ]\n };\n};\n//# sourceMappingURL=NavLink.styles.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { TeachingBubble, DirectionalHint } from 'office-ui-fabric-react';\nvar NavTeachingBubbleBase = /** @class */ (function (_super) {\n __extends(NavTeachingBubbleBase, _super);\n function NavTeachingBubbleBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n NavTeachingBubbleBase.prototype.render = function () {\n var _a = this.props, calloutProps = _a.calloutProps, teachingBubbleProps = __rest(_a, [\"calloutProps\"]);\n return (React.createElement(TeachingBubble, __assign({ hasCondensedHeadline: true, hasSmallHeadline: true, hasCloseIcon: true, isWide: false }, teachingBubbleProps, { calloutProps: __assign({ beakWidth: 12, directionalHint: DirectionalHint.bottomLeftEdge, directionalHintFixed: true }, calloutProps) })));\n };\n return NavTeachingBubbleBase;\n}(React.Component));\nexport { NavTeachingBubbleBase };\n//# sourceMappingURL=NavTeachingBubbleBase.js.map","import { styled } from 'office-ui-fabric-react';\nimport { getNavTeachingBubbleStyles } from './NavTeachingBubble.styles';\nimport { NavTeachingBubbleBase } from './NavTeachingBubbleBase';\nexport var NavTeachingBubble = styled(NavTeachingBubbleBase, getNavTeachingBubbleStyles, undefined, { scope: 'NavTeachingBubble' });\n//# sourceMappingURL=NavTeachingBubble.js.map","export var getNavTeachingBubbleStyles = function (_props) {\n return {\n content: {\n animation: 'none'\n },\n subComponentStyles: {\n callout: {\n root: {\n animation: 'none',\n width: '284px',\n maxWidth: '284px'\n }\n }\n },\n footer: {\n selectors: {\n '& *': {\n flex: '1 1 auto'\n },\n '& .ms-Button:not(:first-child)': {\n marginLeft: '16px'\n }\n }\n },\n closeButton: {\n top: '4px',\n right: '4px'\n },\n bodyContent: {\n paddingTop: '18px'\n }\n };\n};\n//# sourceMappingURL=NavTeachingBubble.styles.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, Icon, anchorProperties, buttonProperties, getNativeProps, mergeStyles, getId, TooltipHost, DirectionalHint, styled } from 'office-ui-fabric-react';\nimport { NavTeachingBubble } from './NavTeachingBubble/NavTeachingBubble';\nvar getClassNames = classNamesFunction();\n/** This fix is related to a flex bug in IE11 that prevents the browser from calculating proper height in flex\n * children. The work around is to wrap the item in another flex container which this does by restyling\n * the TooltipHost we use within this component. As soon as IE11 support is dropped we can remove this\n * https://github.com/philipwalton/flexbugs#flexbug-3\n */\nvar FlexTooltipHost = styled(TooltipHost, { root: { display: 'flex' } }, undefined, { scope: 'FlexTooltipHost' });\nvar NavLinkBase = /** @class */ (function (_super) {\n __extends(NavLinkBase, _super);\n function NavLinkBase(props) {\n var _this = _super.call(this, props) || this;\n _this._linkTipId = getId('linkTip');\n _this._onClick = function (ev) {\n if (_this.props.onClick) {\n _this.props.onClick(ev, _this.props.item);\n }\n };\n _this._setLinkRef = function (linkItem) {\n // we do this with state because getting a ref is not synchronous\n // without this, a TeachingBubble will not show if showTeachingBubble is true initially\n if (_this.state.linkRef !== linkItem) {\n _this.setState({ linkRef: linkItem });\n }\n };\n _this.state = { linkRef: null };\n return _this;\n }\n NavLinkBase.prototype.render = function () {\n var _a = this.props, name = _a.name, hasNestedMenu = _a.hasNestedMenu, isNested = _a.isNested, isNavCollapsed = _a.isNavCollapsed, isExpanded = _a.isExpanded, isSelected = _a.isSelected, hasSelectedNestedLink = _a.hasSelectedNestedLink, styles = _a.styles, primaryIconName = _a.primaryIconName, href = _a.href, forceAnchor = _a.forceAnchor, theme = _a.theme, showTeachingBubble = _a.showTeachingBubble, teachingBubbleProps = _a.teachingBubbleProps, isParentExpanded = _a.isParentExpanded, preserveIconSpace = _a.preserveIconSpace, tooltipProps = _a.tooltipProps, \n // tslint:disable-next-line:deprecation\n ariaLabel = _a.ariaLabel;\n var classNames = getClassNames(styles, {\n theme: theme,\n isNavCollapsed: isNavCollapsed,\n hasNestedMenu: hasNestedMenu,\n isExpanded: isExpanded,\n isSelected: isSelected,\n hasSelectedNestedLink: hasSelectedNestedLink,\n isNested: isNested,\n hasIcon: !!primaryIconName,\n preserveIconSpace: preserveIconSpace\n });\n var _b = getNativeProps(this.props, href ? anchorProperties : buttonProperties), className = _b.className, title = _b.title, disabled = _b.disabled, nativeProps = __rest(_b, [\"className\", \"title\", \"disabled\"]);\n var iconName = undefined;\n if (hasNestedMenu) {\n iconName = 'ChevronDownMed';\n }\n var navContent = (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classNames.iconContainer, role: \"presentation\" }, primaryIconName && React.createElement(Icon, { iconName: primaryIconName, className: classNames.icon })),\n React.createElement(\"div\", { className: classNames.text, tabIndex: -1, role: \"presentation\", \"data-is-focusable\": \"false\" }, name),\n !(isNavCollapsed && !isNested) && (React.createElement(Icon, { iconName: iconName, className: classNames.secondaryIcon, role: \"presentation\" }))));\n var rootStyle = mergeStyles(classNames.root, className);\n var linkBase = !href && !forceAnchor ? (React.createElement(\"button\", __assign({ \"aria-label\": ariaLabel }, nativeProps, { onClick: this._onClick, className: rootStyle, ref: this._setLinkRef }), navContent)) : (React.createElement(\"a\", __assign({ \"aria-label\": ariaLabel }, nativeProps, { onClick: this._onClick, className: rootStyle, ref: this._setLinkRef }), navContent));\n // it wouldn't make sense to show a call out on a nested nav item that isn't visible or transient\n var shouldTeachingBubbleShow = showTeachingBubble && (!isNested || (!isNavCollapsed && isNested && isParentExpanded));\n return (React.createElement(React.Fragment, null,\n disabled ? (linkBase) : (React.createElement(FlexTooltipHost, __assign({ id: this._linkTipId, content: title || (isNavCollapsed && !isNested && name), directionalHint: DirectionalHint.rightCenter }, tooltipProps), linkBase)),\n shouldTeachingBubbleShow && React.createElement(NavTeachingBubble, __assign({ target: this.state.linkRef }, teachingBubbleProps))));\n };\n return NavLinkBase;\n}(React.Component));\nexport { NavLinkBase };\n//# sourceMappingURL=NavLinkBase.js.map","import { styled } from 'office-ui-fabric-react';\nimport { getNavLinkStyles } from './NavLink.styles';\nimport { NavLinkBase } from './NavLinkBase';\nexport var NavLink = styled(NavLinkBase, getNavLinkStyles, undefined, { scope: 'NavLink' }, true);\n//# sourceMappingURL=NavLink.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { NavLink } from './NavLink';\nimport { classNamesFunction, FocusZone, KeyCodes } from 'office-ui-fabric-react';\nvar getClassNames = classNamesFunction();\nvar idIncrementer = 0;\nvar NavLinkGroupBase = /** @class */ (function (_super) {\n __extends(NavLinkGroupBase, _super);\n function NavLinkGroupBase(props) {\n var _this = _super.call(this, props) || this;\n _this.state = {\n isExpanded: !!(props.isExpanded !== undefined ? props.isExpanded : props.defaultIsExpanded),\n isKeyboardExpanded: false\n };\n _this.navLinkGroupRef = React.createRef();\n _this.navRootRef = React.createRef();\n _this._onLinkClicked = _this._onLinkClicked.bind(_this);\n _this._offsetUpdated = _this._offsetUpdated.bind(_this);\n _this._nestedNavBlur = _this._nestedNavBlur.bind(_this);\n _this._escapeSubNavFocus = _this._escapeSubNavFocus.bind(_this);\n _this.instanceNumber = idIncrementer++;\n return _this;\n }\n NavLinkGroupBase.prototype.render = function () {\n var _a = this.props, link = _a.link, isNavCollapsed = _a.isNavCollapsed, hasSelectedNestedLink = _a.hasSelectedNestedLink, styles = _a.styles, theme = _a.theme, itemTotal = _a.itemTotal, itemStartIndex = _a.itemStartIndex;\n var isKeyboardExpanded = this.state.isKeyboardExpanded;\n var isExpanded = this.props.isExpanded === undefined ? this.state.isExpanded : this.props.isExpanded;\n var classNames = getClassNames(styles, {\n isExpanded: isExpanded,\n isNavCollapsed: isNavCollapsed,\n isKeyboardExpanded: isKeyboardExpanded,\n theme: theme\n });\n var NestedComponent = isNavCollapsed && isKeyboardExpanded ? FocusZone : 'ul';\n // ensuring our id's don't have spaces in them so we don't fail accessibility insights tests.\n var menuId = link.name.split(' ').join('') + 'menu_id' + this.instanceNumber;\n var linkId = link.name.split(' ').join('') + '_id' + this.instanceNumber;\n return (React.createElement(\"div\", __assign({ className: classNames.root, role: \"presentation\" }, (isNavCollapsed && link.links && { onMouseEnter: this._offsetUpdated, ref: this.navRootRef })),\n React.createElement(NavLink, __assign({ item: link, role: \"menuitem\", primaryIconName: link.icon }, link, { isNavCollapsed: isNavCollapsed, onClick: this._onLinkClicked, \"aria-controls\": menuId, \"aria-expanded\": isExpanded }, (isNavCollapsed && link.links && { 'aria-haspopup': true, 'aria-expanded': isKeyboardExpanded }), { isSelected: hasSelectedNestedLink, hasSelectedNestedLink: hasSelectedNestedLink, hasNestedMenu: true, isExpanded: isExpanded, id: linkId, \"aria-setsize\": itemTotal, \"aria-posinset\": itemStartIndex })),\n link.links && (React.createElement(\"div\", __assign({ className: classNames.nestedNav, role: \"presentation\" }, (isNavCollapsed && { ref: this.navLinkGroupRef, 'data-is-focusable': false })),\n isNavCollapsed && (React.createElement(NavLink, { isNavCollapsed: isNavCollapsed, name: link.name, \"data-is-focusable\": false, \"aria-hidden\": true, primaryIconName: link.icon, disabled: true, styles: {\n root: classNames.nestedNavHeaderItem,\n text: classNames.nestedNavHeaderItemText,\n icon: classNames.nestedNavHeaderItemIcon\n } })),\n React.createElement(\"div\", { className: classNames.nestedNavLinksWrapper, role: \"presentation\" },\n React.createElement(NestedComponent, __assign({ className: classNames.nestedNavLinks, \"aria-labelledby\": linkId, role: \"menu\", id: menuId }, (isKeyboardExpanded &&\n isNavCollapsed && {\n componentRef: this._keyboardFocusSubNav,\n onKeyDown: this._escapeSubNavFocus,\n isCircularNavigation: true,\n as: 'ul',\n onBlur: this._nestedNavBlur\n })), link.links.map(function (nestedLink, index) {\n return (React.createElement(\"li\", { role: \"presentation\", key: nestedLink.key },\n React.createElement(NavLink, __assign({ item: nestedLink, \"aria-setsize\": link.links.length, \"aria-posinset\": index + 1, role: \"menuitem\", primaryIconName: nestedLink.icon }, nestedLink, { isNavCollapsed: isNavCollapsed }, (nestedLink.isSelected && { 'aria-current': 'page' }), { hasNestedMenu: false, hasSelectedNestedLink: false, isNested: true, isParentExpanded: isExpanded }))));\n })))))));\n };\n NavLinkGroupBase.prototype._onLinkClicked = function (ev, item) {\n var _this = this;\n this.setState(__assign(__assign({}, (this.props.isNavCollapsed && { isKeyboardExpanded: !this.state.isKeyboardExpanded })), (this.props.isExpanded === undefined && {\n isExpanded: !this.state.isExpanded\n })), function () {\n if (_this.props.onCollapse) {\n _this.props.onCollapse();\n }\n });\n if (this.props.isNavCollapsed) {\n this._offsetUpdated();\n }\n if (this.props.onExpanded) {\n this.props.onExpanded(!this.state.isExpanded);\n }\n if (this.props.link.onClick) {\n this.props.link.onClick(ev, item);\n }\n };\n // We're using the ref callback to focus the element so we can guarantee the element exists\n NavLinkGroupBase.prototype._keyboardFocusSubNav = function (focusZone) {\n if (focusZone) {\n focusZone.focus(true);\n }\n };\n NavLinkGroupBase.prototype._escapeSubNavFocus = function (event) {\n if (event.which === KeyCodes.escape) {\n this.setState({\n isKeyboardExpanded: false\n });\n if (this.props.focusZoneRef.current) {\n this.props.focusZoneRef.current.focus();\n }\n }\n };\n NavLinkGroupBase.prototype._nestedNavBlur = function (event) {\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 Nav\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 (!event.currentTarget.contains(relatedTarget)) {\n this.setState({\n isKeyboardExpanded: false\n });\n }\n };\n // calculate the offset due to scroll so we always position the sub nav correctly\n NavLinkGroupBase.prototype._offsetUpdated = function (_ev) {\n if (this.navRootRef.current && this.navLinkGroupRef.current && this.props.navRef.current) {\n this.navLinkGroupRef.current.style.top =\n this.navRootRef.current.offsetTop - this.props.navRef.current.scrollTop + 'px';\n }\n };\n return NavLinkGroupBase;\n}(React.Component));\nexport { NavLinkGroupBase };\n//# sourceMappingURL=NavLinkGroupBase.js.map","import { styled } from 'office-ui-fabric-react';\nimport { getNavLinkGroupStyles } from './NavLinkGroup.styles';\nimport { NavLinkGroupBase } from './NavLinkGroupBase';\nexport var NavLinkGroup = styled(NavLinkGroupBase, getNavLinkGroupStyles, undefined, { scope: 'NavLinkGroup' });\n//# sourceMappingURL=NavLinkGroup.js.map","import { AnimationClassNames } from 'office-ui-fabric-react';\nimport { getRTLFlipOptOut } from '@m365-admin/utilities';\nimport { navItemHeight, navCollapsedWidth } from './Nav.styles';\n// this is used to ensure that the left shadow of the nested nav can be hidden while\n// the rest of the shadow can be shown\nvar shadowOffset = 24;\n// width of the flyout navigation\nvar flyoutNavWidth = 230;\nexport var getNavLinkGroupStyles = function (props) {\n var isNavCollapsed = props.isNavCollapsed, isExpanded = props.isExpanded, isKeyboardExpanded = props.isKeyboardExpanded, theme = props.theme;\n return {\n root: [\n isNavCollapsed && {\n selectors: {\n '& *:hover + [class|=nestedNav]': {\n display: 'flex'\n }\n }\n }\n ],\n nestedNav: [\n isNavCollapsed && {\n width: flyoutNavWidth + navCollapsedWidth + \"px\",\n position: 'absolute',\n flexDirection: 'column',\n alignItems: 'flex-end',\n display: isKeyboardExpanded ? 'flex' : 'none',\n selectors: {\n ':hover': {\n display: 'flex'\n }\n }\n }\n ],\n nestedNavHeaderItem: {\n zIndex: 1,\n backgroundColor: theme.palette.neutralTertiaryAlt,\n cursor: 'default',\n selectors: {\n ':hover': {\n backgroundColor: 'inheret'\n },\n ':active': {\n backgroundColor: 'inheret'\n },\n ':focus': {\n backgroundColor: 'inheret'\n }\n }\n },\n nestedNavHeaderItemText: {\n margin: '0px 12px'\n },\n nestedNavLinksWrapper: [\n !isNavCollapsed && isExpanded && [AnimationClassNames.fadeIn400, AnimationClassNames.slideDownIn20],\n !isNavCollapsed &&\n !isExpanded && {\n display: 'none'\n },\n isNavCollapsed && {\n overflow: 'hidden',\n padding: shadowOffset + navItemHeight + \"px \" + shadowOffset + \"px \" + shadowOffset + \"px 0px\",\n margin: \"-\" + (shadowOffset + navItemHeight) + \"px -\" + shadowOffset + \"px -\" + shadowOffset + \"px 0px\",\n selectors: {\n '*[dir=\"rtl\"] &': {\n paddingTop: shadowOffset + navItemHeight + \"px\",\n paddingRight: \"0px \" + getRTLFlipOptOut(),\n paddingBottom: shadowOffset + \"px\",\n paddingLeft: shadowOffset + \"px \" + getRTLFlipOptOut(),\n marginTop: \"-\" + (shadowOffset + navItemHeight) + \"px\",\n marginRight: \"0px \" + getRTLFlipOptOut(),\n marginBottom: \"-\" + shadowOffset + \"px\",\n marginLeft: \"-\" + shadowOffset + \"px \" + getRTLFlipOptOut()\n }\n }\n }\n ],\n nestedNavLinks: [\n {\n padding: 0,\n listStyle: 'none'\n },\n isNavCollapsed && {\n width: flyoutNavWidth + \"px\",\n marginTop: \"-\" + navItemHeight + \"px\",\n paddingTop: navItemHeight + \"px\",\n backgroundColor: theme.palette.neutralLighter,\n boxShadow: '0 1.2px 3.6px rgba(0, 0, 0, 0.09), 0 6.4px 14.4px rgba(0, 0, 0, 0.11)'\n },\n isNavCollapsed && [\n AnimationClassNames.slideRightIn10,\n {\n selectors: {\n '[dir=\"rtl\"] &': [AnimationClassNames.slideLeftIn10]\n }\n }\n ]\n ]\n };\n};\n//# sourceMappingURL=NavLinkGroup.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { NavLink } from './NavLink';\nimport { NavLinkGroup } from './NavLinkGroup';\nimport { classNamesFunction } from 'office-ui-fabric-react';\nimport { warnDependent } from '@m365-admin/utilities';\nimport { NavTeachingBubble } from './NavTeachingBubble/NavTeachingBubble';\nvar getClassNames = classNamesFunction();\nvar NavGroupBase = /** @class */ (function (_super) {\n __extends(NavGroupBase, _super);\n function NavGroupBase(props) {\n var _this = _super.call(this, props) || this;\n _this._setLinkRef = function (linkItem) {\n // we do this with state because getting a ref is not synchronous\n // without this, a TeachingBubble will not show if showHeaderTeachingBubble is true initially\n if (_this.state.linkRef !== linkItem) {\n _this.setState({ linkRef: linkItem });\n }\n };\n _this.state = { linkRef: null };\n return _this;\n }\n NavGroupBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, groupIndex = _a.groupIndex, onRenderGroupTitle = _a.onRenderGroupTitle, links = _a.links, isNavCollapsed = _a.isNavCollapsed, onCollapse = _a.onCollapse, navRef = _a.navRef, focusZoneRef = _a.focusZoneRef, styles = _a.styles, theme = _a.theme, showHeaderTeachingBubble = _a.showHeaderTeachingBubble, headerTeachingBubbleProps = _a.headerTeachingBubbleProps, itemStartIndex = _a.itemStartIndex, itemTotal = _a.itemTotal;\n var classNames = getClassNames(styles, { isNavCollapsed: isNavCollapsed, theme: theme });\n var defaultOnRenderGroupTitle = function (props) {\n if (props && props.groupName && !props.isNavCollapsed) {\n return React.createElement(\"span\", { className: classNames.navGroupTitle }, props.groupName);\n }\n return null;\n };\n var groupTitle;\n if (onRenderGroupTitle) {\n groupTitle = React.createElement(React.Fragment, null, onRenderGroupTitle(this.props, defaultOnRenderGroupTitle));\n }\n else {\n groupTitle = defaultOnRenderGroupTitle(this.props);\n }\n return (React.createElement(React.Fragment, null,\n groupIndex !== 0 && React.createElement(\"li\", { role: \"presentation\", className: classNames.navGroupDivider }),\n groupTitle && (React.createElement(React.Fragment, null,\n React.createElement(\"li\", __assign({ role: \"presentation\" }, this.props.groupTitleAttributes, { ref: this._setLinkRef }), groupTitle),\n showHeaderTeachingBubble && (React.createElement(NavTeachingBubble, __assign({ target: this.state.linkRef }, headerTeachingBubbleProps))))),\n links.map(function (link, index) {\n // warn if developer passes in onExpanded without dependent links prop\n warnDependent('INavLink', link, { onExpanded: 'links' });\n var hasSelectedNestedLink = _this._isNestedLinkSelected(link);\n var setSize = itemStartIndex + index;\n return (\n // if there are nested links, render a NavLinkGroup, otherwise just render a NavLink\n React.createElement(\"li\", { className: classNames.navItem, role: \"presentation\", key: link.key }, link.links ? (React.createElement(NavLinkGroup, __assign({}, link, { styles: link.navLinkGroupStyles, isNavCollapsed: isNavCollapsed, link: link, hasNestedMenu: true, hasSelectedNestedLink: hasSelectedNestedLink, onCollapse: onCollapse, navRef: navRef, focusZoneRef: focusZoneRef, itemStartIndex: setSize, itemTotal: itemTotal }))) : (React.createElement(NavLink, __assign({ item: link, primaryIconName: link.icon, role: \"menuitem\" }, link, { isNavCollapsed: isNavCollapsed }, (link.isSelected && { 'aria-current': 'page' }), { hasNestedMenu: false, isNested: false, \"aria-posinset\": setSize, \"aria-setsize\": itemTotal })))));\n })));\n };\n NavGroupBase.prototype._isNestedLinkSelected = function (link) {\n return (link &&\n !!link.links &&\n link.links.some(function (childLink) {\n return !!childLink && !!childLink.isSelected;\n }));\n };\n return NavGroupBase;\n}(React.Component));\nexport { NavGroupBase };\n//# sourceMappingURL=NavGroupBase.js.map","import { styled } from 'office-ui-fabric-react';\nimport { getNavGroupStyles } from './NavGroup.styles';\nimport { NavGroupBase } from './NavGroupBase';\nexport var NavGroup = styled(NavGroupBase, getNavGroupStyles, undefined, { scope: 'NavGroup' });\n//# sourceMappingURL=NavGroup.js.map","import { FontWeights } from 'office-ui-fabric-react';\nimport { navItemHeight, navGroupDividerStyle } from './Nav.styles';\nexport var getNavGroupStyles = function (props) {\n var theme = props.theme;\n return {\n navGroupDivider: navGroupDividerStyle(theme),\n navGroupTitle: {\n lineHeight: navItemHeight,\n color: theme.palette.neutralPrimary,\n fontWeight: FontWeights.semibold,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n display: 'flex',\n selectors: {\n '::before': {\n content: '\"\"',\n width: '16px',\n flex: '0 0 auto'\n }\n }\n },\n navItem: {\n margin: '0px',\n padding: '0px'\n }\n };\n};\n//# sourceMappingURL=NavGroup.styles.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, FocusZone, FocusZoneDirection, warnMutuallyExclusive } from 'office-ui-fabric-react';\nimport { NavLink } from './NavLink';\nimport { NavGroup } from './NavGroup';\nimport { getNavCountInfo, getNavGroupCountStart } from './Nav.utils';\nvar getClassNames = classNamesFunction();\nvar NavBase = /** @class */ (function (_super) {\n __extends(NavBase, _super);\n function NavBase(props) {\n var _this = _super.call(this, props) || this;\n warnMutuallyExclusive('NavBase', _this.props, {\n isNavCollapsed: 'defaultIsNavCollapsed'\n });\n _this.state = {\n isNavCollapsed: !!(props.isNavCollapsed !== undefined ? props.isNavCollapsed : props.defaultIsNavCollapsed),\n shouldScroll: false,\n zoomLevel: window.devicePixelRatio\n };\n _this._menuRef = React.createRef();\n _this._containerRef = React.createRef();\n _this._focusRef = React.createRef();\n _this._onNavCollapseClicked = _this._onNavCollapseClicked.bind(_this);\n _this._setScrollLayout = _this._setScrollLayout.bind(_this);\n _this._updatePixelRatio = _this._updatePixelRatio.bind(_this);\n return _this;\n }\n NavBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, groups = _a.groups, enableCustomization = _a.enableCustomization, showMore = _a.showMore, styles = _a.styles, showMoreLinkProps = _a.showMoreLinkProps, editLinkProps = _a.editLinkProps, collapseNavLinkProps = _a.collapseNavLinkProps, theme = _a.theme, hideCollapseLink = _a.hideCollapseLink;\n var _b = this.state, shouldScroll = _b.shouldScroll, zoomLevel = _b.zoomLevel;\n var isNavCollapsed = this.props.isNavCollapsed === undefined ? this.state.isNavCollapsed : this.props.isNavCollapsed;\n var classNames = getClassNames(styles, { isNavCollapsed: isNavCollapsed, shouldScroll: shouldScroll, zoomLevel: zoomLevel, theme: theme });\n var _c = getNavCountInfo(groups, enableCustomization, showMore, hideCollapseLink), navItemTotal = _c.navItemTotal, editNavIndex = _c.editNavIndex, rest = __rest(_c, [\"navItemTotal\", \"editNavIndex\"]);\n var navGroupStartIndex = rest.navGroupStartIndex;\n return (React.createElement(\"div\", { className: classNames.root, role: \"presentation\" },\n React.createElement(\"div\", { className: classNames.navWrapper, role: \"presentation\" },\n React.createElement(\"nav\", { role: \"navigation\", className: classNames.navContainer, ref: this._containerRef },\n React.createElement(\"div\", { ref: this._menuRef, role: \"presentation\" },\n React.createElement(FocusZone, { isCircularNavigation: true, direction: FocusZoneDirection.vertical, as: \"ul\", role: \"menubar\", \"aria-orientation\": \"vertical\", className: classNames.navGroup, componentRef: this._focusRef },\n !hideCollapseLink && (React.createElement(\"li\", { role: \"presentation\" },\n React.createElement(NavLink, __assign({ primaryIconName: 'GlobalNavButton', role: \"menuitem\", \"aria-expanded\": !isNavCollapsed }, collapseNavLinkProps, { onClick: this._onNavCollapseClicked, \"aria-posinset\": 1, \"aria-setsize\": navItemTotal })))),\n groups.map(function (group, groupIndex, array) {\n // Call getNavGroupCountStart to properly calculate the start index of the next group\n navGroupStartIndex = getNavGroupCountStart(navGroupStartIndex, groupIndex, array);\n return (React.createElement(NavGroup, __assign({}, group, { groupIndex: groupIndex, groupName: group.name, isNavCollapsed: isNavCollapsed, navRef: _this._containerRef, focusZoneRef: _this._focusRef, itemStartIndex: navGroupStartIndex, itemTotal: navItemTotal, \n // explicitly setting key here to appease linter as it doesn't get that it's set due to spread\n key: group.key })));\n }),\n enableCustomization && (\n // If enableCustomization\n React.createElement(React.Fragment, null,\n React.createElement(\"li\", { role: \"presentation\", className: classNames.navGroupDivider }),\n React.createElement(\"li\", { role: \"presentation\" },\n React.createElement(NavLink, __assign({ primaryIconName: 'Edit', role: \"menuitem\" }, editLinkProps, { \"aria-setsize\": navItemTotal, \"aria-posinset\": editNavIndex }))),\n showMore && (React.createElement(\"li\", { role: \"presentation\" },\n React.createElement(NavLink, __assign({ primaryIconName: 'More', role: \"menuitem\" }, showMoreLinkProps, { \"aria-setsize\": navItemTotal, \"aria-posinset\": navItemTotal }))))))))))));\n };\n NavBase.prototype.componentDidMount = function () {\n this._createObserver();\n this._updatePixelRatio();\n };\n NavBase.prototype.componentWillUnmount = function () {\n this._observer.unobserve(this._menuRef.current);\n this._mql.onchange = null;\n };\n NavBase.prototype._createObserver = function () {\n // ref use, call after mount.\n this._observer = new IntersectionObserver(this._setScrollLayout, {\n root: this._containerRef.current,\n // Threshold lowered because Chromium floating point error causes scrollbar to incorrectly appear when zoomed.\n // See Chromium bug for more info: https://bugs.chromium.org/p/chromium/issues/detail?id=737228\n threshold: 0.995\n });\n this._observer.observe(this._menuRef.current);\n };\n NavBase.prototype._updatePixelRatio = function () {\n var _this = this;\n if (this._animationFrameID !== undefined) {\n cancelAnimationFrame(this._animationFrameID);\n }\n this._animationFrameID = requestAnimationFrame(function () {\n if (_this._mql) {\n _this._mql.onchange = null;\n }\n _this._mql = matchMedia(\"(resolution: \" + window.devicePixelRatio + \"dppx)\");\n _this._mql.onchange = _this._updatePixelRatio;\n _this._animationFrameID = undefined;\n });\n this.setState({ zoomLevel: window.devicePixelRatio });\n };\n NavBase.prototype._setScrollLayout = function (entries) {\n // if we need to scroll set the internal state accordingly only if the state has actually changed\n // Threshold lowered because Chromium floating point error causes scrollbar to incorrectly appear when zoomed.\n // See Chromium bug for more info: https://bugs.chromium.org/p/chromium/issues/detail?id=737228\n var shouldScroll = entries[0].intersectionRatio < 0.995;\n if (shouldScroll !== this.state.shouldScroll) {\n this.setState({ shouldScroll: shouldScroll });\n }\n };\n NavBase.prototype._onNavCollapseClicked = function (ev) {\n // inform the caller about the collapse event\n // collapse this into a single call by extending interface and overriding sig\n if (this.props.onNavCollapsed) {\n this.props.onNavCollapsed(!this.state.isNavCollapsed);\n }\n // additionally call onClick if it was provided in props\n if (this.props.collapseNavLinkProps && this.props.collapseNavLinkProps.onClick) {\n this.props.collapseNavLinkProps.onClick(ev);\n }\n if (this.props.isNavCollapsed === undefined) {\n this.setState({\n isNavCollapsed: !this.state.isNavCollapsed\n });\n }\n };\n return NavBase;\n}(React.Component));\nexport { NavBase };\n//# sourceMappingURL=NavBase.js.map","/**\n * Function to calculate the number of items and the position of the edit item\n */\nexport var getNavCountInfo = function (groups, enableCustomization, showMore, collapseLinkHidden) {\n // The first nav item index should be 1 unless the collapse nav button is hidden in which case it should be 0\n var navGroupStartIndex = collapseLinkHidden ? 0 : 1;\n var navItemTotal = navGroupStartIndex;\n groups.forEach(function (group) {\n navItemTotal = navItemTotal + group.links.length;\n });\n // this number MUST be maintained manually and should correspond to\n // the number of items rendered below outside the groups array\n navItemTotal += enableCustomization && showMore ? 2 : enableCustomization ? 1 : 0;\n var editNavIndex = enableCustomization ? navItemTotal - (showMore ? 1 : 0) : undefined;\n // We add 1 to navGroupStartIndex to ensure there's a friendly index read by the screen reader (first item is 1 vs 0)\n return { navItemTotal: navItemTotal, editNavIndex: editNavIndex, navGroupStartIndex: navGroupStartIndex + 1 };\n};\n/**\n * Function to get the next group count start when provided with an initial count, index and group array\n * @param initialCount the initial count to start the function from. Usually this is the position index of the previous\n * group's last item but could be something else if this is the first group.\n * @param groupIndex the 0 based index of the group count we're calculating\n * @param groups the array of groups\n */\nexport var getNavGroupCountStart = function (initialCount, groupIndex, groups) {\n return initialCount + (groupIndex > 0 ? groups[groupIndex - 1].links.length : 0);\n};\n//# sourceMappingURL=Nav.utils.js.map","import { styled } from 'office-ui-fabric-react';\nimport { getNavStyles } from './Nav.styles';\nimport { NavBase } from './NavBase';\nexport var Nav = styled(NavBase, getNavStyles, undefined, {\n scope: 'M365LeftNav'\n // Note the slightly different scope name from component name\n // This one will directly conflict with Fabric Nav otherwise\n});\n//# sourceMappingURL=Nav.js.map","import { __assign, __rest } from \"tslib\";\nimport { classNamesFunction, DirectionalHint, IconButton, KeyCodes, ScreenWidthMinXLarge } from '@fluentui/react';\nimport { Nav } from '@m365-admin/nav';\nimport React from 'react';\nvar navCollapseButtonId = 'navCollapseButton';\nvar mobileNavOpenButtonId = 'mobileNavOpenButton';\nvar getClassNames = classNamesFunction();\nvar coherenceNavBase = function (props) {\n var _a, _b;\n var styles = props.styles, theme = props.theme, appName = props.appName, toggleNavAriaLabel = props.toggleNavAriaLabel, toggleNavTooltip = props.toggleNavTooltip, navProps = __rest(props, [\"styles\", \"theme\", \"appName\", \"toggleNavAriaLabel\", \"toggleNavTooltip\"]);\n var _c = React.useState(true), navIsHiddenOnMobile = _c[0], setNavIsHiddenOnMobile = _c[1];\n var _d = React.useState(true), isMobile = _d[0], setIsMobile = _d[1];\n var _e = React.useState(!!props.defaultIsNavCollapsed), isCoherenceNavCollapsed = _e[0], setIsCoherenceNavCollapsed = _e[1];\n var navWrapperRef = React.useRef(null);\n var mobileNavButtonRef = React.useRef(null);\n var frameIdRef = React.useRef(0);\n var hamburgerIcon = {\n iconName: 'GlobalNavButton'\n };\n var isNavCollapsed = navIsHiddenOnMobile === false ? false : isCoherenceNavCollapsed;\n var classNames = getClassNames(styles, {\n isNavCollapsed: isNavCollapsed,\n theme: theme,\n shouldScroll: false,\n zoomLevel: window.devicePixelRatio\n });\n React.useEffect(function () {\n var windowWidth = window.innerWidth;\n if (windowWidth < ScreenWidthMinXLarge && navProps.onNavCollapsed) {\n navProps.onNavCollapsed(true);\n }\n window.addEventListener('click', outSideClickDismiss);\n window.addEventListener('keydown', keydownDismiss);\n return function () {\n window.removeEventListener('click', outSideClickDismiss);\n window.removeEventListener('keydown', keydownDismiss);\n };\n }, []);\n React.useEffect(function () {\n window.removeEventListener('resize', handleResize);\n window.addEventListener('resize', handleResize);\n return function () {\n window.removeEventListener('resize', handleResize);\n };\n }, [isCoherenceNavCollapsed]);\n var handleResize = function () {\n if (frameIdRef.current !== 0) {\n cancelAnimationFrame(frameIdRef.current);\n }\n frameIdRef.current = requestAnimationFrame(shouldNavCollapse);\n };\n React.useEffect(function () {\n var _a, _b;\n var windowWidth = window.innerWidth;\n if (windowWidth < ScreenWidthMinXLarge && navIsHiddenOnMobile) {\n (_a = document.getElementById(mobileNavOpenButtonId)) === null || _a === void 0 ? void 0 : _a.focus();\n }\n if (windowWidth < ScreenWidthMinXLarge && !navIsHiddenOnMobile) {\n (_b = document.getElementById(navCollapseButtonId)) === null || _b === void 0 ? void 0 : _b.focus();\n }\n }, [navIsHiddenOnMobile]);\n var outSideClickDismiss = function (event) {\n if (navWrapperRef.current &&\n !navWrapperRef.current.contains(event.target) &&\n mobileNavButtonRef.current &&\n !mobileNavButtonRef.current.contains(event.target)) {\n setNavIsHiddenOnMobile(true);\n }\n };\n var keydownDismiss = function (event) {\n if (event.keyCode === KeyCodes.escape || event.keyCode === KeyCodes.tab) {\n setNavIsHiddenOnMobile(true);\n }\n };\n var showMobileNav = function () {\n setNavIsHiddenOnMobile(false);\n setIsCoherenceNavCollapsed(false);\n if (navProps.onNavCollapsed) {\n navProps.onNavCollapsed(false);\n }\n };\n var navCollapseLinkClick = function (event) {\n var _a;\n setNavIsHiddenOnMobile(true);\n if ((_a = navProps.collapseNavLinkProps) === null || _a === void 0 ? void 0 : _a.onClick) {\n navProps.collapseNavLinkProps.onClick(event);\n }\n };\n var handleNavCollapsed = function () {\n if (window.innerWidth > ScreenWidthMinXLarge) {\n setIsCoherenceNavCollapsed(!isCoherenceNavCollapsed);\n }\n if (navProps.onNavCollapsed) {\n navProps.onNavCollapsed(!isCoherenceNavCollapsed);\n }\n };\n var shouldNavCollapse = function () {\n var _a, _b, _c;\n if (window.innerWidth < ScreenWidthMinXLarge) {\n if (!isCoherenceNavCollapsed) {\n (_a = navProps.onNavCollapsed) === null || _a === void 0 ? void 0 : _a.call(navProps, true);\n }\n setIsMobile(true);\n setIsCoherenceNavCollapsed(true);\n }\n else if (window.innerWidth >= ScreenWidthMinXLarge) {\n if (isMobile) {\n setIsMobile(false);\n setNavIsHiddenOnMobile(true);\n (_b = navProps.onNavCollapsed) === null || _b === void 0 ? void 0 : _b.call(navProps, false);\n }\n else if (isCoherenceNavCollapsed) {\n (_c = navProps.onNavCollapsed) === null || _c === void 0 ? void 0 : _c.call(navProps, false);\n }\n setIsCoherenceNavCollapsed(false);\n }\n };\n return (React.createElement(React.Fragment, null,\n React.createElement(\"div\", { className: classNames.mobileNavWrapper, ref: mobileNavButtonRef },\n React.createElement(IconButton, { iconProps: hamburgerIcon, className: classNames.mobileNavTrigger, onClick: showMobileNav, \"aria-label\": toggleNavAriaLabel !== null && toggleNavAriaLabel !== void 0 ? toggleNavAriaLabel : appName + \" Navigation\", \"aria-expanded\": !navIsHiddenOnMobile, id: mobileNavOpenButtonId })),\n React.createElement(\"div\", { ref: navWrapperRef, className: classNames.outerNavWrapper + \" \" + (navIsHiddenOnMobile ? '' : classNames.showNav) },\n React.createElement(Nav, __assign({}, navProps, { collapseNavLinkProps: __assign({ title: undefined, onClick: navCollapseLinkClick, id: navCollapseButtonId, 'aria-label': toggleNavAriaLabel !== null && toggleNavAriaLabel !== void 0 ? toggleNavAriaLabel : appName + \" Navigation\", tooltipProps: { directionalHint: DirectionalHint.bottomLeftEdge, content: isNavCollapsed ? ((_a = toggleNavTooltip === null || toggleNavTooltip === void 0 ? void 0 : toggleNavTooltip.expand) !== null && _a !== void 0 ? _a : 'Expand navigation') : ((_b = toggleNavTooltip === null || toggleNavTooltip === void 0 ? void 0 : toggleNavTooltip.collapse) !== null && _b !== void 0 ? _b : 'Collapse navigation') } }, navProps.collapseNavLinkProps), isNavCollapsed: isNavCollapsed, onNavCollapsed: handleNavCollapsed, styles: {\n root: classNames.root,\n navContainer: classNames.navContainer,\n navWrapper: classNames.navWrapper,\n navGroup: classNames.navGroup,\n navGroupDivider: classNames.navGroupDivider\n } })))));\n};\nexport { coherenceNavBase as CoherenceNavBase };\n//# sourceMappingURL=CoherenceNav.base.js.map","import { ScreenWidthMinXLarge } from '@fluentui/react';\nimport { navCollapsedWidth } from '@m365-admin/nav';\nimport { getScrollBarWidth } from './CoherenceNav.utilities';\nvar headerHeight = 48;\nvar navWidth = 228;\nvar scrollBarWidth = 0;\nvar currentZoomLevel = 0;\nexport var getStyles = function (props) {\n var _a, _b, _c;\n var theme = props.theme, isNavCollapsed = props.isNavCollapsed, zoomLevel = props.zoomLevel;\n _a = getScrollBarWidth(scrollBarWidth, currentZoomLevel, zoomLevel), scrollBarWidth = _a[0], currentZoomLevel = _a[1];\n return {\n root: {\n position: 'fixed',\n top: headerHeight,\n bottom: 0\n },\n navContainer: {\n width: isNavCollapsed ? navCollapsedWidth + scrollBarWidth : navWidth + scrollBarWidth\n },\n outerNavWrapper: {\n selectors: (_b = {},\n _b[\"@media (max-width: \" + ScreenWidthMinXLarge + \"px)\"] = {\n display: 'none'\n },\n _b)\n },\n showNav: {\n display: 'block',\n position: 'absolute',\n top: headerHeight,\n left: 0,\n bottom: 0\n },\n mobileNavWrapper: {\n marginTop: 4,\n selectors: (_c = {},\n _c[\"@media (min-width: \" + (ScreenWidthMinXLarge + 1) + \"px)\"] = {\n display: 'none'\n },\n _c)\n },\n mobileNavTrigger: {\n marginLeft: 8,\n color: theme.palette.neutralPrimary,\n selectors: {\n ':hover, :active': {\n color: theme.palette.neutralPrimary\n }\n }\n }\n };\n};\n//# sourceMappingURL=CoherenceNav.styles.js.map","import { styled } from '@fluentui/react';\nimport { CoherenceNavBase } from './CoherenceNav.base';\nimport { getStyles } from './CoherenceNav.styles';\nexport var CoherenceNav = styled(CoherenceNavBase, getStyles);\n//# sourceMappingURL=CoherenceNav.js.map","export function getScrollBarWidth(navScrollBarWidth, currentZoomLevel, nextZoomLevel) {\n if (navScrollBarWidth !== 0 && currentZoomLevel === nextZoomLevel) {\n return [navScrollBarWidth, currentZoomLevel];\n }\n currentZoomLevel = nextZoomLevel;\n var scrollDiv = document.createElement('div');\n scrollDiv.setAttribute('style', 'width: 100px; height: 100px; overflow: scroll; position: absolute; top: -999px;');\n var contentDiv = document.createElement('p');\n contentDiv.setAttribute('style', 'width: 100px; height: 200px;');\n scrollDiv.appendChild(contentDiv);\n document.body.appendChild(scrollDiv);\n navScrollBarWidth = scrollDiv.offsetWidth - scrollDiv.clientWidth;\n document.body.removeChild(scrollDiv);\n return [navScrollBarWidth, currentZoomLevel];\n}\n//# sourceMappingURL=CoherenceNav.utilities.js.map","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport { useContext, useState, useEffect } from 'react';\nimport { useHistory } from 'react-router-dom';\nimport { ComponentContext } from '@employee-experience/common/lib/ComponentContext';\nimport { TelemetryEvents } from '@employee-experience/common/lib/TelemetryEvents';\nimport { shouldUseAnchorTag } from '@employee-experience/common/lib/Link';\nconst rootHref = '/';\nfunction isLinkSelected(href) {\n const { pathname } = window.location;\n if (href === rootHref)\n return pathname === href;\n return pathname.startsWith(href);\n}\nexport function useCoherenceNavGroups(groups) {\n const { telemetryClient } = useContext(ComponentContext);\n const history = useHistory();\n const [navGroups, setNavGroups] = useState([]);\n const createLinkGroup = (groups) => {\n return groups.map((_a) => {\n var { links: groupLinks } = _a, otherGroupProps = __rest(_a, [\"links\"]);\n return Object.assign(Object.assign({}, otherGroupProps), { links: createChildLinks(groupLinks) || [] });\n });\n };\n const createLink = (name, href) => {\n return {\n name,\n onClick: () => {\n telemetryClient.trackTrace({\n message: TelemetryEvents.NavLinkClicked,\n properties: {\n linkName: name,\n href,\n },\n });\n if (shouldUseAnchorTag(href, false)) {\n window.open(href);\n }\n else {\n history.push(href);\n setNavGroups(createLinkGroup(groups));\n }\n },\n isSelected: isLinkSelected(href),\n };\n };\n const createChildLinks = (childLinks) => {\n if (!childLinks)\n return;\n return childLinks.map((_a) => {\n var { links, href, name } = _a, otherLinkProps = __rest(_a, [\"links\", \"href\", \"name\"]);\n return Object.assign(Object.assign(Object.assign({}, otherLinkProps), createLink(name, href)), { links: createChildLinks(links) });\n });\n };\n useEffect(() => {\n setNavGroups(createLinkGroup(groups));\n }, [groups]);\n return navGroups;\n}\n//# sourceMappingURL=useCoherenceNavGroups.js.map","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport * as React from 'react';\nimport { CoherenceNav } from '@cseo/controls/lib/nav';\nimport { useCoherenceNavGroups } from './useCoherenceNavGroups';\nimport { ComponentContext } from '@employee-experience/common/lib/ComponentContext';\nimport { EventType, UsageEventName } from '@employee-experience/common/lib/Models';\nexport function Nav(props) {\n const { groups, defaultIsNavCollapsed, appName } = props, otherProps = __rest(props, [\"groups\", \"defaultIsNavCollapsed\", \"appName\"]);\n const { telemetryClient } = React.useContext(ComponentContext);\n const coherenceNavGroups = useCoherenceNavGroups(groups);\n const onToggle = (isOpen) => {\n const navigationEvent = {\n subFeature: `Navigation.SideNav.${isOpen ? 'Open' : 'Close'}`,\n type: EventType.User,\n eventName: UsageEventName.LinkClicked,\n };\n telemetryClient.trackEvent(navigationEvent, Object.assign({}, props));\n if (props.onNavCollapsed)\n props.onNavCollapsed(isOpen);\n };\n return (React.createElement(CoherenceNav, Object.assign({}, otherProps, { appName: appName || '', groups: coherenceNavGroups, onNavCollapsed: (isOpen) => onToggle(isOpen), defaultIsNavCollapsed: defaultIsNavCollapsed === undefined ? true : defaultIsNavCollapsed, telemetryHook: telemetryClient })));\n}\n//# sourceMappingURL=Nav.js.map","export class ReducerRegistry {\n constructor() {\n this.persistBlacklistedDynamicReducers = [];\n this.changeListeners = {};\n this.reducers = {};\n this.dynamicReducers = {};\n }\n getReducers() {\n return Object.assign({}, this.reducers);\n }\n getDynamicReducers() {\n return Object.assign({}, this.dynamicReducers);\n }\n register(name, reducer, skipIfExists = false) {\n if (skipIfExists && this.reducers.hasOwnProperty(name))\n return this;\n this.reducers = Object.assign(Object.assign({}, this.reducers), { [name]: reducer });\n Object.keys(this.changeListeners).forEach((key) => {\n this.changeListeners[key](this.getReducers(), this.getDynamicReducers(), this.persistBlacklistedDynamicReducers);\n });\n return this;\n }\n registerDynamic(name, reducer, skipIfExists = false, shouldPersist = true) {\n if (skipIfExists && this.dynamicReducers.hasOwnProperty(name))\n return this;\n this.dynamicReducers[name] = reducer;\n if (!shouldPersist)\n this.persistBlacklistedDynamicReducers.push(name);\n Object.keys(this.changeListeners).forEach((key) => {\n this.changeListeners[key](this.getReducers(), this.getDynamicReducers(), this.persistBlacklistedDynamicReducers);\n });\n return this;\n }\n exists(reducerName) {\n return (this.reducers.hasOwnProperty(reducerName) ||\n this.dynamicReducers.hasOwnProperty(reducerName));\n }\n addChangeListener(name, fn) {\n this.changeListeners[name] = fn;\n return this;\n }\n removeChangeListener(name) {\n delete this.changeListeners[name];\n return this;\n }\n}\n//# sourceMappingURL=ReducerRegistry.js.map","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport * as React from 'react';\nimport { ComponentContext } from '@employee-experience/common/lib/ComponentContext';\nimport { UsageHelper } from '@employee-experience/common/lib/Models/UsageTelemetry';\nexport function Shell(props) {\n var _a;\n const { children, appName } = props, context = __rest(props, [\"children\", \"appName\"]);\n const usageHelper = appName && appName.trim() != ''\n ? UsageHelper.Fork(appName)\n : UsageHelper;\n const telemetryContext = {\n sourceComponent: 'Shell',\n sourceScript: 'main',\n setUsageEvent: usageHelper.MassageEvent,\n setUsageUser: (usageUser) => {\n UsageHelper.SetUser(usageUser);\n usageHelper.SetUser(usageUser);\n return usageUser;\n },\n usageUser: usageHelper.GetUser,\n setUsageConfig: usageHelper.SetUsageConfig,\n getChildContext: usageHelper.ForkTelemetryContext,\n };\n (_a = context.telemetryClient) === null || _a === void 0 ? void 0 : _a.setContext(telemetryContext);\n return (React.createElement(ComponentContext.Provider, { value: Object.assign(Object.assign({}, context), { telemetryContext }) }, children));\n}\n//# sourceMappingURL=Shell.js.map","import { createGlobalStyle } from 'styled-components';\nimport { Colors } from '@employee-experience/common/lib/Colors';\nexport const ShellStyles = createGlobalStyle `\n *, *:before, *:after {\n box-sizing: border-box;\n }\n\n html { \n height: 100%;\n }\n\n body {\n position: relative;\n height: 100%;\n margin: 0;\n color: #333;\n background-color: #F2F2F2;\n overflow-x: hidden;\n padding: 48px 0 0;\n }\n\n h1, h2, h3, h4, p, ul {\n margin: 0;\n }\n\n button {\n cursor: pointer;\n }\n\n a {\n cursor: pointer;\n color: ${Colors.Primary};\n text-decoration: none;\n }\n\n ul {\n list-style: none;\n }\n\n body > iframe {\n display: none;\n }\n\n #app {\n height: 100%;\n display: flex;\n flex-direction: column;\n }\n\n @keyframes placeholderBlinks {\n 0% { opacity: 1; }\n 50% { opacity: 0.7; }\n }\n`;\n//# sourceMappingURL=Shell.styled.js.map","export var KEY_PREFIX = 'persist:';\nexport var FLUSH = 'persist/FLUSH';\nexport var REHYDRATE = 'persist/REHYDRATE';\nexport var PAUSE = 'persist/PAUSE';\nexport var PERSIST = 'persist/PERSIST';\nexport var PURGE = 'persist/PURGE';\nexport var REGISTER = 'persist/REGISTER';\nexport var DEFAULT_VERSION = -1;","function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n/*\n autoMergeLevel1: \n - merges 1 level of substate\n - skips substate if already modified\n*/\nexport default function autoMergeLevel1(inboundState, originalState, reducedState, _ref) {\n var debug = _ref.debug;\n\n var newState = _objectSpread({}, reducedState); // only rehydrate if inboundState exists and is an object\n\n\n if (inboundState && _typeof(inboundState) === 'object') {\n Object.keys(inboundState).forEach(function (key) {\n // ignore _persist data\n if (key === '_persist') return; // if reducer modifies substate, skip auto rehydration\n\n if (originalState[key] !== reducedState[key]) {\n if (process.env.NODE_ENV !== 'production' && debug) console.log('redux-persist/stateReconciler: sub state for key `%s` modified, skipping.', key);\n return;\n } // otherwise hard set the new value\n\n\n newState[key] = inboundState[key];\n });\n }\n\n if (process.env.NODE_ENV !== 'production' && debug && inboundState && _typeof(inboundState) === 'object') console.log(\"redux-persist/stateReconciler: rehydrated keys '\".concat(Object.keys(inboundState).join(', '), \"'\"));\n return newState;\n}","import { KEY_PREFIX, REHYDRATE } from './constants';\n// @TODO remove once flow < 0.63 support is no longer required.\nexport default function createPersistoid(config) {\n // defaults\n var blacklist = config.blacklist || null;\n var whitelist = config.whitelist || null;\n var transforms = config.transforms || [];\n var throttle = config.throttle || 0;\n var storageKey = \"\".concat(config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX).concat(config.key);\n var storage = config.storage;\n var serialize;\n\n if (config.serialize === false) {\n serialize = function serialize(x) {\n return x;\n };\n } else if (typeof config.serialize === 'function') {\n serialize = config.serialize;\n } else {\n serialize = defaultSerialize;\n }\n\n var writeFailHandler = config.writeFailHandler || null; // initialize stateful values\n\n var lastState = {};\n var stagedState = {};\n var keysToProcess = [];\n var timeIterator = null;\n var writePromise = null;\n\n var update = function update(state) {\n // add any changed keys to the queue\n Object.keys(state).forEach(function (key) {\n if (!passWhitelistBlacklist(key)) return; // is keyspace ignored? noop\n\n if (lastState[key] === state[key]) return; // value unchanged? noop\n\n if (keysToProcess.indexOf(key) !== -1) return; // is key already queued? noop\n\n keysToProcess.push(key); // add key to queue\n }); //if any key is missing in the new state which was present in the lastState,\n //add it for processing too\n\n Object.keys(lastState).forEach(function (key) {\n if (state[key] === undefined && passWhitelistBlacklist(key) && keysToProcess.indexOf(key) === -1 && lastState[key] !== undefined) {\n keysToProcess.push(key);\n }\n }); // start the time iterator if not running (read: throttle)\n\n if (timeIterator === null) {\n timeIterator = setInterval(processNextKey, throttle);\n }\n\n lastState = state;\n };\n\n function processNextKey() {\n if (keysToProcess.length === 0) {\n if (timeIterator) clearInterval(timeIterator);\n timeIterator = null;\n return;\n }\n\n var key = keysToProcess.shift();\n var endState = transforms.reduce(function (subState, transformer) {\n return transformer.in(subState, key, lastState);\n }, lastState[key]);\n\n if (endState !== undefined) {\n try {\n stagedState[key] = serialize(endState);\n } catch (err) {\n console.error('redux-persist/createPersistoid: error serializing state', err);\n }\n } else {\n //if the endState is undefined, no need to persist the existing serialized content\n delete stagedState[key];\n }\n\n if (keysToProcess.length === 0) {\n writeStagedState();\n }\n }\n\n function writeStagedState() {\n // cleanup any removed keys just before write.\n Object.keys(stagedState).forEach(function (key) {\n if (lastState[key] === undefined) {\n delete stagedState[key];\n }\n });\n writePromise = storage.setItem(storageKey, serialize(stagedState)).catch(onWriteFail);\n }\n\n function passWhitelistBlacklist(key) {\n if (whitelist && whitelist.indexOf(key) === -1 && key !== '_persist') return false;\n if (blacklist && blacklist.indexOf(key) !== -1) return false;\n return true;\n }\n\n function onWriteFail(err) {\n // @TODO add fail handlers (typically storage full)\n if (writeFailHandler) writeFailHandler(err);\n\n if (err && process.env.NODE_ENV !== 'production') {\n console.error('Error storing data', err);\n }\n }\n\n var flush = function flush() {\n while (keysToProcess.length !== 0) {\n processNextKey();\n }\n\n return writePromise || Promise.resolve();\n }; // return `persistoid`\n\n\n return {\n update: update,\n flush: flush\n };\n} // @NOTE in the future this may be exposed via config\n\nfunction defaultSerialize(data) {\n return JSON.stringify(data);\n}","import { KEY_PREFIX } from './constants';\nexport default function getStoredState(config) {\n var transforms = config.transforms || [];\n var storageKey = \"\".concat(config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX).concat(config.key);\n var storage = config.storage;\n var debug = config.debug;\n var deserialize;\n\n if (config.deserialize === false) {\n deserialize = function deserialize(x) {\n return x;\n };\n } else if (typeof config.deserialize === 'function') {\n deserialize = config.deserialize;\n } else {\n deserialize = defaultDeserialize;\n }\n\n return storage.getItem(storageKey).then(function (serialized) {\n if (!serialized) return undefined;else {\n try {\n var state = {};\n var rawState = deserialize(serialized);\n Object.keys(rawState).forEach(function (key) {\n state[key] = transforms.reduceRight(function (subState, transformer) {\n return transformer.out(subState, key, rawState);\n }, deserialize(rawState[key]));\n });\n return state;\n } catch (err) {\n if (process.env.NODE_ENV !== 'production' && debug) console.log(\"redux-persist/getStoredState: Error restoring data \".concat(serialized), err);\n throw err;\n }\n }\n });\n}\n\nfunction defaultDeserialize(serial) {\n return JSON.parse(serial);\n}","import { KEY_PREFIX } from './constants';\nexport default function purgeStoredState(config) {\n var storage = config.storage;\n var storageKey = \"\".concat(config.keyPrefix !== undefined ? config.keyPrefix : KEY_PREFIX).concat(config.key);\n return storage.removeItem(storageKey, warnIfRemoveError);\n}\n\nfunction warnIfRemoveError(err) {\n if (err && process.env.NODE_ENV !== 'production') {\n console.error('redux-persist/purgeStoredState: Error purging data stored state', err);\n }\n}","function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nfunction _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }\n\nfunction _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }\n\nimport { FLUSH, PAUSE, PERSIST, PURGE, REHYDRATE, DEFAULT_VERSION } from './constants';\nimport autoMergeLevel1 from './stateReconciler/autoMergeLevel1';\nimport createPersistoid from './createPersistoid';\nimport defaultGetStoredState from './getStoredState';\nimport purgeStoredState from './purgeStoredState';\nvar DEFAULT_TIMEOUT = 5000;\n/*\n @TODO add validation / handling for:\n - persisting a reducer which has nested _persist\n - handling actions that fire before reydrate is called\n*/\n\nexport default function persistReducer(config, baseReducer) {\n if (process.env.NODE_ENV !== 'production') {\n if (!config) throw new Error('config is required for persistReducer');\n if (!config.key) throw new Error('key is required in persistor config');\n if (!config.storage) throw new Error(\"redux-persist: config.storage is required. Try using one of the provided storage engines `import storage from 'redux-persist/lib/storage'`\");\n }\n\n var version = config.version !== undefined ? config.version : DEFAULT_VERSION;\n var debug = config.debug || false;\n var stateReconciler = config.stateReconciler === undefined ? autoMergeLevel1 : config.stateReconciler;\n var getStoredState = config.getStoredState || defaultGetStoredState;\n var timeout = config.timeout !== undefined ? config.timeout : DEFAULT_TIMEOUT;\n var _persistoid = null;\n var _purge = false;\n var _paused = true;\n\n var conditionalUpdate = function conditionalUpdate(state) {\n // update the persistoid only if we are rehydrated and not paused\n state._persist.rehydrated && _persistoid && !_paused && _persistoid.update(state);\n return state;\n };\n\n return function (state, action) {\n var _ref = state || {},\n _persist = _ref._persist,\n rest = _objectWithoutProperties(_ref, [\"_persist\"]); // $FlowIgnore need to update State type\n\n\n var restState = rest;\n\n if (action.type === PERSIST) {\n var _sealed = false;\n\n var _rehydrate = function _rehydrate(payload, err) {\n // dev warning if we are already sealed\n if (process.env.NODE_ENV !== 'production' && _sealed) console.error(\"redux-persist: rehydrate for \\\"\".concat(config.key, \"\\\" called after timeout.\"), payload, err); // only rehydrate if we are not already sealed\n\n if (!_sealed) {\n action.rehydrate(config.key, payload, err);\n _sealed = true;\n }\n };\n\n timeout && setTimeout(function () {\n !_sealed && _rehydrate(undefined, new Error(\"redux-persist: persist timed out for persist key \\\"\".concat(config.key, \"\\\"\")));\n }, timeout); // @NOTE PERSIST resumes if paused.\n\n _paused = false; // @NOTE only ever create persistoid once, ensure we call it at least once, even if _persist has already been set\n\n if (!_persistoid) _persistoid = createPersistoid(config); // @NOTE PERSIST can be called multiple times, noop after the first\n\n if (_persist) {\n // We still need to call the base reducer because there might be nested\n // uses of persistReducer which need to be aware of the PERSIST action\n return _objectSpread({}, baseReducer(restState, action), {\n _persist: _persist\n });\n }\n\n if (typeof action.rehydrate !== 'function' || typeof action.register !== 'function') throw new Error('redux-persist: either rehydrate or register is not a function on the PERSIST action. This can happen if the action is being replayed. This is an unexplored use case, please open an issue and we will figure out a resolution.');\n action.register(config.key);\n getStoredState(config).then(function (restoredState) {\n var migrate = config.migrate || function (s, v) {\n return Promise.resolve(s);\n };\n\n migrate(restoredState, version).then(function (migratedState) {\n _rehydrate(migratedState);\n }, function (migrateErr) {\n if (process.env.NODE_ENV !== 'production' && migrateErr) console.error('redux-persist: migration error', migrateErr);\n\n _rehydrate(undefined, migrateErr);\n });\n }, function (err) {\n _rehydrate(undefined, err);\n });\n return _objectSpread({}, baseReducer(restState, action), {\n _persist: {\n version: version,\n rehydrated: false\n }\n });\n } else if (action.type === PURGE) {\n _purge = true;\n action.result(purgeStoredState(config));\n return _objectSpread({}, baseReducer(restState, action), {\n _persist: _persist\n });\n } else if (action.type === FLUSH) {\n action.result(_persistoid && _persistoid.flush());\n return _objectSpread({}, baseReducer(restState, action), {\n _persist: _persist\n });\n } else if (action.type === PAUSE) {\n _paused = true;\n } else if (action.type === REHYDRATE) {\n // noop on restState if purging\n if (_purge) return _objectSpread({}, restState, {\n _persist: _objectSpread({}, _persist, {\n rehydrated: true\n }) // @NOTE if key does not match, will continue to default else below\n\n });\n\n if (action.key === config.key) {\n var reducedState = baseReducer(restState, action);\n var inboundState = action.payload; // only reconcile state if stateReconciler and inboundState are both defined\n\n var reconciledRest = stateReconciler !== false && inboundState !== undefined ? stateReconciler(inboundState, state, reducedState, config) : reducedState;\n\n var _newState = _objectSpread({}, reconciledRest, {\n _persist: _objectSpread({}, _persist, {\n rehydrated: true\n })\n });\n\n return conditionalUpdate(_newState);\n }\n } // if we have not already handled PERSIST, straight passthrough\n\n\n if (!_persist) return baseReducer(state, action); // run base reducer:\n // is state modified ? return original : return updated\n\n var newState = baseReducer(restState, action);\n if (newState === restState) return state;\n return conditionalUpdate(_objectSpread({}, newState, {\n _persist: _persist\n }));\n };\n}","function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread(); }\n\nfunction _nonIterableSpread() { throw new TypeError(\"Invalid attempt to spread non-iterable instance\"); }\n\nfunction _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === \"[object Arguments]\") return Array.from(iter); }\n\nfunction _arrayWithoutHoles(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\nimport { createStore } from 'redux';\nimport { FLUSH, PAUSE, PERSIST, PURGE, REGISTER, REHYDRATE } from './constants';\nvar initialState = {\n registry: [],\n bootstrapped: false\n};\n\nvar persistorReducer = function persistorReducer() {\n var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;\n var action = arguments.length > 1 ? arguments[1] : undefined;\n\n switch (action.type) {\n case REGISTER:\n return _objectSpread({}, state, {\n registry: [].concat(_toConsumableArray(state.registry), [action.key])\n });\n\n case REHYDRATE:\n var firstIndex = state.registry.indexOf(action.key);\n\n var registry = _toConsumableArray(state.registry);\n\n registry.splice(firstIndex, 1);\n return _objectSpread({}, state, {\n registry: registry,\n bootstrapped: registry.length === 0\n });\n\n default:\n return state;\n }\n};\n\nexport default function persistStore(store, options, cb) {\n // help catch incorrect usage of passing PersistConfig in as PersistorOptions\n if (process.env.NODE_ENV !== 'production') {\n var optionsToTest = options || {};\n var bannedKeys = ['blacklist', 'whitelist', 'transforms', 'storage', 'keyPrefix', 'migrate'];\n bannedKeys.forEach(function (k) {\n if (!!optionsToTest[k]) console.error(\"redux-persist: invalid option passed to persistStore: \\\"\".concat(k, \"\\\". You may be incorrectly passing persistConfig into persistStore, whereas it should be passed into persistReducer.\"));\n });\n }\n\n var boostrappedCb = cb || false;\n\n var _pStore = createStore(persistorReducer, initialState, options && options.enhancer ? options.enhancer : undefined);\n\n var register = function register(key) {\n _pStore.dispatch({\n type: REGISTER,\n key: key\n });\n };\n\n var rehydrate = function rehydrate(key, payload, err) {\n var rehydrateAction = {\n type: REHYDRATE,\n payload: payload,\n err: err,\n key: key // dispatch to `store` to rehydrate and `persistor` to track result\n\n };\n store.dispatch(rehydrateAction);\n\n _pStore.dispatch(rehydrateAction);\n\n if (boostrappedCb && persistor.getState().bootstrapped) {\n boostrappedCb();\n boostrappedCb = false;\n }\n };\n\n var persistor = _objectSpread({}, _pStore, {\n purge: function purge() {\n var results = [];\n store.dispatch({\n type: PURGE,\n result: function result(purgeResult) {\n results.push(purgeResult);\n }\n });\n return Promise.all(results);\n },\n flush: function flush() {\n var results = [];\n store.dispatch({\n type: FLUSH,\n result: function result(flushResult) {\n results.push(flushResult);\n }\n });\n return Promise.all(results);\n },\n pause: function pause() {\n store.dispatch({\n type: PAUSE\n });\n },\n persist: function persist() {\n store.dispatch({\n type: PERSIST,\n register: register,\n rehydrate: rehydrate\n });\n }\n });\n\n if (!(options && options.manualPersist)) {\n persistor.persist();\n }\n\n return persistor;\n}","function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction noop() {}\n\nvar noopStorage = {\n getItem: noop,\n setItem: noop,\n removeItem: noop\n};\n\nfunction hasStorage(storageType) {\n if ((typeof self === \"undefined\" ? \"undefined\" : _typeof(self)) !== 'object' || !(storageType in self)) {\n return false;\n }\n\n try {\n var storage = self[storageType];\n var testKey = \"redux-persist \".concat(storageType, \" test\");\n storage.setItem(testKey, 'test');\n storage.getItem(testKey);\n storage.removeItem(testKey);\n } catch (e) {\n if (process.env.NODE_ENV !== 'production') console.warn(\"redux-persist \".concat(storageType, \" test failed, persistence will be disabled.\"));\n return false;\n }\n\n return true;\n}\n\nexport default function getStorage(type) {\n var storageType = \"\".concat(type, \"Storage\");\n if (hasStorage(storageType)) return self[storageType];else {\n if (process.env.NODE_ENV !== 'production') {\n console.error(\"redux-persist failed to create sync storage. falling back to noop storage.\");\n }\n\n return noopStorage;\n }\n}","import createWebStorage from './createWebStorage';\nexport default createWebStorage('local');","import getStorage from './getStorage';\nexport default function createWebStorage(type) {\n var storage = getStorage(type);\n return {\n getItem: function getItem(key) {\n return new Promise(function (resolve, reject) {\n resolve(storage.getItem(key));\n });\n },\n setItem: function setItem(key, item) {\n return new Promise(function (resolve, reject) {\n resolve(storage.setItem(key, item));\n });\n },\n removeItem: function removeItem(key) {\n return new Promise(function (resolve, reject) {\n resolve(storage.removeItem(key));\n });\n }\n };\n}","function _typeof(obj) { if (typeof Symbol === \"function\" && typeof Symbol.iterator === \"symbol\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \"function\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \"symbol\" : typeof obj; }; } return _typeof(obj); }\n\nfunction ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }\n\nfunction _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }\n\nfunction _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }\n\n/*\n autoMergeLevel2: \n - merges 2 level of substate\n - skips substate if already modified\n - this is essentially redux-perist v4 behavior\n*/\nexport default function autoMergeLevel2(inboundState, originalState, reducedState, _ref) {\n var debug = _ref.debug;\n\n var newState = _objectSpread({}, reducedState); // only rehydrate if inboundState exists and is an object\n\n\n if (inboundState && _typeof(inboundState) === 'object') {\n Object.keys(inboundState).forEach(function (key) {\n // ignore _persist data\n if (key === '_persist') return; // if reducer modifies substate, skip auto rehydration\n\n if (originalState[key] !== reducedState[key]) {\n if (process.env.NODE_ENV !== 'production' && debug) console.log('redux-persist/stateReconciler: sub state for key `%s` modified, skipping.', key);\n return;\n }\n\n if (isPlainEnoughObject(reducedState[key])) {\n // if object is plain enough shallow merge the new values (hence \"Level2\")\n newState[key] = _objectSpread({}, newState[key], {}, inboundState[key]);\n return;\n } // otherwise hard set\n\n\n newState[key] = inboundState[key];\n });\n }\n\n if (process.env.NODE_ENV !== 'production' && debug && inboundState && _typeof(inboundState) === 'object') console.log(\"redux-persist/stateReconciler: rehydrated keys '\".concat(Object.keys(inboundState).join(', '), \"'\"));\n return newState;\n}\n\nfunction isPlainEnoughObject(o) {\n return o !== null && !Array.isArray(o) && _typeof(o) === 'object';\n}","import createSagaMiddleware from 'redux-saga';\nimport { createStore, applyMiddleware, combineReducers, } from 'redux';\nimport { persistReducer, persistStore } from 'redux-persist';\nimport persistStorage from 'redux-persist/es/storage';\nimport autoMergeLevel2 from 'redux-persist/es/stateReconciler/autoMergeLevel2';\nimport { createLogger } from 'redux-logger';\nimport { composeWithDevTools } from 'redux-devtools-extension';\nexport class StoreBuilder {\n constructor(reducerRegistery, initialState = { dynamic: {} }) {\n this.middlewares = [];\n this.persistConfig = {\n key: 'root',\n storage: persistStorage,\n stateReconciler: autoMergeLevel2,\n // https://github.com/rt2zz/redux-persist/issues/786\n // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n // @ts-ignore\n timeout: null,\n };\n this.loggerConfig = {};\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n this.rootSagas = [];\n this.reducerRegistery = reducerRegistery;\n this.initialState = Object.assign({ dynamic: Object.assign({}, initialState.dynamic) }, initialState);\n }\n configureSaga(context) {\n this.context = context;\n this.sagaMiddleware = createSagaMiddleware({\n context,\n });\n this.middlewares.push(this.sagaMiddleware);\n return this;\n }\n configureLogger(enableOrOption) {\n if (enableOrOption !== false) {\n const opt = Object.assign(Object.assign({}, this.loggerConfig), (typeof enableOrOption !== 'boolean' ? enableOrOption : {}));\n this.middlewares.push(createLogger(opt));\n }\n return this;\n }\n configurePersistor(config) {\n this.persistConfig = Object.assign(Object.assign({}, this.persistConfig), config);\n return this;\n }\n addMiddleware(middleware) {\n this.middlewares.push(middleware);\n return this;\n }\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n addRootSagas(sagas) {\n this.rootSagas = sagas;\n return this;\n }\n build() {\n if (!this.sagaMiddleware)\n throw new Error('Saga middleware was not configured.');\n if (!this.context)\n throw new Error('Context must be configured using configureContext method');\n const reducers = this.combine(this.reducerRegistery.getReducers(), this.reducerRegistery.getDynamicReducers(), [], this.initialState);\n const persistedReducer = persistReducer(this.persistConfig, reducers);\n const ifDev = !process.env.NODE_ENV || process.env.NODE_ENV === 'development';\n const store = createStore(persistedReducer, this.initialState, !ifDev\n ? applyMiddleware(...this.middlewares)\n : composeWithDevTools(applyMiddleware(...this.middlewares)));\n const persistor = persistStore(store);\n this.reducerRegistery.addChangeListener('default', (newReducers, newDynamicReducers, persistBlacklistedDynamicReducers) => {\n store.replaceReducer(persistReducer(this.persistConfig, this.combine(newReducers, newDynamicReducers, persistBlacklistedDynamicReducers, store.getState())));\n persistor.persist();\n });\n // eslint-disable-next-line @typescript-eslint/no-non-null-assertion\n this.rootSagas.map((saga) => this.sagaMiddleware.run(saga));\n return {\n store,\n reducerRegistry: this.reducerRegistery,\n runSaga: this.sagaMiddleware.run,\n context: this.context,\n };\n }\n combine(reducers, dynamicReducers, persistBlacklistedDynamicReducers, currentState = null) {\n const reducerNames = Object.keys(reducers);\n const dynamicReducerNames = Object.keys(dynamicReducers);\n Object.keys(currentState || this.initialState).forEach((item) => {\n if (reducerNames.indexOf(item) === -1) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n reducers[item] = (state = null) => state;\n }\n });\n Object.keys((currentState && currentState.dynamic) || {}).forEach((item) => {\n if (dynamicReducerNames.indexOf(item) === -1) {\n // eslint-disable-next-line @typescript-eslint/ban-types\n dynamicReducers[item] = (state = null) => state;\n }\n });\n if (dynamicReducerNames.length > 0) {\n reducers.dynamic = persistReducer(Object.assign(Object.assign({}, this.persistConfig), { key: `${this.persistConfig.key}.dynamic`, whitelist: undefined, blacklist: persistBlacklistedDynamicReducers }), combineReducers(dynamicReducers));\n }\n return combineReducers(reducers);\n }\n}\n//# sourceMappingURL=StoreBuilder.js.map","import styled from 'styled-components';\n// Adds space for nav\n// flex-shrink for stick footer\nexport const FooterRoot = styled.footer `\n flex-shrink: 0;\n width: 100%;\n\n @media (min-width: 1025px) {\n width: calc(100% - 48px);\n margin-left: 48px;\n }\n`;\n//# sourceMappingURL=Footer.styled.js.map","import * as React from 'react';\nimport * as Styled from './Footer.styled';\nexport function Footer(\n// eslint-disable-next-line @typescript-eslint/ban-types\nprops) {\n return React.createElement(Styled.FooterRoot, null, props.children);\n}\n//# sourceMappingURL=Footer.js.map","var __rest = (this && this.__rest) || function (s, e) {\n var t = {};\n for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)\n t[p] = s[p];\n if (s != null && typeof Object.getOwnPropertySymbols === \"function\")\n for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {\n if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))\n t[p[i]] = s[p[i]];\n }\n return t;\n};\nimport * as React from 'react';\nimport { Provider } from 'react-redux';\nimport { ReduxContext } from '@employee-experience/common/lib/ReduxContext';\nimport { useSelector, ReactReduxContext } from 'react-redux';\nexport function withStore(storeBuilderResult) {\n const { store, context } = storeBuilderResult, otherResults = __rest(storeBuilderResult, [\"store\", \"context\"]);\n return (WrappedComponent) => {\n const ComponentWithStore = (\n // eslint-disable-next-line @typescript-eslint/ban-types\n props) => {\n const { children } = props;\n return (React.createElement(Provider, { store: store },\n React.createElement(ReduxContext.Provider, { value: Object.assign({ dispatch: store.dispatch, useSelector, __redux_context__: ReactReduxContext }, otherResults) },\n React.createElement(WrappedComponent, Object.assign({}, context), children))));\n };\n return ComponentWithStore;\n };\n}\n//# sourceMappingURL=withStore.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","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","/**\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","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 SecondsInOneMinute: 60,\n OffsetTo24HourFormat: 12,\n /**\n * Matches a time string. Groups:\n * 1. hours (with or without leading 0)\n * 2. minutes\n * 3. seconds (optional)\n * 4. meridiem (am/pm, case-insensitive, optional)\n */\n TimeFormatRegex: /^(\\d\\d?):(\\d\\d):?(\\d\\d)? ?([ap]m)?/i,\n};\n//# sourceMappingURL=timeConstants.js.map","import { getParent } from './getParent';\n/**\n * Determines whether or not a parent element contains a given child element.\n * If `allowVirtualParents` is true, this method may return `true` if the child\n * has the parent in its virtual element hierarchy.\n *\n * @public\n */\nexport function elementContains(parent, child, allowVirtualParents) {\n if (allowVirtualParents === void 0) { allowVirtualParents = true; }\n var isContained = false;\n if (parent && child) {\n if (allowVirtualParents) {\n if (parent === child) {\n isContained = true;\n }\n else {\n isContained = false;\n while (child) {\n var nextParent = getParent(child);\n if (nextParent === parent) {\n isContained = true;\n break;\n }\n child = nextParent;\n }\n }\n }\n else if (parent.contains) {\n isContained = parent.contains(child);\n }\n }\n return isContained;\n}\n//# sourceMappingURL=elementContains.js.map","import { findElementRecursive } from './findElementRecursive';\n/**\n * Determines if an element, or any of its ancestors, contain the given attribute\n * @param element - element to start searching at\n * @param attribute - the attribute to search for\n * @returns the value of the first instance found\n */\nexport function elementContainsAttribute(element, attribute) {\n var elementMatch = findElementRecursive(element, function (testElement) { return testElement.hasAttribute(attribute); });\n return elementMatch && elementMatch.getAttribute(attribute);\n}\n//# sourceMappingURL=elementContainsAttribute.js.map","import { getParent } from './getParent';\n/**\n * Finds the first parent element where the matchFunction returns true\n * @param element - element to start searching at\n * @param matchFunction - the function that determines if the element is a match\n * @returns the matched element or null no match was found\n */\nexport function findElementRecursive(element, matchFunction) {\n if (!element || element === document.body) {\n return null;\n }\n return matchFunction(element) ? element : findElementRecursive(getParent(element), matchFunction);\n}\n//# sourceMappingURL=findElementRecursive.js.map","import { isVirtualElement } from './isVirtualElement';\n/**\n * Gets the elements which are child elements of the given element.\n * If `allowVirtualChildren` is `true`, this method enumerates virtual child elements\n * after the original children.\n * @param parent - The element to get the children of.\n * @param allowVirtualChildren - true if the method should enumerate virtual child elements.\n */\nexport function getChildren(parent, allowVirtualChildren) {\n if (allowVirtualChildren === void 0) { allowVirtualChildren = true; }\n var children = [];\n if (parent) {\n for (var i = 0; i < parent.children.length; i++) {\n children.push(parent.children.item(i));\n }\n if (allowVirtualChildren && isVirtualElement(parent)) {\n children.push.apply(children, parent._virtual.children);\n }\n }\n return children;\n}\n//# sourceMappingURL=getChildren.js.map","import { getVirtualParent } from './getVirtualParent';\n/**\n * Gets the element which is the parent of a given element.\n * If `allowVirtuaParents` is `true`, this method prefers the virtual parent over\n * real DOM parent when present.\n *\n * @public\n */\nexport function getParent(child, allowVirtualParents) {\n if (allowVirtualParents === void 0) { allowVirtualParents = true; }\n return (child &&\n ((allowVirtualParents && getVirtualParent(child)) || (child.parentNode && child.parentNode)));\n}\n//# sourceMappingURL=getParent.js.map","import { isVirtualElement } from './isVirtualElement';\n/**\n * Gets the virtual parent given the child element, if it exists.\n *\n * @public\n */\nexport function getVirtualParent(child) {\n var parent;\n if (child && isVirtualElement(child)) {\n parent = child._virtual.parent;\n }\n return parent;\n}\n//# sourceMappingURL=getVirtualParent.js.map","/**\n * Determines whether or not an element has the virtual hierarchy extension.\n *\n * @public\n */\nexport function isVirtualElement(element) {\n return element && !!element._virtual;\n}\n//# sourceMappingURL=isVirtualElement.js.map","import { findElementRecursive } from './findElementRecursive';\nimport { DATA_PORTAL_ATTRIBUTE } from './setPortalAttribute';\n/**\n * Determine whether a target is within a portal from perspective of root or optional parent.\n * This function only works against portal components that use the setPortalAttribute function.\n * If both parent and child are within the same portal this function will return false.\n * @param target - Element to query portal containment status of.\n * @param parent - Optional parent perspective. Search for containing portal stops at parent\n * (or root if parent is undefined or invalid.)\n */\nexport function portalContainsElement(target, parent) {\n var elementMatch = findElementRecursive(target, function (testElement) { return parent === testElement || testElement.hasAttribute(DATA_PORTAL_ATTRIBUTE); });\n return elementMatch !== null && elementMatch.hasAttribute(DATA_PORTAL_ATTRIBUTE);\n}\n//# sourceMappingURL=portalContainsElement.js.map","export var DATA_PORTAL_ATTRIBUTE = 'data-portal-element';\n/**\n * Identify element as a portal by setting an attribute.\n * @param element - Element to mark as a portal.\n */\nexport function setPortalAttribute(element) {\n element.setAttribute(DATA_PORTAL_ATTRIBUTE, 'true');\n}\n//# sourceMappingURL=setPortalAttribute.js.map","/**\n * Sets the virtual parent of an element.\n * Pass `undefined` as the `parent` to clear the virtual parent.\n *\n * @public\n */\nexport function setVirtualParent(child, parent) {\n var virtualChild = child;\n var virtualParent = parent;\n if (!virtualChild._virtual) {\n virtualChild._virtual = {\n children: [],\n };\n }\n var oldParent = virtualChild._virtual.parent;\n if (oldParent && oldParent !== parent) {\n // Remove the child from its old parent.\n var index = oldParent._virtual.children.indexOf(virtualChild);\n if (index > -1) {\n oldParent._virtual.children.splice(index, 1);\n }\n }\n virtualChild._virtual.parent = virtualParent || undefined;\n if (virtualParent) {\n if (!virtualParent._virtual) {\n virtualParent._virtual = {\n children: [],\n };\n }\n virtualParent._virtual.children.push(virtualChild);\n }\n}\n//# sourceMappingURL=setVirtualParent.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none',\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-a13498cf.woff') format('woff')\"),\n },\n icons: {\n GlobalNavButton: '\\uE700',\n ChevronDown: '\\uE70D',\n ChevronUp: '\\uE70E',\n Edit: '\\uE70F',\n Add: '\\uE710',\n Cancel: '\\uE711',\n More: '\\uE712',\n Settings: '\\uE713',\n Mail: '\\uE715',\n Filter: '\\uE71C',\n Search: '\\uE721',\n Share: '\\uE72D',\n BlockedSite: '\\uE72F',\n FavoriteStar: '\\uE734',\n FavoriteStarFill: '\\uE735',\n CheckMark: '\\uE73E',\n Delete: '\\uE74D',\n ChevronLeft: '\\uE76B',\n ChevronRight: '\\uE76C',\n Calendar: '\\uE787',\n Megaphone: '\\uE789',\n Undo: '\\uE7A7',\n Flag: '\\uE7C1',\n Page: '\\uE7C3',\n Pinned: '\\uE840',\n View: '\\uE890',\n Clear: '\\uE894',\n Download: '\\uE896',\n Upload: '\\uE898',\n Folder: '\\uE8B7',\n Sort: '\\uE8CB',\n AlignRight: '\\uE8E2',\n AlignLeft: '\\uE8E4',\n Tag: '\\uE8EC',\n AddFriend: '\\uE8FA',\n Info: '\\uE946',\n SortLines: '\\uE9D0',\n List: '\\uEA37',\n CircleRing: '\\uEA3A',\n Heart: '\\uEB51',\n HeartFill: '\\uEB52',\n Tiles: '\\uECA5',\n Embed: '\\uECCE',\n Glimmer: '\\uECF4',\n Ascending: '\\uEDC0',\n Descending: '\\uEDC1',\n SortUp: '\\uEE68',\n SortDown: '\\uEE69',\n SyncToPC: '\\uEE6E',\n LargeGrid: '\\uEECB',\n SkypeCheck: '\\uEF80',\n SkypeClock: '\\uEF81',\n SkypeMinus: '\\uEF82',\n ClearFilter: '\\uEF8F',\n Flow: '\\uEF90',\n StatusCircleCheckmark: '\\uF13E',\n MoreVertical: '\\uF2BC',\n },\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-0\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-0-467ee27f.woff') format('woff')\")\n },\n icons: {\n 'PageLink': '\\uE302',\n 'CommentSolid': '\\uE30E',\n 'ChangeEntitlements': '\\uE310',\n 'Installation': '\\uE311',\n 'WebAppBuilderModule': '\\uE313',\n 'WebAppBuilderFragment': '\\uE314',\n 'WebAppBuilderSlot': '\\uE315',\n 'BullseyeTargetEdit': '\\uE319',\n 'WebAppBuilderFragmentCreate': '\\uE31B',\n 'PageData': '\\uE31C',\n 'PageHeaderEdit': '\\uE31D',\n 'ProductList': '\\uE31E',\n 'UnpublishContent': '\\uE31F',\n 'DependencyAdd': '\\uE344',\n 'DependencyRemove': '\\uE345',\n 'EntitlementPolicy': '\\uE346',\n 'EntitlementRedemption': '\\uE347',\n 'SchoolDataSyncLogo': '\\uE34C',\n 'PinSolid12': '\\uE352',\n 'PinSolidOff12': '\\uE353',\n 'AddLink': '\\uE35E',\n 'SharepointAppIcon16': '\\uE365',\n 'DataflowsLink': '\\uE366',\n 'TimePicker': '\\uE367',\n 'UserWarning': '\\uE368',\n 'ComplianceAudit': '\\uE369',\n 'InternetSharing': '\\uE704',\n 'Brightness': '\\uE706',\n 'MapPin': '\\uE707',\n 'Airplane': '\\uE709',\n 'Tablet': '\\uE70A',\n 'QuickNote': '\\uE70B',\n 'Video': '\\uE714',\n 'People': '\\uE716',\n 'Phone': '\\uE717',\n 'Pin': '\\uE718',\n 'Shop': '\\uE719',\n 'Stop': '\\uE71A',\n 'Link': '\\uE71B',\n 'AllApps': '\\uE71D',\n 'Zoom': '\\uE71E',\n 'ZoomOut': '\\uE71F',\n 'Microphone': '\\uE720',\n 'Camera': '\\uE722',\n 'Attach': '\\uE723',\n 'Send': '\\uE724',\n 'FavoriteList': '\\uE728',\n 'PageSolid': '\\uE729',\n 'Forward': '\\uE72A',\n 'Back': '\\uE72B',\n 'Refresh': '\\uE72C',\n 'Lock': '\\uE72E',\n 'ReportHacked': '\\uE730',\n 'EMI': '\\uE731',\n 'MiniLink': '\\uE732',\n 'Blocked': '\\uE733',\n 'ReadingMode': '\\uE736',\n 'Favicon': '\\uE737',\n 'Remove': '\\uE738',\n 'Checkbox': '\\uE739',\n 'CheckboxComposite': '\\uE73A',\n 'CheckboxFill': '\\uE73B',\n 'CheckboxIndeterminate': '\\uE73C',\n 'CheckboxCompositeReversed': '\\uE73D',\n 'BackToWindow': '\\uE73F',\n 'FullScreen': '\\uE740',\n 'Print': '\\uE749',\n 'Up': '\\uE74A',\n 'Down': '\\uE74B',\n 'OEM': '\\uE74C',\n 'Save': '\\uE74E',\n 'ReturnKey': '\\uE751',\n 'Cloud': '\\uE753',\n 'Flashlight': '\\uE754',\n 'CommandPrompt': '\\uE756',\n 'Sad': '\\uE757',\n 'RealEstate': '\\uE758',\n 'SIPMove': '\\uE759',\n 'EraseTool': '\\uE75C',\n 'GripperTool': '\\uE75E',\n 'Dialpad': '\\uE75F',\n 'PageLeft': '\\uE760',\n 'PageRight': '\\uE761',\n 'MultiSelect': '\\uE762',\n 'KeyboardClassic': '\\uE765',\n 'Play': '\\uE768',\n 'Pause': '\\uE769',\n 'InkingTool': '\\uE76D',\n 'Emoji2': '\\uE76E',\n 'GripperBarHorizontal': '\\uE76F',\n 'System': '\\uE770',\n 'Personalize': '\\uE771',\n 'SearchAndApps': '\\uE773',\n 'Globe': '\\uE774',\n 'EaseOfAccess': '\\uE776',\n 'ContactInfo': '\\uE779',\n 'Unpin': '\\uE77A',\n 'Contact': '\\uE77B',\n 'Memo': '\\uE77C',\n 'IncomingCall': '\\uE77E'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-0.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-1\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-1-4d521695.woff') format('woff')\")\n },\n icons: {\n 'Paste': '\\uE77F',\n 'WindowsLogo': '\\uE782',\n 'Error': '\\uE783',\n 'GripperBarVertical': '\\uE784',\n 'Unlock': '\\uE785',\n 'Slideshow': '\\uE786',\n 'Trim': '\\uE78A',\n 'AutoEnhanceOn': '\\uE78D',\n 'AutoEnhanceOff': '\\uE78E',\n 'Color': '\\uE790',\n 'SaveAs': '\\uE792',\n 'Light': '\\uE793',\n 'Filters': '\\uE795',\n 'AspectRatio': '\\uE799',\n 'Contrast': '\\uE7A1',\n 'Redo': '\\uE7A6',\n 'Crop': '\\uE7A8',\n 'PhotoCollection': '\\uE7AA',\n 'Album': '\\uE7AB',\n 'Rotate': '\\uE7AD',\n 'PanoIndicator': '\\uE7B0',\n 'Translate': '\\uE7B2',\n 'RedEye': '\\uE7B3',\n 'ViewOriginal': '\\uE7B4',\n 'ThumbnailView': '\\uE7B6',\n 'Package': '\\uE7B8',\n 'Telemarketer': '\\uE7B9',\n 'Warning': '\\uE7BA',\n 'Financial': '\\uE7BB',\n 'Education': '\\uE7BE',\n 'ShoppingCart': '\\uE7BF',\n 'Train': '\\uE7C0',\n 'Move': '\\uE7C2',\n 'TouchPointer': '\\uE7C9',\n 'Merge': '\\uE7D5',\n 'TurnRight': '\\uE7DB',\n 'Ferry': '\\uE7E3',\n 'Highlight': '\\uE7E6',\n 'PowerButton': '\\uE7E8',\n 'Tab': '\\uE7E9',\n 'Admin': '\\uE7EF',\n 'TVMonitor': '\\uE7F4',\n 'Speakers': '\\uE7F5',\n 'Game': '\\uE7FC',\n 'HorizontalTabKey': '\\uE7FD',\n 'UnstackSelected': '\\uE7FE',\n 'StackIndicator': '\\uE7FF',\n 'Nav2DMapView': '\\uE800',\n 'StreetsideSplitMinimize': '\\uE802',\n 'Car': '\\uE804',\n 'Bus': '\\uE806',\n 'EatDrink': '\\uE807',\n 'SeeDo': '\\uE808',\n 'LocationCircle': '\\uE80E',\n 'Home': '\\uE80F',\n 'SwitcherStartEnd': '\\uE810',\n 'ParkingLocation': '\\uE811',\n 'IncidentTriangle': '\\uE814',\n 'Touch': '\\uE815',\n 'MapDirections': '\\uE816',\n 'CaretHollow': '\\uE817',\n 'CaretSolid': '\\uE818',\n 'History': '\\uE81C',\n 'Location': '\\uE81D',\n 'MapLayers': '\\uE81E',\n 'SearchNearby': '\\uE820',\n 'Work': '\\uE821',\n 'Recent': '\\uE823',\n 'Hotel': '\\uE824',\n 'Bank': '\\uE825',\n 'LocationDot': '\\uE827',\n 'Dictionary': '\\uE82D',\n 'ChromeBack': '\\uE830',\n 'FolderOpen': '\\uE838',\n 'PinnedFill': '\\uE842',\n 'RevToggleKey': '\\uE845',\n 'USB': '\\uE88E',\n 'Previous': '\\uE892',\n 'Next': '\\uE893',\n 'Sync': '\\uE895',\n 'Help': '\\uE897',\n 'Emoji': '\\uE899',\n 'MailForward': '\\uE89C',\n 'ClosePane': '\\uE89F',\n 'OpenPane': '\\uE8A0',\n 'PreviewLink': '\\uE8A1',\n 'ZoomIn': '\\uE8A3',\n 'Bookmarks': '\\uE8A4',\n 'Document': '\\uE8A5',\n 'ProtectedDocument': '\\uE8A6',\n 'OpenInNewWindow': '\\uE8A7',\n 'MailFill': '\\uE8A8',\n 'ViewAll': '\\uE8A9',\n 'Switch': '\\uE8AB',\n 'Rename': '\\uE8AC',\n 'Go': '\\uE8AD',\n 'Remote': '\\uE8AF',\n 'SelectAll': '\\uE8B3',\n 'Orientation': '\\uE8B4',\n 'Import': '\\uE8B5'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-1.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-2\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-2-63c99abf.woff') format('woff')\")\n },\n icons: {\n 'Picture': '\\uE8B9',\n 'ChromeClose': '\\uE8BB',\n 'ShowResults': '\\uE8BC',\n 'Message': '\\uE8BD',\n 'CalendarDay': '\\uE8BF',\n 'CalendarWeek': '\\uE8C0',\n 'MailReplyAll': '\\uE8C2',\n 'Read': '\\uE8C3',\n 'Cut': '\\uE8C6',\n 'PaymentCard': '\\uE8C7',\n 'Copy': '\\uE8C8',\n 'Important': '\\uE8C9',\n 'MailReply': '\\uE8CA',\n 'GotoToday': '\\uE8D1',\n 'Font': '\\uE8D2',\n 'FontColor': '\\uE8D3',\n 'FolderFill': '\\uE8D5',\n 'Permissions': '\\uE8D7',\n 'DisableUpdates': '\\uE8D8',\n 'Unfavorite': '\\uE8D9',\n 'Italic': '\\uE8DB',\n 'Underline': '\\uE8DC',\n 'Bold': '\\uE8DD',\n 'MoveToFolder': '\\uE8DE',\n 'Dislike': '\\uE8E0',\n 'Like': '\\uE8E1',\n 'AlignCenter': '\\uE8E3',\n 'OpenFile': '\\uE8E5',\n 'ClearSelection': '\\uE8E6',\n 'FontDecrease': '\\uE8E7',\n 'FontIncrease': '\\uE8E8',\n 'FontSize': '\\uE8E9',\n 'CellPhone': '\\uE8EA',\n 'RepeatOne': '\\uE8ED',\n 'RepeatAll': '\\uE8EE',\n 'Calculator': '\\uE8EF',\n 'Library': '\\uE8F1',\n 'PostUpdate': '\\uE8F3',\n 'NewFolder': '\\uE8F4',\n 'CalendarReply': '\\uE8F5',\n 'UnsyncFolder': '\\uE8F6',\n 'SyncFolder': '\\uE8F7',\n 'BlockContact': '\\uE8F8',\n 'Accept': '\\uE8FB',\n 'BulletedList': '\\uE8FD',\n 'Preview': '\\uE8FF',\n 'News': '\\uE900',\n 'Chat': '\\uE901',\n 'Group': '\\uE902',\n 'World': '\\uE909',\n 'Comment': '\\uE90A',\n 'DockLeft': '\\uE90C',\n 'DockRight': '\\uE90D',\n 'Repair': '\\uE90F',\n 'Accounts': '\\uE910',\n 'Street': '\\uE913',\n 'RadioBullet': '\\uE915',\n 'Stopwatch': '\\uE916',\n 'Clock': '\\uE917',\n 'WorldClock': '\\uE918',\n 'AlarmClock': '\\uE919',\n 'Photo': '\\uE91B',\n 'ActionCenter': '\\uE91C',\n 'Hospital': '\\uE91D',\n 'Timer': '\\uE91E',\n 'FullCircleMask': '\\uE91F',\n 'LocationFill': '\\uE920',\n 'ChromeMinimize': '\\uE921',\n 'ChromeRestore': '\\uE923',\n 'Annotation': '\\uE924',\n 'Fingerprint': '\\uE928',\n 'Handwriting': '\\uE929',\n 'ChromeFullScreen': '\\uE92D',\n 'Completed': '\\uE930',\n 'Label': '\\uE932',\n 'FlickDown': '\\uE935',\n 'FlickUp': '\\uE936',\n 'FlickLeft': '\\uE937',\n 'FlickRight': '\\uE938',\n 'MiniExpand': '\\uE93A',\n 'MiniContract': '\\uE93B',\n 'Streaming': '\\uE93E',\n 'MusicInCollection': '\\uE940',\n 'OneDriveLogo': '\\uE941',\n 'CompassNW': '\\uE942',\n 'Code': '\\uE943',\n 'LightningBolt': '\\uE945',\n 'CalculatorMultiply': '\\uE947',\n 'CalculatorAddition': '\\uE948',\n 'CalculatorSubtract': '\\uE949',\n 'CalculatorPercentage': '\\uE94C',\n 'CalculatorEqualTo': '\\uE94E',\n 'PrintfaxPrinterFile': '\\uE956',\n 'StorageOptical': '\\uE958',\n 'Communications': '\\uE95A',\n 'Headset': '\\uE95B',\n 'Health': '\\uE95E',\n 'Webcam2': '\\uE960',\n 'FrontCamera': '\\uE96B',\n 'ChevronUpSmall': '\\uE96D'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-2.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-3\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-3-089e217a.woff') format('woff')\")\n },\n icons: {\n 'ChevronDownSmall': '\\uE96E',\n 'ChevronLeftSmall': '\\uE96F',\n 'ChevronRightSmall': '\\uE970',\n 'ChevronUpMed': '\\uE971',\n 'ChevronDownMed': '\\uE972',\n 'ChevronLeftMed': '\\uE973',\n 'ChevronRightMed': '\\uE974',\n 'Devices2': '\\uE975',\n 'PC1': '\\uE977',\n 'PresenceChickletVideo': '\\uE979',\n 'Reply': '\\uE97A',\n 'HalfAlpha': '\\uE97E',\n 'ConstructionCone': '\\uE98F',\n 'DoubleChevronLeftMed': '\\uE991',\n 'Volume0': '\\uE992',\n 'Volume1': '\\uE993',\n 'Volume2': '\\uE994',\n 'Volume3': '\\uE995',\n 'Chart': '\\uE999',\n 'Robot': '\\uE99A',\n 'Manufacturing': '\\uE99C',\n 'LockSolid': '\\uE9A2',\n 'FitPage': '\\uE9A6',\n 'FitWidth': '\\uE9A7',\n 'BidiLtr': '\\uE9AA',\n 'BidiRtl': '\\uE9AB',\n 'RightDoubleQuote': '\\uE9B1',\n 'Sunny': '\\uE9BD',\n 'CloudWeather': '\\uE9BE',\n 'Cloudy': '\\uE9BF',\n 'PartlyCloudyDay': '\\uE9C0',\n 'PartlyCloudyNight': '\\uE9C1',\n 'ClearNight': '\\uE9C2',\n 'RainShowersDay': '\\uE9C3',\n 'Rain': '\\uE9C4',\n 'Thunderstorms': '\\uE9C6',\n 'RainSnow': '\\uE9C7',\n 'Snow': '\\uE9C8',\n 'BlowingSnow': '\\uE9C9',\n 'Frigid': '\\uE9CA',\n 'Fog': '\\uE9CB',\n 'Squalls': '\\uE9CC',\n 'Duststorm': '\\uE9CD',\n 'Unknown': '\\uE9CE',\n 'Precipitation': '\\uE9CF',\n 'Ribbon': '\\uE9D1',\n 'AreaChart': '\\uE9D2',\n 'Assign': '\\uE9D3',\n 'FlowChart': '\\uE9D4',\n 'CheckList': '\\uE9D5',\n 'Diagnostic': '\\uE9D9',\n 'Generate': '\\uE9DA',\n 'LineChart': '\\uE9E6',\n 'Equalizer': '\\uE9E9',\n 'BarChartHorizontal': '\\uE9EB',\n 'BarChartVertical': '\\uE9EC',\n 'Freezing': '\\uE9EF',\n 'FunnelChart': '\\uE9F1',\n 'Processing': '\\uE9F5',\n 'Quantity': '\\uE9F8',\n 'ReportDocument': '\\uE9F9',\n 'StackColumnChart': '\\uE9FC',\n 'SnowShowerDay': '\\uE9FD',\n 'HailDay': '\\uEA00',\n 'WorkFlow': '\\uEA01',\n 'HourGlass': '\\uEA03',\n 'StoreLogoMed20': '\\uEA04',\n 'TimeSheet': '\\uEA05',\n 'TriangleSolid': '\\uEA08',\n 'UpgradeAnalysis': '\\uEA0B',\n 'VideoSolid': '\\uEA0C',\n 'RainShowersNight': '\\uEA0F',\n 'SnowShowerNight': '\\uEA11',\n 'Teamwork': '\\uEA12',\n 'HailNight': '\\uEA13',\n 'PeopleAdd': '\\uEA15',\n 'Glasses': '\\uEA16',\n 'DateTime2': '\\uEA17',\n 'Shield': '\\uEA18',\n 'Header1': '\\uEA19',\n 'PageAdd': '\\uEA1A',\n 'NumberedList': '\\uEA1C',\n 'PowerBILogo': '\\uEA1E',\n 'Info2': '\\uEA1F',\n 'MusicInCollectionFill': '\\uEA36',\n 'Asterisk': '\\uEA38',\n 'ErrorBadge': '\\uEA39',\n 'CircleFill': '\\uEA3B',\n 'Record2': '\\uEA3F',\n 'AllAppsMirrored': '\\uEA40',\n 'BookmarksMirrored': '\\uEA41',\n 'BulletedListMirrored': '\\uEA42',\n 'CaretHollowMirrored': '\\uEA45',\n 'CaretSolidMirrored': '\\uEA46',\n 'ChromeBackMirrored': '\\uEA47',\n 'ClearSelectionMirrored': '\\uEA48',\n 'ClosePaneMirrored': '\\uEA49',\n 'DockLeftMirrored': '\\uEA4C',\n 'DoubleChevronLeftMedMirrored': '\\uEA4D',\n 'GoMirrored': '\\uEA4F'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-3.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-4\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-4-a656cc0a.woff') format('woff')\")\n },\n icons: {\n 'HelpMirrored': '\\uEA51',\n 'ImportMirrored': '\\uEA52',\n 'ImportAllMirrored': '\\uEA53',\n 'ListMirrored': '\\uEA55',\n 'MailForwardMirrored': '\\uEA56',\n 'MailReplyMirrored': '\\uEA57',\n 'MailReplyAllMirrored': '\\uEA58',\n 'MiniContractMirrored': '\\uEA59',\n 'MiniExpandMirrored': '\\uEA5A',\n 'OpenPaneMirrored': '\\uEA5B',\n 'ParkingLocationMirrored': '\\uEA5E',\n 'SendMirrored': '\\uEA63',\n 'ShowResultsMirrored': '\\uEA65',\n 'ThumbnailViewMirrored': '\\uEA67',\n 'Media': '\\uEA69',\n 'Devices3': '\\uEA6C',\n 'Focus': '\\uEA6F',\n 'VideoLightOff': '\\uEA74',\n 'Lightbulb': '\\uEA80',\n 'StatusTriangle': '\\uEA82',\n 'VolumeDisabled': '\\uEA85',\n 'Puzzle': '\\uEA86',\n 'EmojiNeutral': '\\uEA87',\n 'EmojiDisappointed': '\\uEA88',\n 'HomeSolid': '\\uEA8A',\n 'Ringer': '\\uEA8F',\n 'PDF': '\\uEA90',\n 'HeartBroken': '\\uEA92',\n 'StoreLogo16': '\\uEA96',\n 'MultiSelectMirrored': '\\uEA98',\n 'Broom': '\\uEA99',\n 'AddToShoppingList': '\\uEA9A',\n 'Cocktails': '\\uEA9D',\n 'Wines': '\\uEABF',\n 'Articles': '\\uEAC1',\n 'Cycling': '\\uEAC7',\n 'DietPlanNotebook': '\\uEAC8',\n 'Pill': '\\uEACB',\n 'ExerciseTracker': '\\uEACC',\n 'HandsFree': '\\uEAD0',\n 'Medical': '\\uEAD4',\n 'Running': '\\uEADA',\n 'Weights': '\\uEADB',\n 'Trackers': '\\uEADF',\n 'AddNotes': '\\uEAE3',\n 'AllCurrency': '\\uEAE4',\n 'BarChart4': '\\uEAE7',\n 'CirclePlus': '\\uEAEE',\n 'Coffee': '\\uEAEF',\n 'Cotton': '\\uEAF3',\n 'Market': '\\uEAFC',\n 'Money': '\\uEAFD',\n 'PieDouble': '\\uEB04',\n 'PieSingle': '\\uEB05',\n 'RemoveFilter': '\\uEB08',\n 'Savings': '\\uEB0B',\n 'Sell': '\\uEB0C',\n 'StockDown': '\\uEB0F',\n 'StockUp': '\\uEB11',\n 'Lamp': '\\uEB19',\n 'Source': '\\uEB1B',\n 'MSNVideos': '\\uEB1C',\n 'Cricket': '\\uEB1E',\n 'Golf': '\\uEB1F',\n 'Baseball': '\\uEB20',\n 'Soccer': '\\uEB21',\n 'MoreSports': '\\uEB22',\n 'AutoRacing': '\\uEB24',\n 'CollegeHoops': '\\uEB25',\n 'CollegeFootball': '\\uEB26',\n 'ProFootball': '\\uEB27',\n 'ProHockey': '\\uEB28',\n 'Rugby': '\\uEB2D',\n 'SubstitutionsIn': '\\uEB31',\n 'Tennis': '\\uEB33',\n 'Arrivals': '\\uEB34',\n 'Design': '\\uEB3C',\n 'Website': '\\uEB41',\n 'Drop': '\\uEB42',\n 'HistoricalWeather': '\\uEB43',\n 'SkiResorts': '\\uEB45',\n 'Snowflake': '\\uEB46',\n 'BusSolid': '\\uEB47',\n 'FerrySolid': '\\uEB48',\n 'AirplaneSolid': '\\uEB4C',\n 'TrainSolid': '\\uEB4D',\n 'Ticket': '\\uEB54',\n 'WifiWarning4': '\\uEB63',\n 'Devices4': '\\uEB66',\n 'AzureLogo': '\\uEB6A',\n 'BingLogo': '\\uEB6B',\n 'MSNLogo': '\\uEB6C',\n 'OutlookLogoInverse': '\\uEB6D',\n 'OfficeLogo': '\\uEB6E',\n 'SkypeLogo': '\\uEB6F',\n 'Door': '\\uEB75',\n 'EditMirrored': '\\uEB7E',\n 'GiftCard': '\\uEB8E',\n 'DoubleBookmark': '\\uEB8F',\n 'StatusErrorFull': '\\uEB90'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-4.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-5\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-5-f95ba260.woff') format('woff')\")\n },\n icons: {\n 'Certificate': '\\uEB95',\n 'FastForward': '\\uEB9D',\n 'Rewind': '\\uEB9E',\n 'Photo2': '\\uEB9F',\n 'OpenSource': '\\uEBC2',\n 'Movers': '\\uEBCD',\n 'CloudDownload': '\\uEBD3',\n 'Family': '\\uEBDA',\n 'WindDirection': '\\uEBE6',\n 'Bug': '\\uEBE8',\n 'SiteScan': '\\uEBEC',\n 'BrowserScreenShot': '\\uEBED',\n 'F12DevTools': '\\uEBEE',\n 'CSS': '\\uEBEF',\n 'JS': '\\uEBF0',\n 'DeliveryTruck': '\\uEBF4',\n 'ReminderPerson': '\\uEBF7',\n 'ReminderGroup': '\\uEBF8',\n 'ReminderTime': '\\uEBF9',\n 'TabletMode': '\\uEBFC',\n 'Umbrella': '\\uEC04',\n 'NetworkTower': '\\uEC05',\n 'CityNext': '\\uEC06',\n 'CityNext2': '\\uEC07',\n 'Section': '\\uEC0C',\n 'OneNoteLogoInverse': '\\uEC0D',\n 'ToggleFilled': '\\uEC11',\n 'ToggleBorder': '\\uEC12',\n 'SliderThumb': '\\uEC13',\n 'ToggleThumb': '\\uEC14',\n 'Documentation': '\\uEC17',\n 'Badge': '\\uEC1B',\n 'Giftbox': '\\uEC1F',\n 'VisualStudioLogo': '\\uEC22',\n 'HomeGroup': '\\uEC26',\n 'ExcelLogoInverse': '\\uEC28',\n 'WordLogoInverse': '\\uEC29',\n 'PowerPointLogoInverse': '\\uEC2A',\n 'Cafe': '\\uEC32',\n 'SpeedHigh': '\\uEC4A',\n 'Commitments': '\\uEC4D',\n 'ThisPC': '\\uEC4E',\n 'MusicNote': '\\uEC4F',\n 'MicOff': '\\uEC54',\n 'PlaybackRate1x': '\\uEC57',\n 'EdgeLogo': '\\uEC60',\n 'CompletedSolid': '\\uEC61',\n 'AlbumRemove': '\\uEC62',\n 'MessageFill': '\\uEC70',\n 'TabletSelected': '\\uEC74',\n 'MobileSelected': '\\uEC75',\n 'LaptopSelected': '\\uEC76',\n 'TVMonitorSelected': '\\uEC77',\n 'DeveloperTools': '\\uEC7A',\n 'Shapes': '\\uEC7C',\n 'InsertTextBox': '\\uEC7D',\n 'LowerBrightness': '\\uEC8A',\n 'WebComponents': '\\uEC8B',\n 'OfflineStorage': '\\uEC8C',\n 'DOM': '\\uEC8D',\n 'CloudUpload': '\\uEC8E',\n 'ScrollUpDown': '\\uEC8F',\n 'DateTime': '\\uEC92',\n 'Event': '\\uECA3',\n 'Cake': '\\uECA4',\n 'Org': '\\uECA6',\n 'PartyLeader': '\\uECA7',\n 'DRM': '\\uECA8',\n 'CloudAdd': '\\uECA9',\n 'AppIconDefault': '\\uECAA',\n 'Photo2Add': '\\uECAB',\n 'Photo2Remove': '\\uECAC',\n 'Calories': '\\uECAD',\n 'POI': '\\uECAF',\n 'AddTo': '\\uECC8',\n 'RadioBtnOff': '\\uECCA',\n 'RadioBtnOn': '\\uECCB',\n 'ExploreContent': '\\uECCD',\n 'Product': '\\uECDC',\n 'ProgressLoopInner': '\\uECDE',\n 'ProgressLoopOuter': '\\uECDF',\n 'Blocked2': '\\uECE4',\n 'FangBody': '\\uECEB',\n 'Toolbox': '\\uECED',\n 'PageHeader': '\\uECEE',\n 'ChatInviteFriend': '\\uECFE',\n 'Brush': '\\uECFF',\n 'Shirt': '\\uED00',\n 'Crown': '\\uED01',\n 'Diamond': '\\uED02',\n 'ScaleUp': '\\uED09',\n 'QRCode': '\\uED14',\n 'Feedback': '\\uED15',\n 'SharepointLogoInverse': '\\uED18',\n 'YammerLogo': '\\uED19',\n 'Hide': '\\uED1A',\n 'Uneditable': '\\uED1D',\n 'ReturnToSession': '\\uED24',\n 'OpenFolderHorizontal': '\\uED25',\n 'CalendarMirrored': '\\uED28'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-5.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-6\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-6-ef6fd590.woff') format('woff')\")\n },\n icons: {\n 'SwayLogoInverse': '\\uED29',\n 'OutOfOffice': '\\uED34',\n 'Trophy': '\\uED3F',\n 'ReopenPages': '\\uED50',\n 'EmojiTabSymbols': '\\uED58',\n 'AADLogo': '\\uED68',\n 'AccessLogo': '\\uED69',\n 'AdminALogoInverse32': '\\uED6A',\n 'AdminCLogoInverse32': '\\uED6B',\n 'AdminDLogoInverse32': '\\uED6C',\n 'AdminELogoInverse32': '\\uED6D',\n 'AdminLLogoInverse32': '\\uED6E',\n 'AdminMLogoInverse32': '\\uED6F',\n 'AdminOLogoInverse32': '\\uED70',\n 'AdminPLogoInverse32': '\\uED71',\n 'AdminSLogoInverse32': '\\uED72',\n 'AdminYLogoInverse32': '\\uED73',\n 'DelveLogoInverse': '\\uED76',\n 'ExchangeLogoInverse': '\\uED78',\n 'LyncLogo': '\\uED79',\n 'OfficeVideoLogoInverse': '\\uED7A',\n 'SocialListeningLogo': '\\uED7C',\n 'VisioLogoInverse': '\\uED7D',\n 'Balloons': '\\uED7E',\n 'Cat': '\\uED7F',\n 'MailAlert': '\\uED80',\n 'MailCheck': '\\uED81',\n 'MailLowImportance': '\\uED82',\n 'MailPause': '\\uED83',\n 'MailRepeat': '\\uED84',\n 'SecurityGroup': '\\uED85',\n 'Table': '\\uED86',\n 'VoicemailForward': '\\uED87',\n 'VoicemailReply': '\\uED88',\n 'Waffle': '\\uED89',\n 'RemoveEvent': '\\uED8A',\n 'EventInfo': '\\uED8B',\n 'ForwardEvent': '\\uED8C',\n 'WipePhone': '\\uED8D',\n 'AddOnlineMeeting': '\\uED8E',\n 'JoinOnlineMeeting': '\\uED8F',\n 'RemoveLink': '\\uED90',\n 'PeopleBlock': '\\uED91',\n 'PeopleRepeat': '\\uED92',\n 'PeopleAlert': '\\uED93',\n 'PeoplePause': '\\uED94',\n 'TransferCall': '\\uED95',\n 'AddPhone': '\\uED96',\n 'UnknownCall': '\\uED97',\n 'NoteReply': '\\uED98',\n 'NoteForward': '\\uED99',\n 'NotePinned': '\\uED9A',\n 'RemoveOccurrence': '\\uED9B',\n 'Timeline': '\\uED9C',\n 'EditNote': '\\uED9D',\n 'CircleHalfFull': '\\uED9E',\n 'Room': '\\uED9F',\n 'Unsubscribe': '\\uEDA0',\n 'Subscribe': '\\uEDA1',\n 'HardDrive': '\\uEDA2',\n 'RecurringTask': '\\uEDB2',\n 'TaskManager': '\\uEDB7',\n 'TaskManagerMirrored': '\\uEDB8',\n 'Combine': '\\uEDBB',\n 'Split': '\\uEDBC',\n 'DoubleChevronUp': '\\uEDBD',\n 'DoubleChevronLeft': '\\uEDBE',\n 'DoubleChevronRight': '\\uEDBF',\n 'TextBox': '\\uEDC2',\n 'TextField': '\\uEDC3',\n 'NumberField': '\\uEDC4',\n 'Dropdown': '\\uEDC5',\n 'PenWorkspace': '\\uEDC6',\n 'BookingsLogo': '\\uEDC7',\n 'ClassNotebookLogoInverse': '\\uEDC8',\n 'DelveAnalyticsLogo': '\\uEDCA',\n 'DocsLogoInverse': '\\uEDCB',\n 'Dynamics365Logo': '\\uEDCC',\n 'DynamicSMBLogo': '\\uEDCD',\n 'OfficeAssistantLogo': '\\uEDCE',\n 'OfficeStoreLogo': '\\uEDCF',\n 'OneNoteEduLogoInverse': '\\uEDD0',\n 'PlannerLogo': '\\uEDD1',\n 'PowerApps': '\\uEDD2',\n 'Suitcase': '\\uEDD3',\n 'ProjectLogoInverse': '\\uEDD4',\n 'CaretLeft8': '\\uEDD5',\n 'CaretRight8': '\\uEDD6',\n 'CaretUp8': '\\uEDD7',\n 'CaretDown8': '\\uEDD8',\n 'CaretLeftSolid8': '\\uEDD9',\n 'CaretRightSolid8': '\\uEDDA',\n 'CaretUpSolid8': '\\uEDDB',\n 'CaretDownSolid8': '\\uEDDC',\n 'ClearFormatting': '\\uEDDD',\n 'Superscript': '\\uEDDE',\n 'Subscript': '\\uEDDF',\n 'Strikethrough': '\\uEDE0',\n 'Export': '\\uEDE1',\n 'ExportMirrored': '\\uEDE2'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-6.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-7\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-7-2b97bb99.woff') format('woff')\")\n },\n icons: {\n 'SingleBookmark': '\\uEDFF',\n 'SingleBookmarkSolid': '\\uEE00',\n 'DoubleChevronDown': '\\uEE04',\n 'FollowUser': '\\uEE05',\n 'ReplyAll': '\\uEE0A',\n 'WorkforceManagement': '\\uEE0F',\n 'RecruitmentManagement': '\\uEE12',\n 'Questionnaire': '\\uEE19',\n 'ManagerSelfService': '\\uEE23',\n 'ProductionFloorManagement': '\\uEE29',\n 'ProductRelease': '\\uEE2E',\n 'ProductVariant': '\\uEE30',\n 'ReplyMirrored': '\\uEE35',\n 'ReplyAllMirrored': '\\uEE36',\n 'Medal': '\\uEE38',\n 'AddGroup': '\\uEE3D',\n 'QuestionnaireMirrored': '\\uEE4B',\n 'CloudImportExport': '\\uEE55',\n 'TemporaryUser': '\\uEE58',\n 'CaretSolid16': '\\uEE62',\n 'GroupedDescending': '\\uEE66',\n 'GroupedAscending': '\\uEE67',\n 'AwayStatus': '\\uEE6A',\n 'MyMoviesTV': '\\uEE6C',\n 'GenericScan': '\\uEE6F',\n 'AustralianRules': '\\uEE70',\n 'WifiEthernet': '\\uEE77',\n 'TrackersMirrored': '\\uEE92',\n 'DateTimeMirrored': '\\uEE93',\n 'StopSolid': '\\uEE95',\n 'DoubleChevronUp12': '\\uEE96',\n 'DoubleChevronDown12': '\\uEE97',\n 'DoubleChevronLeft12': '\\uEE98',\n 'DoubleChevronRight12': '\\uEE99',\n 'CalendarAgenda': '\\uEE9A',\n 'ConnectVirtualMachine': '\\uEE9D',\n 'AddEvent': '\\uEEB5',\n 'AssetLibrary': '\\uEEB6',\n 'DataConnectionLibrary': '\\uEEB7',\n 'DocLibrary': '\\uEEB8',\n 'FormLibrary': '\\uEEB9',\n 'FormLibraryMirrored': '\\uEEBA',\n 'ReportLibrary': '\\uEEBB',\n 'ReportLibraryMirrored': '\\uEEBC',\n 'ContactCard': '\\uEEBD',\n 'CustomList': '\\uEEBE',\n 'CustomListMirrored': '\\uEEBF',\n 'IssueTracking': '\\uEEC0',\n 'IssueTrackingMirrored': '\\uEEC1',\n 'PictureLibrary': '\\uEEC2',\n 'OfficeAddinsLogo': '\\uEEC7',\n 'OfflineOneDriveParachute': '\\uEEC8',\n 'OfflineOneDriveParachuteDisabled': '\\uEEC9',\n 'TriangleSolidUp12': '\\uEECC',\n 'TriangleSolidDown12': '\\uEECD',\n 'TriangleSolidLeft12': '\\uEECE',\n 'TriangleSolidRight12': '\\uEECF',\n 'TriangleUp12': '\\uEED0',\n 'TriangleDown12': '\\uEED1',\n 'TriangleLeft12': '\\uEED2',\n 'TriangleRight12': '\\uEED3',\n 'ArrowUpRight8': '\\uEED4',\n 'ArrowDownRight8': '\\uEED5',\n 'DocumentSet': '\\uEED6',\n 'GoToDashboard': '\\uEEED',\n 'DelveAnalytics': '\\uEEEE',\n 'ArrowUpRightMirrored8': '\\uEEEF',\n 'ArrowDownRightMirrored8': '\\uEEF0',\n 'CompanyDirectory': '\\uEF0D',\n 'OpenEnrollment': '\\uEF1C',\n 'CompanyDirectoryMirrored': '\\uEF2B',\n 'OneDriveAdd': '\\uEF32',\n 'ProfileSearch': '\\uEF35',\n 'Header2': '\\uEF36',\n 'Header3': '\\uEF37',\n 'Header4': '\\uEF38',\n 'RingerSolid': '\\uEF3A',\n 'Eyedropper': '\\uEF3C',\n 'MarketDown': '\\uEF42',\n 'CalendarWorkWeek': '\\uEF51',\n 'SidePanel': '\\uEF52',\n 'GlobeFavorite': '\\uEF53',\n 'CaretTopLeftSolid8': '\\uEF54',\n 'CaretTopRightSolid8': '\\uEF55',\n 'ViewAll2': '\\uEF56',\n 'DocumentReply': '\\uEF57',\n 'PlayerSettings': '\\uEF58',\n 'ReceiptForward': '\\uEF59',\n 'ReceiptReply': '\\uEF5A',\n 'ReceiptCheck': '\\uEF5B',\n 'Fax': '\\uEF5C',\n 'RecurringEvent': '\\uEF5D',\n 'ReplyAlt': '\\uEF5E',\n 'ReplyAllAlt': '\\uEF5F',\n 'EditStyle': '\\uEF60',\n 'EditMail': '\\uEF61',\n 'Lifesaver': '\\uEF62',\n 'LifesaverLock': '\\uEF63',\n 'InboxCheck': '\\uEF64',\n 'FolderSearch': '\\uEF65'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-7.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-8\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-8-6fdf1528.woff') format('woff')\")\n },\n icons: {\n 'CollapseMenu': '\\uEF66',\n 'ExpandMenu': '\\uEF67',\n 'Boards': '\\uEF68',\n 'SunAdd': '\\uEF69',\n 'SunQuestionMark': '\\uEF6A',\n 'LandscapeOrientation': '\\uEF6B',\n 'DocumentSearch': '\\uEF6C',\n 'PublicCalendar': '\\uEF6D',\n 'PublicContactCard': '\\uEF6E',\n 'PublicEmail': '\\uEF6F',\n 'PublicFolder': '\\uEF70',\n 'WordDocument': '\\uEF71',\n 'PowerPointDocument': '\\uEF72',\n 'ExcelDocument': '\\uEF73',\n 'GroupedList': '\\uEF74',\n 'ClassroomLogo': '\\uEF75',\n 'Sections': '\\uEF76',\n 'EditPhoto': '\\uEF77',\n 'Starburst': '\\uEF78',\n 'ShareiOS': '\\uEF79',\n 'AirTickets': '\\uEF7A',\n 'PencilReply': '\\uEF7B',\n 'Tiles2': '\\uEF7C',\n 'SkypeCircleCheck': '\\uEF7D',\n 'SkypeCircleClock': '\\uEF7E',\n 'SkypeCircleMinus': '\\uEF7F',\n 'SkypeMessage': '\\uEF83',\n 'ClosedCaption': '\\uEF84',\n 'ATPLogo': '\\uEF85',\n 'OfficeFormsLogoInverse': '\\uEF86',\n 'RecycleBin': '\\uEF87',\n 'EmptyRecycleBin': '\\uEF88',\n 'Hide2': '\\uEF89',\n 'Breadcrumb': '\\uEF8C',\n 'BirthdayCake': '\\uEF8D',\n 'TimeEntry': '\\uEF95',\n 'CRMProcesses': '\\uEFB1',\n 'PageEdit': '\\uEFB6',\n 'PageArrowRight': '\\uEFB8',\n 'PageRemove': '\\uEFBA',\n 'Database': '\\uEFC7',\n 'DataManagementSettings': '\\uEFC8',\n 'CRMServices': '\\uEFD2',\n 'EditContact': '\\uEFD3',\n 'ConnectContacts': '\\uEFD4',\n 'AppIconDefaultAdd': '\\uEFDA',\n 'AppIconDefaultList': '\\uEFDE',\n 'ActivateOrders': '\\uEFE0',\n 'DeactivateOrders': '\\uEFE1',\n 'ProductCatalog': '\\uEFE8',\n 'ScatterChart': '\\uEFEB',\n 'AccountActivity': '\\uEFF4',\n 'DocumentManagement': '\\uEFFC',\n 'CRMReport': '\\uEFFE',\n 'KnowledgeArticle': '\\uF000',\n 'Relationship': '\\uF003',\n 'HomeVerify': '\\uF00E',\n 'ZipFolder': '\\uF012',\n 'SurveyQuestions': '\\uF01B',\n 'TextDocument': '\\uF029',\n 'TextDocumentShared': '\\uF02B',\n 'PageCheckedOut': '\\uF02C',\n 'PageShared': '\\uF02D',\n 'SaveAndClose': '\\uF038',\n 'Script': '\\uF03A',\n 'Archive': '\\uF03F',\n 'ActivityFeed': '\\uF056',\n 'Compare': '\\uF057',\n 'EventDate': '\\uF059',\n 'ArrowUpRight': '\\uF069',\n 'CaretRight': '\\uF06B',\n 'SetAction': '\\uF071',\n 'ChatBot': '\\uF08B',\n 'CaretSolidLeft': '\\uF08D',\n 'CaretSolidDown': '\\uF08E',\n 'CaretSolidRight': '\\uF08F',\n 'CaretSolidUp': '\\uF090',\n 'PowerAppsLogo': '\\uF091',\n 'PowerApps2Logo': '\\uF092',\n 'SearchIssue': '\\uF09A',\n 'SearchIssueMirrored': '\\uF09B',\n 'FabricAssetLibrary': '\\uF09C',\n 'FabricDataConnectionLibrary': '\\uF09D',\n 'FabricDocLibrary': '\\uF09E',\n 'FabricFormLibrary': '\\uF09F',\n 'FabricFormLibraryMirrored': '\\uF0A0',\n 'FabricReportLibrary': '\\uF0A1',\n 'FabricReportLibraryMirrored': '\\uF0A2',\n 'FabricPublicFolder': '\\uF0A3',\n 'FabricFolderSearch': '\\uF0A4',\n 'FabricMovetoFolder': '\\uF0A5',\n 'FabricUnsyncFolder': '\\uF0A6',\n 'FabricSyncFolder': '\\uF0A7',\n 'FabricOpenFolderHorizontal': '\\uF0A8',\n 'FabricFolder': '\\uF0A9',\n 'FabricFolderFill': '\\uF0AA',\n 'FabricNewFolder': '\\uF0AB',\n 'FabricPictureLibrary': '\\uF0AC',\n 'PhotoVideoMedia': '\\uF0B1',\n 'AddFavorite': '\\uF0C8'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-8.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-9\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-9-c6162b42.woff') format('woff')\")\n },\n icons: {\n 'AddFavoriteFill': '\\uF0C9',\n 'BufferTimeBefore': '\\uF0CF',\n 'BufferTimeAfter': '\\uF0D0',\n 'BufferTimeBoth': '\\uF0D1',\n 'PublishContent': '\\uF0D4',\n 'ClipboardList': '\\uF0E3',\n 'ClipboardListMirrored': '\\uF0E4',\n 'CannedChat': '\\uF0F2',\n 'SkypeForBusinessLogo': '\\uF0FC',\n 'TabCenter': '\\uF100',\n 'PageCheckedin': '\\uF104',\n 'PageList': '\\uF106',\n 'ReadOutLoud': '\\uF112',\n 'CaretBottomLeftSolid8': '\\uF121',\n 'CaretBottomRightSolid8': '\\uF122',\n 'FolderHorizontal': '\\uF12B',\n 'MicrosoftStaffhubLogo': '\\uF130',\n 'GiftboxOpen': '\\uF133',\n 'StatusCircleOuter': '\\uF136',\n 'StatusCircleInner': '\\uF137',\n 'StatusCircleRing': '\\uF138',\n 'StatusTriangleOuter': '\\uF139',\n 'StatusTriangleInner': '\\uF13A',\n 'StatusTriangleExclamation': '\\uF13B',\n 'StatusCircleExclamation': '\\uF13C',\n 'StatusCircleErrorX': '\\uF13D',\n 'StatusCircleInfo': '\\uF13F',\n 'StatusCircleBlock': '\\uF140',\n 'StatusCircleBlock2': '\\uF141',\n 'StatusCircleQuestionMark': '\\uF142',\n 'StatusCircleSync': '\\uF143',\n 'Toll': '\\uF160',\n 'ExploreContentSingle': '\\uF164',\n 'CollapseContent': '\\uF165',\n 'CollapseContentSingle': '\\uF166',\n 'InfoSolid': '\\uF167',\n 'GroupList': '\\uF168',\n 'ProgressRingDots': '\\uF16A',\n 'CaloriesAdd': '\\uF172',\n 'BranchFork': '\\uF173',\n 'MuteChat': '\\uF17A',\n 'AddHome': '\\uF17B',\n 'AddWork': '\\uF17C',\n 'MobileReport': '\\uF18A',\n 'ScaleVolume': '\\uF18C',\n 'HardDriveGroup': '\\uF18F',\n 'FastMode': '\\uF19A',\n 'ToggleLeft': '\\uF19E',\n 'ToggleRight': '\\uF19F',\n 'TriangleShape': '\\uF1A7',\n 'RectangleShape': '\\uF1A9',\n 'CubeShape': '\\uF1AA',\n 'Trophy2': '\\uF1AE',\n 'BucketColor': '\\uF1B6',\n 'BucketColorFill': '\\uF1B7',\n 'Taskboard': '\\uF1C2',\n 'SingleColumn': '\\uF1D3',\n 'DoubleColumn': '\\uF1D4',\n 'TripleColumn': '\\uF1D5',\n 'ColumnLeftTwoThirds': '\\uF1D6',\n 'ColumnRightTwoThirds': '\\uF1D7',\n 'AccessLogoFill': '\\uF1DB',\n 'AnalyticsLogo': '\\uF1DE',\n 'AnalyticsQuery': '\\uF1DF',\n 'NewAnalyticsQuery': '\\uF1E0',\n 'AnalyticsReport': '\\uF1E1',\n 'WordLogo': '\\uF1E3',\n 'WordLogoFill': '\\uF1E4',\n 'ExcelLogo': '\\uF1E5',\n 'ExcelLogoFill': '\\uF1E6',\n 'OneNoteLogo': '\\uF1E7',\n 'OneNoteLogoFill': '\\uF1E8',\n 'OutlookLogo': '\\uF1E9',\n 'OutlookLogoFill': '\\uF1EA',\n 'PowerPointLogo': '\\uF1EB',\n 'PowerPointLogoFill': '\\uF1EC',\n 'PublisherLogo': '\\uF1ED',\n 'PublisherLogoFill': '\\uF1EE',\n 'ScheduleEventAction': '\\uF1EF',\n 'FlameSolid': '\\uF1F3',\n 'ServerProcesses': '\\uF1FE',\n 'Server': '\\uF201',\n 'SaveAll': '\\uF203',\n 'LinkedInLogo': '\\uF20A',\n 'Decimals': '\\uF218',\n 'SidePanelMirrored': '\\uF221',\n 'ProtectRestrict': '\\uF22A',\n 'Blog': '\\uF22B',\n 'UnknownMirrored': '\\uF22E',\n 'PublicContactCardMirrored': '\\uF230',\n 'GridViewSmall': '\\uF232',\n 'GridViewMedium': '\\uF233',\n 'GridViewLarge': '\\uF234',\n 'Step': '\\uF241',\n 'StepInsert': '\\uF242',\n 'StepShared': '\\uF243',\n 'StepSharedAdd': '\\uF244',\n 'StepSharedInsert': '\\uF245',\n 'ViewDashboard': '\\uF246',\n 'ViewList': '\\uF247'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-9.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-10\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-10-c4ded8e4.woff') format('woff')\")\n },\n icons: {\n 'ViewListGroup': '\\uF248',\n 'ViewListTree': '\\uF249',\n 'TriggerAuto': '\\uF24A',\n 'TriggerUser': '\\uF24B',\n 'PivotChart': '\\uF24C',\n 'StackedBarChart': '\\uF24D',\n 'StackedLineChart': '\\uF24E',\n 'BuildQueue': '\\uF24F',\n 'BuildQueueNew': '\\uF250',\n 'UserFollowed': '\\uF25C',\n 'ContactLink': '\\uF25F',\n 'Stack': '\\uF26F',\n 'Bullseye': '\\uF272',\n 'VennDiagram': '\\uF273',\n 'FiveTileGrid': '\\uF274',\n 'FocalPoint': '\\uF277',\n 'Insert': '\\uF278',\n 'RingerRemove': '\\uF279',\n 'TeamsLogoInverse': '\\uF27A',\n 'TeamsLogo': '\\uF27B',\n 'TeamsLogoFill': '\\uF27C',\n 'SkypeForBusinessLogoFill': '\\uF27D',\n 'SharepointLogo': '\\uF27E',\n 'SharepointLogoFill': '\\uF27F',\n 'DelveLogo': '\\uF280',\n 'DelveLogoFill': '\\uF281',\n 'OfficeVideoLogo': '\\uF282',\n 'OfficeVideoLogoFill': '\\uF283',\n 'ExchangeLogo': '\\uF284',\n 'ExchangeLogoFill': '\\uF285',\n 'Signin': '\\uF286',\n 'DocumentApproval': '\\uF28B',\n 'CloneToDesktop': '\\uF28C',\n 'InstallToDrive': '\\uF28D',\n 'Blur': '\\uF28E',\n 'Build': '\\uF28F',\n 'ProcessMetaTask': '\\uF290',\n 'BranchFork2': '\\uF291',\n 'BranchLocked': '\\uF292',\n 'BranchCommit': '\\uF293',\n 'BranchCompare': '\\uF294',\n 'BranchMerge': '\\uF295',\n 'BranchPullRequest': '\\uF296',\n 'BranchSearch': '\\uF297',\n 'BranchShelveset': '\\uF298',\n 'RawSource': '\\uF299',\n 'MergeDuplicate': '\\uF29A',\n 'RowsGroup': '\\uF29B',\n 'RowsChild': '\\uF29C',\n 'Deploy': '\\uF29D',\n 'Redeploy': '\\uF29E',\n 'ServerEnviroment': '\\uF29F',\n 'VisioDiagram': '\\uF2A0',\n 'HighlightMappedShapes': '\\uF2A1',\n 'TextCallout': '\\uF2A2',\n 'IconSetsFlag': '\\uF2A4',\n 'VisioLogo': '\\uF2A7',\n 'VisioLogoFill': '\\uF2A8',\n 'VisioDocument': '\\uF2A9',\n 'TimelineProgress': '\\uF2AA',\n 'TimelineDelivery': '\\uF2AB',\n 'Backlog': '\\uF2AC',\n 'TeamFavorite': '\\uF2AD',\n 'TaskGroup': '\\uF2AE',\n 'TaskGroupMirrored': '\\uF2AF',\n 'ScopeTemplate': '\\uF2B0',\n 'AssessmentGroupTemplate': '\\uF2B1',\n 'NewTeamProject': '\\uF2B2',\n 'CommentAdd': '\\uF2B3',\n 'CommentNext': '\\uF2B4',\n 'CommentPrevious': '\\uF2B5',\n 'ShopServer': '\\uF2B6',\n 'LocaleLanguage': '\\uF2B7',\n 'QueryList': '\\uF2B8',\n 'UserSync': '\\uF2B9',\n 'UserPause': '\\uF2BA',\n 'StreamingOff': '\\uF2BB',\n 'ArrowTallUpLeft': '\\uF2BD',\n 'ArrowTallUpRight': '\\uF2BE',\n 'ArrowTallDownLeft': '\\uF2BF',\n 'ArrowTallDownRight': '\\uF2C0',\n 'FieldEmpty': '\\uF2C1',\n 'FieldFilled': '\\uF2C2',\n 'FieldChanged': '\\uF2C3',\n 'FieldNotChanged': '\\uF2C4',\n 'RingerOff': '\\uF2C5',\n 'PlayResume': '\\uF2C6',\n 'BulletedList2': '\\uF2C7',\n 'BulletedList2Mirrored': '\\uF2C8',\n 'ImageCrosshair': '\\uF2C9',\n 'GitGraph': '\\uF2CA',\n 'Repo': '\\uF2CB',\n 'RepoSolid': '\\uF2CC',\n 'FolderQuery': '\\uF2CD',\n 'FolderList': '\\uF2CE',\n 'FolderListMirrored': '\\uF2CF',\n 'LocationOutline': '\\uF2D0',\n 'POISolid': '\\uF2D1',\n 'CalculatorNotEqualTo': '\\uF2D2',\n 'BoxSubtractSolid': '\\uF2D3'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-10.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-11\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-11-2a8393d6.woff') format('woff')\")\n },\n icons: {\n 'BoxAdditionSolid': '\\uF2D4',\n 'BoxMultiplySolid': '\\uF2D5',\n 'BoxPlaySolid': '\\uF2D6',\n 'BoxCheckmarkSolid': '\\uF2D7',\n 'CirclePauseSolid': '\\uF2D8',\n 'CirclePause': '\\uF2D9',\n 'MSNVideosSolid': '\\uF2DA',\n 'CircleStopSolid': '\\uF2DB',\n 'CircleStop': '\\uF2DC',\n 'NavigateBack': '\\uF2DD',\n 'NavigateBackMirrored': '\\uF2DE',\n 'NavigateForward': '\\uF2DF',\n 'NavigateForwardMirrored': '\\uF2E0',\n 'UnknownSolid': '\\uF2E1',\n 'UnknownMirroredSolid': '\\uF2E2',\n 'CircleAddition': '\\uF2E3',\n 'CircleAdditionSolid': '\\uF2E4',\n 'FilePDB': '\\uF2E5',\n 'FileTemplate': '\\uF2E6',\n 'FileSQL': '\\uF2E7',\n 'FileJAVA': '\\uF2E8',\n 'FileASPX': '\\uF2E9',\n 'FileCSS': '\\uF2EA',\n 'FileSass': '\\uF2EB',\n 'FileLess': '\\uF2EC',\n 'FileHTML': '\\uF2ED',\n 'JavaScriptLanguage': '\\uF2EE',\n 'CSharpLanguage': '\\uF2EF',\n 'CSharp': '\\uF2F0',\n 'VisualBasicLanguage': '\\uF2F1',\n 'VB': '\\uF2F2',\n 'CPlusPlusLanguage': '\\uF2F3',\n 'CPlusPlus': '\\uF2F4',\n 'FSharpLanguage': '\\uF2F5',\n 'FSharp': '\\uF2F6',\n 'TypeScriptLanguage': '\\uF2F7',\n 'PythonLanguage': '\\uF2F8',\n 'PY': '\\uF2F9',\n 'CoffeeScript': '\\uF2FA',\n 'MarkDownLanguage': '\\uF2FB',\n 'FullWidth': '\\uF2FE',\n 'FullWidthEdit': '\\uF2FF',\n 'Plug': '\\uF300',\n 'PlugSolid': '\\uF301',\n 'PlugConnected': '\\uF302',\n 'PlugDisconnected': '\\uF303',\n 'UnlockSolid': '\\uF304',\n 'Variable': '\\uF305',\n 'Parameter': '\\uF306',\n 'CommentUrgent': '\\uF307',\n 'Storyboard': '\\uF308',\n 'DiffInline': '\\uF309',\n 'DiffSideBySide': '\\uF30A',\n 'ImageDiff': '\\uF30B',\n 'ImagePixel': '\\uF30C',\n 'FileBug': '\\uF30D',\n 'FileCode': '\\uF30E',\n 'FileComment': '\\uF30F',\n 'BusinessHoursSign': '\\uF310',\n 'FileImage': '\\uF311',\n 'FileSymlink': '\\uF312',\n 'AutoFillTemplate': '\\uF313',\n 'WorkItem': '\\uF314',\n 'WorkItemBug': '\\uF315',\n 'LogRemove': '\\uF316',\n 'ColumnOptions': '\\uF317',\n 'Packages': '\\uF318',\n 'BuildIssue': '\\uF319',\n 'AssessmentGroup': '\\uF31A',\n 'VariableGroup': '\\uF31B',\n 'FullHistory': '\\uF31C',\n 'Wheelchair': '\\uF31F',\n 'SingleColumnEdit': '\\uF321',\n 'DoubleColumnEdit': '\\uF322',\n 'TripleColumnEdit': '\\uF323',\n 'ColumnLeftTwoThirdsEdit': '\\uF324',\n 'ColumnRightTwoThirdsEdit': '\\uF325',\n 'StreamLogo': '\\uF329',\n 'PassiveAuthentication': '\\uF32A',\n 'AlertSolid': '\\uF331',\n 'MegaphoneSolid': '\\uF332',\n 'TaskSolid': '\\uF333',\n 'ConfigurationSolid': '\\uF334',\n 'BugSolid': '\\uF335',\n 'CrownSolid': '\\uF336',\n 'Trophy2Solid': '\\uF337',\n 'QuickNoteSolid': '\\uF338',\n 'ConstructionConeSolid': '\\uF339',\n 'PageListSolid': '\\uF33A',\n 'PageListMirroredSolid': '\\uF33B',\n 'StarburstSolid': '\\uF33C',\n 'ReadingModeSolid': '\\uF33D',\n 'SadSolid': '\\uF33E',\n 'HealthSolid': '\\uF33F',\n 'ShieldSolid': '\\uF340',\n 'GiftBoxSolid': '\\uF341',\n 'ShoppingCartSolid': '\\uF342',\n 'MailSolid': '\\uF343',\n 'ChatSolid': '\\uF344',\n 'RibbonSolid': '\\uF345'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-11.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-12\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-12-7e945a1e.woff') format('woff')\")\n },\n icons: {\n 'FinancialSolid': '\\uF346',\n 'FinancialMirroredSolid': '\\uF347',\n 'HeadsetSolid': '\\uF348',\n 'PermissionsSolid': '\\uF349',\n 'ParkingSolid': '\\uF34A',\n 'ParkingMirroredSolid': '\\uF34B',\n 'DiamondSolid': '\\uF34C',\n 'AsteriskSolid': '\\uF34D',\n 'OfflineStorageSolid': '\\uF34E',\n 'BankSolid': '\\uF34F',\n 'DecisionSolid': '\\uF350',\n 'Parachute': '\\uF351',\n 'ParachuteSolid': '\\uF352',\n 'FiltersSolid': '\\uF353',\n 'ColorSolid': '\\uF354',\n 'ReviewSolid': '\\uF355',\n 'ReviewRequestSolid': '\\uF356',\n 'ReviewRequestMirroredSolid': '\\uF357',\n 'ReviewResponseSolid': '\\uF358',\n 'FeedbackRequestSolid': '\\uF359',\n 'FeedbackRequestMirroredSolid': '\\uF35A',\n 'FeedbackResponseSolid': '\\uF35B',\n 'WorkItemBar': '\\uF35C',\n 'WorkItemBarSolid': '\\uF35D',\n 'Separator': '\\uF35E',\n 'NavigateExternalInline': '\\uF35F',\n 'PlanView': '\\uF360',\n 'TimelineMatrixView': '\\uF361',\n 'EngineeringGroup': '\\uF362',\n 'ProjectCollection': '\\uF363',\n 'CaretBottomRightCenter8': '\\uF364',\n 'CaretBottomLeftCenter8': '\\uF365',\n 'CaretTopRightCenter8': '\\uF366',\n 'CaretTopLeftCenter8': '\\uF367',\n 'DonutChart': '\\uF368',\n 'ChevronUnfold10': '\\uF369',\n 'ChevronFold10': '\\uF36A',\n 'DoubleChevronDown8': '\\uF36B',\n 'DoubleChevronUp8': '\\uF36C',\n 'DoubleChevronLeft8': '\\uF36D',\n 'DoubleChevronRight8': '\\uF36E',\n 'ChevronDownEnd6': '\\uF36F',\n 'ChevronUpEnd6': '\\uF370',\n 'ChevronLeftEnd6': '\\uF371',\n 'ChevronRightEnd6': '\\uF372',\n 'ContextMenu': '\\uF37C',\n 'AzureAPIManagement': '\\uF37F',\n 'AzureServiceEndpoint': '\\uF380',\n 'VSTSLogo': '\\uF381',\n 'VSTSAltLogo1': '\\uF382',\n 'VSTSAltLogo2': '\\uF383',\n 'FileTypeSolution': '\\uF387',\n 'WordLogoInverse16': '\\uF390',\n 'WordLogo16': '\\uF391',\n 'WordLogoFill16': '\\uF392',\n 'PowerPointLogoInverse16': '\\uF393',\n 'PowerPointLogo16': '\\uF394',\n 'PowerPointLogoFill16': '\\uF395',\n 'ExcelLogoInverse16': '\\uF396',\n 'ExcelLogo16': '\\uF397',\n 'ExcelLogoFill16': '\\uF398',\n 'OneNoteLogoInverse16': '\\uF399',\n 'OneNoteLogo16': '\\uF39A',\n 'OneNoteLogoFill16': '\\uF39B',\n 'OutlookLogoInverse16': '\\uF39C',\n 'OutlookLogo16': '\\uF39D',\n 'OutlookLogoFill16': '\\uF39E',\n 'PublisherLogoInverse16': '\\uF39F',\n 'PublisherLogo16': '\\uF3A0',\n 'PublisherLogoFill16': '\\uF3A1',\n 'VisioLogoInverse16': '\\uF3A2',\n 'VisioLogo16': '\\uF3A3',\n 'VisioLogoFill16': '\\uF3A4',\n 'TestBeaker': '\\uF3A5',\n 'TestBeakerSolid': '\\uF3A6',\n 'TestExploreSolid': '\\uF3A7',\n 'TestAutoSolid': '\\uF3A8',\n 'TestUserSolid': '\\uF3A9',\n 'TestImpactSolid': '\\uF3AA',\n 'TestPlan': '\\uF3AB',\n 'TestStep': '\\uF3AC',\n 'TestParameter': '\\uF3AD',\n 'TestSuite': '\\uF3AE',\n 'TestCase': '\\uF3AF',\n 'Sprint': '\\uF3B0',\n 'SignOut': '\\uF3B1',\n 'TriggerApproval': '\\uF3B2',\n 'Rocket': '\\uF3B3',\n 'AzureKeyVault': '\\uF3B4',\n 'Onboarding': '\\uF3BA',\n 'Transition': '\\uF3BC',\n 'LikeSolid': '\\uF3BF',\n 'DislikeSolid': '\\uF3C0',\n 'CRMCustomerInsightsApp': '\\uF3C8',\n 'EditCreate': '\\uF3C9',\n 'PlayReverseResume': '\\uF3E4',\n 'PlayReverse': '\\uF3E5',\n 'SearchData': '\\uF3F1',\n 'UnSetColor': '\\uF3F9',\n 'DeclineCall': '\\uF405'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-12.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-13\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-13-c3989a02.woff') format('woff')\")\n },\n icons: {\n 'RectangularClipping': '\\uF407',\n 'TeamsLogo16': '\\uF40A',\n 'TeamsLogoFill16': '\\uF40B',\n 'Spacer': '\\uF40D',\n 'SkypeLogo16': '\\uF40E',\n 'SkypeForBusinessLogo16': '\\uF40F',\n 'SkypeForBusinessLogoFill16': '\\uF410',\n 'FilterSolid': '\\uF412',\n 'MailUndelivered': '\\uF415',\n 'MailTentative': '\\uF416',\n 'MailTentativeMirrored': '\\uF417',\n 'MailReminder': '\\uF418',\n 'ReceiptUndelivered': '\\uF419',\n 'ReceiptTentative': '\\uF41A',\n 'ReceiptTentativeMirrored': '\\uF41B',\n 'Inbox': '\\uF41C',\n 'IRMReply': '\\uF41D',\n 'IRMReplyMirrored': '\\uF41E',\n 'IRMForward': '\\uF41F',\n 'IRMForwardMirrored': '\\uF420',\n 'VoicemailIRM': '\\uF421',\n 'EventAccepted': '\\uF422',\n 'EventTentative': '\\uF423',\n 'EventTentativeMirrored': '\\uF424',\n 'EventDeclined': '\\uF425',\n 'IDBadge': '\\uF427',\n 'BackgroundColor': '\\uF42B',\n 'OfficeFormsLogoInverse16': '\\uF433',\n 'OfficeFormsLogo': '\\uF434',\n 'OfficeFormsLogoFill': '\\uF435',\n 'OfficeFormsLogo16': '\\uF436',\n 'OfficeFormsLogoFill16': '\\uF437',\n 'OfficeFormsLogoInverse24': '\\uF43A',\n 'OfficeFormsLogo24': '\\uF43B',\n 'OfficeFormsLogoFill24': '\\uF43C',\n 'PageLock': '\\uF43F',\n 'NotExecuted': '\\uF440',\n 'NotImpactedSolid': '\\uF441',\n 'FieldReadOnly': '\\uF442',\n 'FieldRequired': '\\uF443',\n 'BacklogBoard': '\\uF444',\n 'ExternalBuild': '\\uF445',\n 'ExternalTFVC': '\\uF446',\n 'ExternalXAML': '\\uF447',\n 'IssueSolid': '\\uF448',\n 'DefectSolid': '\\uF449',\n 'LadybugSolid': '\\uF44A',\n 'NugetLogo': '\\uF44C',\n 'TFVCLogo': '\\uF44D',\n 'ProjectLogo32': '\\uF47E',\n 'ProjectLogoFill32': '\\uF47F',\n 'ProjectLogo16': '\\uF480',\n 'ProjectLogoFill16': '\\uF481',\n 'SwayLogo32': '\\uF482',\n 'SwayLogoFill32': '\\uF483',\n 'SwayLogo16': '\\uF484',\n 'SwayLogoFill16': '\\uF485',\n 'ClassNotebookLogo32': '\\uF486',\n 'ClassNotebookLogoFill32': '\\uF487',\n 'ClassNotebookLogo16': '\\uF488',\n 'ClassNotebookLogoFill16': '\\uF489',\n 'ClassNotebookLogoInverse32': '\\uF48A',\n 'ClassNotebookLogoInverse16': '\\uF48B',\n 'StaffNotebookLogo32': '\\uF48C',\n 'StaffNotebookLogoFill32': '\\uF48D',\n 'StaffNotebookLogo16': '\\uF48E',\n 'StaffNotebookLogoFill16': '\\uF48F',\n 'StaffNotebookLogoInverted32': '\\uF490',\n 'StaffNotebookLogoInverted16': '\\uF491',\n 'KaizalaLogo': '\\uF492',\n 'TaskLogo': '\\uF493',\n 'ProtectionCenterLogo32': '\\uF494',\n 'GallatinLogo': '\\uF496',\n 'Globe2': '\\uF49A',\n 'Guitar': '\\uF49B',\n 'Breakfast': '\\uF49C',\n 'Brunch': '\\uF49D',\n 'BeerMug': '\\uF49E',\n 'Vacation': '\\uF49F',\n 'Teeth': '\\uF4A0',\n 'Taxi': '\\uF4A1',\n 'Chopsticks': '\\uF4A2',\n 'SyncOccurence': '\\uF4A3',\n 'UnsyncOccurence': '\\uF4A4',\n 'GIF': '\\uF4A9',\n 'PrimaryCalendar': '\\uF4AE',\n 'SearchCalendar': '\\uF4AF',\n 'VideoOff': '\\uF4B0',\n 'MicrosoftFlowLogo': '\\uF4B1',\n 'BusinessCenterLogo': '\\uF4B2',\n 'ToDoLogoBottom': '\\uF4B3',\n 'ToDoLogoTop': '\\uF4B4',\n 'EditSolid12': '\\uF4B5',\n 'EditSolidMirrored12': '\\uF4B6',\n 'UneditableSolid12': '\\uF4B7',\n 'UneditableSolidMirrored12': '\\uF4B8',\n 'UneditableMirrored': '\\uF4B9',\n 'AdminALogo32': '\\uF4BA',\n 'AdminALogoFill32': '\\uF4BB',\n 'ToDoLogoInverse': '\\uF4BC'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-13.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-14\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-14-5cf58db8.woff') format('woff')\")\n },\n icons: {\n 'Snooze': '\\uF4BD',\n 'WaffleOffice365': '\\uF4E0',\n 'ImageSearch': '\\uF4E8',\n 'NewsSearch': '\\uF4E9',\n 'VideoSearch': '\\uF4EA',\n 'R': '\\uF4EB',\n 'FontColorA': '\\uF4EC',\n 'FontColorSwatch': '\\uF4ED',\n 'LightWeight': '\\uF4EE',\n 'NormalWeight': '\\uF4EF',\n 'SemiboldWeight': '\\uF4F0',\n 'GroupObject': '\\uF4F1',\n 'UngroupObject': '\\uF4F2',\n 'AlignHorizontalLeft': '\\uF4F3',\n 'AlignHorizontalCenter': '\\uF4F4',\n 'AlignHorizontalRight': '\\uF4F5',\n 'AlignVerticalTop': '\\uF4F6',\n 'AlignVerticalCenter': '\\uF4F7',\n 'AlignVerticalBottom': '\\uF4F8',\n 'HorizontalDistributeCenter': '\\uF4F9',\n 'VerticalDistributeCenter': '\\uF4FA',\n 'Ellipse': '\\uF4FB',\n 'Line': '\\uF4FC',\n 'Octagon': '\\uF4FD',\n 'Hexagon': '\\uF4FE',\n 'Pentagon': '\\uF4FF',\n 'RightTriangle': '\\uF500',\n 'HalfCircle': '\\uF501',\n 'QuarterCircle': '\\uF502',\n 'ThreeQuarterCircle': '\\uF503',\n '6PointStar': '\\uF504',\n '12PointStar': '\\uF505',\n 'ArrangeBringToFront': '\\uF506',\n 'ArrangeSendToBack': '\\uF507',\n 'ArrangeSendBackward': '\\uF508',\n 'ArrangeBringForward': '\\uF509',\n 'BorderDash': '\\uF50A',\n 'BorderDot': '\\uF50B',\n 'LineStyle': '\\uF50C',\n 'LineThickness': '\\uF50D',\n 'WindowEdit': '\\uF50E',\n 'HintText': '\\uF50F',\n 'MediaAdd': '\\uF510',\n 'AnchorLock': '\\uF511',\n 'AutoHeight': '\\uF512',\n 'ChartSeries': '\\uF513',\n 'ChartXAngle': '\\uF514',\n 'ChartYAngle': '\\uF515',\n 'Combobox': '\\uF516',\n 'LineSpacing': '\\uF517',\n 'Padding': '\\uF518',\n 'PaddingTop': '\\uF519',\n 'PaddingBottom': '\\uF51A',\n 'PaddingLeft': '\\uF51B',\n 'PaddingRight': '\\uF51C',\n 'NavigationFlipper': '\\uF51D',\n 'AlignJustify': '\\uF51E',\n 'TextOverflow': '\\uF51F',\n 'VisualsFolder': '\\uF520',\n 'VisualsStore': '\\uF521',\n 'PictureCenter': '\\uF522',\n 'PictureFill': '\\uF523',\n 'PicturePosition': '\\uF524',\n 'PictureStretch': '\\uF525',\n 'PictureTile': '\\uF526',\n 'Slider': '\\uF527',\n 'SliderHandleSize': '\\uF528',\n 'DefaultRatio': '\\uF529',\n 'NumberSequence': '\\uF52A',\n 'GUID': '\\uF52B',\n 'ReportAdd': '\\uF52C',\n 'DashboardAdd': '\\uF52D',\n 'MapPinSolid': '\\uF52E',\n 'WebPublish': '\\uF52F',\n 'PieSingleSolid': '\\uF530',\n 'BlockedSolid': '\\uF531',\n 'DrillDown': '\\uF532',\n 'DrillDownSolid': '\\uF533',\n 'DrillExpand': '\\uF534',\n 'DrillShow': '\\uF535',\n 'SpecialEvent': '\\uF536',\n 'OneDriveFolder16': '\\uF53B',\n 'FunctionalManagerDashboard': '\\uF542',\n 'BIDashboard': '\\uF543',\n 'CodeEdit': '\\uF544',\n 'RenewalCurrent': '\\uF545',\n 'RenewalFuture': '\\uF546',\n 'SplitObject': '\\uF547',\n 'BulkUpload': '\\uF548',\n 'DownloadDocument': '\\uF549',\n 'GreetingCard': '\\uF54B',\n 'Flower': '\\uF54E',\n 'WaitlistConfirm': '\\uF550',\n 'WaitlistConfirmMirrored': '\\uF551',\n 'LaptopSecure': '\\uF552',\n 'DragObject': '\\uF553',\n 'EntryView': '\\uF554',\n 'EntryDecline': '\\uF555',\n 'ContactCardSettings': '\\uF556',\n 'ContactCardSettingsMirrored': '\\uF557'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-14.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-15\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-15-3807251b.woff') format('woff')\")\n },\n icons: {\n 'CalendarSettings': '\\uF558',\n 'CalendarSettingsMirrored': '\\uF559',\n 'HardDriveLock': '\\uF55A',\n 'HardDriveUnlock': '\\uF55B',\n 'AccountManagement': '\\uF55C',\n 'ReportWarning': '\\uF569',\n 'TransitionPop': '\\uF5B2',\n 'TransitionPush': '\\uF5B3',\n 'TransitionEffect': '\\uF5B4',\n 'LookupEntities': '\\uF5B5',\n 'ExploreData': '\\uF5B6',\n 'AddBookmark': '\\uF5B7',\n 'SearchBookmark': '\\uF5B8',\n 'DrillThrough': '\\uF5B9',\n 'MasterDatabase': '\\uF5BA',\n 'CertifiedDatabase': '\\uF5BB',\n 'MaximumValue': '\\uF5BC',\n 'MinimumValue': '\\uF5BD',\n 'VisualStudioIDELogo32': '\\uF5D0',\n 'PasteAsText': '\\uF5D5',\n 'PasteAsCode': '\\uF5D6',\n 'BrowserTab': '\\uF5D7',\n 'BrowserTabScreenshot': '\\uF5D8',\n 'DesktopScreenshot': '\\uF5D9',\n 'FileYML': '\\uF5DA',\n 'ClipboardSolid': '\\uF5DC',\n 'FabricUserFolder': '\\uF5E5',\n 'FabricNetworkFolder': '\\uF5E6',\n 'BullseyeTarget': '\\uF5F0',\n 'AnalyticsView': '\\uF5F1',\n 'Video360Generic': '\\uF609',\n 'Untag': '\\uF60B',\n 'Leave': '\\uF627',\n 'Trending12': '\\uF62D',\n 'Blocked12': '\\uF62E',\n 'Warning12': '\\uF62F',\n 'CheckedOutByOther12': '\\uF630',\n 'CheckedOutByYou12': '\\uF631',\n 'CircleShapeSolid': '\\uF63C',\n 'SquareShapeSolid': '\\uF63D',\n 'TriangleShapeSolid': '\\uF63E',\n 'DropShapeSolid': '\\uF63F',\n 'RectangleShapeSolid': '\\uF640',\n 'ZoomToFit': '\\uF649',\n 'InsertColumnsLeft': '\\uF64A',\n 'InsertColumnsRight': '\\uF64B',\n 'InsertRowsAbove': '\\uF64C',\n 'InsertRowsBelow': '\\uF64D',\n 'DeleteColumns': '\\uF64E',\n 'DeleteRows': '\\uF64F',\n 'DeleteRowsMirrored': '\\uF650',\n 'DeleteTable': '\\uF651',\n 'AccountBrowser': '\\uF652',\n 'VersionControlPush': '\\uF664',\n 'StackedColumnChart2': '\\uF666',\n 'TripleColumnWide': '\\uF66E',\n 'QuadColumn': '\\uF66F',\n 'WhiteBoardApp16': '\\uF673',\n 'WhiteBoardApp32': '\\uF674',\n 'PinnedSolid': '\\uF676',\n 'InsertSignatureLine': '\\uF677',\n 'ArrangeByFrom': '\\uF678',\n 'Phishing': '\\uF679',\n 'CreateMailRule': '\\uF67A',\n 'PublishCourse': '\\uF699',\n 'DictionaryRemove': '\\uF69A',\n 'UserRemove': '\\uF69B',\n 'UserEvent': '\\uF69C',\n 'Encryption': '\\uF69D',\n 'PasswordField': '\\uF6AA',\n 'OpenInNewTab': '\\uF6AB',\n 'Hide3': '\\uF6AC',\n 'VerifiedBrandSolid': '\\uF6AD',\n 'MarkAsProtected': '\\uF6AE',\n 'AuthenticatorApp': '\\uF6B1',\n 'WebTemplate': '\\uF6B2',\n 'DefenderTVM': '\\uF6B3',\n 'MedalSolid': '\\uF6B9',\n 'D365TalentLearn': '\\uF6BB',\n 'D365TalentInsight': '\\uF6BC',\n 'D365TalentHRCore': '\\uF6BD',\n 'BacklogList': '\\uF6BF',\n 'ButtonControl': '\\uF6C0',\n 'TableGroup': '\\uF6D9',\n 'MountainClimbing': '\\uF6DB',\n 'TagUnknown': '\\uF6DF',\n 'TagUnknownMirror': '\\uF6E0',\n 'TagUnknown12': '\\uF6E1',\n 'TagUnknown12Mirror': '\\uF6E2',\n 'Link12': '\\uF6E3',\n 'Presentation': '\\uF6E4',\n 'Presentation12': '\\uF6E5',\n 'Lock12': '\\uF6E6',\n 'BuildDefinition': '\\uF6E9',\n 'ReleaseDefinition': '\\uF6EA',\n 'SaveTemplate': '\\uF6EC',\n 'UserGauge': '\\uF6ED',\n 'BlockedSiteSolid12': '\\uF70A',\n 'TagSolid': '\\uF70E',\n 'OfficeChat': '\\uF70F'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-15.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-16\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-16-9cf93f3b.woff') format('woff')\")\n },\n icons: {\n 'OfficeChatSolid': '\\uF710',\n 'MailSchedule': '\\uF72E',\n 'WarningSolid': '\\uF736',\n 'Blocked2Solid': '\\uF737',\n 'SkypeCircleArrow': '\\uF747',\n 'SkypeArrow': '\\uF748',\n 'SyncStatus': '\\uF751',\n 'SyncStatusSolid': '\\uF752',\n 'ProjectDocument': '\\uF759',\n 'ToDoLogoOutline': '\\uF75B',\n 'VisioOnlineLogoFill32': '\\uF75F',\n 'VisioOnlineLogo32': '\\uF760',\n 'VisioOnlineLogoCloud32': '\\uF761',\n 'VisioDiagramSync': '\\uF762',\n 'Event12': '\\uF763',\n 'EventDateMissed12': '\\uF764',\n 'UserOptional': '\\uF767',\n 'ResponsesMenu': '\\uF768',\n 'DoubleDownArrow': '\\uF769',\n 'DistributeDown': '\\uF76A',\n 'BookmarkReport': '\\uF76B',\n 'FilterSettings': '\\uF76C',\n 'GripperDotsVertical': '\\uF772',\n 'MailAttached': '\\uF774',\n 'AddIn': '\\uF775',\n 'LinkedDatabase': '\\uF779',\n 'TableLink': '\\uF77A',\n 'PromotedDatabase': '\\uF77D',\n 'BarChartVerticalFilter': '\\uF77E',\n 'BarChartVerticalFilterSolid': '\\uF77F',\n 'MicOff2': '\\uF781',\n 'MicrosoftTranslatorLogo': '\\uF782',\n 'ShowTimeAs': '\\uF787',\n 'FileRequest': '\\uF789',\n 'WorkItemAlert': '\\uF78F',\n 'PowerBILogo16': '\\uF790',\n 'PowerBILogoBackplate16': '\\uF791',\n 'BulletedListText': '\\uF792',\n 'BulletedListBullet': '\\uF793',\n 'BulletedListTextMirrored': '\\uF794',\n 'BulletedListBulletMirrored': '\\uF795',\n 'NumberedListText': '\\uF796',\n 'NumberedListNumber': '\\uF797',\n 'NumberedListTextMirrored': '\\uF798',\n 'NumberedListNumberMirrored': '\\uF799',\n 'RemoveLinkChain': '\\uF79A',\n 'RemoveLinkX': '\\uF79B',\n 'FabricTextHighlight': '\\uF79C',\n 'ClearFormattingA': '\\uF79D',\n 'ClearFormattingEraser': '\\uF79E',\n 'Photo2Fill': '\\uF79F',\n 'IncreaseIndentText': '\\uF7A0',\n 'IncreaseIndentArrow': '\\uF7A1',\n 'DecreaseIndentText': '\\uF7A2',\n 'DecreaseIndentArrow': '\\uF7A3',\n 'IncreaseIndentTextMirrored': '\\uF7A4',\n 'IncreaseIndentArrowMirrored': '\\uF7A5',\n 'DecreaseIndentTextMirrored': '\\uF7A6',\n 'DecreaseIndentArrowMirrored': '\\uF7A7',\n 'CheckListText': '\\uF7A8',\n 'CheckListCheck': '\\uF7A9',\n 'CheckListTextMirrored': '\\uF7AA',\n 'CheckListCheckMirrored': '\\uF7AB',\n 'NumberSymbol': '\\uF7AC',\n 'Coupon': '\\uF7BC',\n 'VerifiedBrand': '\\uF7BD',\n 'ReleaseGate': '\\uF7BE',\n 'ReleaseGateCheck': '\\uF7BF',\n 'ReleaseGateError': '\\uF7C0',\n 'M365InvoicingLogo': '\\uF7C1',\n 'RemoveFromShoppingList': '\\uF7D5',\n 'ShieldAlert': '\\uF7D7',\n 'FabricTextHighlightComposite': '\\uF7DA',\n 'Dataflows': '\\uF7DD',\n 'GenericScanFilled': '\\uF7DE',\n 'DiagnosticDataBarTooltip': '\\uF7DF',\n 'SaveToMobile': '\\uF7E0',\n 'Orientation2': '\\uF7E1',\n 'ScreenCast': '\\uF7E2',\n 'ShowGrid': '\\uF7E3',\n 'SnapToGrid': '\\uF7E4',\n 'ContactList': '\\uF7E5',\n 'NewMail': '\\uF7EA',\n 'EyeShadow': '\\uF7EB',\n 'FabricFolderConfirm': '\\uF7FF',\n 'InformationBarriers': '\\uF803',\n 'CommentActive': '\\uF804',\n 'ColumnVerticalSectionEdit': '\\uF806',\n 'WavingHand': '\\uF807',\n 'ShakeDevice': '\\uF80A',\n 'SmartGlassRemote': '\\uF80B',\n 'Rotate90Clockwise': '\\uF80D',\n 'Rotate90CounterClockwise': '\\uF80E',\n 'CampaignTemplate': '\\uF811',\n 'ChartTemplate': '\\uF812',\n 'PageListFilter': '\\uF813',\n 'SecondaryNav': '\\uF814',\n 'ColumnVerticalSection': '\\uF81E',\n 'SkypeCircleSlash': '\\uF825',\n 'SkypeSlash': '\\uF826'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-16.js.map","// Your use of the content in the files referenced here is subject to the terms of the license at https://aka.ms/fluentui-assets-license\nimport { registerIcons } from '@fluentui/style-utilities';\nexport function initializeIcons(baseUrl, options) {\n if (baseUrl === void 0) { baseUrl = ''; }\n var subset = {\n style: {\n MozOsxFontSmoothing: 'grayscale',\n WebkitFontSmoothing: 'antialiased',\n fontStyle: 'normal',\n fontWeight: 'normal',\n speak: 'none'\n },\n fontFace: {\n fontFamily: \"\\\"FabricMDL2Icons-17\\\"\",\n src: \"url('\".concat(baseUrl, \"fabric-icons-17-0c4ed701.woff') format('woff')\")\n },\n icons: {\n 'CustomizeToolbar': '\\uF828',\n 'DuplicateRow': '\\uF82A',\n 'RemoveFromTrash': '\\uF82B',\n 'MailOptions': '\\uF82C',\n 'Childof': '\\uF82D',\n 'Footer': '\\uF82E',\n 'Header': '\\uF82F',\n 'BarChartVerticalFill': '\\uF830',\n 'StackedColumnChart2Fill': '\\uF831',\n 'PlainText': '\\uF834',\n 'AccessibiltyChecker': '\\uF835',\n 'DatabaseSync': '\\uF842',\n 'ReservationOrders': '\\uF845',\n 'TabOneColumn': '\\uF849',\n 'TabTwoColumn': '\\uF84A',\n 'TabThreeColumn': '\\uF84B',\n 'BulletedTreeList': '\\uF84C',\n 'MicrosoftTranslatorLogoGreen': '\\uF852',\n 'MicrosoftTranslatorLogoBlue': '\\uF853',\n 'InternalInvestigation': '\\uF854',\n 'AddReaction': '\\uF85D',\n 'ContactHeart': '\\uF862',\n 'VisuallyImpaired': '\\uF866',\n 'EventToDoLogo': '\\uF869',\n 'Variable2': '\\uF86D',\n 'ModelingView': '\\uF871',\n 'DisconnectVirtualMachine': '\\uF873',\n 'ReportLock': '\\uF875',\n 'Uneditable2': '\\uF876',\n 'Uneditable2Mirrored': '\\uF877',\n 'BarChartVerticalEdit': '\\uF89D',\n 'GlobalNavButtonActive': '\\uF89F',\n 'PollResults': '\\uF8A0',\n 'Rerun': '\\uF8A1',\n 'QandA': '\\uF8A2',\n 'QandAMirror': '\\uF8A3',\n 'BookAnswers': '\\uF8A4',\n 'AlertSettings': '\\uF8B6',\n 'TrimStart': '\\uF8BB',\n 'TrimEnd': '\\uF8BC',\n 'TableComputed': '\\uF8F5',\n 'DecreaseIndentLegacy': '\\uE290',\n 'IncreaseIndentLegacy': '\\uE291',\n 'SizeLegacy': '\\uE2B2'\n }\n };\n registerIcons(subset, options);\n}\n//# sourceMappingURL=fabric-icons-17.js.map","import { registerIconAlias } from '@fluentui/style-utilities';\nexport var registerIconAliases = function () {\n registerIconAlias('trash', 'delete');\n registerIconAlias('onedrive', 'onedrivelogo');\n registerIconAlias('alertsolid12', 'eventdatemissed12');\n registerIconAlias('sixpointstar', '6pointstar');\n registerIconAlias('twelvepointstar', '12pointstar');\n registerIconAlias('toggleon', 'toggleleft');\n registerIconAlias('toggleoff', 'toggleright');\n};\nexport default registerIconAliases;\n//# sourceMappingURL=iconAliases.js.map","// Do not modify this file; it is generated as part of publish.\n// The checked in version is a placeholder only and will not be updated.\nimport { setVersion } from '@fluentui/set-version';\nsetVersion('@fluentui/font-icons-mdl2', '8.5.25');\n//# sourceMappingURL=version.js.map","import { initializeIcons as i } from './fabric-icons';\nimport { initializeIcons as i0 } from './fabric-icons-0';\nimport { initializeIcons as i1 } from './fabric-icons-1';\nimport { initializeIcons as i2 } from './fabric-icons-2';\nimport { initializeIcons as i3 } from './fabric-icons-3';\nimport { initializeIcons as i4 } from './fabric-icons-4';\nimport { initializeIcons as i5 } from './fabric-icons-5';\nimport { initializeIcons as i6 } from './fabric-icons-6';\nimport { initializeIcons as i7 } from './fabric-icons-7';\nimport { initializeIcons as i8 } from './fabric-icons-8';\nimport { initializeIcons as i9 } from './fabric-icons-9';\nimport { initializeIcons as i10 } from './fabric-icons-10';\nimport { initializeIcons as i11 } from './fabric-icons-11';\nimport { initializeIcons as i12 } from './fabric-icons-12';\nimport { initializeIcons as i13 } from './fabric-icons-13';\nimport { initializeIcons as i14 } from './fabric-icons-14';\nimport { initializeIcons as i15 } from './fabric-icons-15';\nimport { initializeIcons as i16 } from './fabric-icons-16';\nimport { initializeIcons as i17 } from './fabric-icons-17';\nimport { FLUENT_CDN_BASE_URL } from '@fluentui/style-utilities';\nimport { registerIconAliases } from './iconAliases';\nimport { getWindow } from '@fluentui/utilities';\nvar DEFAULT_BASE_URL = \"\".concat(FLUENT_CDN_BASE_URL, \"/assets/icons/\");\nvar win = getWindow();\nexport function initializeIcons(baseUrl, options) {\n var _a, _b;\n if (baseUrl === void 0) { baseUrl = ((_a = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _a === void 0 ? void 0 : _a.iconBaseUrl) || ((_b = win === null || win === void 0 ? void 0 : win.FabricConfig) === null || _b === void 0 ? void 0 : _b.fontBaseUrl) || DEFAULT_BASE_URL; }\n [i, i0, i1, i2, i3, i4, i5, i6, i7, i8, i9, i10, i11, i12, i13, i14, i15, i16, i17].forEach(function (initialize) { return initialize(baseUrl, options); });\n registerIconAliases();\n}\n/* eslint-enable deprecation/deprecation */\nimport './version';\n//# sourceMappingURL=index.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { concatStyleSets } from '@fluentui/style-utilities';\nimport { Customizations, CustomizerContext } from '@fluentui/utilities';\nimport { createFactory } from './slots';\nimport { assign } from './utilities';\n/**\n * Assembles a higher order component based on the following: styles, theme, view, and state.\n * Imposes a separation of concern and centralizes styling processing to increase ease of use and robustness\n * in how components use and apply styling and theming.\n *\n * Automatically merges and applies themes and styles with theme / styleprops having the highest priority.\n * State component, if provided, is passed in props for processing. Props from state / user are automatically processed\n * and styled before finally being passed to view.\n *\n * State components should contain all stateful behavior and should not generate any JSX, but rather simply call\n * the view prop.\n *\n * Views should simply be stateless pure functions that receive all props needed for rendering their output.\n *\n * State component is optional. If state is not provided, created component is essentially a functional\n * stateless component.\n *\n * @param options - component Component options. See IComponentOptions for more detail.\n */\nexport function createComponent(view, options) {\n if (options === void 0) { options = {}; }\n var _a = options.factoryOptions, factoryOptions = _a === void 0 ? {} : _a;\n var defaultProp = factoryOptions.defaultProp;\n var ResultComponent = function (componentProps) {\n var settings = _getCustomizations(options.displayName, React.useContext(CustomizerContext), options.fields);\n var stateReducer = options.state;\n if (stateReducer) {\n // Don't assume state will return all props, so spread useState result over component props.\n componentProps = __assign(__assign({}, componentProps), stateReducer(componentProps));\n }\n var theme = componentProps.theme || settings.theme;\n var tokens = _resolveTokens(componentProps, theme, options.tokens, settings.tokens, componentProps.tokens);\n var styles = _resolveStyles(componentProps, theme, tokens, options.styles, settings.styles, componentProps.styles);\n var viewProps = __assign(__assign({}, componentProps), { styles: styles, tokens: tokens, _defaultStyles: styles, theme: theme });\n return view(viewProps);\n };\n ResultComponent.displayName = options.displayName || view.name;\n // If a shorthand prop is defined, create a factory for the component.\n // TODO: This shouldn't be a concern of createComponent.. factoryOptions should just be forwarded.\n // Need to weigh creating default factories on component creation vs. memoizing them on use in slots.tsx.\n if (defaultProp) {\n ResultComponent.create = createFactory(ResultComponent, { defaultProp: defaultProp });\n }\n assign(ResultComponent, options.statics);\n // Later versions of TypeSript should allow us to merge objects in a type safe way and avoid this cast.\n return ResultComponent;\n}\n/**\n * Resolve all styles functions with both props and tokens and flatten results along with all styles objects.\n */\nfunction _resolveStyles(props, theme, tokens) {\n var allStyles = [];\n for (var _i = 3; _i < arguments.length; _i++) {\n allStyles[_i - 3] = arguments[_i];\n }\n return concatStyleSets.apply(void 0, allStyles.map(function (styles) {\n return typeof styles === 'function' ? styles(props, theme, tokens) : styles;\n }));\n}\n/**\n * Resolve all tokens functions with props flatten results along with all tokens objects.\n */\nfunction _resolveTokens(props, theme) {\n var allTokens = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n allTokens[_i - 2] = arguments[_i];\n }\n var tokens = {};\n for (var _a = 0, allTokens_1 = allTokens; _a < allTokens_1.length; _a++) {\n var currentTokens = allTokens_1[_a];\n if (currentTokens) {\n // TODO: why is this cast needed? TS seems to think there is a (TToken | Function) union from somewhere.\n currentTokens =\n typeof currentTokens === 'function'\n ? currentTokens(props, theme)\n : currentTokens;\n if (Array.isArray(currentTokens)) {\n currentTokens = _resolveTokens.apply(void 0, __spreadArray([props, theme], currentTokens, false));\n }\n assign(tokens, currentTokens);\n }\n }\n return tokens;\n}\n/**\n * Helper function for calling Customizations.getSettings falling back to default fields.\n *\n * @param displayName Displayable name for component.\n * @param context React context passed to component containing contextual settings.\n * @param fields Optional list of properties to grab from global store and context.\n */\nfunction _getCustomizations(displayName, context, fields) {\n // TODO: do we want field props? should fields be part of IComponent and used here?\n // TODO: should we centrally define DefaultFields? (not exported from styling)\n // TODO: tie this array to ICustomizationProps, such that each array element is keyof ICustomizationProps\n var DefaultFields = ['theme', 'styles', 'tokens'];\n return Customizations.getSettings(fields || DefaultFields, displayName, context.customizations);\n}\n//# sourceMappingURL=createComponent.js.map","import { __assign, __spreadArray } from \"tslib\";\nimport * as React from 'react';\nimport { mergeCss } from '@fluentui/merge-styles';\nimport { getRTL, memoizeFunction } from '@fluentui/utilities';\nimport { assign } from './utilities';\n/**\n * This function is required for any module that uses slots.\n *\n * This function is a slot resolver that automatically evaluates slot functions to generate React elements.\n * A byproduct of this resolver is that it removes slots from the React hierarchy by bypassing React.createElement.\n *\n * To use this function on a per-file basis, use the jsx directive targeting withSlots.\n * This directive must be the FIRST LINE in the file to work correctly.\n * Usage of this pragma also requires withSlots import statement.\n *\n * See React.createElement\n */\n// Can't use typeof on React.createElement since it's overloaded. Approximate createElement's signature for now\n// and widen as needed.\nexport function withSlots(type, props) {\n var children = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n children[_i - 2] = arguments[_i];\n }\n var slotType = type;\n if (slotType.isSlot) {\n // Since we are bypassing createElement, use React.Children.toArray to make sure children are\n // properly assigned keys.\n // TODO: should this be mutating? does React mutate children subprop with createElement?\n // TODO: will toArray clobber existing keys?\n // TODO: React generates warnings because it doesn't detect hidden member _store that is set in createElement.\n // Even children passed to createElement without keys don't generate this warning.\n // Is there a better way to prevent slots from appearing in hierarchy? toArray doesn't address root issue.\n children = React.Children.toArray(children);\n // TODO: There is something weird going on here with children embedded in props vs. rest args.\n // Comment out these lines to see. Make sure this function is doing the right things.\n if (children.length === 0) {\n return slotType(props);\n }\n return slotType(__assign(__assign({}, props), { children: children }));\n }\n else {\n // TODO: Are there some cases where children should NOT be spread? Also, spreading reraises perf question.\n // Children had to be spread to avoid breaking KeytipData in Toggle.view:\n // react-dom.development.js:18931 Uncaught TypeError: children is not a function\n // Without spread, function child is a child array of one element\n // TODO: is there a reason this can't be:\n // return React.createElement.apply(this, arguments);\n return React.createElement.apply(React, __spreadArray([type, props], children, false));\n }\n}\n/**\n * This function creates factories that render ouput depending on the user ISlotProp props passed in.\n * @param DefaultComponent - Base component to render when not overridden by user props.\n * @param options - Factory options, including defaultProp value for shorthand prop mapping.\n * @returns ISlotFactory function used for rendering slots.\n */\nexport function createFactory(DefaultComponent, options) {\n if (options === void 0) { options = {}; }\n var _a = options.defaultProp, defaultProp = _a === void 0 ? 'children' : _a;\n var result = function (componentProps, userProps, userSlotOptions, defaultStyles, theme) {\n // If they passed in raw JSX, just return that.\n if (React.isValidElement(userProps)) {\n return userProps;\n }\n var flattenedUserProps = _translateShorthand(defaultProp, userProps);\n var finalProps = _constructFinalProps(defaultStyles, theme, componentProps, flattenedUserProps);\n if (userSlotOptions) {\n if (userSlotOptions.component) {\n // TODO: Remove cast if possible. This cast is needed because TS errors on the intrinsic portion of ReactType.\n // return ;\n var UserComponent = userSlotOptions.component;\n return React.createElement(UserComponent, __assign({}, finalProps));\n }\n if (userSlotOptions.render) {\n return userSlotOptions.render(finalProps, DefaultComponent);\n }\n }\n return React.createElement(DefaultComponent, __assign({}, finalProps));\n };\n return result;\n}\n/**\n * Default factory for components without explicit factories.\n */\nvar defaultFactory = memoizeFunction(function (type) { return createFactory(type); });\n/**\n * This function generates slots that can be used in JSX given a definition of slots and their corresponding types.\n * @param userProps - Props as pass to component.\n * @param slots - Slot definition object defining the default slot component for each slot.\n * @returns A set of created slots that components can render in JSX.\n */\nexport function getSlots(userProps, slots) {\n var result = {};\n // userProps already has default props mixed in by createComponent. Recast here to gain typing for this function.\n var mixedProps = userProps;\n var _loop_1 = function (name_1) {\n if (slots.hasOwnProperty(name_1)) {\n // This closure method requires the use of withSlots to prevent unnecessary rerenders. This is because React\n // detects each closure as a different component (since it is a new instance) from the previous one and then\n // forces a rerender of the entire slot subtree. For now, the only way to avoid this is to use withSlots, which\n // bypasses the call to React.createElement.\n var slot = function (componentProps) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n if (args.length > 0) {\n // If React.createElement is being incorrectly used with slots, there will be additional arguments.\n // We can detect these additional arguments and error on their presence.\n throw new Error('Any module using getSlots must use withSlots. Please see withSlots javadoc for more info.');\n }\n // TODO: having TS infer types here seems to cause infinite loop.\n // use explicit types or casting to preserve typing if possible.\n // TODO: this should be a lookup on TProps property instead of being TProps directly, which is probably\n // causing the infinite loop\n return _renderSlot(slots[name_1], \n // TODO: this cast to any is hiding a relationship issue between the first two args\n componentProps, mixedProps[name_1], mixedProps.slots && mixedProps.slots[name_1], \n // _defaultStyles should always be present, but a check for existence is added to make view tests\n // easier to use.\n mixedProps._defaultStyles && mixedProps._defaultStyles[name_1], mixedProps.theme);\n };\n slot.isSlot = true;\n result[name_1] = slot;\n }\n };\n for (var name_1 in slots) {\n _loop_1(name_1);\n }\n return result;\n}\n/**\n * Helper function that translates shorthand as needed.\n * @param defaultProp\n * @param slotProps\n */\nfunction _translateShorthand(defaultProp, slotProps) {\n var _a;\n var transformedProps;\n if (typeof slotProps === 'string' || typeof slotProps === 'number' || typeof slotProps === 'boolean') {\n transformedProps = (_a = {},\n _a[defaultProp] = slotProps,\n _a);\n }\n else {\n transformedProps = slotProps;\n }\n return transformedProps;\n}\n/**\n * Helper function that constructs final styles and props given a series of props ordered by increasing priority.\n */\nfunction _constructFinalProps(defaultStyles, theme) {\n var allProps = [];\n for (var _i = 2; _i < arguments.length; _i++) {\n allProps[_i - 2] = arguments[_i];\n }\n var finalProps = {};\n var classNames = [];\n for (var _a = 0, allProps_1 = allProps; _a < allProps_1.length; _a++) {\n var props = allProps_1[_a];\n classNames.push(props && props.className);\n assign(finalProps, props);\n }\n finalProps.className = mergeCss([defaultStyles, classNames], { rtl: getRTL(theme) });\n return finalProps;\n}\n/**\n * Render a slot given component and user props. Uses component factory if available, otherwise falls back\n * to default factory.\n * @param ComponentType Factory component type.\n * @param componentProps The properties passed into slot from within the component.\n * @param userProps The user properties passed in from outside of the component.\n */\nfunction _renderSlot(ComponentType, componentProps, userProps, slotOptions, defaultStyles, theme) {\n if (ComponentType.create !== undefined) {\n return ComponentType.create(componentProps, userProps, slotOptions, defaultStyles);\n }\n else {\n // TODO: need to resolve typing / generic issues passing through memoizeFunction. for now, cast to 'unknown'\n return defaultFactory(ComponentType)(componentProps, userProps, slotOptions, defaultStyles, theme);\n }\n}\n//# sourceMappingURL=slots.js.map","import { __assign } from 'tslib';\nexport var assign = __assign;\n//# sourceMappingURL=utilities.js.map","/**\n * Sets the current RTL value.\n */\nexport function setRTL(isRTL) {\n if (_rtl !== isRTL) {\n _rtl = isRTL;\n }\n}\n/**\n * Gets the current RTL value.\n */\nexport function getRTL() {\n if (_rtl === undefined) {\n _rtl =\n typeof document !== 'undefined' &&\n !!document.documentElement &&\n document.documentElement.getAttribute('dir') === 'rtl';\n }\n return _rtl;\n}\n// This has been split into 2 lines because it was working in Fabric due to the code being transpiled to es5, so this\n// was converted to var while not working in Fluent that uses babel to transpile the code to be es6-like. Splitting the\n// logic into two lines, however, allows it to work in both scenarios.\nvar _rtl;\n_rtl = getRTL();\nexport function getStyleOptions() {\n return {\n rtl: getRTL(),\n };\n}\n//# sourceMappingURL=StyleOptionsState.js.map","import { __assign } from \"tslib\";\nexport var InjectionMode = {\n /**\n * Avoids style injection, use getRules() to read the styles.\n */\n none: 0,\n /**\n * Inserts rules using the insertRule api.\n */\n insertNode: 1,\n /**\n * Appends rules using appendChild.\n */\n appendChild: 2,\n};\nvar STYLESHEET_SETTING = '__stylesheet__';\n/**\n * MSIE 11 doesn't cascade styles based on DOM ordering, but rather on the order that each style node\n * is created. As such, to maintain consistent priority, IE11 should reuse a single style node.\n */\nvar REUSE_STYLE_NODE = typeof navigator !== 'undefined' && /rv:11.0/.test(navigator.userAgent);\nvar _global = {};\n// Grab window.\ntry {\n // Why the cast?\n // if compiled/type checked in same program with `@fluentui/font-icons-mdl2` which extends `Window` on global\n // ( check packages/font-icons-mdl2/src/index.ts ) the definitions don't match! Thus the need of this extra assertion\n _global = (window || {});\n}\ncatch (_a) {\n /* leave as blank object */\n}\nvar _stylesheet;\n/**\n * Represents the state of styles registered in the page. Abstracts\n * the surface for adding styles to the stylesheet, exposes helpers\n * for reading the styles registered in server rendered scenarios.\n *\n * @public\n */\nvar Stylesheet = /** @class */ (function () {\n function Stylesheet(config, serializedStylesheet) {\n var _a, _b, _c, _d, _e, _f;\n this._rules = [];\n this._preservedRules = [];\n this._counter = 0;\n this._keyToClassName = {};\n this._onInsertRuleCallbacks = [];\n this._onResetCallbacks = [];\n this._classNameToArgs = {};\n this._config = __assign({ \n // If there is no document we won't have an element to inject into.\n injectionMode: typeof document === 'undefined' ? InjectionMode.none : InjectionMode.insertNode, defaultPrefix: 'css', namespace: undefined, cspSettings: undefined }, config);\n this._classNameToArgs = (_a = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.classNameToArgs) !== null && _a !== void 0 ? _a : this._classNameToArgs;\n this._counter = (_b = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.counter) !== null && _b !== void 0 ? _b : this._counter;\n this._keyToClassName = (_d = (_c = this._config.classNameCache) !== null && _c !== void 0 ? _c : serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.keyToClassName) !== null && _d !== void 0 ? _d : this._keyToClassName;\n this._preservedRules = (_e = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.preservedRules) !== null && _e !== void 0 ? _e : this._preservedRules;\n this._rules = (_f = serializedStylesheet === null || serializedStylesheet === void 0 ? void 0 : serializedStylesheet.rules) !== null && _f !== void 0 ? _f : this._rules;\n }\n /**\n * Gets the singleton instance.\n */\n Stylesheet.getInstance = function () {\n _stylesheet = _global[STYLESHEET_SETTING];\n if (!_stylesheet || (_stylesheet._lastStyleElement && _stylesheet._lastStyleElement.ownerDocument !== document)) {\n var fabricConfig = (_global === null || _global === void 0 ? void 0 : _global.FabricConfig) || {};\n var stylesheet = new Stylesheet(fabricConfig.mergeStyles, fabricConfig.serializedStylesheet);\n _stylesheet = stylesheet;\n _global[STYLESHEET_SETTING] = stylesheet;\n }\n return _stylesheet;\n };\n /**\n * Serializes the Stylesheet instance into a format which allows rehydration on creation.\n * @returns string representation of `ISerializedStylesheet` interface.\n */\n Stylesheet.prototype.serialize = function () {\n return JSON.stringify({\n classNameToArgs: this._classNameToArgs,\n counter: this._counter,\n keyToClassName: this._keyToClassName,\n preservedRules: this._preservedRules,\n rules: this._rules,\n });\n };\n /**\n * Configures the stylesheet.\n */\n Stylesheet.prototype.setConfig = function (config) {\n this._config = __assign(__assign({}, this._config), config);\n };\n /**\n * Configures a reset callback.\n *\n * @param callback - A callback which will be called when the Stylesheet is reset.\n * @returns function which when called un-registers provided callback.\n */\n Stylesheet.prototype.onReset = function (callback) {\n var _this = this;\n this._onResetCallbacks.push(callback);\n return function () {\n _this._onResetCallbacks = _this._onResetCallbacks.filter(function (cb) { return cb !== callback; });\n };\n };\n /**\n * Configures an insert rule callback.\n *\n * @param callback - A callback which will be called when a rule is inserted.\n * @returns function which when called un-registers provided callback.\n */\n Stylesheet.prototype.onInsertRule = function (callback) {\n var _this = this;\n this._onInsertRuleCallbacks.push(callback);\n return function () {\n _this._onInsertRuleCallbacks = _this._onInsertRuleCallbacks.filter(function (cb) { return cb !== callback; });\n };\n };\n /**\n * Generates a unique classname.\n *\n * @param displayName - Optional value to use as a prefix.\n */\n Stylesheet.prototype.getClassName = function (displayName) {\n var namespace = this._config.namespace;\n var prefix = displayName || this._config.defaultPrefix;\n return \"\".concat(namespace ? namespace + '-' : '').concat(prefix, \"-\").concat(this._counter++);\n };\n /**\n * Used internally to cache information about a class which was\n * registered with the stylesheet.\n */\n Stylesheet.prototype.cacheClassName = function (className, key, args, rules) {\n this._keyToClassName[key] = className;\n this._classNameToArgs[className] = {\n args: args,\n rules: rules,\n };\n };\n /**\n * Gets the appropriate classname given a key which was previously\n * registered using cacheClassName.\n */\n Stylesheet.prototype.classNameFromKey = function (key) {\n return this._keyToClassName[key];\n };\n /**\n * Gets all classnames cache with the stylesheet.\n */\n Stylesheet.prototype.getClassNameCache = function () {\n return this._keyToClassName;\n };\n /**\n * Gets the arguments associated with a given classname which was\n * previously registered using cacheClassName.\n */\n Stylesheet.prototype.argsFromClassName = function (className) {\n var entry = this._classNameToArgs[className];\n return entry && entry.args;\n };\n /**\n * Gets the rules associated with a given classname which was\n * previously registered using cacheClassName.\n */\n Stylesheet.prototype.insertedRulesFromClassName = function (className) {\n var entry = this._classNameToArgs[className];\n return entry && entry.rules;\n };\n /**\n * Inserts a css rule into the stylesheet.\n * @param preserve - Preserves the rule beyond a reset boundary.\n */\n Stylesheet.prototype.insertRule = function (rule, preserve) {\n var injectionMode = this._config.injectionMode;\n var element = injectionMode !== InjectionMode.none ? this._getStyleElement() : undefined;\n if (preserve) {\n this._preservedRules.push(rule);\n }\n if (element) {\n switch (injectionMode) {\n case InjectionMode.insertNode:\n var sheet = element.sheet;\n try {\n sheet.insertRule(rule, sheet.cssRules.length);\n }\n catch (e) {\n // The browser will throw exceptions on unsupported rules (such as a moz prefix in webkit.)\n // We need to swallow the exceptions for this scenario, otherwise we'd need to filter\n // which could be slower and bulkier.\n }\n break;\n case InjectionMode.appendChild:\n element.appendChild(document.createTextNode(rule));\n break;\n }\n }\n else {\n this._rules.push(rule);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (this._config.onInsertRule) {\n // eslint-disable-next-line deprecation/deprecation\n this._config.onInsertRule(rule);\n }\n this._onInsertRuleCallbacks.forEach(function (callback) { return callback(); });\n };\n /**\n * Gets all rules registered with the stylesheet; only valid when\n * using InsertionMode.none.\n */\n Stylesheet.prototype.getRules = function (includePreservedRules) {\n return (includePreservedRules ? this._preservedRules.join('') : '') + this._rules.join('');\n };\n /**\n * Resets the internal state of the stylesheet. Only used in server\n * rendered scenarios where we're using InsertionMode.none.\n */\n Stylesheet.prototype.reset = function () {\n this._rules = [];\n this._counter = 0;\n this._classNameToArgs = {};\n this._keyToClassName = {};\n this._onResetCallbacks.forEach(function (callback) { return callback(); });\n };\n // Forces the regeneration of incoming styles without totally resetting the stylesheet.\n Stylesheet.prototype.resetKeys = function () {\n this._keyToClassName = {};\n };\n Stylesheet.prototype._getStyleElement = function () {\n var _this = this;\n if (!this._styleElement && typeof document !== 'undefined') {\n this._styleElement = this._createStyleElement();\n if (!REUSE_STYLE_NODE) {\n // Reset the style element on the next frame.\n window.requestAnimationFrame(function () {\n _this._styleElement = undefined;\n });\n }\n }\n return this._styleElement;\n };\n Stylesheet.prototype._createStyleElement = function () {\n var head = document.head;\n var styleElement = document.createElement('style');\n var nodeToInsertBefore = null;\n styleElement.setAttribute('data-merge-styles', 'true');\n var cspSettings = this._config.cspSettings;\n if (cspSettings) {\n if (cspSettings.nonce) {\n styleElement.setAttribute('nonce', cspSettings.nonce);\n }\n }\n if (this._lastStyleElement) {\n // If the `nextElementSibling` is null, then the insertBefore will act as a regular append.\n // https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore#Syntax\n nodeToInsertBefore = this._lastStyleElement.nextElementSibling;\n }\n else {\n var placeholderStyleTag = this._findPlaceholderStyleTag();\n if (placeholderStyleTag) {\n nodeToInsertBefore = placeholderStyleTag.nextElementSibling;\n }\n else {\n nodeToInsertBefore = head.childNodes[0];\n }\n }\n head.insertBefore(styleElement, head.contains(nodeToInsertBefore) ? nodeToInsertBefore : null);\n this._lastStyleElement = styleElement;\n return styleElement;\n };\n Stylesheet.prototype._findPlaceholderStyleTag = function () {\n var head = document.head;\n if (head) {\n return head.querySelector('style[data-merge-styles]');\n }\n return null;\n };\n return Stylesheet;\n}());\nexport { Stylesheet };\n//# sourceMappingURL=Stylesheet.js.map","import { __spreadArray } from \"tslib\";\n/**\n * Combine a set of styles together (but does not register css classes).\n * @param styleSets - One or more stylesets to be merged (each param can also be falsy).\n */\nexport function concatStyleSets() {\n var styleSets = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styleSets[_i] = arguments[_i];\n }\n if (styleSets && styleSets.length === 1 && styleSets[0] && !styleSets[0].subComponentStyles) {\n return styleSets[0];\n }\n var mergedSet = {};\n // We process sub component styles in two phases. First we collect them, then we combine them into 1 style function.\n var workingSubcomponentStyles = {};\n for (var _a = 0, styleSets_1 = styleSets; _a < styleSets_1.length; _a++) {\n var currentSet = styleSets_1[_a];\n if (currentSet) {\n for (var prop in currentSet) {\n if (currentSet.hasOwnProperty(prop)) {\n if (prop === 'subComponentStyles' && currentSet.subComponentStyles !== undefined) {\n // subcomponent styles - style functions or objects\n var currentComponentStyles = currentSet.subComponentStyles;\n for (var subCompProp in currentComponentStyles) {\n if (currentComponentStyles.hasOwnProperty(subCompProp)) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n workingSubcomponentStyles[subCompProp].push(currentComponentStyles[subCompProp]);\n }\n else {\n workingSubcomponentStyles[subCompProp] = [currentComponentStyles[subCompProp]];\n }\n }\n }\n continue;\n }\n // the as any casts below is a workaround for ts 2.8.\n // todo: remove cast to any in ts 2.9.\n var mergedValue = mergedSet[prop];\n var currentValue = currentSet[prop];\n if (mergedValue === undefined) {\n mergedSet[prop] = currentValue;\n }\n else {\n mergedSet[prop] = __spreadArray(__spreadArray([], (Array.isArray(mergedValue) ? mergedValue : [mergedValue]), true), (Array.isArray(currentValue) ? currentValue : [currentValue]), true);\n }\n }\n }\n }\n }\n if (Object.keys(workingSubcomponentStyles).length > 0) {\n mergedSet.subComponentStyles = {};\n var mergedSubStyles = mergedSet.subComponentStyles;\n var _loop_1 = function (subCompProp) {\n if (workingSubcomponentStyles.hasOwnProperty(subCompProp)) {\n var workingSet_1 = workingSubcomponentStyles[subCompProp];\n mergedSubStyles[subCompProp] = function (styleProps) {\n return concatStyleSets.apply(void 0, workingSet_1.map(function (styleFunctionOrObject) {\n return typeof styleFunctionOrObject === 'function' ? styleFunctionOrObject(styleProps) : styleFunctionOrObject;\n }));\n };\n }\n };\n // now we process the subcomponent styles if there are any\n for (var subCompProp in workingSubcomponentStyles) {\n _loop_1(subCompProp);\n }\n }\n return mergedSet;\n}\n//# sourceMappingURL=concatStyleSets.js.map","import { concatStyleSets } from './concatStyleSets';\n/**\n * Concatenates style sets into one, but resolves functional sets using the given props.\n * @param styleProps - Props used to resolve functional sets.\n * @param allStyles - Style sets, which can be functions or objects.\n */\nexport function concatStyleSetsWithProps(styleProps) {\n var allStyles = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n allStyles[_i - 1] = arguments[_i];\n }\n var result = [];\n for (var _a = 0, allStyles_1 = allStyles; _a < allStyles_1.length; _a++) {\n var styles = allStyles_1[_a];\n if (styles) {\n result.push(typeof styles === 'function' ? styles(styleProps) : styles);\n }\n }\n if (result.length === 1) {\n return result[0];\n }\n else if (result.length) {\n // cliffkoh: I cannot figure out how to avoid the cast to any here.\n // It is something to do with the use of Omit in IStyleSet.\n // It might not be necessary once Omit becomes part of lib.d.ts (when we remove our own Omit and rely on\n // the official version).\n return concatStyleSets.apply(void 0, result);\n }\n return {};\n}\n//# sourceMappingURL=concatStyleSetsWithProps.js.map","import { Stylesheet } from './Stylesheet';\n/**\n * Separates the classes and style objects. Any classes that are pre-registered\n * args are auto expanded into objects.\n */\nexport function extractStyleParts() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n var classes = [];\n var objects = [];\n var stylesheet = Stylesheet.getInstance();\n function _processArgs(argsList) {\n for (var _i = 0, argsList_1 = argsList; _i < argsList_1.length; _i++) {\n var arg = argsList_1[_i];\n if (arg) {\n if (typeof arg === 'string') {\n if (arg.indexOf(' ') >= 0) {\n _processArgs(arg.split(' '));\n }\n else {\n var translatedArgs = stylesheet.argsFromClassName(arg);\n if (translatedArgs) {\n _processArgs(translatedArgs);\n }\n else {\n // Avoid adding the same class twice.\n if (classes.indexOf(arg) === -1) {\n classes.push(arg);\n }\n }\n }\n }\n else if (Array.isArray(arg)) {\n _processArgs(arg);\n }\n else if (typeof arg === 'object') {\n objects.push(arg);\n }\n }\n }\n }\n _processArgs(args);\n return {\n classes: classes,\n objects: objects,\n };\n}\n//# sourceMappingURL=extractStyleParts.js.map","import { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n/**\n * Registers a font face.\n * @public\n */\nexport function fontFace(font) {\n var stylesheet = Stylesheet.getInstance();\n var rule = serializeRuleEntries(getStyleOptions(), font);\n var className = stylesheet.classNameFromKey(rule);\n if (className) {\n return;\n }\n var name = stylesheet.getClassName();\n stylesheet.insertRule(\"@font-face{\".concat(rule, \"}\"), true);\n stylesheet.cacheClassName(name, rule, [], ['font-face', rule]);\n}\n//# sourceMappingURL=fontFace.js.map","import { getStyleOptions } from './StyleOptionsState';\nimport { Stylesheet } from './Stylesheet';\nimport { serializeRuleEntries } from './styleToClassName';\n/**\n * Registers keyframe definitions.\n *\n * @public\n */\nexport function keyframes(timeline) {\n var stylesheet = Stylesheet.getInstance();\n var rulesArray = [];\n for (var prop in timeline) {\n if (timeline.hasOwnProperty(prop)) {\n rulesArray.push(prop, '{', serializeRuleEntries(getStyleOptions(), timeline[prop]), '}');\n }\n }\n var rules = rulesArray.join('');\n var className = stylesheet.classNameFromKey(rules);\n if (className) {\n return className;\n }\n var name = stylesheet.getClassName();\n stylesheet.insertRule(\"@keyframes \".concat(name, \"{\").concat(rules, \"}\"), true);\n stylesheet.cacheClassName(name, rules, [], ['keyframes', rules]);\n return name;\n}\n//# sourceMappingURL=keyframes.js.map","import { concatStyleSets } from './concatStyleSets';\nimport { extractStyleParts } from './extractStyleParts';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { applyRegistration, styleToRegistration } from './styleToClassName';\n/**\n * Takes in one or more style set objects, each consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeStyles` for each property in the object, but ensures we maintain the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n */\nexport function mergeStyleSets() {\n var styleSets = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styleSets[_i] = arguments[_i];\n }\n return mergeCssSets(styleSets, getStyleOptions());\n}\n/**\n * Takes in one or more style set objects, each1consisting of a set of areas,\n * each which will produce a class name. Using this is analogous to calling\n * `mergeCss` for each property in the object, but ensures the\n * set ordering when multiple style sets are merged.\n *\n * @param styleSets - One or more style sets to be merged.\n * @param options - (optional) Options to use when creating rules.\n */\nexport function mergeCssSets(styleSets, options) {\n var classNameSet = { subComponentStyles: {} };\n var styleSet = styleSets[0];\n if (!styleSet && styleSets.length <= 1) {\n return { subComponentStyles: {} };\n }\n var concatenatedStyleSet = concatStyleSets.apply(void 0, styleSets);\n var registrations = [];\n for (var styleSetArea in concatenatedStyleSet) {\n if (concatenatedStyleSet.hasOwnProperty(styleSetArea)) {\n if (styleSetArea === 'subComponentStyles') {\n classNameSet.subComponentStyles = concatenatedStyleSet.subComponentStyles || {};\n continue;\n }\n var styles = concatenatedStyleSet[styleSetArea];\n var _a = extractStyleParts(styles), classes = _a.classes, objects = _a.objects;\n if (objects === null || objects === void 0 ? void 0 : objects.length) {\n var registration = styleToRegistration(options || {}, { displayName: styleSetArea }, objects);\n if (registration) {\n registrations.push(registration);\n // FIXME: classNameSet invalid types - exposed in TS 4.5 - cast needed\n classNameSet[styleSetArea] = classes.concat([registration.className]).join(' ');\n }\n }\n else {\n // FIXME: classNameSet invalid types - exposed in TS 4.5 - cast needed\n classNameSet[styleSetArea] = classes.join(' ');\n }\n }\n }\n for (var _i = 0, registrations_1 = registrations; _i < registrations_1.length; _i++) {\n var registration = registrations_1[_i];\n if (registration) {\n applyRegistration(registration, options === null || options === void 0 ? void 0 : options.specificityMultiplier);\n }\n }\n return classNameSet;\n}\n//# sourceMappingURL=mergeStyleSets.js.map","import { extractStyleParts } from './extractStyleParts';\nimport { getStyleOptions } from './StyleOptionsState';\nimport { styleToClassName } from './styleToClassName';\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n *\n * @public\n */\nexport function mergeStyles() {\n var args = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n args[_i] = arguments[_i];\n }\n return mergeCss(args, getStyleOptions());\n}\n/**\n * Concatenation helper, which can merge class names together. Skips over falsey values.\n * Accepts a set of options that will be used when calculating styles.\n *\n * @public\n */\nexport function mergeCss(args, options) {\n var styleArgs = args instanceof Array ? args : [args];\n var _a = extractStyleParts(styleArgs), classes = _a.classes, objects = _a.objects;\n if (objects.length) {\n classes.push(styleToClassName(options || {}, objects));\n }\n return classes.join(' ');\n}\n//# sourceMappingURL=mergeStyles.js.map","var _vendorSettings;\nexport function getVendorSettings() {\n var _a;\n if (!_vendorSettings) {\n var doc = typeof document !== 'undefined' ? document : undefined;\n var nav = typeof navigator !== 'undefined' ? navigator : undefined;\n var userAgent = (_a = nav === null || nav === void 0 ? void 0 : nav.userAgent) === null || _a === void 0 ? void 0 : _a.toLowerCase();\n if (!doc) {\n _vendorSettings = {\n isWebkit: true,\n isMoz: true,\n isOpera: true,\n isMs: true,\n };\n }\n else {\n _vendorSettings = {\n isWebkit: !!(doc && 'WebkitAppearance' in doc.documentElement.style),\n isMoz: !!(userAgent && userAgent.indexOf('firefox') > -1),\n isOpera: !!(userAgent && userAgent.indexOf('opera') > -1),\n isMs: !!(nav && (/rv:11.0/i.test(nav.userAgent) || /Edge\\/\\d./i.test(navigator.userAgent))),\n };\n }\n }\n return _vendorSettings;\n}\n/**\n * Sets the vendor settings for prefixing and vendor specific operations.\n */\nexport function setVendorSettings(vendorSettings) {\n _vendorSettings = vendorSettings;\n}\n//# sourceMappingURL=getVendorSettings.js.map","var rules = {};\nexport function kebabRules(rulePairs, index) {\n var rule = rulePairs[index];\n if (rule.charAt(0) !== '-') {\n rulePairs[index] = rules[rule] = rules[rule] || rule.replace(/([A-Z])/g, '-$1').toLowerCase();\n }\n}\n//# sourceMappingURL=kebabRules.js.map","import { getVendorSettings } from '../getVendorSettings';\nvar autoPrefixNames = {\n 'user-select': 1,\n};\nexport function prefixRules(rulePairs, index) {\n var vendorSettings = getVendorSettings();\n var name = rulePairs[index];\n if (autoPrefixNames[name]) {\n var value = rulePairs[index + 1];\n if (autoPrefixNames[name]) {\n if (vendorSettings.isWebkit) {\n rulePairs.push('-webkit-' + name, value);\n }\n if (vendorSettings.isMoz) {\n rulePairs.push('-moz-' + name, value);\n }\n if (vendorSettings.isMs) {\n rulePairs.push('-ms-' + name, value);\n }\n if (vendorSettings.isOpera) {\n rulePairs.push('-o-' + name, value);\n }\n }\n }\n}\n//# sourceMappingURL=prefixRules.js.map","var NON_PIXEL_NUMBER_PROPS = [\n 'column-count',\n 'font-weight',\n 'flex',\n 'flex-grow',\n 'flex-shrink',\n 'fill-opacity',\n 'opacity',\n 'order',\n 'z-index',\n 'zoom',\n];\nexport function provideUnits(rulePairs, index) {\n var name = rulePairs[index];\n var value = rulePairs[index + 1];\n if (typeof value === 'number') {\n var isNonPixelProp = NON_PIXEL_NUMBER_PROPS.indexOf(name) > -1;\n var isVariableOrPrefixed = name.indexOf('--') > -1;\n var unit = isNonPixelProp || isVariableOrPrefixed ? '' : 'px';\n rulePairs[index + 1] = \"\".concat(value).concat(unit);\n }\n}\n//# sourceMappingURL=provideUnits.js.map","var _a;\nvar LEFT = 'left';\nvar RIGHT = 'right';\nvar NO_FLIP = '@noflip';\nvar NAME_REPLACEMENTS = (_a = {},\n _a[LEFT] = RIGHT,\n _a[RIGHT] = LEFT,\n _a);\nvar VALUE_REPLACEMENTS = {\n 'w-resize': 'e-resize',\n 'sw-resize': 'se-resize',\n 'nw-resize': 'ne-resize',\n};\n/**\n * RTLifies the rulePair in the array at the current index. This mutates the array for performance\n * reasons.\n */\nexport function rtlifyRules(options, rulePairs, index) {\n if (options.rtl) {\n var name_1 = rulePairs[index];\n if (!name_1) {\n return;\n }\n var value = rulePairs[index + 1];\n if (typeof value === 'string' && value.indexOf(NO_FLIP) >= 0) {\n rulePairs[index + 1] = value.replace(/\\s*(?:\\/\\*\\s*)?\\@noflip\\b(?:\\s*\\*\\/)?\\s*?/g, '');\n }\n else if (name_1.indexOf(LEFT) >= 0) {\n rulePairs[index] = name_1.replace(LEFT, RIGHT);\n }\n else if (name_1.indexOf(RIGHT) >= 0) {\n rulePairs[index] = name_1.replace(RIGHT, LEFT);\n }\n else if (String(value).indexOf(LEFT) >= 0) {\n rulePairs[index + 1] = value.replace(LEFT, RIGHT);\n }\n else if (String(value).indexOf(RIGHT) >= 0) {\n rulePairs[index + 1] = value.replace(RIGHT, LEFT);\n }\n else if (NAME_REPLACEMENTS[name_1]) {\n rulePairs[index] = NAME_REPLACEMENTS[name_1];\n }\n else if (VALUE_REPLACEMENTS[value]) {\n rulePairs[index + 1] = VALUE_REPLACEMENTS[value];\n }\n else {\n switch (name_1) {\n case 'margin':\n case 'padding':\n rulePairs[index + 1] = flipQuad(value);\n break;\n case 'box-shadow':\n rulePairs[index + 1] = negateNum(value, 0);\n break;\n }\n }\n }\n}\n/**\n * Given a string value in a space delimited format (e.g. \"1 2 3 4\"), negates a particular value.\n */\nfunction negateNum(value, partIndex) {\n var parts = value.split(' ');\n var numberVal = parseInt(parts[partIndex], 10);\n parts[0] = parts[0].replace(String(numberVal), String(numberVal * -1));\n return parts.join(' ');\n}\n/**\n * Given a string quad, flips the left and right values.\n */\nfunction flipQuad(value) {\n if (typeof value === 'string') {\n var parts = value.split(' ');\n if (parts.length === 4) {\n return \"\".concat(parts[0], \" \").concat(parts[3], \" \").concat(parts[2], \" \").concat(parts[1]);\n }\n }\n return value;\n}\n//# sourceMappingURL=rtlifyRules.js.map","import { __spreadArray } from \"tslib\";\nimport { Stylesheet } from './Stylesheet';\nimport { kebabRules } from './transforms/kebabRules';\nimport { prefixRules } from './transforms/prefixRules';\nimport { provideUnits } from './transforms/provideUnits';\nimport { rtlifyRules } from './transforms/rtlifyRules';\nimport { tokenizeWithParentheses } from './tokenizeWithParentheses';\nvar DISPLAY_NAME = 'displayName';\nfunction getDisplayName(rules) {\n var rootStyle = rules && rules['&'];\n return rootStyle ? rootStyle.displayName : undefined;\n}\nvar globalSelectorRegExp = /\\:global\\((.+?)\\)/g;\n/**\n * Finds comma separated selectors in a :global() e.g. \":global(.class1, .class2, .class3)\"\n * and wraps them each in their own global \":global(.class1), :global(.class2), :global(.class3)\"\n *\n * @param selectorWithGlobals The selector to process\n * @returns The updated selector\n */\nfunction expandCommaSeparatedGlobals(selectorWithGlobals) {\n // We the selector does not have a :global() we can shortcut\n if (!globalSelectorRegExp.test(selectorWithGlobals)) {\n return selectorWithGlobals;\n }\n var replacementInfo = [];\n var findGlobal = /\\:global\\((.+?)\\)/g;\n var match = null;\n // Create a result list for global selectors so we can replace them.\n while ((match = findGlobal.exec(selectorWithGlobals))) {\n // Only if the found selector is a comma separated list we'll process it.\n if (match[1].indexOf(',') > -1) {\n replacementInfo.push([\n match.index,\n match.index + match[0].length,\n // Wrap each of the found selectors in :global()\n match[1]\n .split(',')\n .map(function (v) { return \":global(\".concat(v.trim(), \")\"); })\n .join(', '),\n ]);\n }\n }\n // Replace the found selectors with their wrapped variants in reverse order\n return replacementInfo\n .reverse()\n .reduce(function (selector, _a) {\n var matchIndex = _a[0], matchEndIndex = _a[1], replacement = _a[2];\n var prefix = selector.slice(0, matchIndex);\n var suffix = selector.slice(matchEndIndex);\n return prefix + replacement + suffix;\n }, selectorWithGlobals);\n}\nfunction expandSelector(newSelector, currentSelector) {\n if (newSelector.indexOf(':global(') >= 0) {\n return newSelector.replace(globalSelectorRegExp, '$1');\n }\n else if (newSelector.indexOf(':') === 0) {\n return currentSelector + newSelector;\n }\n else if (newSelector.indexOf('&') < 0) {\n return currentSelector + ' ' + newSelector;\n }\n return newSelector;\n}\nfunction extractSelector(currentSelector, rules, selector, value) {\n if (rules === void 0) { rules = { __order: [] }; }\n if (selector.indexOf('@') === 0) {\n selector = selector + '{' + currentSelector;\n extractRules([value], rules, selector);\n }\n else if (selector.indexOf(',') > -1) {\n expandCommaSeparatedGlobals(selector)\n .split(',')\n .map(function (s) { return s.trim(); })\n .forEach(function (separatedSelector) {\n return extractRules([value], rules, expandSelector(separatedSelector, currentSelector));\n });\n }\n else {\n extractRules([value], rules, expandSelector(selector, currentSelector));\n }\n}\nfunction extractRules(args, rules, currentSelector) {\n if (rules === void 0) { rules = { __order: [] }; }\n if (currentSelector === void 0) { currentSelector = '&'; }\n var stylesheet = Stylesheet.getInstance();\n var currentRules = rules[currentSelector];\n if (!currentRules) {\n currentRules = {};\n rules[currentSelector] = currentRules;\n rules.__order.push(currentSelector);\n }\n for (var _i = 0, args_1 = args; _i < args_1.length; _i++) {\n var arg = args_1[_i];\n // If the arg is a string, we need to look up the class map and merge.\n if (typeof arg === 'string') {\n var expandedRules = stylesheet.argsFromClassName(arg);\n if (expandedRules) {\n extractRules(expandedRules, rules, currentSelector);\n }\n // Else if the arg is an array, we need to recurse in.\n }\n else if (Array.isArray(arg)) {\n extractRules(arg, rules, currentSelector);\n }\n else {\n for (var prop in arg) {\n if (arg.hasOwnProperty(prop)) {\n var propValue = arg[prop];\n if (prop === 'selectors') {\n // every child is a selector.\n var selectors = arg.selectors;\n for (var newSelector in selectors) {\n if (selectors.hasOwnProperty(newSelector)) {\n extractSelector(currentSelector, rules, newSelector, selectors[newSelector]);\n }\n }\n }\n else if (typeof propValue === 'object') {\n // prop is a selector.\n if (propValue !== null) {\n extractSelector(currentSelector, rules, prop, propValue);\n }\n }\n else {\n if (propValue !== undefined) {\n // Else, add the rule to the currentSelector.\n if (prop === 'margin' || prop === 'padding') {\n expandQuads(currentRules, prop, propValue);\n }\n else {\n currentRules[prop] = propValue;\n }\n }\n }\n }\n }\n }\n }\n return rules;\n}\nfunction expandQuads(currentRules, name, value) {\n var parts = typeof value === 'string' ? tokenizeWithParentheses(value) : [value];\n if (parts.length === 0) {\n parts.push(value);\n }\n if (parts[parts.length - 1] === '!important') {\n // Remove !important from parts, and append it to each part individually\n parts = parts.slice(0, -1).map(function (p) { return p + ' !important'; });\n }\n currentRules[name + 'Top'] = parts[0];\n currentRules[name + 'Right'] = parts[1] || parts[0];\n currentRules[name + 'Bottom'] = parts[2] || parts[0];\n currentRules[name + 'Left'] = parts[3] || parts[1] || parts[0];\n}\nfunction getKeyForRules(options, rules) {\n var serialized = [options.rtl ? 'rtl' : 'ltr'];\n var hasProps = false;\n for (var _i = 0, _a = rules.__order; _i < _a.length; _i++) {\n var selector = _a[_i];\n serialized.push(selector);\n var rulesForSelector = rules[selector];\n for (var propName in rulesForSelector) {\n if (rulesForSelector.hasOwnProperty(propName) && rulesForSelector[propName] !== undefined) {\n hasProps = true;\n serialized.push(propName, rulesForSelector[propName]);\n }\n }\n }\n return hasProps ? serialized.join('') : undefined;\n}\nfunction repeatString(target, count) {\n if (count <= 0) {\n return '';\n }\n if (count === 1) {\n return target;\n }\n return target + repeatString(target, count - 1);\n}\nexport function serializeRuleEntries(options, ruleEntries) {\n if (!ruleEntries) {\n return '';\n }\n var allEntries = [];\n for (var entry in ruleEntries) {\n if (ruleEntries.hasOwnProperty(entry) && entry !== DISPLAY_NAME && ruleEntries[entry] !== undefined) {\n allEntries.push(entry, ruleEntries[entry]);\n }\n }\n // Apply transforms.\n for (var i = 0; i < allEntries.length; i += 2) {\n kebabRules(allEntries, i);\n provideUnits(allEntries, i);\n rtlifyRules(options, allEntries, i);\n prefixRules(allEntries, i);\n }\n // Apply punctuation.\n for (var i = 1; i < allEntries.length; i += 4) {\n allEntries.splice(i, 1, ':', allEntries[i], ';');\n }\n return allEntries.join('');\n}\nexport function styleToRegistration(options) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n var rules = extractRules(args);\n var key = getKeyForRules(options, rules);\n if (key) {\n var stylesheet = Stylesheet.getInstance();\n var registration = {\n className: stylesheet.classNameFromKey(key),\n key: key,\n args: args,\n };\n if (!registration.className) {\n registration.className = stylesheet.getClassName(getDisplayName(rules));\n var rulesToInsert = [];\n for (var _a = 0, _b = rules.__order; _a < _b.length; _a++) {\n var selector = _b[_a];\n rulesToInsert.push(selector, serializeRuleEntries(options, rules[selector]));\n }\n registration.rulesToInsert = rulesToInsert;\n }\n return registration;\n }\n return undefined;\n}\n/**\n * Insert style to stylesheet.\n * @param registration Style registration.\n * @param specificityMultiplier Number of times classname selector is repeated in the css rule.\n * This is to increase css specificity in case it's needed. Default to 1.\n */\nexport function applyRegistration(registration, specificityMultiplier) {\n if (specificityMultiplier === void 0) { specificityMultiplier = 1; }\n var stylesheet = Stylesheet.getInstance();\n var className = registration.className, key = registration.key, args = registration.args, rulesToInsert = registration.rulesToInsert;\n if (rulesToInsert) {\n // rulesToInsert is an ordered array of selector/rule pairs.\n for (var i = 0; i < rulesToInsert.length; i += 2) {\n var rules = rulesToInsert[i + 1];\n if (rules) {\n var selector = rulesToInsert[i];\n selector = selector.replace(/&/g, repeatString(\".\".concat(registration.className), specificityMultiplier));\n // Insert. Note if a media query, we must close the query with a final bracket.\n var processedRule = \"\".concat(selector, \"{\").concat(rules, \"}\").concat(selector.indexOf('@') === 0 ? '}' : '');\n stylesheet.insertRule(processedRule);\n }\n }\n stylesheet.cacheClassName(className, key, args, rulesToInsert);\n }\n}\nexport function styleToClassName(options) {\n var args = [];\n for (var _i = 1; _i < arguments.length; _i++) {\n args[_i - 1] = arguments[_i];\n }\n var registration = styleToRegistration.apply(void 0, __spreadArray([options], args, false));\n if (registration) {\n applyRegistration(registration, options.specificityMultiplier);\n return registration.className;\n }\n return '';\n}\n//# sourceMappingURL=styleToClassName.js.map","/**\n * Split a string into tokens separated by whitespace, except all text within parentheses\n * is treated as a single token (whitespace is ignored within parentheses).\n *\n * Unlike String.split(' '), multiple consecutive space characters are collapsed and\n * removed from the returned array (including leading and trailing spaces).\n *\n * For example:\n * `tokenizeWithParentheses(\"3px calc(var(--x) / 2) 9px 0 \")`\n * => `[\"3px\", \"calc(var(--x) / 2)\", \"9px\", \"0\"]`\n *\n * @returns The array of tokens. Returns an empty array if the string was empty or contained only whitespace.\n */\nexport function tokenizeWithParentheses(value) {\n var parts = [];\n var partStart = 0;\n var parens = 0;\n for (var i = 0; i < value.length; i++) {\n switch (value[i]) {\n case '(':\n parens++;\n break;\n case ')':\n if (parens) {\n parens--;\n }\n break;\n case '\\t':\n case ' ':\n if (!parens) {\n // Add the new part if it's not an empty string\n if (i > partStart) {\n parts.push(value.substring(partStart, i));\n }\n partStart = i + 1;\n }\n break;\n }\n }\n // Add the last part\n if (partStart < value.length) {\n parts.push(value.substring(partStart));\n }\n return parts;\n}\n//# sourceMappingURL=tokenizeWithParentheses.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { mergeStyles } from '@uifabric/merge-styles';\nimport { getTheme } from '@uifabric/styling';\nimport { KeyCodes, css, elementContains, getDocument, getElementIndexPath, getFocusableByIndexPath, getId, getNativeProps, getNextElement, getParent, getPreviousElement, getRTL, htmlElementProperties, initializeComponentRef, isElementFocusSubZone, isElementFocusZone, isElementTabbable, shouldWrapFocus, warnDeprecations, portalContainsElement, getWindow, findScrollableParent, createMergedRef, } from '@uifabric/utilities';\nimport { FocusZoneDirection, FocusZoneTabbableElements } from './FocusZone.types';\nvar IS_FOCUSABLE_ATTRIBUTE = 'data-is-focusable';\nvar IS_ENTER_DISABLED_ATTRIBUTE = 'data-disable-click-on-enter';\nvar FOCUSZONE_ID_ATTRIBUTE = 'data-focuszone-id';\nvar TABINDEX = 'tabindex';\nvar NO_VERTICAL_WRAP = 'data-no-vertical-wrap';\nvar NO_HORIZONTAL_WRAP = 'data-no-horizontal-wrap';\nvar LARGE_DISTANCE_FROM_CENTER = 999999999;\nvar LARGE_NEGATIVE_DISTANCE_FROM_CENTER = -999999999;\nvar focusZoneStyles;\nvar focusZoneClass = 'ms-FocusZone';\n/**\n * Raises a click on a target element based on a keyboard event.\n */\nfunction raiseClickFromKeyboardEvent(target, ev) {\n var _a, _b, _c, _d, _e, _f;\n var event;\n if (typeof MouseEvent === 'function') {\n event = new MouseEvent('click', {\n ctrlKey: (_a = ev) === null || _a === void 0 ? void 0 : _a.ctrlKey,\n metaKey: (_b = ev) === null || _b === void 0 ? void 0 : _b.metaKey,\n shiftKey: (_c = ev) === null || _c === void 0 ? void 0 : _c.shiftKey,\n altKey: (_d = ev) === null || _d === void 0 ? void 0 : _d.altKey,\n bubbles: (_e = ev) === null || _e === void 0 ? void 0 : _e.bubbles,\n cancelable: (_f = ev) === null || _f === void 0 ? void 0 : _f.cancelable,\n });\n }\n else {\n event = document.createEvent('MouseEvents');\n event.initMouseEvent('click', ev ? ev.bubbles : false, ev ? ev.cancelable : false, window, // not using getWindow() since this can only be run client side\n 0, // detail\n 0, // screen x\n 0, // screen y\n 0, // client x\n 0, // client y\n ev ? ev.ctrlKey : false, ev ? ev.altKey : false, ev ? ev.shiftKey : false, ev ? ev.metaKey : false, 0, // button\n null);\n }\n target.dispatchEvent(event);\n}\n// Helper function that will return a class for when the root is focused\nfunction getRootClass() {\n if (!focusZoneStyles) {\n focusZoneStyles = mergeStyles({\n selectors: {\n ':focus': {\n outline: 'none',\n },\n },\n }, focusZoneClass);\n }\n return focusZoneStyles;\n}\nvar _allInstances = {};\nvar _outerZones = new Set();\nvar ALLOWED_INPUT_TYPES = ['text', 'number', 'password', 'email', 'tel', 'url', 'search'];\nvar ALLOW_VIRTUAL_ELEMENTS = false;\nvar FocusZone = /** @class */ (function (_super) {\n __extends(FocusZone, _super);\n function FocusZone(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._mergedRef = createMergedRef();\n _this._onFocus = function (ev) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n var _a = _this.props, onActiveElementChanged = _a.onActiveElementChanged, \n // eslint-disable-next-line deprecation/deprecation\n doNotAllowFocusEventToPropagate = _a.doNotAllowFocusEventToPropagate, stopFocusPropagation = _a.stopFocusPropagation, \n // eslint-disable-next-line deprecation/deprecation\n onFocusNotification = _a.onFocusNotification, onFocus = _a.onFocus, shouldFocusInnerElementWhenReceivedFocus = _a.shouldFocusInnerElementWhenReceivedFocus, defaultTabbableElement = _a.defaultTabbableElement;\n var isImmediateDescendant = _this._isImmediateDescendantOfZone(ev.target);\n var newActiveElement;\n if (isImmediateDescendant) {\n newActiveElement = ev.target;\n }\n else {\n var parentElement = ev.target;\n while (parentElement && parentElement !== _this._root.current) {\n if (isElementTabbable(parentElement) && _this._isImmediateDescendantOfZone(parentElement)) {\n newActiveElement = parentElement;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n }\n // If an inner focusable element should be focused when FocusZone container receives focus\n if (shouldFocusInnerElementWhenReceivedFocus && ev.target === _this._root.current) {\n var maybeElementToFocus = defaultTabbableElement &&\n typeof defaultTabbableElement === 'function' &&\n defaultTabbableElement(_this._root.current);\n // try to focus defaultTabbable element\n if (maybeElementToFocus && isElementTabbable(maybeElementToFocus)) {\n newActiveElement = maybeElementToFocus;\n maybeElementToFocus.focus();\n }\n else {\n // force focus on first focusable element\n _this.focus(true);\n if (_this._activeElement) {\n // set to null as new active element was handled in method above\n newActiveElement = null;\n }\n }\n }\n var initialElementFocused = !_this._activeElement;\n // If the new active element is a child of this zone and received focus,\n // update alignment an immediate descendant\n if (newActiveElement && newActiveElement !== _this._activeElement) {\n if (isImmediateDescendant || initialElementFocused) {\n _this._setFocusAlignment(newActiveElement, true, true);\n }\n _this._activeElement = newActiveElement;\n if (initialElementFocused) {\n _this._updateTabIndexes();\n }\n }\n if (onActiveElementChanged) {\n onActiveElementChanged(_this._activeElement, ev);\n }\n if (stopFocusPropagation || doNotAllowFocusEventToPropagate) {\n ev.stopPropagation();\n }\n if (onFocus) {\n onFocus(ev);\n }\n else if (onFocusNotification) {\n onFocusNotification();\n }\n };\n _this._onBlur = function () {\n _this._setParkedFocus(false);\n };\n _this._onMouseDown = function (ev) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n var disabled = _this.props.disabled;\n if (disabled) {\n return;\n }\n var target = ev.target;\n var path = [];\n while (target && target !== _this._root.current) {\n path.push(target);\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS);\n }\n while (path.length) {\n target = path.pop();\n if (target && isElementTabbable(target)) {\n _this._setActiveElement(target, true);\n }\n if (isElementFocusZone(target)) {\n // Stop here since the focus zone will take care of its own children.\n break;\n }\n }\n };\n /**\n * Handle the keystrokes.\n */\n _this._onKeyDown = function (ev, theme) {\n if (_this._portalContainsElement(ev.target)) {\n // If the event target is inside a portal do not process the event.\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, direction = _a.direction, disabled = _a.disabled, isInnerZoneKeystroke = _a.isInnerZoneKeystroke, pagingSupportDisabled = _a.pagingSupportDisabled, shouldEnterInnerZone = _a.shouldEnterInnerZone;\n if (disabled) {\n return;\n }\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // If the default has been prevented, do not process keyboard events.\n if (ev.isDefaultPrevented()) {\n return;\n }\n if (_this._getDocument().activeElement === _this._root.current && _this._isInnerZone) {\n // If this element has focus, it is being controlled by a parent.\n // Ignore the keystroke.\n return;\n }\n if (((shouldEnterInnerZone && shouldEnterInnerZone(ev)) || (isInnerZoneKeystroke && isInnerZoneKeystroke(ev))) &&\n _this._isImmediateDescendantOfZone(ev.target)) {\n // Try to focus\n var innerZone = _this._getFirstInnerZone();\n if (innerZone) {\n if (!innerZone.focus(true)) {\n return;\n }\n }\n else if (isElementFocusSubZone(ev.target)) {\n if (!_this.focusElement(getNextElement(ev.target, ev.target.firstChild, true))) {\n return;\n }\n }\n else {\n return;\n }\n }\n else if (ev.altKey) {\n return;\n }\n else {\n // eslint-disable-next-line @fluentui/deprecated-keyboard-event-props\n switch (ev.which) {\n case KeyCodes.space:\n if (_this._tryInvokeClickForFocusable(ev.target, ev)) {\n break;\n }\n return;\n case KeyCodes.left:\n if (direction !== FocusZoneDirection.vertical) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusLeft(theme)) {\n break;\n }\n }\n return;\n case KeyCodes.right:\n if (direction !== FocusZoneDirection.vertical) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusRight(theme)) {\n break;\n }\n }\n return;\n case KeyCodes.up:\n if (direction !== FocusZoneDirection.horizontal) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusUp()) {\n break;\n }\n }\n return;\n case KeyCodes.down:\n if (direction !== FocusZoneDirection.horizontal) {\n _this._preventDefaultWhenHandled(ev);\n if (_this._moveFocusDown()) {\n break;\n }\n }\n return;\n case KeyCodes.pageDown:\n if (!pagingSupportDisabled && _this._moveFocusPaging(true)) {\n break;\n }\n return;\n case KeyCodes.pageUp:\n if (!pagingSupportDisabled && _this._moveFocusPaging(false)) {\n break;\n }\n return;\n case KeyCodes.tab:\n if (\n // eslint-disable-next-line deprecation/deprecation\n _this.props.allowTabKey ||\n _this.props.handleTabKey === FocusZoneTabbableElements.all ||\n (_this.props.handleTabKey === FocusZoneTabbableElements.inputOnly &&\n _this._isElementInput(ev.target))) {\n var focusChanged = false;\n _this._processingTabKey = true;\n if (direction === FocusZoneDirection.vertical ||\n !_this._shouldWrapFocus(_this._activeElement, NO_HORIZONTAL_WRAP)) {\n focusChanged = ev.shiftKey ? _this._moveFocusUp() : _this._moveFocusDown();\n }\n else {\n var tabWithDirection = getRTL(theme) ? !ev.shiftKey : ev.shiftKey;\n focusChanged = tabWithDirection ? _this._moveFocusLeft(theme) : _this._moveFocusRight(theme);\n }\n _this._processingTabKey = false;\n if (focusChanged) {\n break;\n }\n else if (_this.props.shouldResetActiveElementWhenTabFromZone) {\n _this._activeElement = null;\n }\n }\n return;\n case KeyCodes.home:\n if (_this._isContentEditableElement(ev.target) ||\n (_this._isElementInput(ev.target) &&\n !_this._shouldInputLoseFocus(ev.target, false))) {\n return false;\n }\n var firstChild = _this._root.current && _this._root.current.firstChild;\n if (_this._root.current &&\n firstChild &&\n _this.focusElement(getNextElement(_this._root.current, firstChild, true))) {\n break;\n }\n return;\n case KeyCodes.end:\n if (_this._isContentEditableElement(ev.target) ||\n (_this._isElementInput(ev.target) &&\n !_this._shouldInputLoseFocus(ev.target, true))) {\n return false;\n }\n var lastChild = _this._root.current && _this._root.current.lastChild;\n if (_this._root.current &&\n _this.focusElement(getPreviousElement(_this._root.current, lastChild, true, true, true))) {\n break;\n }\n return;\n case KeyCodes.enter:\n if (_this._tryInvokeClickForFocusable(ev.target, ev)) {\n break;\n }\n return;\n default:\n return;\n }\n }\n ev.preventDefault();\n ev.stopPropagation();\n };\n _this._getHorizontalDistanceFromCenter = function (isForward, activeRect, targetRect) {\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = _this._focusAlignment.left || _this._focusAlignment.x || 0;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n var targetRectBottom = Math.floor(targetRect.bottom);\n var activeRectTop = Math.floor(activeRect.top);\n var isValidCandidateOnpagingDown = isForward && targetRectTop > activeRectBottom;\n var isValidCandidateOnpagingUp = !isForward && targetRectBottom < activeRectTop;\n if (isValidCandidateOnpagingDown || isValidCandidateOnpagingUp) {\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n return 0;\n }\n return Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n };\n // Manage componentRef resolution.\n initializeComponentRef(_this);\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('FocusZone', props, {\n rootProps: undefined,\n allowTabKey: 'handleTabKey',\n elementType: 'as',\n ariaDescribedBy: 'aria-describedby',\n ariaLabelledBy: 'aria-labelledby',\n });\n }\n _this._id = getId('FocusZone');\n _this._focusAlignment = {\n left: 0,\n top: 0,\n };\n _this._processingTabKey = false;\n return _this;\n }\n /** Used for testing purposes only. */\n FocusZone.getOuterZones = function () {\n return _outerZones.size;\n };\n /**\n * Handle global tab presses so that we can patch tabindexes on the fly.\n * HEADS UP: This must not be an arrow function in order to be referentially equal among instances\n * for ref counting to work correctly!\n */\n FocusZone._onKeyDownCapture = function (ev) {\n // eslint-disable-next-line deprecation/deprecation, @fluentui/deprecated-keyboard-event-props\n if (ev.which === KeyCodes.tab) {\n _outerZones.forEach(function (zone) { return zone._updateTabIndexes(); });\n }\n };\n FocusZone.prototype.componentDidMount = function () {\n var root = this._root.current;\n _allInstances[this._id] = this;\n if (root) {\n this._windowElement = getWindow(root);\n var parentElement = getParent(root, ALLOW_VIRTUAL_ELEMENTS);\n while (parentElement && parentElement !== this._getDocument().body && parentElement.nodeType === 1) {\n if (isElementFocusZone(parentElement)) {\n this._isInnerZone = true;\n break;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n if (!this._isInnerZone) {\n _outerZones.add(this);\n if (this._windowElement && _outerZones.size === 1) {\n this._windowElement.addEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n }\n this._root.current && this._root.current.addEventListener('blur', this._onBlur, true);\n // Assign initial tab indexes so that we can set initial focus as appropriate.\n this._updateTabIndexes();\n if (this.props.defaultTabbableElement && typeof this.props.defaultTabbableElement === 'string') {\n this._activeElement = this._getDocument().querySelector(this.props.defaultTabbableElement);\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (this.props.defaultActiveElement) {\n // eslint-disable-next-line deprecation/deprecation\n this._activeElement = this._getDocument().querySelector(this.props.defaultActiveElement);\n }\n if (this.props.shouldFocusOnMount) {\n this.focus();\n }\n }\n };\n FocusZone.prototype.componentDidUpdate = function () {\n var root = this._root.current;\n var doc = this._getDocument();\n if (doc &&\n this._lastIndexPath &&\n (doc.activeElement === doc.body ||\n doc.activeElement === null ||\n (!this.props.preventFocusRestoration && doc.activeElement === root))) {\n // The element has been removed after the render, attempt to restore focus.\n var elementToFocus = getFocusableByIndexPath(root, this._lastIndexPath);\n if (elementToFocus) {\n this._setActiveElement(elementToFocus, true);\n elementToFocus.focus();\n this._setParkedFocus(false);\n }\n else {\n // We had a focus path to restore, but now that path is unresolvable. Park focus\n // on the container until we can try again.\n this._setParkedFocus(true);\n }\n }\n };\n FocusZone.prototype.componentWillUnmount = function () {\n delete _allInstances[this._id];\n if (!this._isInnerZone) {\n _outerZones.delete(this);\n // If this is the last outer zone, remove the keydown listener.\n if (this._windowElement && _outerZones.size === 0) {\n this._windowElement.removeEventListener('keydown', FocusZone._onKeyDownCapture, true);\n }\n }\n if (this._root.current) {\n this._root.current.removeEventListener('blur', this._onBlur, true);\n }\n this._activeElement = null;\n this._defaultFocusElement = null;\n };\n FocusZone.prototype.render = function () {\n var _this = this;\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, tag = _a.as, elementType = _a.elementType, rootProps = _a.rootProps, ariaDescribedBy = _a.ariaDescribedBy, ariaLabelledBy = _a.ariaLabelledBy, className = _a.className;\n var divProps = getNativeProps(this.props, htmlElementProperties);\n var Tag = tag || elementType || 'div';\n // Note, right before rendering/reconciling proceeds, we need to record if focus\n // was in the zone before the update. This helper will track this and, if focus\n // was actually in the zone, what the index path to the element is at this time.\n // Then, later in componentDidUpdate, we can evaluate if we need to restore it in\n // the case the element was removed.\n this._evaluateFocusBeforeRender();\n // Only support RTL defined in global theme, not contextual theme/RTL.\n var theme = getTheme();\n return (React.createElement(Tag, __assign({ \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy }, divProps, rootProps, { \n // Once the getClassName correctly memoizes inputs this should\n // be replaced so that className is passed to getRootClass and is included there so\n // the class names will always be in the same order.\n className: css(getRootClass(), className), \n // eslint-disable-next-line deprecation/deprecation\n ref: this._mergedRef(this.props.elementRef, this._root), \"data-focuszone-id\": this._id, \n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown: function (ev) { return _this._onKeyDown(ev, theme); }, onFocus: this._onFocus, onMouseDownCapture: this._onMouseDown }), this.props.children));\n };\n /**\n * Sets focus to the first tabbable item in the zone.\n * @param forceIntoFirstElement - If true, focus will be forced into the first element, even\n * if focus is already in the focus zone.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focus = function (forceIntoFirstElement) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n if (this._root.current) {\n if (!forceIntoFirstElement &&\n this._root.current.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n this._isInnerZone) {\n var ownerZoneElement = this._getOwnerZone(this._root.current);\n if (ownerZoneElement !== this._root.current) {\n var ownerZone = _allInstances[ownerZoneElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n return !!ownerZone && ownerZone.focusElement(this._root.current);\n }\n return false;\n }\n else if (!forceIntoFirstElement &&\n this._activeElement &&\n elementContains(this._root.current, this._activeElement) &&\n isElementTabbable(this._activeElement)) {\n this._activeElement.focus();\n return true;\n }\n else {\n var firstChild = this._root.current.firstChild;\n return this.focusElement(getNextElement(this._root.current, firstChild, true));\n }\n }\n return false;\n };\n /**\n * Sets focus to the last tabbable item in the zone.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focusLast = function () {\n if (this._root.current) {\n var lastChild = this._root.current && this._root.current.lastChild;\n return this.focusElement(getPreviousElement(this._root.current, lastChild, true, true, true));\n }\n return false;\n };\n /**\n * Sets focus to a specific child element within the zone. This can be used in conjunction with\n * shouldReceiveFocus to create delayed focus scenarios (like animate the scroll position to the correct\n * location and then focus.)\n * @param element - The child element within the zone to focus.\n * @param forceAlignment - If true, focus alignment will be set according to the element provided.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n FocusZone.prototype.focusElement = function (element, forceAlignment) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, onBeforeFocus = _a.onBeforeFocus, shouldReceiveFocus = _a.shouldReceiveFocus;\n if ((shouldReceiveFocus && !shouldReceiveFocus(element)) || (onBeforeFocus && !onBeforeFocus(element))) {\n return false;\n }\n if (element) {\n // when we set focus to a specific child, we should recalculate the alignment depending on its position.\n this._setActiveElement(element, forceAlignment);\n if (this._activeElement) {\n this._activeElement.focus();\n }\n return true;\n }\n return false;\n };\n /**\n * Forces horizontal alignment in the context of vertical arrowing to use specific point as the reference,\n * rather than a center based on the last horizontal motion.\n * @param point - the new reference point.\n */\n FocusZone.prototype.setFocusAlignment = function (point) {\n this._focusAlignment = point;\n };\n FocusZone.prototype._evaluateFocusBeforeRender = function () {\n var root = this._root.current;\n var doc = this._getDocument();\n if (doc) {\n var focusedElement = doc.activeElement;\n // Only update the index path if we are not parked on the root.\n if (focusedElement !== root) {\n var shouldRestoreFocus = elementContains(root, focusedElement, false);\n this._lastIndexPath = shouldRestoreFocus ? getElementIndexPath(root, focusedElement) : undefined;\n }\n }\n };\n /**\n * When focus is in the zone at render time but then all focusable elements are removed,\n * we \"park\" focus temporarily on the root. Once we update with focusable children, we restore\n * focus to the closest path from previous. If the user tabs away from the parked container,\n * we restore focusability to the pre-parked state.\n */\n FocusZone.prototype._setParkedFocus = function (isParked) {\n var root = this._root.current;\n if (root && this._isParked !== isParked) {\n this._isParked = isParked;\n if (isParked) {\n if (!this.props.allowFocusRoot) {\n this._parkedTabIndex = root.getAttribute('tabindex');\n root.setAttribute('tabindex', '-1');\n }\n root.focus();\n }\n else if (!this.props.allowFocusRoot) {\n if (this._parkedTabIndex) {\n root.setAttribute('tabindex', this._parkedTabIndex);\n this._parkedTabIndex = undefined;\n }\n else {\n root.removeAttribute('tabindex');\n }\n }\n }\n };\n FocusZone.prototype._setActiveElement = function (element, forceAlignment) {\n var previousActiveElement = this._activeElement;\n this._activeElement = element;\n if (previousActiveElement) {\n if (isElementFocusZone(previousActiveElement)) {\n this._updateTabIndexes(previousActiveElement);\n }\n previousActiveElement.tabIndex = -1;\n }\n if (this._activeElement) {\n if (!this._focusAlignment || forceAlignment) {\n this._setFocusAlignment(element, true, true);\n }\n this._activeElement.tabIndex = 0;\n }\n };\n FocusZone.prototype._preventDefaultWhenHandled = function (ev) {\n this.props.preventDefaultWhenHandled && ev.preventDefault();\n };\n /**\n * Walk up the dom try to find a focusable element.\n */\n FocusZone.prototype._tryInvokeClickForFocusable = function (targetElement, ev) {\n var target = targetElement;\n if (target === this._root.current || !this.props.shouldRaiseClicks) {\n return false;\n }\n do {\n if (target.tagName === 'BUTTON' ||\n target.tagName === 'A' ||\n target.tagName === 'INPUT' ||\n target.tagName === 'TEXTAREA') {\n return false;\n }\n if (this._isImmediateDescendantOfZone(target) &&\n target.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true' &&\n target.getAttribute(IS_ENTER_DISABLED_ATTRIBUTE) !== 'true') {\n raiseClickFromKeyboardEvent(target, ev);\n return true;\n }\n target = getParent(target, ALLOW_VIRTUAL_ELEMENTS);\n } while (target !== this._root.current);\n return false;\n };\n /**\n * Traverse to find first child zone.\n */\n FocusZone.prototype._getFirstInnerZone = function (rootElement) {\n rootElement = rootElement || this._activeElement || this._root.current;\n if (!rootElement) {\n return null;\n }\n if (isElementFocusZone(rootElement)) {\n return _allInstances[rootElement.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n }\n var child = rootElement.firstElementChild;\n while (child) {\n if (isElementFocusZone(child)) {\n return _allInstances[child.getAttribute(FOCUSZONE_ID_ATTRIBUTE)];\n }\n var match = this._getFirstInnerZone(child);\n if (match) {\n return match;\n }\n child = child.nextElementSibling;\n }\n return null;\n };\n FocusZone.prototype._moveFocus = function (isForward, getDistanceFromCenter, ev, useDefaultWrap) {\n if (useDefaultWrap === void 0) { useDefaultWrap = true; }\n var element = this._activeElement;\n var candidateDistance = -1;\n var candidateElement = undefined;\n var changedFocus = false;\n var isBidirectional = this.props.direction === FocusZoneDirection.bidirectional;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element, isForward)) {\n return false;\n }\n }\n var activeRect = isBidirectional ? element.getBoundingClientRect() : null;\n do {\n element = (isForward\n ? getNextElement(this._root.current, element)\n : getPreviousElement(this._root.current, element));\n if (isBidirectional) {\n if (element) {\n var targetRect = element.getBoundingClientRect();\n var elementDistance = getDistanceFromCenter(activeRect, targetRect);\n if (elementDistance === -1 && candidateDistance === -1) {\n candidateElement = element;\n break;\n }\n if (elementDistance > -1 && (candidateDistance === -1 || elementDistance < candidateDistance)) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n if (candidateDistance >= 0 && elementDistance < 0) {\n break;\n }\n }\n }\n else {\n candidateElement = element;\n break;\n }\n } while (element);\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n }\n else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild, true));\n }\n else {\n return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild, true, true, true));\n }\n }\n return changedFocus;\n };\n FocusZone.prototype._moveFocusDown = function () {\n var _this = this;\n var targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n if (this._moveFocus(true, function (activeRect, targetRect) {\n var distance = -1;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n if (targetRectTop < activeRectBottom) {\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\n if ((targetTop === -1 && targetRectTop >= activeRectBottom) || targetRectTop === targetTop) {\n targetTop = targetRectTop;\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n distance = 0;\n }\n else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n return distance;\n })) {\n this._setFocusAlignment(this._activeElement, false, true);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusUp = function () {\n var _this = this;\n var targetTop = -1;\n // eslint-disable-next-line deprecation/deprecation\n var leftAlignment = this._focusAlignment.left || this._focusAlignment.x || 0;\n if (this._moveFocus(false, function (activeRect, targetRect) {\n var distance = -1;\n // ClientRect values can be floats that differ by very small fractions of a decimal.\n // If the difference between top and bottom are within a pixel then we should treat\n // them as equivalent by using Math.floor. For instance 5.2222 and 5.222221 should be equivalent,\n // but without Math.Floor they will be handled incorrectly.\n var targetRectBottom = Math.floor(targetRect.bottom);\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectTop = Math.floor(activeRect.top);\n if (targetRectBottom > activeRectTop) {\n if (!_this._shouldWrapFocus(_this._activeElement, NO_VERTICAL_WRAP)) {\n return LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return LARGE_DISTANCE_FROM_CENTER;\n }\n if ((targetTop === -1 && targetRectBottom <= activeRectTop) || targetRectTop === targetTop) {\n targetTop = targetRectTop;\n if (leftAlignment >= targetRect.left && leftAlignment <= targetRect.left + targetRect.width) {\n distance = 0;\n }\n else {\n distance = Math.abs(targetRect.left + targetRect.width / 2 - leftAlignment);\n }\n }\n return distance;\n })) {\n this._setFocusAlignment(this._activeElement, false, true);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusLeft = function (theme) {\n var _this = this;\n var shouldWrap = this._shouldWrapFocus(this._activeElement, NO_HORIZONTAL_WRAP);\n if (this._moveFocus(getRTL(theme), function (activeRect, targetRect) {\n var distance = -1;\n var topBottomComparison;\n if (getRTL(theme)) {\n // When in RTL, this comparison should be the same as the one in _moveFocusRight for LTR.\n // Going left at a leftmost rectangle will go down a line instead of up a line like in LTR.\n // This is important, because we want to be comparing the top of the target rect\n // with the bottom of the active rect.\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n else {\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n if (topBottomComparison &&\n targetRect.right <= activeRect.right &&\n _this.props.direction !== FocusZoneDirection.vertical) {\n distance = activeRect.right - targetRect.right;\n }\n else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return distance;\n }, undefined /*ev*/, shouldWrap)) {\n this._setFocusAlignment(this._activeElement, true, false);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusRight = function (theme) {\n var _this = this;\n var shouldWrap = this._shouldWrapFocus(this._activeElement, NO_HORIZONTAL_WRAP);\n if (this._moveFocus(!getRTL(theme), function (activeRect, targetRect) {\n var distance = -1;\n var topBottomComparison;\n if (getRTL(theme)) {\n // When in RTL, this comparison should be the same as the one in _moveFocusLeft for LTR.\n // Going right at a rightmost rectangle will go up a line instead of down a line like in LTR.\n // This is important, because we want to be comparing the bottom of the target rect\n // with the top of the active rect.\n topBottomComparison = parseFloat(targetRect.bottom.toFixed(3)) > parseFloat(activeRect.top.toFixed(3));\n }\n else {\n topBottomComparison = parseFloat(targetRect.top.toFixed(3)) < parseFloat(activeRect.bottom.toFixed(3));\n }\n if (topBottomComparison &&\n targetRect.left >= activeRect.left &&\n _this.props.direction !== FocusZoneDirection.vertical) {\n distance = targetRect.left - activeRect.left;\n }\n else if (!shouldWrap) {\n distance = LARGE_NEGATIVE_DISTANCE_FROM_CENTER;\n }\n return distance;\n }, undefined /*ev*/, shouldWrap)) {\n this._setFocusAlignment(this._activeElement, true, false);\n return true;\n }\n return false;\n };\n FocusZone.prototype._moveFocusPaging = function (isForward, useDefaultWrap) {\n if (useDefaultWrap === void 0) { useDefaultWrap = true; }\n var element = this._activeElement;\n if (!element || !this._root.current) {\n return false;\n }\n if (this._isElementInput(element)) {\n if (!this._shouldInputLoseFocus(element, isForward)) {\n return false;\n }\n }\n var scrollableParent = findScrollableParent(element);\n if (!scrollableParent) {\n return false;\n }\n var candidateDistance = -1;\n var candidateElement = undefined;\n var targetTop = -1;\n var targetBottom = -1;\n var pagesize = scrollableParent.clientHeight;\n var activeRect = element.getBoundingClientRect();\n do {\n element = isForward\n ? getNextElement(this._root.current, element)\n : getPreviousElement(this._root.current, element);\n if (element) {\n var targetRect = element.getBoundingClientRect();\n var targetRectTop = Math.floor(targetRect.top);\n var activeRectBottom = Math.floor(activeRect.bottom);\n var targetRectBottom = Math.floor(targetRect.bottom);\n var activeRectTop = Math.floor(activeRect.top);\n var elementDistance = this._getHorizontalDistanceFromCenter(isForward, activeRect, targetRect);\n var isElementPassedPageSizeOnPagingDown = isForward && targetRectTop > activeRectBottom + pagesize;\n var isElementPassedPageSizeOnPagingUp = !isForward && targetRectBottom < activeRectTop - pagesize;\n if (isElementPassedPageSizeOnPagingDown || isElementPassedPageSizeOnPagingUp) {\n break;\n }\n if (elementDistance > -1) {\n // for paging down\n if (isForward && targetRectTop > targetTop) {\n targetTop = targetRectTop;\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n else if (!isForward && targetRectBottom < targetBottom) {\n // for paging up\n targetBottom = targetRectBottom;\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n else if (candidateDistance === -1 || elementDistance <= candidateDistance) {\n candidateDistance = elementDistance;\n candidateElement = element;\n }\n }\n }\n } while (element);\n var changedFocus = false;\n // Focus the closest candidate\n if (candidateElement && candidateElement !== this._activeElement) {\n changedFocus = true;\n this.focusElement(candidateElement);\n this._setFocusAlignment(candidateElement, false, true);\n }\n else if (this.props.isCircularNavigation && useDefaultWrap) {\n if (isForward) {\n return this.focusElement(getNextElement(this._root.current, this._root.current.firstElementChild, true));\n }\n return this.focusElement(getPreviousElement(this._root.current, this._root.current.lastElementChild, true, true, true));\n }\n return changedFocus;\n };\n FocusZone.prototype._setFocusAlignment = function (element, isHorizontal, isVertical) {\n if (this.props.direction === FocusZoneDirection.bidirectional &&\n (!this._focusAlignment || isHorizontal || isVertical)) {\n var rect = element.getBoundingClientRect();\n var left = rect.left + rect.width / 2;\n var top_1 = rect.top + rect.height / 2;\n if (!this._focusAlignment) {\n this._focusAlignment = { left: left, top: top_1 };\n }\n if (isHorizontal) {\n this._focusAlignment.left = left;\n }\n if (isVertical) {\n this._focusAlignment.top = top_1;\n }\n }\n };\n FocusZone.prototype._isImmediateDescendantOfZone = function (element) {\n return this._getOwnerZone(element) === this._root.current;\n };\n FocusZone.prototype._getOwnerZone = function (element) {\n var parentElement = getParent(element, ALLOW_VIRTUAL_ELEMENTS);\n while (parentElement && parentElement !== this._root.current && parentElement !== this._getDocument().body) {\n if (isElementFocusZone(parentElement)) {\n return parentElement;\n }\n parentElement = getParent(parentElement, ALLOW_VIRTUAL_ELEMENTS);\n }\n return parentElement;\n };\n FocusZone.prototype._updateTabIndexes = function (element) {\n if (!this._activeElement &&\n this.props.defaultTabbableElement &&\n typeof this.props.defaultTabbableElement === 'function') {\n this._activeElement = this.props.defaultTabbableElement(this._root.current);\n }\n if (!element && this._root.current) {\n this._defaultFocusElement = null;\n element = this._root.current;\n if (this._activeElement && !elementContains(element, this._activeElement)) {\n this._activeElement = null;\n }\n }\n // If active element changes state to disabled, set it to null.\n // Otherwise, we lose keyboard accessibility to other elements in focus zone.\n if (this._activeElement && !isElementTabbable(this._activeElement)) {\n this._activeElement = null;\n }\n var childNodes = element && element.children;\n for (var childIndex = 0; childNodes && childIndex < childNodes.length; childIndex++) {\n var child = childNodes[childIndex];\n if (!isElementFocusZone(child)) {\n // If the item is explicitly set to not be focusable then TABINDEX needs to be set to -1.\n if (child.getAttribute && child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'false') {\n child.setAttribute(TABINDEX, '-1');\n }\n if (isElementTabbable(child)) {\n if (this.props.disabled) {\n child.setAttribute(TABINDEX, '-1');\n }\n else if (!this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n }\n else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n else if (child.tagName === 'svg' && child.getAttribute('focusable') !== 'false') {\n // Disgusting IE hack. Sad face.\n child.setAttribute('focusable', 'false');\n }\n }\n else if (child.getAttribute(IS_FOCUSABLE_ATTRIBUTE) === 'true') {\n if (!this._isInnerZone &&\n ((!this._activeElement && !this._defaultFocusElement) || this._activeElement === child)) {\n this._defaultFocusElement = child;\n if (child.getAttribute(TABINDEX) !== '0') {\n child.setAttribute(TABINDEX, '0');\n }\n }\n else if (child.getAttribute(TABINDEX) !== '-1') {\n child.setAttribute(TABINDEX, '-1');\n }\n }\n this._updateTabIndexes(child);\n }\n };\n FocusZone.prototype._isContentEditableElement = function (element) {\n return element && element.getAttribute('contenteditable') === 'true';\n };\n FocusZone.prototype._isElementInput = function (element) {\n if (element &&\n element.tagName &&\n (element.tagName.toLowerCase() === 'input' || element.tagName.toLowerCase() === 'textarea')) {\n return true;\n }\n return false;\n };\n FocusZone.prototype._shouldInputLoseFocus = function (element, isForward) {\n // If a tab was used, we want to focus on the next element.\n if (!this._processingTabKey &&\n element &&\n element.type &&\n ALLOWED_INPUT_TYPES.indexOf(element.type.toLowerCase()) > -1) {\n var selectionStart = element.selectionStart;\n var selectionEnd = element.selectionEnd;\n var isRangeSelected = selectionStart !== selectionEnd;\n var inputValue = element.value;\n var isReadonly = element.readOnly;\n // We shouldn't lose focus in the following cases:\n // 1. There is range selected.\n // 2. When selection start is larger than 0 and it is backward and not readOnly.\n // 3. when selection start is not the end of length, it is forward and not readOnly.\n // 4. We press any of the arrow keys when our handleTabKey isn't none or undefined (only losing focus if we hit\n // tab) and if shouldInputLoseFocusOnArrowKey is defined, if scenario prefers to not loose the focus which is\n // determined by calling the callback shouldInputLoseFocusOnArrowKey\n if (isRangeSelected ||\n (selectionStart > 0 && !isForward && !isReadonly) ||\n (selectionStart !== inputValue.length && isForward && !isReadonly) ||\n (!!this.props.handleTabKey &&\n !(this.props.shouldInputLoseFocusOnArrowKey && this.props.shouldInputLoseFocusOnArrowKey(element)))) {\n return false;\n }\n }\n return true;\n };\n FocusZone.prototype._shouldWrapFocus = function (element, noWrapDataAttribute) {\n return this.props.checkForNoWrap ? shouldWrapFocus(element, noWrapDataAttribute) : true;\n };\n /**\n * Returns true if the element is a descendant of the FocusZone through a React portal.\n */\n FocusZone.prototype._portalContainsElement = function (element) {\n return element && !!this._root.current && portalContainsElement(element, this._root.current);\n };\n FocusZone.prototype._getDocument = function () {\n return getDocument(this._root.current);\n };\n FocusZone.defaultProps = {\n isCircularNavigation: false,\n direction: FocusZoneDirection.bidirectional,\n shouldRaiseClicks: true,\n };\n return FocusZone;\n}(React.Component));\nexport { FocusZone };\n//# sourceMappingURL=FocusZone.js.map","/**\n * {@docCategory FocusZone}\n */\nexport var FocusZoneTabbableElements = {\n /** Tabbing is not allowed */\n none: 0,\n /** All tabbing action is allowed */\n all: 1,\n /** Tabbing is allowed only on input elements */\n inputOnly: 2,\n};\n/**\n * {@docCategory FocusZone}\n */\nexport var FocusZoneDirection;\n(function (FocusZoneDirection) {\n /** Only react to up/down arrows. */\n FocusZoneDirection[FocusZoneDirection[\"vertical\"] = 0] = \"vertical\";\n /** Only react to left/right arrows. */\n FocusZoneDirection[FocusZoneDirection[\"horizontal\"] = 1] = \"horizontal\";\n /** React to all arrows. */\n FocusZoneDirection[FocusZoneDirection[\"bidirectional\"] = 2] = \"bidirectional\";\n /**\n * React to all arrows. Navigate next item in DOM on right/down arrow keys and previous - left/up arrow keys.\n * Right and Left arrow keys are swapped in RTL mode.\n */\n FocusZoneDirection[FocusZoneDirection[\"domOrder\"] = 3] = \"domOrder\";\n})(FocusZoneDirection || (FocusZoneDirection = {}));\n//# sourceMappingURL=FocusZone.types.js.map","import { Async } from '@fluentui/utilities';\nimport * as React from 'react';\n/**\n * Hook to provide an Async instance that is automatically cleaned up on dismount.\n */\nexport function useAsync() {\n var asyncRef = React.useRef();\n if (!asyncRef.current) {\n asyncRef.current = new Async();\n }\n React.useEffect(function () {\n return function () {\n var _a;\n (_a = asyncRef.current) === null || _a === void 0 ? void 0 : _a.dispose();\n asyncRef.current = undefined;\n };\n }, []);\n return asyncRef.current;\n}\n//# sourceMappingURL=useAsync.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Hook to store a value and generate callbacks for setting the value to true or false.\n * The identity of the callbacks will always stay the same.\n *\n * @param initialState - Initial value\n * @returns Array with the current value and an object containing the updater callbacks.\n */\nexport function useBoolean(initialState) {\n var _a = React.useState(initialState), value = _a[0], setValue = _a[1];\n var setTrue = useConst(function () { return function () {\n setValue(true);\n }; });\n var setFalse = useConst(function () { return function () {\n setValue(false);\n }; });\n var toggle = useConst(function () { return function () {\n setValue(function (currentValue) { return !currentValue; });\n }; });\n return [value, { setTrue: setTrue, setFalse: setFalse, toggle: toggle }];\n}\n//# sourceMappingURL=useBoolean.js.map","import * as React from 'react';\n/**\n * Hook to initialize and return a constant value. Unlike `React.useMemo`, this is guaranteed to\n * always return the same value (and if the initializer is a function, only call it once).\n * This is similar to setting a private member in a class constructor.\n *\n * If the value should ever change based on dependencies, use `React.useMemo` instead.\n *\n * @param initialValue - Initial value, or function to get the initial value. Similar to `useState`,\n * only the value/function passed in the first time this is called is respected.\n * @returns The value. The identity of this value will always be the same.\n */\nexport function useConst(initialValue) {\n // Use useRef to store the value because it's the least expensive built-in hook that works here\n // (we could also use `const [value] = React.useState(initialValue)` but that's more expensive\n // internally due to reducer handling which we don't need)\n var ref = React.useRef();\n if (ref.current === undefined) {\n // Box the value in an object so we can tell if it's initialized even if the initializer\n // returns/is undefined\n ref.current = {\n value: typeof initialValue === 'function' ? initialValue() : initialValue,\n };\n }\n return ref.current.value;\n}\n//# sourceMappingURL=useConst.js.map","import * as React from 'react';\nimport { useConst } from './useConst';\nexport function useControllableValue(controlledValue, defaultUncontrolledValue, onChange) {\n var _a = React.useState(defaultUncontrolledValue), value = _a[0], setValue = _a[1];\n var isControlled = useConst(controlledValue !== undefined);\n var currentValue = isControlled ? controlledValue : value;\n // Duplicate the current value and onChange in refs so they're accessible from\n // setValueOrCallOnChange without creating a new callback every time\n var valueRef = React.useRef(currentValue);\n var onChangeRef = React.useRef(onChange);\n React.useEffect(function () {\n valueRef.current = currentValue;\n onChangeRef.current = onChange;\n });\n // To match the behavior of the setter returned by React.useState, this callback's identity\n // should never change. This means it MUST NOT directly reference variables that can change.\n var setValueOrCallOnChange = useConst(function () { return function (update, ev) {\n // Assuming here that TValue is not a function, because a controllable value will typically\n // be something a user can enter as input\n var newValue = typeof update === 'function' ? update(valueRef.current) : update;\n if (onChangeRef.current) {\n onChangeRef.current(ev, newValue);\n }\n if (!isControlled) {\n setValue(newValue);\n }\n }; });\n return [currentValue, setValueOrCallOnChange];\n}\n//# sourceMappingURL=useControllableValue.js.map","import * as React from 'react';\nimport { getId } from '@fluentui/utilities';\n/**\n * Hook to generate a unique ID in the global scope (spanning across duplicate copies of the same library).\n *\n * @param prefix - Optional prefix for the ID\n * @param providedId - Optional id provided by a parent component. Defaults to the provided value if present,\n * without conditioning the hook call\n * @returns The ID\n */\nexport function useId(prefix, providedId) {\n // getId should only be called once since it updates the global constant for the next ID value.\n // (While an extra update isn't likely to cause problems in practice, it's better to avoid it.)\n var ref = React.useRef(providedId);\n if (!ref.current) {\n ref.current = getId(prefix);\n }\n return ref.current;\n}\n//# sourceMappingURL=useId.js.map","import { __spreadArray } from \"tslib\";\nimport * as React from 'react';\n/**\n * React hook to merge multiple React refs (either MutableRefObjects or ref callbacks) into a single ref callback that\n * updates all provided refs\n * @param refs - Refs to collectively update with one ref value.\n * @returns A function with an attached \"current\" prop, so that it can be treated like a RefObject.\n */\nexport function useMergedRefs() {\n var refs = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n refs[_i] = arguments[_i];\n }\n var mergedCallback = React.useCallback(function (value) {\n // Update the \"current\" prop hanging on the function.\n mergedCallback.current = value;\n for (var _i = 0, refs_1 = refs; _i < refs_1.length; _i++) {\n var ref = refs_1[_i];\n if (typeof ref === 'function') {\n ref(value);\n }\n else if (ref) {\n // work around the immutability of the React.Ref type\n ref.current = value;\n }\n }\n }, __spreadArray([], refs, true));\n return mergedCallback;\n}\n//# sourceMappingURL=useMergedRefs.js.map","import { on } from '@fluentui/utilities';\nimport * as React from 'react';\n/**\n * Hook to attach an event handler on mount and handle cleanup.\n * @param element - Element (or ref to an element) to attach the event handler to\n * @param eventName - The event to attach a handler for\n * @param callback - The handler for the event\n * @param useCapture - Whether or not to attach the handler for the capture phase\n */\nexport function useOnEvent(element, eventName, callback, useCapture) {\n // Use a ref for the callback to prevent repeatedly attaching/unattaching callbacks that are unstable across renders\n var callbackRef = React.useRef(callback);\n callbackRef.current = callback;\n React.useEffect(function () {\n var actualElement = element && 'current' in element ? element.current : element;\n if (!actualElement) {\n return;\n }\n var dispose = on(actualElement, eventName, function (ev) { return callbackRef.current(ev); }, useCapture);\n return dispose;\n }, [element, eventName, useCapture]);\n}\n//# sourceMappingURL=useOnEvent.js.map","import { useRef, useEffect } from 'react';\n/**\n * Hook keeping track of a given value from a previous execution of the component the Hook is used in.\n *\n * See [React Hooks FAQ](https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state)\n */\nexport function usePrevious(value) {\n var ref = useRef();\n useEffect(function () {\n ref.current = value;\n });\n return ref.current;\n}\n//# sourceMappingURL=usePrevious.js.map","import { getDocument } from '@fluentui/utilities';\nimport * as React from 'react';\nimport { useWindow } from '@fluentui/react-window-provider';\n/**\n * Hook to calculate and cache the target element specified by the given target attribute,\n * as well as the target element's (or host element's) parent window\n * @param target- Target selector passed to the component as a property, describing the element that\n * the callout should target\n * @param hostElement- The callout's host element, used for determining the parent window.\n */\nexport function useTarget(target, hostElement) {\n var previousTargetProp = React.useRef();\n var targetRef = React.useRef(null);\n /**\n * Stores an instance of Window, used to check\n * for server side rendering and if focus was lost.\n */\n var targetWindow = useWindow();\n // If the target element changed, find the new one. If we are tracking\n // target with class name, always find element because we do not know if\n // fabric has rendered a new element and disposed the old element.\n if (!target || target !== previousTargetProp.current || typeof target === 'string') {\n var currentElement = hostElement === null || hostElement === void 0 ? void 0 : hostElement.current;\n if (target) {\n if (typeof target === 'string') {\n var currentDoc = getDocument(currentElement);\n targetRef.current = currentDoc ? currentDoc.querySelector(target) : null;\n }\n else if ('stopPropagation' in target) {\n targetRef.current = target;\n }\n else if ('getBoundingClientRect' in target) {\n targetRef.current = target;\n }\n else if ('current' in target) {\n targetRef.current = target.current;\n }\n else {\n targetRef.current = target;\n }\n }\n previousTargetProp.current = target;\n }\n return [targetRef, targetWindow];\n}\n//# sourceMappingURL=useTarget.js.map","import * as React from 'react';\n/**\n * Context for providing the window.\n */\nexport var WindowContext = React.createContext({\n window: typeof window === 'object' ? window : undefined,\n});\n/**\n * Hook to access the window object. This can be overridden contextually using the `WindowProvider`.\n */\nexport var useWindow = function () { return React.useContext(WindowContext).window; };\n/**\n * Hook to access the document object. This can be overridden contextually using the `WindowProvider`.\n */\nexport var useDocument = function () { var _a; return (_a = React.useContext(WindowContext).window) === null || _a === void 0 ? void 0 : _a.document; };\n/**\n * Component to provide the window object contextually. This is useful when rendering content to an element\n * contained within a child window or iframe element, where event handlers and styling must be projected\n * to an alternative window or document.\n */\nexport var WindowProvider = function (props) {\n return React.createElement(WindowContext.Provider, { value: props }, props.children);\n};\n//# sourceMappingURL=WindowProvider.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","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","/**\n * {@docCategory MessageBar}\n */\nexport var MessageBarType;\n(function (MessageBarType) {\n /** Info styled MessageBar */\n MessageBarType[MessageBarType[\"info\"] = 0] = \"info\";\n /** Error styled MessageBar */\n MessageBarType[MessageBarType[\"error\"] = 1] = \"error\";\n /** Blocked styled MessageBar */\n MessageBarType[MessageBarType[\"blocked\"] = 2] = \"blocked\";\n /** SevereWarning styled MessageBar */\n MessageBarType[MessageBarType[\"severeWarning\"] = 3] = \"severeWarning\";\n /** Success styled MessageBar */\n MessageBarType[MessageBarType[\"success\"] = 4] = \"success\";\n /** Warning styled MessageBar */\n MessageBarType[MessageBarType[\"warning\"] = 5] = \"warning\";\n})(MessageBarType || (MessageBarType = {}));\n//# sourceMappingURL=MessageBar.types.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DelayedRender, classNamesFunction, getNativeProps, htmlElementProperties, css } from '../../Utilities';\nimport { IconButton } from '../../Button';\nimport { Icon } from '../../Icon';\nimport { MessageBarType } from './MessageBar.types';\nimport { useId, useBoolean } from '@fluentui/react-hooks';\nvar ICON_MAP = (_a = {},\n _a[MessageBarType.info] = 'Info',\n _a[MessageBarType.warning] = 'Info',\n _a[MessageBarType.error] = 'ErrorBadge',\n _a[MessageBarType.blocked] = 'Blocked2',\n _a[MessageBarType.severeWarning] = 'Warning',\n _a[MessageBarType.success] = 'Completed',\n _a);\nvar COMPONENT_NAME = 'MessageBar';\nvar getClassNames = classNamesFunction();\nvar getAnnouncementPriority = function (messageBarType) {\n switch (messageBarType) {\n case MessageBarType.blocked:\n case MessageBarType.error:\n case MessageBarType.severeWarning:\n return 'assertive';\n }\n return 'polite';\n};\nvar getRole = function (messageBarType) {\n switch (messageBarType) {\n case MessageBarType.blocked:\n case MessageBarType.error:\n case MessageBarType.severeWarning:\n return 'alert';\n }\n return 'status';\n};\nexport var MessageBarBase = React.forwardRef(function (props, ref) {\n var _a = useBoolean(false), expandSingleLine = _a[0], toggleExpandSingleLine = _a[1].toggle;\n var labelId = useId('MessageBar');\n var actions = props.actions, className = props.className, children = props.children, overflowButtonAriaLabel = props.overflowButtonAriaLabel, dismissIconProps = props.dismissIconProps, styles = props.styles, theme = props.theme, _b = props.messageBarType, messageBarType = _b === void 0 ? MessageBarType.info : _b, _c = props.onDismiss, onDismiss = _c === void 0 ? undefined : _c, _d = props.isMultiline, isMultiline = _d === void 0 ? true : _d, truncated = props.truncated, dismissButtonAriaLabel = props.dismissButtonAriaLabel, messageBarIconProps = props.messageBarIconProps, role = props.role, _e = props.delayedRender, delayedRender = _e === void 0 ? true : _e;\n var nativeProps = getNativeProps(props, htmlElementProperties, [\n 'className',\n 'role',\n ]);\n var classNames = getClassNames(styles, {\n theme: theme,\n messageBarType: messageBarType || MessageBarType.info,\n onDismiss: onDismiss !== undefined,\n actions: actions !== undefined,\n truncated: truncated,\n isMultiline: isMultiline,\n expandSingleLine: expandSingleLine,\n className: className,\n });\n var expandIconProps = { iconName: expandSingleLine ? 'DoubleChevronUp' : 'DoubleChevronDown' };\n var regionProps = actions || onDismiss ? { 'aria-describedby': labelId, role: 'region' } : {};\n var actionsDiv = actions ? React.createElement(\"div\", { className: classNames.actions }, actions) : null;\n var dismissButton = onDismiss ? (React.createElement(IconButton, { disabled: false, className: classNames.dismissal, onClick: onDismiss, iconProps: dismissIconProps ? dismissIconProps : { iconName: 'Clear' }, title: dismissButtonAriaLabel, ariaLabel: dismissButtonAriaLabel })) : null;\n return (React.createElement(\"div\", __assign({ ref: ref, className: classNames.root }, regionProps),\n React.createElement(\"div\", { className: classNames.content },\n React.createElement(\"div\", { className: classNames.iconContainer, \"aria-hidden\": true }, messageBarIconProps ? (React.createElement(Icon, __assign({}, messageBarIconProps, { className: css(classNames.icon, messageBarIconProps.className) }))) : (React.createElement(Icon, { iconName: ICON_MAP[messageBarType], className: classNames.icon }))),\n React.createElement(\"div\", { className: classNames.text, id: labelId, role: role || getRole(messageBarType), \"aria-live\": getAnnouncementPriority(messageBarType) },\n React.createElement(\"span\", __assign({ className: classNames.innerText }, nativeProps), delayedRender ? (React.createElement(DelayedRender, null,\n React.createElement(\"span\", null, children))) : (\n // this span is probably not necessary, but preserving it for now in case anyone\n // has styling that expects it to be present\n React.createElement(\"span\", null, children)))),\n /* singleline expand/collapse button */ !isMultiline && !actionsDiv && truncated && (React.createElement(\"div\", { className: classNames.expandSingleLine },\n React.createElement(IconButton, { disabled: false, className: classNames.expand, onClick: toggleExpandSingleLine, iconProps: expandIconProps, ariaLabel: overflowButtonAriaLabel, \"aria-expanded\": expandSingleLine }))),\n !isMultiline && actionsDiv,\n /* singleline dismiss */ !isMultiline && dismissButton && (React.createElement(\"div\", { className: classNames.dismissSingleLine }, dismissButton)),\n isMultiline && dismissButton),\n isMultiline && actionsDiv));\n});\nMessageBarBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=MessageBar.base.js.map","var _a, _b, _c;\nimport { __assign } from \"tslib\";\nimport { HighContrastSelector, ScreenWidthMaxSmall, getScreenSelector, getGlobalClassNames, getFocusStyle, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { MessageBarType } from './MessageBar.types';\nvar GlobalClassNames = {\n root: 'ms-MessageBar',\n error: 'ms-MessageBar--error',\n blocked: 'ms-MessageBar--blocked',\n severeWarning: 'ms-MessageBar--severeWarning',\n success: 'ms-MessageBar--success',\n warning: 'ms-MessageBar--warning',\n multiline: 'ms-MessageBar-multiline',\n singleline: 'ms-MessageBar-singleline',\n dismissalSingleLine: 'ms-MessageBar-dismissalSingleLine',\n expandingSingleLine: 'ms-MessageBar-expandingSingleLine',\n content: 'ms-MessageBar-content',\n iconContainer: 'ms-MessageBar-icon',\n text: 'ms-MessageBar-text',\n innerText: 'ms-MessageBar-innerText',\n dismissSingleLine: 'ms-MessageBar-dismissSingleLine',\n expandSingleLine: 'ms-MessageBar-expandSingleLine',\n dismissal: 'ms-MessageBar-dismissal',\n expand: 'ms-MessageBar-expand',\n actions: 'ms-MessageBar-actions',\n actionsSingleline: 'ms-MessageBar-actionsSingleLine',\n};\nvar backgroundColor = (_a = {},\n _a[MessageBarType.error] = 'errorBackground',\n _a[MessageBarType.blocked] = 'errorBackground',\n _a[MessageBarType.success] = 'successBackground',\n _a[MessageBarType.warning] = 'warningBackground',\n _a[MessageBarType.severeWarning] = 'severeWarningBackground',\n _a[MessageBarType.info] = 'infoBackground',\n _a);\nvar highContrastBackgroundColor = (_b = {},\n _b[MessageBarType.error] = 'rgba(255, 0, 0, 0.3)',\n _b[MessageBarType.blocked] = 'rgba(255, 0, 0, 0.3)',\n _b[MessageBarType.success] = 'rgba(48, 241, 73, 0.3)',\n _b[MessageBarType.warning] = 'rgba(255, 254, 57, 0.3)',\n _b[MessageBarType.severeWarning] = 'rgba(255, 0, 0, 0.3)',\n _b[MessageBarType.info] = 'Window',\n _b);\nvar iconColor = (_c = {},\n _c[MessageBarType.error] = 'errorIcon',\n _c[MessageBarType.blocked] = 'errorIcon',\n _c[MessageBarType.success] = 'successIcon',\n _c[MessageBarType.warning] = 'warningIcon',\n _c[MessageBarType.severeWarning] = 'severeWarningIcon',\n _c[MessageBarType.info] = 'infoIcon',\n _c);\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, className = props.className, onDismiss = props.onDismiss, truncated = props.truncated, isMultiline = props.isMultiline, expandSingleLine = props.expandSingleLine, _f = props.messageBarType, messageBarType = _f === void 0 ? MessageBarType.info : _f;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var SmallScreenSelector = getScreenSelector(0, ScreenWidthMaxSmall);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var dismissalAndExpandIconStyle = {\n fontSize: IconFontSizes.xSmall,\n height: 10,\n lineHeight: '10px',\n color: semanticColors.messageText,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'WindowText' }),\n _a),\n };\n var dismissalAndExpandStyle = [\n getFocusStyle(theme, {\n inset: 1,\n highContrastStyle: {\n outlineOffset: '-6px',\n outline: '1px solid Highlight',\n },\n borderColor: 'transparent',\n }),\n {\n flexShrink: 0,\n width: 32,\n height: 32,\n padding: '8px 12px',\n selectors: {\n '& .ms-Button-icon': dismissalAndExpandIconStyle,\n ':hover': {\n backgroundColor: 'transparent',\n },\n ':active': {\n backgroundColor: 'transparent',\n },\n },\n },\n ];\n return {\n root: [\n classNames.root,\n fonts.medium,\n messageBarType === MessageBarType.error && classNames.error,\n messageBarType === MessageBarType.blocked && classNames.blocked,\n messageBarType === MessageBarType.severeWarning && classNames.severeWarning,\n messageBarType === MessageBarType.success && classNames.success,\n messageBarType === MessageBarType.warning && classNames.warning,\n isMultiline ? classNames.multiline : classNames.singleline,\n !isMultiline && onDismiss && classNames.dismissalSingleLine,\n !isMultiline && truncated && classNames.expandingSingleLine,\n {\n background: semanticColors[backgroundColor[messageBarType]],\n color: semanticColors.messageText,\n minHeight: 32,\n width: '100%',\n display: 'flex',\n wordBreak: 'break-word',\n selectors: (_b = {\n '.ms-Link': {\n color: semanticColors.messageLink,\n selectors: {\n ':hover': {\n color: semanticColors.messageLinkHovered,\n },\n },\n }\n },\n _b[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { background: highContrastBackgroundColor[messageBarType], border: '1px solid WindowText', color: 'WindowText' }),\n _b),\n },\n isMultiline && {\n flexDirection: 'column',\n },\n className,\n ],\n content: [\n classNames.content,\n {\n display: 'flex',\n width: '100%',\n lineHeight: 'normal',\n },\n ],\n iconContainer: [\n classNames.iconContainer,\n {\n fontSize: IconFontSizes.medium,\n minWidth: 16,\n minHeight: 16,\n display: 'flex',\n flexShrink: 0,\n margin: '8px 0 8px 12px',\n },\n ],\n icon: {\n color: semanticColors[iconColor[messageBarType]],\n selectors: (_c = {},\n _c[HighContrastSelector] = __assign(__assign({}, getHighContrastNoAdjustStyle()), { color: 'WindowText' }),\n _c),\n },\n text: [\n classNames.text,\n __assign(__assign({ minWidth: 0, display: 'flex', flexGrow: 1, margin: 8 }, fonts.small), { selectors: (_d = {},\n _d[HighContrastSelector] = __assign({}, getHighContrastNoAdjustStyle()),\n _d) }),\n !onDismiss && {\n marginRight: 12,\n },\n ],\n innerText: [\n classNames.innerText,\n {\n lineHeight: 16,\n selectors: {\n '& span a:last-child': {\n paddingLeft: 4,\n },\n },\n },\n truncated && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n !isMultiline && {\n // In high contrast this causes the top and bottom of links' focus outline to be clipped\n // (not sure of a good way around that while still maintaining text clipping)\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n },\n !isMultiline &&\n !truncated && {\n selectors: (_e = {},\n _e[SmallScreenSelector] = {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n _e),\n },\n expandSingleLine && {\n overflow: 'visible',\n whiteSpace: 'pre-wrap',\n },\n ],\n dismissSingleLine: classNames.dismissSingleLine,\n expandSingleLine: classNames.expandSingleLine,\n dismissal: [classNames.dismissal, dismissalAndExpandStyle],\n expand: [classNames.expand, dismissalAndExpandStyle],\n actions: [\n isMultiline ? classNames.actions : classNames.actionsSingleline,\n {\n display: 'flex',\n flexGrow: 0,\n flexShrink: 0,\n flexBasis: 'auto',\n flexDirection: 'row-reverse',\n alignItems: 'center',\n margin: '0 12px 0 8px',\n selectors: {\n '& button:nth-child(n+2)': {\n marginLeft: 8,\n },\n },\n },\n isMultiline && {\n marginBottom: 8,\n },\n onDismiss &&\n !isMultiline && {\n marginRight: 0,\n },\n ],\n };\n};\n//# sourceMappingURL=MessageBar.styles.js.map","import { styled } from '../../Utilities';\nimport { MessageBarBase } from './MessageBar.base';\nimport { getStyles } from './MessageBar.styles';\nexport var MessageBar = styled(MessageBarBase, getStyles, undefined, {\n scope: 'MessageBar',\n});\n//# sourceMappingURL=MessageBar.js.map","export var DirectionalHint = {\n /**\n * Appear above the target element, with the left edges of the callout and target aligning.\n */\n topLeftEdge: 0,\n /**\n * Appear above the target element, with the centers of the callout and target aligning.\n */\n topCenter: 1,\n /**\n * Appear above the target element, with the right edges of the callout and target aligning.\n */\n topRightEdge: 2,\n /**\n * Appear above the target element, aligning with the target element such that the callout tends toward\n * the center of the screen.\n */\n topAutoEdge: 3,\n /**\n * Appear below the target element, with the left edges of the callout and target aligning.\n */\n bottomLeftEdge: 4,\n /**\n * Appear below the target element, with the centers of the callout and target aligning.\n */\n bottomCenter: 5,\n /**\n * Appear below the target element, with the right edges of the callout and target aligning.\n */\n bottomRightEdge: 6,\n /**\n * Appear below the target element, aligning with the target element such that the callout tends toward\n * the center of the screen.\n */\n bottomAutoEdge: 7,\n /**\n * Appear to the left of the target element, with the top edges of the callout and target aligning.\n */\n leftTopEdge: 8,\n /**\n * Appear to the left of the target element, with the centers of the callout and target aligning.\n */\n leftCenter: 9,\n /**\n * Appear to the left of the target element, with the bottom edges of the callout and target aligning.\n */\n leftBottomEdge: 10,\n /**\n * Appear to the right of the target element, with the top edges of the callout and target aligning.\n */\n rightTopEdge: 11,\n /**\n * Appear to the right of the target element, with the centers of the callout and target aligning.\n */\n rightCenter: 12,\n /**\n * Appear to the right of the target element, with the bottom edges of the callout and target aligning.\n */\n rightBottomEdge: 13,\n};\n//# sourceMappingURL=DirectionalHint.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { DelayedRender, classNamesFunction, getNativeProps, divProperties } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory Announced}\n */\nvar AnnouncedBase = /** @class */ (function (_super) {\n __extends(AnnouncedBase, _super);\n function AnnouncedBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n AnnouncedBase.prototype.render = function () {\n var _a = this.props, message = _a.message, styles = _a.styles, _b = _a.as, Root = _b === void 0 ? 'div' : _b, className = _a.className;\n var classNames = getClassNames(styles, { className: className });\n return (React.createElement(Root, __assign({ role: \"status\", className: classNames.root }, getNativeProps(this.props, divProperties, ['className'])),\n React.createElement(DelayedRender, null,\n React.createElement(\"div\", { className: classNames.screenReaderText }, message))));\n };\n AnnouncedBase.defaultProps = {\n 'aria-live': 'polite',\n };\n return AnnouncedBase;\n}(React.Component));\nexport { AnnouncedBase };\n//# sourceMappingURL=Announced.base.js.map","import { styled } from '../../Utilities';\nimport { AnnouncedBase } from './Announced.base';\nimport { getStyles } from './Announced.styles';\nexport var Announced = styled(AnnouncedBase, getStyles);\n//# sourceMappingURL=Announced.js.map","import { hiddenContentStyle } from '../../Styling';\nexport var getStyles = function (props) {\n return {\n root: props.className,\n screenReaderText: hiddenContentStyle,\n };\n};\n//# sourceMappingURL=Announced.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 { 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 { memoizeFunction } from '../../Utilities';\nimport { getGlobalClassNames, mergeStyleSets } from '../../Styling';\nexport var ButtonGlobalClassNames = {\n msButton: 'ms-Button',\n msButtonHasMenu: 'ms-Button--hasMenu',\n msButtonIcon: 'ms-Button-icon',\n msButtonMenuIcon: 'ms-Button-menuIcon',\n msButtonLabel: 'ms-Button-label',\n msButtonDescription: 'ms-Button-description',\n msButtonScreenReaderText: 'ms-Button-screenReaderText',\n msButtonFlexContainer: 'ms-Button-flexContainer',\n msButtonTextContainer: 'ms-Button-textContainer',\n};\nexport var getBaseButtonClassNames = memoizeFunction(function (theme, styles, className, variantClassName, iconClassName, menuIconClassName, disabled, hasMenu, checked, expanded, isSplit) {\n var _a, _b;\n var classNames = getGlobalClassNames(ButtonGlobalClassNames, theme || {});\n var isExpanded = expanded && !isSplit;\n return mergeStyleSets({\n root: [\n classNames.msButton,\n styles.root,\n variantClassName,\n checked && ['is-checked', styles.rootChecked],\n isExpanded && [\n 'is-expanded',\n styles.rootExpanded,\n {\n selectors: (_a = {},\n _a[\":hover .\" + classNames.msButtonIcon] = styles.iconExpandedHovered,\n // menuIcon falls back to rootExpandedHovered to support original behavior\n _a[\":hover .\" + classNames.msButtonMenuIcon] = styles.menuIconExpandedHovered || styles.rootExpandedHovered,\n _a[':hover'] = styles.rootExpandedHovered,\n _a),\n },\n ],\n hasMenu && [ButtonGlobalClassNames.msButtonHasMenu, styles.rootHasMenu],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !isExpanded &&\n !checked && {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n _b[\":hover .\" + classNames.msButtonLabel] = styles.labelHovered,\n _b[\":hover .\" + classNames.msButtonIcon] = styles.iconHovered,\n _b[\":hover .\" + classNames.msButtonDescription] = styles.descriptionHovered,\n _b[\":hover .\" + classNames.msButtonMenuIcon] = styles.menuIconHovered,\n _b[':focus'] = styles.rootFocused,\n _b[':active'] = styles.rootPressed,\n _b[\":active .\" + classNames.msButtonIcon] = styles.iconPressed,\n _b[\":active .\" + classNames.msButtonDescription] = styles.descriptionPressed,\n _b[\":active .\" + classNames.msButtonMenuIcon] = styles.menuIconPressed,\n _b),\n },\n disabled && checked && [styles.rootCheckedDisabled],\n !disabled &&\n checked && {\n selectors: {\n ':hover': styles.rootCheckedHovered,\n ':active': styles.rootCheckedPressed,\n },\n },\n className,\n ],\n flexContainer: [classNames.msButtonFlexContainer, styles.flexContainer],\n textContainer: [classNames.msButtonTextContainer, styles.textContainer],\n icon: [\n classNames.msButtonIcon,\n iconClassName,\n styles.icon,\n isExpanded && styles.iconExpanded,\n checked && styles.iconChecked,\n disabled && styles.iconDisabled,\n ],\n label: [classNames.msButtonLabel, styles.label, checked && styles.labelChecked, disabled && styles.labelDisabled],\n menuIcon: [\n classNames.msButtonMenuIcon,\n menuIconClassName,\n styles.menuIcon,\n checked && styles.menuIconChecked,\n disabled && !isSplit && styles.menuIconDisabled,\n !disabled &&\n !isExpanded &&\n !checked && {\n selectors: {\n ':hover': styles.menuIconHovered,\n ':active': styles.menuIconPressed,\n },\n },\n isExpanded && ['is-expanded', styles.menuIconExpanded],\n ],\n description: [\n classNames.msButtonDescription,\n styles.description,\n checked && styles.descriptionChecked,\n disabled && styles.descriptionDisabled,\n ],\n screenReaderText: [classNames.msButtonScreenReaderText, styles.screenReaderText],\n });\n});\n//# sourceMappingURL=BaseButton.classNames.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, assign, buttonProperties, createMergedRef, css, getId, getNativeProps, initializeComponentRef, memoizeFunction, mergeAriaAttributeValues, nullRender, portalContainsElement, setFocusVisibility, warnConditionallyRequiredProps, warnDeprecations, Async, EventGroup, FocusRects, KeyCodes, } from '../../Utilities';\nimport { Icon, FontIcon, ImageIcon } from '../../Icon';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { ContextualMenu } from '../../ContextualMenu';\nimport { getBaseButtonClassNames } from './BaseButton.classNames';\nimport { getSplitButtonClassNames as getBaseSplitButtonClassNames } from './SplitButton/SplitButton.classNames';\nimport { KeytipData } from '../../KeytipData';\nvar TouchIdleDelay = 500; /* ms */\nvar COMPONENT_NAME = 'BaseButton';\n/**\n * {@docCategory Button}\n */\nvar BaseButton = /** @class */ (function (_super) {\n __extends(BaseButton, _super);\n function BaseButton(props) {\n var _this = _super.call(this, props) || this;\n _this._buttonElement = React.createRef();\n _this._splitButtonContainer = React.createRef();\n _this._mergedRef = createMergedRef();\n _this._renderedVisibleMenu = false;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onRenderIcon = function (buttonProps, defaultRender) {\n var iconProps = _this.props.iconProps;\n if (iconProps && (iconProps.iconName !== undefined || iconProps.imageProps)) {\n var className = iconProps.className, imageProps = iconProps.imageProps, rest = __rest(iconProps, [\"className\", \"imageProps\"]);\n // If the styles prop is specified as part of iconProps, fall back to regular Icon as FontIcon and ImageIcon\n // do not have this prop.\n if (iconProps.styles) {\n return React.createElement(Icon, __assign({ className: css(_this._classNames.icon, className), imageProps: imageProps }, rest));\n }\n if (iconProps.iconName) {\n return React.createElement(FontIcon, __assign({ className: css(_this._classNames.icon, className) }, rest));\n }\n if (imageProps) {\n return React.createElement(ImageIcon, __assign({ className: css(_this._classNames.icon, className), imageProps: imageProps }, rest));\n }\n }\n return null;\n };\n _this._onRenderTextContents = function () {\n var _a = _this.props, text = _a.text, children = _a.children, \n // eslint-disable-next-line deprecation/deprecation\n _b = _a.secondaryText, \n // eslint-disable-next-line deprecation/deprecation\n secondaryText = _b === void 0 ? _this.props.description : _b, _c = _a.onRenderText, onRenderText = _c === void 0 ? _this._onRenderText : _c, _d = _a.onRenderDescription, onRenderDescription = _d === void 0 ? _this._onRenderDescription : _d;\n if (text || typeof children === 'string' || secondaryText) {\n return (React.createElement(\"span\", { className: _this._classNames.textContainer },\n onRenderText(_this.props, _this._onRenderText),\n onRenderDescription(_this.props, _this._onRenderDescription)));\n }\n return [onRenderText(_this.props, _this._onRenderText), onRenderDescription(_this.props, _this._onRenderDescription)];\n };\n _this._onRenderText = function () {\n var text = _this.props.text;\n var children = _this.props.children;\n // For backwards compat, we should continue to take in the text content from children.\n if (text === undefined && typeof children === 'string') {\n text = children;\n }\n if (_this._hasText()) {\n return (React.createElement(\"span\", { key: _this._labelId, className: _this._classNames.label, id: _this._labelId }, text));\n }\n return null;\n };\n _this._onRenderChildren = function () {\n var children = _this.props.children;\n // If children is just a string, either it or the text will be rendered via onRenderLabel\n // If children is another component, it will be rendered after text\n if (typeof children === 'string') {\n return null;\n }\n return children;\n };\n _this._onRenderDescription = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = props.secondaryText, secondaryText = _a === void 0 ? _this.props.description : _a;\n // ms-Button-description is only shown when the button type is compound.\n // In other cases it will not be displayed.\n return secondaryText ? (React.createElement(\"span\", { key: _this._descriptionId, className: _this._classNames.description, id: _this._descriptionId }, secondaryText)) : null;\n };\n _this._onRenderAriaDescription = function () {\n var ariaDescription = _this.props.ariaDescription;\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,\n // otherwise it will be assigned to descriptionSpan.\n return ariaDescription ? (React.createElement(\"span\", { className: _this._classNames.screenReaderText, id: _this._ariaDescriptionId }, ariaDescription)) : null;\n };\n _this._onRenderMenuIcon = function (props) {\n var menuIconProps = _this.props.menuIconProps;\n return React.createElement(FontIcon, __assign({ iconName: \"ChevronDown\" }, menuIconProps, { className: _this._classNames.menuIcon }));\n };\n _this._onRenderMenu = function (menuProps) {\n var persistMenu = _this.props.persistMenu;\n var menuHidden = _this.state.menuHidden;\n var MenuType = _this.props.menuAs || ContextualMenu;\n // the accessible menu label (accessible name) has a relationship to the button.\n // If the menu props do not specify an explicit value for aria-label or aria-labelledBy,\n // AND the button has text, we'll set the menu aria-labelledBy to the text element id.\n if (!menuProps.ariaLabel && !menuProps.labelElementId && _this._hasText()) {\n menuProps = __assign(__assign({}, menuProps), { labelElementId: _this._labelId });\n }\n return (React.createElement(MenuType, __assign({ id: _this._labelId + '-menu', directionalHint: DirectionalHint.bottomLeftEdge }, menuProps, { shouldFocusOnContainer: _this._menuShouldFocusOnContainer, shouldFocusOnMount: _this._menuShouldFocusOnMount, hidden: persistMenu ? menuHidden : undefined, className: css('ms-BaseButton-menuhost', menuProps.className), target: _this._isSplitButton ? _this._splitButtonContainer.current : _this._buttonElement.current, onDismiss: _this._onDismissMenu })));\n };\n _this._onDismissMenu = function (ev) {\n var menuProps = _this.props.menuProps;\n if (menuProps && menuProps.onDismiss) {\n menuProps.onDismiss(ev);\n }\n if (!ev || !ev.defaultPrevented) {\n _this._dismissMenu();\n }\n };\n _this._dismissMenu = function () {\n _this._menuShouldFocusOnMount = undefined;\n _this._menuShouldFocusOnContainer = undefined;\n _this.setState({ menuHidden: true });\n };\n _this._openMenu = function (shouldFocusOnContainer, shouldFocusOnMount) {\n if (shouldFocusOnMount === void 0) { shouldFocusOnMount = true; }\n if (_this.props.menuProps) {\n _this._menuShouldFocusOnContainer = shouldFocusOnContainer;\n _this._menuShouldFocusOnMount = shouldFocusOnMount;\n _this._renderedVisibleMenu = true;\n _this.setState({ menuHidden: false });\n }\n };\n _this._onToggleMenu = function (shouldFocusOnContainer) {\n var shouldFocusOnMount = true;\n if (_this.props.menuProps && _this.props.menuProps.shouldFocusOnMount === false) {\n shouldFocusOnMount = false;\n }\n _this.state.menuHidden ? _this._openMenu(shouldFocusOnContainer, shouldFocusOnMount) : _this._dismissMenu();\n };\n _this._onSplitContainerFocusCapture = function (ev) {\n var container = _this._splitButtonContainer.current;\n // If the target is coming from the portal we do not need to set focus on the container.\n if (!container || (ev.target && portalContainsElement(ev.target, container))) {\n return;\n }\n // We should never be able to focus the individual buttons in a split button. Focus\n // should always remain on the container.\n container.focus();\n };\n _this._onSplitButtonPrimaryClick = function (ev) {\n if (!_this.state.menuHidden) {\n _this._dismissMenu();\n }\n if (!_this._processingTouch && _this.props.onClick) {\n _this.props.onClick(ev);\n }\n else if (_this._processingTouch) {\n _this._onMenuClick(ev);\n }\n };\n _this._onKeyDown = function (ev) {\n // explicity cancelling event so click won't fire after this\n // eslint-disable-next-line deprecation/deprecation\n if (_this.props.disabled && (ev.which === KeyCodes.enter || ev.which === KeyCodes.space)) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (!_this.props.disabled) {\n if (_this.props.menuProps) {\n _this._onMenuKeyDown(ev);\n }\n else if (_this.props.onKeyDown !== undefined) {\n _this.props.onKeyDown(ev); // not cancelling event because it's not disabled\n }\n }\n };\n _this._onKeyUp = function (ev) {\n if (!_this.props.disabled && _this.props.onKeyUp !== undefined) {\n _this.props.onKeyUp(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onKeyPress = function (ev) {\n if (!_this.props.disabled && _this.props.onKeyPress !== undefined) {\n _this.props.onKeyPress(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onMouseUp = function (ev) {\n if (!_this.props.disabled && _this.props.onMouseUp !== undefined) {\n _this.props.onMouseUp(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onMouseDown = function (ev) {\n if (!_this.props.disabled && _this.props.onMouseDown !== undefined) {\n _this.props.onMouseDown(ev); // not cancelling event because it's not disabled\n }\n };\n _this._onClick = function (ev) {\n if (!_this.props.disabled) {\n if (_this.props.menuProps) {\n _this._onMenuClick(ev);\n }\n else if (_this.props.onClick !== undefined) {\n _this.props.onClick(ev); // not cancelling event because it's not disabled\n }\n }\n };\n _this._onSplitButtonContainerKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n if (_this._buttonElement.current) {\n _this._buttonElement.current.click();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n else {\n _this._onMenuKeyDown(ev);\n }\n };\n _this._onMenuKeyDown = function (ev) {\n if (_this.props.disabled) {\n return;\n }\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!ev.defaultPrevented && _this._isValidMenuOpenKey(ev)) {\n var onMenuClick = _this.props.onMenuClick;\n if (onMenuClick) {\n onMenuClick(ev, _this.props);\n }\n _this._onToggleMenu(false);\n ev.preventDefault();\n ev.stopPropagation();\n }\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n // We manually set the focus visibility to true if opening via Enter or Space to account for the scenario where\n // a user clicks on the button, closes the menu and then opens it via keyboard. In this scenario our default logic\n // for setting focus visibility is not triggered since there is no keyboard navigation present beforehand.\n setFocusVisibility(true, ev.target);\n }\n if (!(ev.altKey || ev.metaKey) && (isUp || isDown)) {\n // Suppose a menu, with shouldFocusOnMount: false, is open, and user wants to keyboard to the menu items\n // We need to re-render the menu with shouldFocusOnMount as true.\n if (!_this.state.menuHidden && _this.props.menuProps) {\n var currentShouldFocusOnMount = _this._menuShouldFocusOnMount !== undefined\n ? _this._menuShouldFocusOnMount\n : _this.props.menuProps.shouldFocusOnMount;\n if (!currentShouldFocusOnMount) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._menuShouldFocusOnMount = true;\n _this.forceUpdate();\n }\n }\n }\n };\n _this._onTouchStart = function () {\n if (_this._isSplitButton &&\n _this._splitButtonContainer.current &&\n !('onpointerdown' in _this._splitButtonContainer.current)) {\n _this._handleTouchAndPointerEvent();\n }\n };\n _this._onMenuClick = function (ev) {\n var onMenuClick = _this.props.onMenuClick;\n if (onMenuClick) {\n onMenuClick(ev, _this.props);\n }\n if (!ev.defaultPrevented) {\n // When Edge + Narrator are used together (regardless of if the button is in a form or not), pressing\n // \"Enter\" fires this method and not _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates\n // between a real click event and a keypress event (detail should be the number of mouse clicks).\n // ...Plot twist! For a real click event in IE 11, detail is always 0 (Edge sets it properly to 1).\n // So we also check the pointerType property, which both Edge and IE set to \"mouse\" for real clicks\n // and \"\" for pressing \"Enter\" with Narrator on.\n var shouldFocusOnContainer = ev.nativeEvent.detail !== 0 || ev.nativeEvent.pointerType === 'mouse';\n _this._onToggleMenu(shouldFocusOnContainer);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n warnConditionallyRequiredProps(COMPONENT_NAME, props, ['menuProps', 'onClick'], 'split', _this.props.split);\n warnDeprecations(COMPONENT_NAME, props, {\n rootProps: undefined,\n description: 'secondaryText',\n toggled: 'checked',\n });\n _this._labelId = getId();\n _this._descriptionId = getId();\n _this._ariaDescriptionId = getId();\n _this.state = {\n menuHidden: true,\n };\n return _this;\n }\n Object.defineProperty(BaseButton.prototype, \"_isSplitButton\", {\n get: function () {\n return !!this.props.menuProps && !!this.props.onClick && this.props.split === true;\n },\n enumerable: false,\n configurable: true\n });\n BaseButton.prototype.render = function () {\n var _a;\n var _b = this.props, ariaDescription = _b.ariaDescription, ariaLabel = _b.ariaLabel, ariaHidden = _b.ariaHidden, className = _b.className, disabled = _b.disabled, allowDisabledFocus = _b.allowDisabledFocus, primaryDisabled = _b.primaryDisabled, \n // eslint-disable-next-line deprecation/deprecation\n _c = _b.secondaryText, \n // eslint-disable-next-line deprecation/deprecation\n secondaryText = _c === void 0 ? this.props.description : _c, href = _b.href, iconProps = _b.iconProps, menuIconProps = _b.menuIconProps, styles = _b.styles, checked = _b.checked, variantClassName = _b.variantClassName, theme = _b.theme, toggle = _b.toggle, getClassNames = _b.getClassNames, role = _b.role;\n var menuHidden = this.state.menuHidden;\n // Button is disabled if the whole button (in case of splitButton is disabled) or if the primary action is disabled\n var isPrimaryButtonDisabled = disabled || primaryDisabled;\n this._classNames = getClassNames\n ? getClassNames(theme, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, checked, !menuHidden, !!this.props.menuProps, this.props.split, !!allowDisabledFocus)\n : getBaseButtonClassNames(theme, styles, className, variantClassName, iconProps && iconProps.className, menuIconProps && menuIconProps.className, isPrimaryButtonDisabled, !!this.props.menuProps, checked, !menuHidden, this.props.split);\n var _d = this, _ariaDescriptionId = _d._ariaDescriptionId, _labelId = _d._labelId, _descriptionId = _d._descriptionId;\n // Anchor tag cannot be disabled hence in disabled state rendering\n // anchor button as normal button\n var renderAsAnchor = !isPrimaryButtonDisabled && !!href;\n var tag = renderAsAnchor ? 'a' : 'button';\n var nativeProps = getNativeProps(\n // eslint-disable-next-line deprecation/deprecation\n assign(renderAsAnchor ? {} : { type: 'button' }, this.props.rootProps, this.props), renderAsAnchor ? anchorProperties : buttonProperties, [\n 'disabled',\n ]);\n // Check for ariaLabel passed in via Button props, and fall back to aria-label passed in via native props\n var resolvedAriaLabel = ariaLabel || nativeProps['aria-label'];\n // Check for ariaDescription, secondaryText or aria-describedby in the native props to determine source of\n // aria-describedby. Otherwise default to undefined so property does not appear in output.\n var ariaDescribedBy = undefined;\n if (ariaDescription) {\n ariaDescribedBy = _ariaDescriptionId;\n }\n else if (secondaryText && this.props.onRenderDescription !== nullRender) {\n // for buttons like CompoundButton with a valid onRenderDescription, we need to set an ariaDescribedBy\n // for buttons that do not render anything (via nullRender), we should not set an ariaDescribedBy\n ariaDescribedBy = _descriptionId;\n }\n else if (nativeProps['aria-describedby']) {\n ariaDescribedBy = nativeProps['aria-describedby'];\n }\n // If an explicit aria-labelledby is given, use that and we're done.\n // If any kind of description is given (which will end up as an aria-describedby attribute)\n // and no ariaLabel is specified, set the labelledby element.\n // Otherwise, the button is labeled implicitly by the descendent text on the button (if it exists).\n var ariaLabelledBy = undefined;\n if (nativeProps['aria-labelledby']) {\n ariaLabelledBy = nativeProps['aria-labelledby'];\n }\n else if (ariaDescribedBy && !resolvedAriaLabel) {\n ariaLabelledBy = this._hasText() ? _labelId : undefined;\n }\n var dataIsFocusable = this.props['data-is-focusable'] === false || (disabled && !allowDisabledFocus) || this._isSplitButton\n ? false\n : true;\n var isCheckboxTypeRole = role === 'menuitemcheckbox' || role === 'checkbox';\n // if isCheckboxTypeRole, always return a checked value.\n // Otherwise only return checked value if toggle is set to true.\n // This is because role=\"checkbox\" always needs to have an aria-checked value\n // but our checked prop only sets aria-pressed if we mark the button as a toggle=\"true\"\n var checkedOrPressedValue = isCheckboxTypeRole ? !!checked : toggle === true ? !!checked : undefined;\n var buttonProps = assign(nativeProps, (_a = {\n className: this._classNames.root,\n // eslint-disable-next-line deprecation/deprecation\n ref: this._mergedRef(this.props.elementRef, this._buttonElement),\n disabled: isPrimaryButtonDisabled && !allowDisabledFocus,\n onKeyDown: this._onKeyDown,\n onKeyPress: this._onKeyPress,\n onKeyUp: this._onKeyUp,\n onMouseDown: this._onMouseDown,\n onMouseUp: this._onMouseUp,\n onClick: this._onClick,\n 'aria-label': resolvedAriaLabel,\n 'aria-labelledby': ariaLabelledBy,\n 'aria-describedby': ariaDescribedBy,\n 'aria-disabled': isPrimaryButtonDisabled,\n 'data-is-focusable': dataIsFocusable\n },\n // aria-pressed attribute should only be present for toggle buttons\n // aria-checked attribute should only be present for toggle buttons with checkbox type role\n _a[isCheckboxTypeRole ? 'aria-checked' : 'aria-pressed'] = checkedOrPressedValue,\n _a));\n if (ariaHidden) {\n buttonProps['aria-hidden'] = true;\n }\n if (this._isSplitButton) {\n return this._onRenderSplitButtonContent(tag, buttonProps);\n }\n else if (this.props.menuProps) {\n var _e = this.props.menuProps.id, id = _e === void 0 ? this._labelId + \"-menu\" : _e;\n assign(buttonProps, {\n 'aria-expanded': !menuHidden,\n 'aria-controls': !menuHidden ? id : null,\n 'aria-haspopup': true,\n });\n }\n return this._onRenderContent(tag, buttonProps);\n };\n BaseButton.prototype.componentDidMount = function () {\n // For split buttons, touching anywhere in the button should drop the dropdown, which should contain the\n // primary action. This gives more hit target space for touch environments. We're setting the onpointerdown here,\n // because React does not support Pointer events yet.\n if (this._isSplitButton && this._splitButtonContainer.current) {\n if ('onpointerdown' in this._splitButtonContainer.current) {\n this._events.on(this._splitButtonContainer.current, 'pointerdown', this._onPointerDown, true);\n }\n if ('onpointerup' in this._splitButtonContainer.current && this.props.onPointerUp) {\n this._events.on(this._splitButtonContainer.current, 'pointerup', this.props.onPointerUp, true);\n }\n }\n };\n BaseButton.prototype.componentDidUpdate = function (prevProps, prevState) {\n // If Button's menu was closed, run onAfterMenuDismiss.\n if (this.props.onAfterMenuDismiss && !prevState.menuHidden && this.state.menuHidden) {\n this.props.onAfterMenuDismiss();\n }\n };\n BaseButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n BaseButton.prototype.focus = function () {\n if (this._isSplitButton && this._splitButtonContainer.current) {\n setFocusVisibility(true);\n this._splitButtonContainer.current.focus();\n }\n else if (this._buttonElement.current) {\n setFocusVisibility(true);\n this._buttonElement.current.focus();\n }\n };\n BaseButton.prototype.dismissMenu = function () {\n this._dismissMenu();\n };\n BaseButton.prototype.openMenu = function (shouldFocusOnContainer, shouldFocusOnMount) {\n this._openMenu(shouldFocusOnContainer, shouldFocusOnMount);\n };\n BaseButton.prototype._onRenderContent = function (tag, buttonProps) {\n var _this = this;\n var props = this.props;\n var Tag = tag;\n var menuIconProps = props.menuIconProps, menuProps = props.menuProps, _a = props.onRenderIcon, onRenderIcon = _a === void 0 ? this._onRenderIcon : _a, _b = props.onRenderAriaDescription, onRenderAriaDescription = _b === void 0 ? this._onRenderAriaDescription : _b, _c = props.onRenderChildren, onRenderChildren = _c === void 0 ? this._onRenderChildren : _c, \n // eslint-disable-next-line deprecation/deprecation\n _d = props.onRenderMenu, \n // eslint-disable-next-line deprecation/deprecation\n onRenderMenu = _d === void 0 ? this._onRenderMenu : _d, _e = props.onRenderMenuIcon, onRenderMenuIcon = _e === void 0 ? this._onRenderMenuIcon : _e, disabled = props.disabled;\n var keytipProps = props.keytipProps;\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n var Button = function (keytipAttributes) { return (React.createElement(Tag, __assign({}, buttonProps, keytipAttributes),\n React.createElement(\"span\", { className: _this._classNames.flexContainer, \"data-automationid\": \"splitbuttonprimary\" },\n onRenderIcon(props, _this._onRenderIcon),\n _this._onRenderTextContents(),\n onRenderAriaDescription(props, _this._onRenderAriaDescription),\n onRenderChildren(props, _this._onRenderChildren),\n !_this._isSplitButton &&\n (menuProps || menuIconProps || _this.props.onRenderMenuIcon) &&\n onRenderMenuIcon(_this.props, _this._onRenderMenuIcon),\n menuProps &&\n !menuProps.doNotLayer &&\n _this._shouldRenderMenu() &&\n onRenderMenu(menuProps, _this._onRenderMenu)))); };\n var Content = keytipProps ? (\n // If we're making a split button, we won't put the keytip here\n React.createElement(KeytipData, { keytipProps: !this._isSplitButton ? keytipProps : undefined, ariaDescribedBy: buttonProps['aria-describedby'], disabled: disabled }, function (keytipAttributes) { return Button(keytipAttributes); })) : (Button());\n if (menuProps && menuProps.doNotLayer) {\n return (React.createElement(React.Fragment, null,\n Content,\n this._shouldRenderMenu() && onRenderMenu(menuProps, this._onRenderMenu)));\n }\n return (React.createElement(React.Fragment, null,\n Content,\n React.createElement(FocusRects, null)));\n };\n /**\n * Method to help determine if the menu's component tree should\n * be rendered. It takes into account whether the menu is expanded,\n * whether it is a persisted menu and whether it has been shown to the user.\n */\n BaseButton.prototype._shouldRenderMenu = function () {\n var menuHidden = this.state.menuHidden;\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, persistMenu = _a.persistMenu, renderPersistedMenuHiddenOnMount = _a.renderPersistedMenuHiddenOnMount;\n if (!menuHidden) {\n // Always should render a menu when it is expanded\n return true;\n }\n else if (persistMenu && (this._renderedVisibleMenu || renderPersistedMenuHiddenOnMount)) {\n // _renderedVisibleMenu ensures that the first rendering of\n // the menu happens on-screen, as edge's scrollbar calculations are off if done while hidden.\n return true;\n }\n return false;\n };\n BaseButton.prototype._hasText = function () {\n // _onRenderTextContents and _onRenderText do not perform the same checks. Below is parity with what _onRenderText\n // used to have before the refactor that introduced this function. _onRenderTextContents does not require props.\n // text to be undefined in order for props.children to be used as a fallback.\n // Purely a code maintainability/reuse issue, but logged as Issue #4979.\n return this.props.text !== null && (this.props.text !== undefined || typeof this.props.children === 'string');\n };\n BaseButton.prototype._onRenderSplitButtonContent = function (tag, buttonProps) {\n var _this = this;\n var _a = this.props, _b = _a.styles, styles = _b === void 0 ? {} : _b, disabled = _a.disabled, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, getSplitButtonClassNames = _a.getSplitButtonClassNames, primaryDisabled = _a.primaryDisabled, menuProps = _a.menuProps, toggle = _a.toggle, role = _a.role, primaryActionButtonProps = _a.primaryActionButtonProps;\n var keytipProps = this.props.keytipProps;\n var menuHidden = this.state.menuHidden;\n var classNames = getSplitButtonClassNames\n ? getSplitButtonClassNames(!!disabled, !menuHidden, !!checked, !!allowDisabledFocus)\n : styles && getBaseSplitButtonClassNames(styles, !!disabled, !menuHidden, !!checked, !!primaryDisabled);\n assign(buttonProps, {\n onClick: undefined,\n onPointerDown: undefined,\n onPointerUp: undefined,\n tabIndex: -1,\n 'data-is-focusable': false,\n });\n if (keytipProps && menuProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n var containerProps = getNativeProps(buttonProps, [], ['disabled']);\n // Add additional props to apply on primary action button\n if (primaryActionButtonProps) {\n assign(buttonProps, primaryActionButtonProps);\n }\n var SplitButton = function (keytipAttributes) { return (React.createElement(\"div\", __assign({}, containerProps, { \"data-ktp-target\": keytipAttributes ? keytipAttributes['data-ktp-target'] : undefined, role: role ? role : 'button', \"aria-disabled\": disabled, \"aria-haspopup\": true, \"aria-expanded\": !menuHidden, \"aria-pressed\": toggle ? !!checked : undefined, \"aria-describedby\": mergeAriaAttributeValues(buttonProps['aria-describedby'], keytipAttributes ? keytipAttributes['aria-describedby'] : undefined), className: classNames && classNames.splitButtonContainer, onKeyDown: _this._onSplitButtonContainerKeyDown, onTouchStart: _this._onTouchStart, ref: _this._splitButtonContainer, \"data-is-focusable\": true, onClick: !disabled && !primaryDisabled ? _this._onSplitButtonPrimaryClick : undefined, tabIndex: (!disabled && !primaryDisabled) || allowDisabledFocus ? 0 : undefined, \"aria-roledescription\": buttonProps['aria-roledescription'], onFocusCapture: _this._onSplitContainerFocusCapture }),\n React.createElement(\"span\", { style: { display: 'flex' } },\n _this._onRenderContent(tag, buttonProps),\n _this._onRenderSplitButtonMenuButton(classNames, keytipAttributes),\n _this._onRenderSplitButtonDivider(classNames)))); };\n return keytipProps ? (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: disabled }, function (keytipAttributes) { return SplitButton(keytipAttributes); })) : (SplitButton());\n };\n BaseButton.prototype._onRenderSplitButtonDivider = function (classNames) {\n if (classNames && classNames.divider) {\n var onClick = function (ev) {\n ev.stopPropagation();\n };\n return React.createElement(\"span\", { className: classNames.divider, \"aria-hidden\": true, onClick: onClick });\n }\n return null;\n };\n BaseButton.prototype._onRenderSplitButtonMenuButton = function (classNames, keytipAttributes) {\n var _a = this.props, allowDisabledFocus = _a.allowDisabledFocus, checked = _a.checked, disabled = _a.disabled, splitButtonMenuProps = _a.splitButtonMenuProps, splitButtonAriaLabel = _a.splitButtonAriaLabel, primaryDisabled = _a.primaryDisabled;\n var menuHidden = this.state.menuHidden;\n var menuIconProps = this.props.menuIconProps;\n if (menuIconProps === undefined) {\n menuIconProps = {\n iconName: 'ChevronDown',\n };\n }\n var splitButtonProps = __assign(__assign({}, splitButtonMenuProps), { styles: classNames, checked: checked, disabled: disabled, allowDisabledFocus: allowDisabledFocus, onClick: this._onMenuClick, menuProps: undefined, iconProps: __assign(__assign({}, menuIconProps), { className: this._classNames.menuIcon }), ariaLabel: splitButtonAriaLabel, 'aria-haspopup': true, 'aria-expanded': !menuHidden, 'data-is-focusable': false });\n // Add data-ktp-execute-target to the split button if the keytip is defined\n return (React.createElement(BaseButton, __assign({}, splitButtonProps, { \"data-ktp-execute-target\": keytipAttributes ? keytipAttributes['data-ktp-execute-target'] : keytipAttributes, onMouseDown: this._onMouseDown, tabIndex: primaryDisabled && !allowDisabledFocus ? 0 : -1 })));\n };\n BaseButton.prototype._onPointerDown = function (ev) {\n var onPointerDown = this.props.onPointerDown;\n if (onPointerDown) {\n onPointerDown(ev);\n }\n if (ev.pointerType === 'touch') {\n this._handleTouchAndPointerEvent();\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n BaseButton.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 new 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 // Touch and pointer events don't focus the button naturally,\n // so adding an imperative focus call to guarantee this behavior.\n _this.focus();\n }, TouchIdleDelay);\n };\n /**\n * Returns if the user hits a valid keyboard key to open the menu\n * @param ev - the keyboard event\n * @returns True if user clicks on custom trigger key if enabled or alt + down arrow if not. False otherwise.\n */\n BaseButton.prototype._isValidMenuOpenKey = function (ev) {\n if (this.props.menuTriggerKeyCode) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === this.props.menuTriggerKeyCode;\n }\n else if (this.props.menuProps) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.down && (ev.altKey || ev.metaKey);\n }\n // Note: When enter is pressed, we will let the event continue to propagate\n // to trigger the onClick event on the button\n return false;\n };\n BaseButton.defaultProps = {\n baseClassName: 'ms-Button',\n styles: {},\n split: false,\n };\n return BaseButton;\n}(React.Component));\nexport { BaseButton };\n//# sourceMappingURL=BaseButton.js.map","import { memoizeFunction } from '../../Utilities';\nimport { HighContrastSelector, getFocusStyle, hiddenContentStyle } from '../../Styling';\nvar noOutline = {\n outline: 0,\n};\nvar iconStyle = function (fontSize) {\n return {\n fontSize: fontSize,\n margin: '0 4px',\n height: '16px',\n lineHeight: '16px',\n textAlign: 'center',\n flexShrink: 0,\n };\n};\n/**\n * Gets the base button styles. Note: because it is a base class to be used with the `mergeRules`\n * helper, it should have values for all class names in the interface. This let `mergeRules` optimize\n * mixing class names together.\n */\nexport var getStyles = memoizeFunction(function (theme) {\n var _a, _b;\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var border = semanticColors.buttonBorder;\n var disabledBackground = semanticColors.disabledBackground;\n var disabledText = semanticColors.disabledText;\n var buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n outlineColor: 'ButtonText',\n };\n return {\n root: [\n getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),\n theme.fonts.medium,\n {\n boxSizing: 'border-box',\n border: '1px solid ' + border,\n userSelect: 'none',\n display: 'inline-block',\n textDecoration: 'none',\n textAlign: 'center',\n cursor: 'pointer',\n padding: '0 16px',\n borderRadius: effects.roundedCorner2,\n selectors: {\n // IE11 workaround for preventing shift of child elements of a button when active.\n ':active > *': {\n position: 'relative',\n left: 0,\n top: 0,\n },\n },\n },\n ],\n rootDisabled: [\n getFocusStyle(theme, { inset: 1, highContrastStyle: buttonHighContrastFocus, borderColor: 'transparent' }),\n {\n backgroundColor: disabledBackground,\n borderColor: disabledBackground,\n color: disabledText,\n cursor: 'default',\n selectors: {\n ':hover': noOutline,\n ':focus': noOutline,\n },\n },\n ],\n iconDisabled: {\n color: disabledText,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n },\n menuIconDisabled: {\n color: disabledText,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n },\n flexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n description: {\n display: 'block',\n },\n textContainer: {\n flexGrow: 1,\n display: 'block',\n },\n icon: iconStyle(fonts.mediumPlus.fontSize),\n menuIcon: iconStyle(fonts.small.fontSize),\n label: {\n margin: '0 4px',\n lineHeight: '100%',\n display: 'block',\n },\n screenReaderText: hiddenContentStyle,\n };\n});\n//# sourceMappingURL=BaseButton.styles.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 { __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, 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';\nimport { getStyles as getSplitButtonStyles } from '../SplitButton/SplitButton.styles';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a;\n var baseButtonStyles = getBaseButtonStyles(theme);\n var splitButtonStyles = getSplitButtonStyles(theme);\n var palette = theme.palette, semanticColors = theme.semanticColors;\n var iconButtonStyles = {\n root: {\n padding: '0 4px',\n width: '32px',\n height: '32px',\n backgroundColor: 'transparent',\n border: 'none',\n color: semanticColors.link,\n },\n rootHovered: {\n color: palette.themeDarkAlt,\n backgroundColor: palette.neutralLighter,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Highlight',\n color: 'Highlight',\n },\n _a),\n },\n rootHasMenu: {\n width: 'auto',\n },\n rootPressed: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootExpanded: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootChecked: {\n color: palette.themeDark,\n backgroundColor: palette.neutralLight,\n },\n rootCheckedHovered: {\n color: palette.themeDark,\n backgroundColor: palette.neutralQuaternaryAlt,\n },\n rootDisabled: {\n color: palette.neutralTertiaryAlt,\n },\n };\n return concatStyleSets(baseButtonStyles, iconButtonStyles, splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=IconButton.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 './IconButton.styles';\n/**\n * {@docCategory Button}\n */\nvar IconButton = /** @class */ (function (_super) {\n __extends(IconButton, _super);\n function IconButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n IconButton.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--icon\", styles: getStyles(theme, styles), onRenderText: nullRender, onRenderDescription: nullRender })));\n };\n IconButton = __decorate([\n customizable('IconButton', ['theme', 'styles'], true)\n ], IconButton);\n return IconButton;\n}(React.Component));\nexport { IconButton };\n//# sourceMappingURL=IconButton.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 { memoizeFunction } from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nexport var getSplitButtonClassNames = memoizeFunction(function (styles, disabled, expanded, checked, primaryDisabled) {\n return {\n root: mergeStyles(styles.splitButtonMenuButton, expanded && [styles.splitButtonMenuButtonExpanded], disabled && [styles.splitButtonMenuButtonDisabled], checked && !disabled && [styles.splitButtonMenuButtonChecked], primaryDisabled &&\n !disabled && [\n {\n selectors: {\n ':focus': styles.splitButtonMenuFocused,\n },\n },\n ]),\n splitButtonContainer: mergeStyles(styles.splitButtonContainer, !disabled &&\n checked && [\n styles.splitButtonContainerChecked,\n {\n selectors: {\n ':hover': styles.splitButtonContainerCheckedHovered,\n },\n },\n ], !disabled &&\n !checked && [\n {\n selectors: {\n ':hover': styles.splitButtonContainerHovered,\n ':focus': styles.splitButtonContainerFocused,\n },\n },\n ], disabled && styles.splitButtonContainerDisabled),\n icon: mergeStyles(styles.splitButtonMenuIcon, disabled && styles.splitButtonMenuIconDisabled, !disabled && primaryDisabled && styles.splitButtonMenuIcon),\n flexContainer: mergeStyles(styles.splitButtonFlexContainer),\n divider: mergeStyles(styles.splitButtonDivider, (primaryDisabled || disabled) && styles.splitButtonDividerDisabled),\n };\n});\n//# sourceMappingURL=SplitButton.classNames.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, concatStyleSets, getFocusStyle, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { memoizeFunction } from '../../../Utilities';\nexport var getStyles = memoizeFunction(function (theme, customStyles) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o;\n var effects = theme.effects, palette = theme.palette, semanticColors = theme.semanticColors;\n var buttonHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n border: 'none',\n };\n var splitButtonDividerBaseStyles = {\n position: 'absolute',\n width: 1,\n right: 31,\n top: 8,\n bottom: 8,\n };\n var splitButtonStyles = {\n splitButtonContainer: [\n getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 }),\n {\n display: 'inline-flex',\n selectors: {\n '.ms-Button--default': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n borderRight: 'none',\n },\n '.ms-Button--primary': {\n borderTopRightRadius: '0',\n borderBottomRightRadius: '0',\n border: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'WindowText', backgroundColor: 'Window', border: '1px solid WindowText', borderRightWidth: '0' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n '.ms-Button--primary + .ms-Button': {\n border: 'none',\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n border: '1px solid WindowText',\n borderLeftWidth: '0',\n },\n _b),\n },\n },\n },\n ],\n splitButtonContainerHovered: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'Window',\n backgroundColor: 'Highlight',\n },\n _c),\n },\n '.ms-Button.is-disabled': {\n color: semanticColors.buttonTextDisabled,\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _d),\n },\n },\n },\n splitButtonContainerChecked: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n },\n },\n splitButtonContainerCheckedHovered: {\n selectors: {\n '.ms-Button--primary': {\n selectors: (_f = {},\n _f[HighContrastSelector] = __assign({ color: 'Window', backgroundColor: 'WindowText' }, getHighContrastNoAdjustStyle()),\n _f),\n },\n },\n },\n splitButtonContainerFocused: {\n outline: 'none!important',\n },\n splitButtonMenuButton: (_g = {\n padding: 6,\n height: 'auto',\n boxSizing: 'border-box',\n borderRadius: 0,\n borderTopRightRadius: effects.roundedCorner2,\n borderBottomRightRadius: effects.roundedCorner2,\n border: \"1px solid \" + palette.neutralSecondaryAlt,\n borderLeft: 'none',\n outline: 'transparent',\n userSelect: 'none',\n display: 'inline-block',\n textDecoration: 'none',\n textAlign: 'center',\n cursor: 'pointer',\n verticalAlign: 'top',\n width: 32,\n marginLeft: -1,\n marginTop: 0,\n marginRight: 0,\n marginBottom: 0\n },\n _g[HighContrastSelector] = {\n '.ms-Button-menuIcon': {\n color: 'WindowText',\n },\n },\n _g),\n splitButtonDivider: __assign(__assign({}, splitButtonDividerBaseStyles), { selectors: (_h = {},\n _h[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n },\n _h) }),\n splitButtonDividerDisabled: __assign(__assign({}, splitButtonDividerBaseStyles), { selectors: (_j = {},\n _j[HighContrastSelector] = {\n backgroundColor: 'GrayText',\n },\n _j) }),\n splitButtonMenuButtonDisabled: {\n pointerEvents: 'none',\n border: 'none',\n selectors: (_k = {\n ':hover': {\n cursor: 'default',\n },\n '.ms-Button--primary': {\n selectors: (_l = {},\n _l[HighContrastSelector] = {\n color: 'GrayText',\n borderColor: 'GrayText',\n backgroundColor: 'Window',\n },\n _l),\n },\n '.ms-Button-menuIcon': {\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n color: 'GrayText',\n },\n _m),\n }\n },\n _k[HighContrastSelector] = {\n color: 'GrayText',\n border: '1px solid GrayText',\n backgroundColor: 'Window',\n },\n _k),\n },\n splitButtonFlexContainer: {\n display: 'flex',\n height: '100%',\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'center',\n },\n splitButtonContainerDisabled: {\n outline: 'none',\n border: 'none',\n selectors: (_o = {},\n _o[HighContrastSelector] = __assign({ color: 'GrayText', borderColor: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _o),\n },\n splitButtonMenuFocused: __assign({}, getFocusStyle(theme, { highContrastStyle: buttonHighContrastFocus, inset: 2 })),\n };\n return concatStyleSets(splitButtonStyles, customStyles);\n});\n//# sourceMappingURL=SplitButton.styles.js.map","import { __spreadArray } 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 = __spreadArray([], 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","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 { __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","/**\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 { 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, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { CalloutContent } from './CalloutContent';\nimport { Layer } from '../../Layer';\nexport var Callout = React.forwardRef(function (_a, forwardedRef) {\n var layerProps = _a.layerProps, doNotLayer = _a.doNotLayer, rest = __rest(_a, [\"layerProps\", \"doNotLayer\"]);\n var content = React.createElement(CalloutContent, __assign({}, rest, { doNotLayer: doNotLayer, ref: forwardedRef }));\n return doNotLayer ? content : React.createElement(Layer, __assign({}, layerProps), content);\n});\nCallout.displayName = 'Callout';\n//# sourceMappingURL=Callout.js.map","var _a;\nimport { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { css, divProperties, elementContains, focusFirstChild, getNativeProps, on, shallowCompare, getPropsWithDefaults, } from '../../Utilities';\nimport { positionCallout, RectangleEdge, positionCard, getBoundsFromTargetWindow } from '../../Positioning';\nimport { Popup } from '../../Popup';\nimport { classNamesFunction } from '../../Utilities';\nimport { AnimationClassNames } from '../../Styling';\nimport { useMergedRefs, useAsync, useConst, useTarget, useOnEvent } from '@fluentui/react-hooks';\nvar COMPONENT_NAME = 'CalloutContentBase';\nvar ANIMATIONS = (_a = {},\n _a[RectangleEdge.top] = AnimationClassNames.slideUpIn10,\n _a[RectangleEdge.bottom] = AnimationClassNames.slideDownIn10,\n _a[RectangleEdge.left] = AnimationClassNames.slideLeftIn10,\n _a[RectangleEdge.right] = AnimationClassNames.slideRightIn10,\n _a);\nvar BEAK_ORIGIN_POSITION = { top: 0, left: 0 };\n// Microsoft Edge will overwrite inline styles if there is an animation pertaining to that style.\n// To help ensure that edge will respect the offscreen style opacity\n// filter needs to be added as an additional way to set opacity.\n// Also set pointer-events: none so that the callout will not occlude the element it is\n// going to be positioned against\nvar OFF_SCREEN_STYLE = {\n opacity: 0,\n filter: 'opacity(0)',\n pointerEvents: 'none',\n};\n// role and role description go hand-in-hand. Both would be included by spreading getNativeProps for a basic element\n// This constant array can be used to filter these out of native props spread on callout root and apply them together on\n// calloutMain (the Popup component within the callout)\nvar ARIA_ROLE_ATTRIBUTES = ['role', 'aria-roledescription'];\nvar DEFAULT_PROPS = {\n preventDismissOnLostFocus: false,\n preventDismissOnScroll: false,\n preventDismissOnResize: false,\n isBeakVisible: true,\n beakWidth: 16,\n gapSpace: 0,\n minPagePadding: 8,\n directionalHint: DirectionalHint.bottomAutoEdge,\n};\nvar getClassNames = classNamesFunction({\n disableCaching: true,\n});\n/**\n * (Hook) to return a function to lazily fetch the bounds of the target element for the callout.\n */\nfunction useBounds(_a, targetRef, targetWindow) {\n var bounds = _a.bounds, _b = _a.minPagePadding, minPagePadding = _b === void 0 ? DEFAULT_PROPS.minPagePadding : _b, target = _a.target;\n var _c = React.useState(false), targetWindowResized = _c[0], setTargetWindowResized = _c[1];\n var cachedBounds = React.useRef();\n var getBounds = React.useCallback(function () {\n if (!cachedBounds.current || targetWindowResized) {\n var currentBounds = typeof bounds === 'function' ? (targetWindow ? bounds(target, targetWindow) : undefined) : bounds;\n if (!currentBounds && targetWindow) {\n currentBounds = getBoundsFromTargetWindow(targetRef.current, targetWindow);\n currentBounds = {\n top: currentBounds.top + minPagePadding,\n left: currentBounds.left + minPagePadding,\n right: currentBounds.right - minPagePadding,\n bottom: currentBounds.bottom - minPagePadding,\n width: currentBounds.width - minPagePadding * 2,\n height: currentBounds.height - minPagePadding * 2,\n };\n }\n cachedBounds.current = currentBounds;\n targetWindowResized && setTargetWindowResized(false);\n }\n return cachedBounds.current;\n }, [bounds, minPagePadding, target, targetRef, targetWindow, targetWindowResized]);\n var async = useAsync();\n useOnEvent(targetWindow, 'resize', async.debounce(function () {\n setTargetWindowResized(true);\n }, 500, { leading: true }));\n return getBounds;\n}\n/**\n * (Hook) to return the maximum available height for the Callout to render into.\n */\nfunction useMaxHeight(_a, getBounds, positions) {\n var _b;\n var calloutMaxHeight = _a.calloutMaxHeight, finalHeight = _a.finalHeight, directionalHint = _a.directionalHint, directionalHintFixed = _a.directionalHintFixed, hidden = _a.hidden;\n var _c = React.useState(), maxHeight = _c[0], setMaxHeight = _c[1];\n var _d = (_b = positions === null || positions === void 0 ? void 0 : positions.elementPosition) !== null && _b !== void 0 ? _b : {}, top = _d.top, bottom = _d.bottom;\n React.useEffect(function () {\n var _a;\n var _b = (_a = getBounds()) !== null && _a !== void 0 ? _a : {}, topBounds = _b.top, bottomBounds = _b.bottom;\n if (!calloutMaxHeight && !hidden) {\n if (typeof top === 'number' && bottomBounds) {\n setMaxHeight(bottomBounds - top);\n }\n else if (typeof bottom === 'number' && typeof topBounds === 'number' && bottomBounds) {\n setMaxHeight(bottomBounds - topBounds - bottom);\n }\n }\n else if (calloutMaxHeight) {\n setMaxHeight(calloutMaxHeight);\n }\n else {\n setMaxHeight(undefined);\n }\n }, [bottom, calloutMaxHeight, finalHeight, directionalHint, directionalHintFixed, getBounds, hidden, positions, top]);\n return maxHeight;\n}\n/**\n * (Hook) to find the current position of Callout. If Callout is resized then a new position is calculated.\n */\nfunction usePositions(props, hostElement, calloutElement, targetRef, getBounds) {\n var _a = React.useState(), positions = _a[0], setPositions = _a[1];\n var positionAttempts = React.useRef(0);\n var previousTarget = React.useRef();\n var async = useAsync();\n var hidden = props.hidden, target = props.target, finalHeight = props.finalHeight, calloutMaxHeight = props.calloutMaxHeight, onPositioned = props.onPositioned, directionalHint = props.directionalHint;\n React.useEffect(function () {\n if (!hidden) {\n var timerId_1 = async.requestAnimationFrame(function () {\n var _a, _b;\n if (hostElement.current && calloutElement) {\n var currentProps = __assign(__assign({}, props), { target: targetRef.current, bounds: getBounds() });\n // duplicate calloutElement & remove useMaxHeight's maxHeight for position calc\n var dupeCalloutElement = calloutElement.cloneNode(true);\n dupeCalloutElement.style.maxHeight = calloutMaxHeight ? \"\" + calloutMaxHeight : '';\n dupeCalloutElement.style.visibility = 'hidden';\n (_a = calloutElement.parentElement) === null || _a === void 0 ? void 0 : _a.appendChild(dupeCalloutElement);\n var previousPositions = previousTarget.current === target ? positions : undefined;\n // If there is a finalHeight given then we assume that the user knows and will handle\n // additional positioning adjustments so we should call positionCard\n var newPositions = finalHeight\n ? positionCard(currentProps, hostElement.current, dupeCalloutElement, previousPositions)\n : positionCallout(currentProps, hostElement.current, dupeCalloutElement, previousPositions);\n // clean up duplicate calloutElement\n (_b = calloutElement.parentElement) === null || _b === void 0 ? void 0 : _b.removeChild(dupeCalloutElement);\n // Set the new position only when the positions do not exist or one of the new callout positions\n // is 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 callout more than a few times, if it is then the content is likely resizing\n // and we should stop trying to reposition to prevent a stack overflow.\n positionAttempts.current++;\n setPositions(newPositions);\n }\n else if (positionAttempts.current > 0) {\n // Only call the onPositioned callback if the callout has been re-positioned at least once.\n positionAttempts.current = 0;\n onPositioned === null || onPositioned === void 0 ? void 0 : onPositioned(positions);\n }\n }\n }, calloutElement);\n previousTarget.current = target;\n return function () {\n async.cancelAnimationFrame(timerId_1);\n previousTarget.current = undefined;\n };\n }\n else {\n // When the callout is hidden, clear position state so that it is not accidentally used next render.\n setPositions(undefined);\n positionAttempts.current = 0;\n }\n }, [\n hidden,\n directionalHint,\n async,\n calloutElement,\n calloutMaxHeight,\n hostElement,\n targetRef,\n finalHeight,\n getBounds,\n onPositioned,\n positions,\n props,\n target,\n ]);\n return positions;\n}\n/**\n * (Hook) to set up behavior to automatically focus the callout when it appears, if indicated by props.\n */\nfunction useAutoFocus(_a, positions, calloutElement) {\n var hidden = _a.hidden, setInitialFocus = _a.setInitialFocus;\n var async = useAsync();\n var hasPositions = !!positions;\n React.useEffect(function () {\n if (!hidden && setInitialFocus && hasPositions && calloutElement) {\n var timerId_2 = async.requestAnimationFrame(function () { return focusFirstChild(calloutElement); }, calloutElement);\n return function () { return async.cancelAnimationFrame(timerId_2); };\n }\n }, [hidden, hasPositions, async, calloutElement, setInitialFocus]);\n}\n/**\n * (Hook) to set up various handlers to dismiss the popup when it loses focus or the window scrolls or similar cases.\n */\nfunction useDismissHandlers(_a, positions, hostElement, targetRef, targetWindow) {\n var hidden = _a.hidden, onDismiss = _a.onDismiss, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnScroll = _a.preventDismissOnScroll, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnResize = _a.preventDismissOnResize, \n // eslint-disable-next-line deprecation/deprecation\n preventDismissOnLostFocus = _a.preventDismissOnLostFocus, dismissOnTargetClick = _a.dismissOnTargetClick, shouldDismissOnWindowFocus = _a.shouldDismissOnWindowFocus, preventDismissOnEvent = _a.preventDismissOnEvent;\n var isMouseDownOnPopup = React.useRef(false);\n var async = useAsync();\n var mouseDownHandlers = useConst([\n function () {\n isMouseDownOnPopup.current = true;\n },\n function () {\n isMouseDownOnPopup.current = false;\n },\n ]);\n var positionsExists = !!positions;\n React.useEffect(function () {\n var dismissOnScroll = function (ev) {\n if (positionsExists && !preventDismissOnScroll) {\n dismissOnClickOrScroll(ev);\n }\n };\n var dismissOnResize = function (ev) {\n if (!preventDismissOnResize && !(preventDismissOnEvent && preventDismissOnEvent(ev))) {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n var dismissOnLostFocus = function (ev) {\n if (!preventDismissOnLostFocus) {\n dismissOnClickOrScroll(ev);\n }\n };\n var dismissOnClickOrScroll = function (ev) {\n var target = ev.target;\n var isEventTargetOutsideCallout = hostElement.current && !elementContains(hostElement.current, target);\n // If mouse is pressed down on callout but moved outside then released, don't dismiss the callout.\n if (isEventTargetOutsideCallout && isMouseDownOnPopup.current) {\n isMouseDownOnPopup.current = false;\n return;\n }\n if ((!targetRef.current && isEventTargetOutsideCallout) ||\n (ev.target !== targetWindow &&\n isEventTargetOutsideCallout &&\n (!targetRef.current ||\n 'stopPropagation' in targetRef.current ||\n dismissOnTargetClick ||\n (target !== targetRef.current && !elementContains(targetRef.current, target))))) {\n if (preventDismissOnEvent && preventDismissOnEvent(ev)) {\n return;\n }\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n var dismissOnTargetWindowBlur = function (ev) {\n // Do nothing\n if (!shouldDismissOnWindowFocus) {\n return;\n }\n if (((preventDismissOnEvent && !preventDismissOnEvent(ev)) ||\n (!preventDismissOnEvent && !preventDismissOnLostFocus)) &&\n !(targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.hasFocus()) &&\n ev.relatedTarget === null) {\n onDismiss === null || onDismiss === void 0 ? void 0 : onDismiss(ev);\n }\n };\n // This is added so the callout will dismiss when the window is scrolled\n // but not when something inside the callout 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 callout.\n var disposablesPromise = new Promise(function (resolve) {\n async.setTimeout(function () {\n if (!hidden && targetWindow) {\n var disposables_1 = [\n on(targetWindow, 'scroll', dismissOnScroll, true),\n on(targetWindow, 'resize', dismissOnResize, true),\n on(targetWindow.document.documentElement, 'focus', dismissOnLostFocus, true),\n on(targetWindow.document.documentElement, 'click', dismissOnLostFocus, true),\n on(targetWindow, 'blur', dismissOnTargetWindowBlur, true),\n ];\n resolve(function () {\n disposables_1.forEach(function (dispose) { return dispose(); });\n });\n }\n }, 0);\n });\n return function () {\n disposablesPromise.then(function (dispose) { return dispose(); });\n };\n }, [\n hidden,\n async,\n hostElement,\n targetRef,\n targetWindow,\n onDismiss,\n shouldDismissOnWindowFocus,\n dismissOnTargetClick,\n preventDismissOnLostFocus,\n preventDismissOnResize,\n preventDismissOnScroll,\n positionsExists,\n preventDismissOnEvent,\n ]);\n return mouseDownHandlers;\n}\nexport var CalloutContentBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var styles = props.styles, style = props.style, ariaLabel = props.ariaLabel, ariaDescribedBy = props.ariaDescribedBy, ariaLabelledBy = props.ariaLabelledBy, className = props.className, isBeakVisible = props.isBeakVisible, children = props.children, beakWidth = props.beakWidth, calloutWidth = props.calloutWidth, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer, finalHeight = props.finalHeight, _a = props.hideOverflow, hideOverflow = _a === void 0 ? !!finalHeight : _a, backgroundColor = props.backgroundColor, calloutMaxHeight = props.calloutMaxHeight, onScroll = props.onScroll, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.shouldRestoreFocus, \n // eslint-disable-next-line deprecation/deprecation\n shouldRestoreFocus = _b === void 0 ? true : _b, target = props.target, hidden = props.hidden, onLayerMounted = props.onLayerMounted;\n var hostElement = React.useRef(null);\n var _c = React.useState(null), calloutElement = _c[0], setCalloutElement = _c[1];\n var calloutCallback = React.useCallback(function (calloutEl) {\n setCalloutElement(calloutEl);\n }, []);\n var rootRef = useMergedRefs(hostElement, forwardedRef);\n var _d = useTarget(props.target, {\n current: calloutElement,\n }), targetRef = _d[0], targetWindow = _d[1];\n var getBounds = useBounds(props, targetRef, targetWindow);\n var positions = usePositions(props, hostElement, calloutElement, targetRef, getBounds);\n var maxHeight = useMaxHeight(props, getBounds, positions);\n var _e = useDismissHandlers(props, positions, hostElement, targetRef, targetWindow), mouseDownOnPopup = _e[0], mouseUpOnPopup = _e[1];\n // do not set both top and bottom css props from positions\n // instead, use maxHeight\n var isForcedInBounds = (positions === null || positions === void 0 ? void 0 : positions.elementPosition.top) && (positions === null || positions === void 0 ? void 0 : positions.elementPosition.bottom);\n var cssPositions = __assign(__assign({}, positions === null || positions === void 0 ? void 0 : positions.elementPosition), { maxHeight: maxHeight });\n if (isForcedInBounds) {\n cssPositions.bottom = undefined;\n }\n useAutoFocus(props, positions, calloutElement);\n React.useEffect(function () {\n if (!hidden) {\n onLayerMounted === null || onLayerMounted === void 0 ? void 0 : onLayerMounted();\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if hidden changes\n }, [hidden]);\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 overflowYHidden = hideOverflow;\n var beakVisible = isBeakVisible && !!target;\n var classNames = getClassNames(styles, {\n theme: props.theme,\n className: className,\n overflowYHidden: overflowYHidden,\n calloutWidth: calloutWidth,\n positions: positions,\n beakWidth: beakWidth,\n backgroundColor: backgroundColor,\n calloutMaxWidth: calloutMaxWidth,\n calloutMinWidth: calloutMinWidth,\n doNotLayer: doNotLayer,\n });\n var overflowStyle = __assign(__assign({ maxHeight: calloutMaxHeight ? calloutMaxHeight : '100%' }, style), (overflowYHidden && { overflowY: 'hidden' }));\n var visibilityStyle = props.hidden ? { visibility: 'hidden' } : undefined;\n // React.CSSProperties does not understand IRawStyle, so the inline animations will need to be cast as any for now.\n return (React.createElement(\"div\", { ref: rootRef, className: classNames.container, style: visibilityStyle },\n React.createElement(\"div\", __assign({}, getNativeProps(props, divProperties, ARIA_ROLE_ATTRIBUTES), { className: css(classNames.root, positions && positions.targetEdge && ANIMATIONS[positions.targetEdge]), style: positions ? __assign({}, cssPositions) : 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: calloutCallback }),\n beakVisible && React.createElement(\"div\", { className: classNames.beak, style: getBeakPosition(positions) }),\n beakVisible && React.createElement(\"div\", { className: classNames.beakCurtain }),\n React.createElement(Popup, __assign({}, getNativeProps(props, ARIA_ROLE_ATTRIBUTES), { ariaDescribedBy: ariaDescribedBy, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, className: classNames.calloutMain, onDismiss: props.onDismiss, onMouseDown: mouseDownOnPopup, onMouseUp: mouseUpOnPopup, onRestoreFocus: props.onRestoreFocus, onScroll: onScroll, shouldRestoreFocus: shouldRestoreFocus, style: overflowStyle }), children))));\n}), function (previousProps, nextProps) {\n if (!nextProps.shouldUpdateWhenHidden && previousProps.hidden && nextProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(previousProps, nextProps);\n});\n/**\n * (Utility) to find and return the current `Callout` Beak position.\n *\n * @param positions\n */\nfunction getBeakPosition(positions) {\n var _a, _b;\n var beakPositionStyle = __assign(__assign({}, (_a = positions === null || positions === void 0 ? void 0 : positions.beakPosition) === null || _a === void 0 ? void 0 : _a.elementPosition), { display: ((_b = positions === null || positions === void 0 ? void 0 : positions.beakPosition) === null || _b === void 0 ? void 0 : _b.hideBeak) ? 'none' : undefined });\n if (!beakPositionStyle.top && !beakPositionStyle.bottom && !beakPositionStyle.left && !beakPositionStyle.right) {\n beakPositionStyle.left = BEAK_ORIGIN_POSITION.left;\n beakPositionStyle.top = BEAK_ORIGIN_POSITION.top;\n }\n return beakPositionStyle;\n}\n/**\n * (Utility) used to compare two different elementPositions to determine whether they are equal.\n *\n * @param prevElementPositions\n * @param newElementPosition\n */\nfunction arePositionsEqual(prevElementPositions, newElementPosition) {\n return (comparePositions(prevElementPositions.elementPosition, newElementPosition.elementPosition) &&\n comparePositions(prevElementPositions.beakPosition.elementPosition, newElementPosition.beakPosition.elementPosition));\n}\n/**\n * (Utility) used in **arePositionsEqual** to compare two different elementPositions.\n *\n * @param prevElementPositions\n * @param newElementPositions\n */\nfunction comparePositions(prevElementPositions, newElementPositions) {\n for (var key in newElementPositions) {\n if (newElementPositions.hasOwnProperty(key)) {\n var oldPositionEdge = prevElementPositions[key];\n var newPositionEdge = newElementPositions[key];\n if (oldPositionEdge !== undefined && newPositionEdge !== undefined) {\n if (oldPositionEdge.toFixed(2) !== newPositionEdge.toFixed(2)) {\n return false;\n }\n }\n else {\n return false;\n }\n }\n }\n return true;\n}\nCalloutContentBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=CalloutContent.base.js.map","import { HighContrastSelector, focusClear, getGlobalClassNames, ZIndexes } from '../../Styling';\nfunction getBeakStyle(beakWidth) {\n return {\n height: beakWidth,\n width: beakWidth,\n };\n}\nvar GlobalClassNames = {\n container: 'ms-Callout-container',\n root: 'ms-Callout',\n beak: 'ms-Callout-beak',\n beakCurtain: 'ms-Callout-beakCurtain',\n calloutMain: 'ms-Callout-main',\n};\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, className = props.className, overflowYHidden = props.overflowYHidden, calloutWidth = props.calloutWidth, beakWidth = props.beakWidth, backgroundColor = props.backgroundColor, calloutMaxWidth = props.calloutMaxWidth, calloutMinWidth = props.calloutMinWidth, doNotLayer = props.doNotLayer;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n container: [\n classNames.container,\n {\n position: 'relative',\n },\n ],\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n position: 'absolute',\n display: 'flex',\n zIndex: doNotLayer ? ZIndexes.Layer : undefined,\n boxSizing: 'border-box',\n borderRadius: effects.roundedCorner2,\n boxShadow: effects.elevation16,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: 'WindowText',\n },\n _a),\n },\n focusClear(),\n className,\n !!calloutWidth && { width: calloutWidth },\n !!calloutMaxWidth && { maxWidth: calloutMaxWidth },\n !!calloutMinWidth && { minWidth: calloutMinWidth },\n ],\n beak: [\n classNames.beak,\n {\n position: 'absolute',\n backgroundColor: semanticColors.menuBackground,\n boxShadow: 'inherit',\n border: 'inherit',\n boxSizing: 'border-box',\n transform: 'rotate(45deg)',\n },\n getBeakStyle(beakWidth),\n backgroundColor && {\n backgroundColor: backgroundColor,\n },\n ],\n beakCurtain: [\n classNames.beakCurtain,\n {\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n backgroundColor: semanticColors.menuBackground,\n borderRadius: effects.roundedCorner2,\n },\n ],\n calloutMain: [\n classNames.calloutMain,\n {\n backgroundColor: semanticColors.menuBackground,\n overflowX: 'hidden',\n overflowY: 'auto',\n position: 'relative',\n width: '100%',\n borderRadius: effects.roundedCorner2,\n },\n overflowYHidden && {\n overflowY: 'hidden',\n },\n backgroundColor && {\n backgroundColor: backgroundColor,\n },\n ],\n };\n};\n//# sourceMappingURL=CalloutContent.styles.js.map","import { styled } from '../../Utilities';\nimport { CalloutContentBase } from './CalloutContent.base';\nimport { getStyles } from './CalloutContent.styles';\nexport var CalloutContent = styled(CalloutContentBase, getStyles, undefined, {\n scope: 'CalloutContent',\n});\n//# sourceMappingURL=CalloutContent.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 { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, shallowCompare } from '../../../Utilities';\nvar ContextualMenuItemWrapper = /** @class */ (function (_super) {\n __extends(ContextualMenuItemWrapper, _super);\n function ContextualMenuItemWrapper(props) {\n var _this = _super.call(this, props) || this;\n _this._onItemMouseEnter = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, ev.currentTarget);\n }\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, ev.currentTarget);\n }\n };\n _this._onItemMouseLeave = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseLeave = _a.onItemMouseLeave;\n if (onItemMouseLeave) {\n onItemMouseLeave(item, ev);\n }\n };\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._onItemMouseMove = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, ev.currentTarget);\n }\n };\n _this._getSubmenuTarget = function () {\n return undefined;\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemWrapper.prototype.shouldComponentUpdate = function (newProps) {\n return !shallowCompare(newProps, this.props);\n };\n return ContextualMenuItemWrapper;\n}(React.Component));\nexport { ContextualMenuItemWrapper };\n//# sourceMappingURL=ContextualMenuItemWrapper.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { anchorProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuAnchor = /** @class */ (function (_super) {\n __extends(ContextualMenuAnchor, _super);\n function ContextualMenuAnchor() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._anchor = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._getSubmenuTarget = function () {\n return _this._anchor.current ? _this._anchor.current : undefined;\n };\n _this._onItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClick = _a.onItemClick;\n if (onItemClick) {\n onItemClick(item, ev);\n }\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n return _this;\n }\n ContextualMenuAnchor.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, expandedMenuItemKey = _a.expandedMenuItemKey, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var anchorRel = item.rel;\n if (item.target && item.target.toLowerCase() === '_blank') {\n anchorRel = anchorRel ? anchorRel : 'nofollow noopener noreferrer'; // Safe default to prevent tabjacking\n }\n var itemHasSubmenu = hasSubmenu(item);\n var nativeProps = getNativeProps(item, anchorProperties);\n var disabled = isItemDisabled(item);\n var itemProps = item.itemProps, ariaDescription = item.ariaDescription;\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, nativeProps['aria-describedby']);\n var additionalItemProperties = {\n 'aria-describedby': ariaDescribedByIds,\n };\n return (React.createElement(\"div\", null,\n React.createElement(KeytipData, { keytipProps: item.keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: disabled }, function (keytipAttributes) { return (React.createElement(\"a\", __assign({}, additionalItemProperties, nativeProps, keytipAttributes, { ref: _this._anchor, href: item.href, target: item.target, rel: anchorRel, className: classNames.root, role: \"menuitem\", \"aria-haspopup\": itemHasSubmenu || undefined, \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, \"aria-disabled\": isItemDisabled(item), \n // eslint-disable-next-line deprecation/deprecation\n style: item.style, onClick: _this._onItemClick, onMouseEnter: _this._onItemMouseEnter, onMouseLeave: _this._onItemMouseLeave, onMouseMove: _this._onItemMouseMove, onKeyDown: itemHasSubmenu ? _this._onItemKeyDown : undefined }),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); })));\n };\n return ContextualMenuAnchor;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuAnchor };\n//# sourceMappingURL=ContextualMenuAnchor.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, KeyCodes, mergeAriaAttributeValues, memoizeFunction, Async, EventGroup, getId, } from '../../../Utilities';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nimport { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames';\nimport { KeytipData } from '../../../KeytipData';\nimport { isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { VerticalDivider } from '../../../Divider';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nvar TouchIdleDelay = 500; /* ms */\nvar ContextualMenuSplitButton = /** @class */ (function (_super) {\n __extends(ContextualMenuSplitButton, _super);\n function ContextualMenuSplitButton(props) {\n var _this = _super.call(this, props) || this;\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._onItemKeyDown = function (ev) {\n var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this._executeItemClick(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n else if (onItemKeyDown) {\n onItemKeyDown(item, ev);\n }\n };\n _this._getSubmenuTarget = function () {\n return _this._splitButton;\n };\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._onItemMouseEnterPrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseEnterIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;\n if (onItemMouseEnter) {\n onItemMouseEnter(item, ev, _this._splitButton);\n }\n };\n _this._onItemMouseMovePrimary = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(__assign(__assign({}, item), { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);\n }\n };\n _this._onItemMouseMoveIcon = function (ev) {\n var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;\n if (onItemMouseMove) {\n onItemMouseMove(item, ev, _this._splitButton);\n }\n };\n _this._onIconItemClick = function (ev) {\n var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;\n if (onItemClickBase) {\n onItemClickBase(item, ev, (_this._splitButton ? _this._splitButton : ev.currentTarget));\n }\n };\n _this._executeItemClick = function (ev) {\n var _a = _this.props, item = _a.item, executeItemClick = _a.executeItemClick, onItemClick = _a.onItemClick;\n if (item.disabled || item.isDisabled) {\n return;\n }\n if (_this._processingTouch && onItemClick) {\n return onItemClick(item, ev);\n }\n if (executeItemClick) {\n executeItemClick(item, ev);\n }\n };\n _this._onTouchStart = function (ev) {\n if (_this._splitButton && !('onpointerdown' in _this._splitButton)) {\n _this._handleTouchAndPointerEvent(ev);\n }\n };\n _this._onPointerDown = function (ev) {\n if (ev.pointerType === 'touch') {\n _this._handleTouchAndPointerEvent(ev);\n ev.preventDefault();\n ev.stopImmediatePropagation();\n }\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n return _this;\n }\n ContextualMenuSplitButton.prototype.componentDidMount = function () {\n if (this._splitButton && 'onpointerdown' in this._splitButton) {\n this._events.on(this._splitButton, 'pointerdown', this._onPointerDown, true);\n }\n };\n ContextualMenuSplitButton.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n ContextualMenuSplitButton.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, onItemMouseLeave = _a.onItemMouseLeave, expandedMenuItemKey = _a.expandedMenuItemKey;\n var itemHasSubmenu = hasSubmenu(item);\n var keytipProps = item.keytipProps;\n if (keytipProps) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n var ariaDescription = item.ariaDescription;\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"div\", { \"data-ktp-target\": keytipAttributes['data-ktp-target'], ref: function (splitButton) { return (_this._splitButton = splitButton); }, role: getMenuItemAriaRole(item), \"aria-label\": item.ariaLabel, className: classNames.splitContainer, \"aria-disabled\": isItemDisabled(item), \"aria-expanded\": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, \"aria-haspopup\": true, \"aria-describedby\": mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? _this._ariaDescriptionId : undefined, keytipAttributes['aria-describedby']), \"aria-checked\": item.isChecked || item.checked, \"aria-posinset\": focusableElementIndex + 1, \"aria-setsize\": totalItemCount, onMouseEnter: _this._onItemMouseEnterPrimary, onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(_this, __assign(__assign({}, item), { subMenuProps: null, items: null })) : undefined, onMouseMove: _this._onItemMouseMovePrimary, onKeyDown: _this._onItemKeyDown, onClick: _this._executeItemClick, onTouchStart: _this._onTouchStart, tabIndex: 0, \"data-is-focusable\": true, \"aria-roledescription\": item['aria-roledescription'] },\n _this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks, hasIcons),\n _this._renderSplitDivider(item),\n _this._renderSplitIconButton(item, classNames, index, keytipAttributes),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n ContextualMenuSplitButton.prototype._renderSplitPrimaryButton = function (item, \n // eslint-disable-next-line deprecation/deprecation\n classNames, index, hasCheckmarks, hasIcons) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemClick = _a.onItemClick;\n var itemProps = {\n key: item.key,\n disabled: isItemDisabled(item) || item.primaryDisabled,\n /* eslint-disable deprecation/deprecation */\n name: item.name,\n text: item.text || item.name,\n secondaryText: item.secondaryText,\n /* eslint-enable deprecation/deprecation */\n className: classNames.splitPrimary,\n canCheck: item.canCheck,\n isChecked: item.isChecked,\n checked: item.checked,\n iconProps: item.iconProps,\n onRenderIcon: item.onRenderIcon,\n data: item.data,\n 'data-is-focusable': false,\n };\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, getNativeProps(itemProps, buttonProperties)),\n React.createElement(ChildrenRenderer, __assign({ \"data-is-focusable\": false, item: itemProps, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._renderSplitDivider = function (item) {\n var getDividerClassNames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;\n return React.createElement(VerticalDivider, { getClassNames: getDividerClassNames });\n };\n ContextualMenuSplitButton.prototype._renderSplitIconButton = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, keytipAttributes) {\n var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemMouseLeave = _a.onItemMouseLeave, onItemMouseDown = _a.onItemMouseDown, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var itemProps = {\n onClick: this._onIconItemClick,\n disabled: isItemDisabled(item),\n className: classNames.splitMenu,\n subMenuProps: item.subMenuProps,\n submenuIconProps: item.submenuIconProps,\n split: true,\n key: item.key,\n };\n var buttonProps = __assign(__assign({}, getNativeProps(itemProps, buttonProperties)), {\n onMouseEnter: this._onItemMouseEnterIcon,\n onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(this, item) : undefined,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMoveIcon,\n 'data-is-focusable': false,\n 'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],\n 'aria-hidden': true,\n });\n var itemComponentProps = item.itemProps;\n return (React.createElement(\"button\", __assign({}, buttonProps),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: itemProps, classNames: classNames, index: index, hasIcons: false, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: this._getSubmenuTarget }, itemComponentProps))));\n };\n ContextualMenuSplitButton.prototype._handleTouchAndPointerEvent = function (ev) {\n var _this = this;\n var onTap = this.props.onTap;\n if (onTap) {\n onTap(ev);\n }\n // If we already have an existing timeout from a previous touch/pointer event\n // cancel that timeout so we can set a new one.\n if (this._lastTouchTimeoutId) {\n this._async.clearTimeout(this._lastTouchTimeoutId);\n this._lastTouchTimeoutId = undefined;\n }\n this._processingTouch = true;\n this._lastTouchTimeoutId = this._async.setTimeout(function () {\n _this._processingTouch = false;\n _this._lastTouchTimeoutId = undefined;\n }, TouchIdleDelay);\n };\n return ContextualMenuSplitButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuSplitButton };\n//# sourceMappingURL=ContextualMenuSplitButton.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, getNativeProps, memoizeFunction, getId, mergeAriaAttributeValues } from '../../../Utilities';\nimport { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';\nimport { KeytipData } from '../../../KeytipData';\nimport { getIsChecked, isItemDisabled, hasSubmenu, getMenuItemAriaRole } from '../../../utilities/contextualMenu/index';\nimport { ContextualMenuItem } from '../ContextualMenuItem';\nvar ContextualMenuButton = /** @class */ (function (_super) {\n __extends(ContextualMenuButton, _super);\n function ContextualMenuButton() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._btn = React.createRef();\n _this._getMemoizedMenuButtonKeytipProps = memoizeFunction(function (keytipProps) {\n return __assign(__assign({}, keytipProps), { hasMenu: true });\n });\n _this._renderAriaDescription = function (ariaDescription, className) {\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan\n return ariaDescription ? (React.createElement(\"span\", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;\n };\n _this._getSubmenuTarget = function () {\n return _this._btn.current ? _this._btn.current : undefined;\n };\n return _this;\n }\n ContextualMenuButton.prototype.render = function () {\n var _this = this;\n var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, expandedMenuItemKey = _a.expandedMenuItemKey, onItemMouseDown = _a.onItemMouseDown, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;\n var isChecked = getIsChecked(item);\n var canCheck = isChecked !== null;\n var defaultRole = getMenuItemAriaRole(item);\n var itemHasSubmenu = hasSubmenu(item);\n var itemProps = item.itemProps, ariaLabel = item.ariaLabel, ariaDescription = item.ariaDescription;\n var buttonNativeProperties = getNativeProps(item, buttonProperties);\n // Do not add the disabled attribute to the button so that it is focusable\n delete buttonNativeProperties.disabled;\n var itemRole = item.role || defaultRole;\n // Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with\n // the description in it to be added to ariaDescribedBy\n if (ariaDescription) {\n this._ariaDescriptionId = getId();\n }\n var ariaDescribedByIds = mergeAriaAttributeValues(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, buttonNativeProperties['aria-describedby']);\n var itemButtonProperties = {\n className: classNames.root,\n onClick: this._onItemClick,\n onKeyDown: itemHasSubmenu ? this._onItemKeyDown : undefined,\n onMouseEnter: this._onItemMouseEnter,\n onMouseLeave: this._onItemMouseLeave,\n onMouseDown: function (ev) {\n return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;\n },\n onMouseMove: this._onItemMouseMove,\n href: item.href,\n title: item.title,\n 'aria-label': ariaLabel,\n 'aria-describedby': ariaDescribedByIds,\n 'aria-haspopup': itemHasSubmenu || undefined,\n 'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,\n 'aria-posinset': focusableElementIndex + 1,\n 'aria-setsize': totalItemCount,\n 'aria-disabled': isItemDisabled(item),\n 'aria-checked': (itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio') && canCheck ? !!isChecked : undefined,\n 'aria-selected': itemRole === 'menuitem' && canCheck ? !!isChecked : undefined,\n role: itemRole,\n // eslint-disable-next-line deprecation/deprecation\n style: item.style,\n };\n var keytipProps = item.keytipProps;\n if (keytipProps && itemHasSubmenu) {\n keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);\n }\n return (React.createElement(KeytipData, { keytipProps: keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement(\"button\", __assign({ ref: _this._btn }, buttonNativeProperties, itemButtonProperties, keytipAttributes),\n React.createElement(ChildrenRenderer, __assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),\n _this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));\n };\n return ContextualMenuButton;\n}(ContextualMenuItemWrapper));\nexport { ContextualMenuButton };\n//# sourceMappingURL=ContextualMenuButton.js.map","import * as React from 'react';\nexport var MenuContext = React.createContext({});\nexport var useMenuContext = function () {\n return React.useContext(MenuContext);\n};\n//# sourceMappingURL=MenuContext.js.map","import { __assign, __rest, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { ContextualMenuItemType } from './ContextualMenu.types';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { FocusZone, FocusZoneDirection, FocusZoneTabbableElements } from '../../FocusZone';\nimport { divProperties, getNativeProps, shallowCompare, assign, classNamesFunction, css, getFirstFocusable, getLastFocusable, getRTL, KeyCodes, shouldWrapFocus, isIOS, isMac, memoizeFunction, getPropsWithDefaults, getDocument, } from '../../Utilities';\nimport { hasSubmenu, getIsChecked, isItemDisabled } from '../../utilities/contextualMenu/index';\nimport { Callout } from '../../Callout';\nimport { ContextualMenuItem } from './ContextualMenuItem';\nimport { ContextualMenuSplitButton, ContextualMenuButton, ContextualMenuAnchor, } from './ContextualMenuItemWrapper/index';\nimport { concatStyleSetsWithProps } from '../../Styling';\nimport { getItemStyles } from './ContextualMenu.classNames';\nimport { useTarget, usePrevious, useAsync, useWarnings, useId } from '@fluentui/react-hooks';\nimport { useResponsiveMode, ResponsiveMode } from '../../ResponsiveMode';\nimport { MenuContext } from '../../utilities/MenuContext/index';\nvar getClassNames = classNamesFunction();\nvar getContextualMenuItemClassNames = classNamesFunction();\n// The default ContextualMenu properties have no items and beak, the default submenu direction is right and top.\nvar DEFAULT_PROPS = {\n items: [],\n shouldFocusOnMount: true,\n gapSpace: 0,\n directionalHint: DirectionalHint.bottomAutoEdge,\n beakWidth: 16,\n};\nexport function getSubmenuItems(item) {\n return item.subMenuProps ? item.subMenuProps.items : item.items;\n}\n/**\n * Returns true if a list of menu items can contain a checkbox\n */\nexport function canAnyMenuItemsCheck(items) {\n return items.some(function (item) {\n if (item.canCheck) {\n return true;\n }\n // If the item is a section, check if any of the items in the section can check.\n if (item.sectionProps && item.sectionProps.items.some(function (submenuItem) { return submenuItem.canCheck === true; })) {\n return true;\n }\n return false;\n });\n}\nvar NavigationIdleDelay = 250; /* ms */\nvar COMPONENT_NAME = 'ContextualMenu';\nvar _getMenuItemStylesFunction = memoizeFunction(function () {\n var styles = [];\n for (var _i = 0; _i < arguments.length; _i++) {\n styles[_i] = arguments[_i];\n }\n return function (styleProps) {\n return concatStyleSetsWithProps.apply(void 0, __spreadArrays([styleProps, getItemStyles], styles));\n };\n});\n//#region Custom hooks\nfunction useVisibility(props, targetWindow) {\n var _a = props.hidden, hidden = _a === void 0 ? false : _a, onMenuDismissed = props.onMenuDismissed, onMenuOpened = props.onMenuOpened;\n var previousHidden = usePrevious(hidden);\n var onMenuOpenedRef = React.useRef(onMenuOpened);\n var onMenuClosedRef = React.useRef(onMenuDismissed);\n var propsRef = React.useRef(props);\n onMenuOpenedRef.current = onMenuOpened;\n onMenuClosedRef.current = onMenuDismissed;\n propsRef.current = props;\n React.useEffect(function () {\n var _a, _b;\n // Don't issue dismissed callbacks on initial mount\n if (hidden && previousHidden === false) {\n (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current);\n }\n else if (!hidden && previousHidden !== false) {\n (_b = onMenuOpenedRef.current) === null || _b === void 0 ? void 0 : _b.call(onMenuOpenedRef, propsRef.current);\n }\n }, [hidden, previousHidden]);\n // Issue onDismissedCallback on unmount\n React.useEffect(function () { return function () { var _a; return (_a = onMenuClosedRef.current) === null || _a === void 0 ? void 0 : _a.call(onMenuClosedRef, propsRef.current); }; }, []);\n}\nfunction useSubMenuState(_a, dismiss) {\n var hidden = _a.hidden, items = _a.items, theme = _a.theme, className = _a.className, id = _a.id;\n var _b = React.useState(), expandedMenuItemKey = _b[0], setExpandedMenuItemKey = _b[1];\n var _c = React.useState(), submenuTarget = _c[0], setSubmenuTarget = _c[1];\n /** True if the menu was expanded by mouse click OR hover (as opposed to by keyboard) */\n var _d = React.useState(), expandedByMouseClick = _d[0], setExpandedByMouseClick = _d[1];\n var subMenuId = useId(COMPONENT_NAME, id);\n var closeSubMenu = React.useCallback(function () {\n setExpandedByMouseClick(undefined);\n setExpandedMenuItemKey(undefined);\n setSubmenuTarget(undefined);\n }, []);\n var openSubMenu = React.useCallback(function (_a, target, openedByMouseClick) {\n var submenuItemKey = _a.key;\n if (expandedMenuItemKey === submenuItemKey) {\n return;\n }\n target.focus();\n setExpandedByMouseClick(openedByMouseClick);\n setExpandedMenuItemKey(submenuItemKey);\n setSubmenuTarget(target);\n }, [expandedMenuItemKey]);\n React.useEffect(function () {\n if (hidden) {\n closeSubMenu();\n }\n }, [hidden, closeSubMenu]);\n var onSubMenuDismiss = useOnSubmenuDismiss(dismiss, closeSubMenu);\n var getSubmenuProps = function () {\n var item = findItemByKeyFromItems(expandedMenuItemKey, items);\n var submenuProps = null;\n if (item) {\n submenuProps = {\n items: getSubmenuItems(item),\n target: submenuTarget,\n onDismiss: onSubMenuDismiss,\n isSubMenu: true,\n id: subMenuId,\n shouldFocusOnMount: true,\n shouldFocusOnContainer: expandedByMouseClick,\n directionalHint: getRTL(theme) ? DirectionalHint.leftTopEdge : DirectionalHint.rightTopEdge,\n className: className,\n gapSpace: 0,\n isBeakVisible: false,\n };\n if (item.subMenuProps) {\n assign(submenuProps, item.subMenuProps);\n }\n }\n return submenuProps;\n };\n return [expandedMenuItemKey, openSubMenu, getSubmenuProps, onSubMenuDismiss];\n}\nfunction useShouldUpdateFocusOnMouseMove(_a) {\n var delayUpdateFocusOnHover = _a.delayUpdateFocusOnHover, hidden = _a.hidden;\n var shouldUpdateFocusOnMouseEvent = React.useRef(!delayUpdateFocusOnHover);\n var gotMouseMove = React.useRef(false);\n React.useEffect(function () {\n shouldUpdateFocusOnMouseEvent.current = !delayUpdateFocusOnHover;\n gotMouseMove.current = hidden ? false : !delayUpdateFocusOnHover && gotMouseMove.current;\n }, [delayUpdateFocusOnHover, hidden]);\n var onMenuFocusCapture = React.useCallback(function () {\n if (delayUpdateFocusOnHover) {\n shouldUpdateFocusOnMouseEvent.current = true;\n }\n }, [delayUpdateFocusOnHover]);\n return [shouldUpdateFocusOnMouseEvent, gotMouseMove, onMenuFocusCapture];\n}\nfunction usePreviousActiveElement(_a, targetWindow) {\n var hidden = _a.hidden, onRestoreFocus = _a.onRestoreFocus;\n var previousActiveElement = React.useRef();\n var tryFocusPreviousActiveElement = React.useCallback(function (options) {\n var _a, _b;\n if (onRestoreFocus) {\n onRestoreFocus(options);\n }\n else if (options === null || options === void 0 ? void 0 : options.documentContainsFocus) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n (_b = (_a = previousActiveElement.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n }\n }, [onRestoreFocus]);\n // eslint-disable-next-line no-restricted-properties\n React.useLayoutEffect(function () {\n var _a;\n if (!hidden) {\n previousActiveElement.current = targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement;\n }\n else if (previousActiveElement.current) {\n tryFocusPreviousActiveElement({\n originalElement: previousActiveElement.current,\n containsFocus: true,\n documentContainsFocus: ((_a = getDocument()) === null || _a === void 0 ? void 0 : _a.hasFocus()) || false,\n });\n previousActiveElement.current = undefined;\n }\n }, [hidden, targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement, tryFocusPreviousActiveElement]);\n return [tryFocusPreviousActiveElement];\n}\nfunction useKeyHandlers(_a, dismiss, hostElement, openSubMenu) {\n var theme = _a.theme, isSubMenu = _a.isSubMenu, _b = _a.focusZoneProps, _c = _b === void 0 ? {} : _b, checkForNoWrap = _c.checkForNoWrap, _d = _c.direction, focusZoneDirection = _d === void 0 ? FocusZoneDirection.vertical : _d;\n /** True if the most recent keydown event was for alt (option) or meta (command). */\n var lastKeyDownWasAltOrMeta = React.useRef();\n /**\n * Calls `shouldHandleKey` to determine whether the keyboard event should be handled;\n * if so, stops event propagation and dismisses menu(s).\n * @param ev - The keyboard event.\n * @param shouldHandleKey - Returns whether we should handle this keyboard event.\n * @param dismissAllMenus - If true, dismiss all menus. Otherwise, dismiss only the current menu.\n * Only does anything if `shouldHandleKey` returns true.\n * @returns Whether the event was handled.\n */\n var keyHandler = function (ev, shouldHandleKey, dismissAllMenus) {\n var handled = false;\n if (shouldHandleKey(ev)) {\n dismiss(ev, dismissAllMenus);\n ev.preventDefault();\n ev.stopPropagation();\n handled = true;\n }\n return handled;\n };\n /**\n * Checks if the submenu should be closed\n */\n var shouldCloseSubMenu = function (ev) {\n var submenuCloseKey = getRTL(theme) ? KeyCodes.right : KeyCodes.left;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== submenuCloseKey || !isSubMenu) {\n return false;\n }\n return !!(focusZoneDirection === FocusZoneDirection.vertical ||\n (checkForNoWrap && !shouldWrapFocus(ev.target, 'data-no-horizontal-wrap')));\n };\n var shouldHandleKeyDown = function (ev) {\n return (\n // eslint-disable-next-line deprecation/deprecation\n ev.which === KeyCodes.escape ||\n shouldCloseSubMenu(ev) ||\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.up && (ev.altKey || ev.metaKey)));\n };\n var onKeyDown = function (ev) {\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in shouldHandleKeyUp for reasoning.\n lastKeyDownWasAltOrMeta.current = isAltOrMeta(ev);\n // On Mac, pressing escape dismisses all levels of native context menus\n // eslint-disable-next-line deprecation/deprecation\n var dismissAllMenus = ev.which === KeyCodes.escape && (isMac() || isIOS());\n return keyHandler(ev, shouldHandleKeyDown, dismissAllMenus);\n };\n /**\n * We close the menu on key up only if ALL of the following are true:\n * - Most recent key down was alt or meta (command)\n * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to\n * expand/collapse the menu)\n * - We're not on a Mac (or iOS)\n *\n * This is because on Windows, pressing alt moves focus to the application menu bar or similar,\n * closing any open context menus. There is not a similar behavior on Macs.\n */\n var shouldHandleKeyUp = function (ev) {\n var keyPressIsAltOrMetaAlone = lastKeyDownWasAltOrMeta.current && isAltOrMeta(ev);\n lastKeyDownWasAltOrMeta.current = false;\n return !!keyPressIsAltOrMetaAlone && !(isIOS() || isMac());\n };\n var onKeyUp = function (ev) {\n return keyHandler(ev, shouldHandleKeyUp, true /* dismissAllMenus */);\n };\n var onMenuKeyDown = function (ev) {\n // Mark as handled if onKeyDown returns true (for handling collapse cases)\n // or if we are attempting to expand a submenu\n var handled = onKeyDown(ev);\n if (handled || !hostElement.current) {\n return;\n }\n // If we have a modifier key being pressed, we do not want to move focus.\n // Otherwise, handle up and down keys.\n var hasModifier = !!(ev.altKey || ev.metaKey);\n // eslint-disable-next-line deprecation/deprecation\n var isUp = ev.which === KeyCodes.up;\n // eslint-disable-next-line deprecation/deprecation\n var isDown = ev.which === KeyCodes.down;\n if (!hasModifier && (isUp || isDown)) {\n var elementToFocus = isUp\n ? getLastFocusable(hostElement.current, hostElement.current.lastChild, true)\n : getFirstFocusable(hostElement.current, hostElement.current.firstChild, true);\n if (elementToFocus) {\n elementToFocus.focus();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n var onItemKeyDown = function (item, ev) {\n var openKey = getRTL(theme) ? KeyCodes.left : KeyCodes.right;\n if (!item.disabled &&\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === openKey || ev.which === KeyCodes.enter || (ev.which === KeyCodes.down && (ev.altKey || ev.metaKey)))) {\n openSubMenu(item, ev.currentTarget, false);\n ev.preventDefault();\n }\n };\n return [onKeyDown, onKeyUp, onMenuKeyDown, onItemKeyDown];\n}\nfunction useScrollHandler(asyncTracker) {\n var isScrollIdle = React.useRef(true);\n var scrollIdleTimeoutId = React.useRef();\n /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n var onScroll = function () {\n if (!isScrollIdle.current && scrollIdleTimeoutId.current !== undefined) {\n asyncTracker.clearTimeout(scrollIdleTimeoutId.current);\n scrollIdleTimeoutId.current = undefined;\n }\n else {\n isScrollIdle.current = false;\n }\n scrollIdleTimeoutId.current = asyncTracker.setTimeout(function () {\n isScrollIdle.current = true;\n }, NavigationIdleDelay);\n };\n return [onScroll, isScrollIdle];\n}\nfunction useOnSubmenuDismiss(dismiss, closeSubMenu) {\n var isMountedRef = React.useRef(false);\n React.useEffect(function () {\n isMountedRef.current = true;\n return function () {\n isMountedRef.current = false;\n };\n }, []);\n /**\n * This function is called ASYNCHRONOUSLY, and so there is a chance it is called\n * after the component is unmounted. The isMountedRef is added to prevent\n * from calling setState() after unmount. Do NOT copy this pattern in synchronous\n * code.\n */\n var onSubMenuDismiss = function (ev, dismissAll) {\n if (dismissAll) {\n dismiss(ev, dismissAll);\n }\n else if (isMountedRef.current) {\n closeSubMenu();\n }\n };\n return onSubMenuDismiss;\n}\nfunction useSubmenuEnterTimer(_a, asyncTracker) {\n var _b = _a.subMenuHoverDelay, subMenuHoverDelay = _b === void 0 ? NavigationIdleDelay : _b;\n var enterTimerRef = React.useRef(undefined);\n var cancelSubMenuTimer = function () {\n if (enterTimerRef.current !== undefined) {\n asyncTracker.clearTimeout(enterTimerRef.current);\n enterTimerRef.current = undefined;\n }\n };\n var startSubmenuTimer = function (onTimerExpired) {\n enterTimerRef.current = asyncTracker.setTimeout(function () {\n onTimerExpired();\n cancelSubMenuTimer();\n }, subMenuHoverDelay);\n };\n return [cancelSubMenuTimer, startSubmenuTimer, enterTimerRef];\n}\nfunction useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss) {\n var onItemMouseEnterBase = function (item, ev, target) {\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var onItemMouseMoveBase = function (item, ev, target) {\n var targetElement = ev.currentTarget;\n // Always do this check to make sure we record a mouseMove if needed (even if we are timed out)\n if (shouldUpdateFocusOnMouseEvent.current) {\n gotMouseMove.current = true;\n }\n else {\n return;\n }\n if (!isScrollIdle.current ||\n subMenuEntryTimer.current !== undefined ||\n targetElement === (targetWindow === null || targetWindow === void 0 ? void 0 : targetWindow.document.activeElement)) {\n return;\n }\n updateFocusOnMouseEvent(item, ev, target);\n };\n var shouldIgnoreMouseEvent = function () {\n return !isScrollIdle.current || !gotMouseMove.current;\n };\n var onMouseItemLeave = function (item, ev) {\n var _a;\n if (shouldIgnoreMouseEvent()) {\n return;\n }\n cancelSubMenuTimer();\n if (expandedMenuItemKey !== undefined) {\n return;\n }\n /**\n * IE11 focus() method forces parents to scroll to top of element.\n * Edge and IE expose a setActive() function for focusable divs that\n * sets the page focus but does not scroll the parent element.\n */\n if (hostElement.current.setActive) {\n try {\n hostElement.current.setActive();\n }\n catch (e) {\n /* no-op */\n }\n }\n else {\n (_a = hostElement.current) === null || _a === void 0 ? void 0 : _a.focus();\n }\n };\n /**\n * Handles updating focus when mouseEnter or mouseMove fire.\n * As part of updating focus, This function will also update\n * the expand/collapse state accordingly.\n */\n var updateFocusOnMouseEvent = function (item, ev, target) {\n var targetElement = target ? target : ev.currentTarget;\n if (item.key === expandedMenuItemKey) {\n return;\n }\n cancelSubMenuTimer();\n // If the menu is not expanded we can update focus without any delay\n if (expandedMenuItemKey === undefined) {\n targetElement.focus();\n }\n // Delay updating expanding/dismissing the submenu\n // and only set focus if we have not already done so\n if (hasSubmenu(item)) {\n ev.stopPropagation();\n startSubmenuTimer(function () {\n targetElement.focus();\n openSubMenu(item, targetElement, true);\n });\n }\n else {\n startSubmenuTimer(function () {\n onSubMenuDismiss(ev);\n targetElement.focus();\n });\n }\n };\n var onItemClick = function (item, ev) {\n onItemClickBase(item, ev, ev.currentTarget);\n };\n var onItemClickBase = function (item, ev, target) {\n var items = getSubmenuItems(item);\n // Cancel an async menu item hover timeout action from being taken and instead\n // just trigger the click event instead.\n cancelSubMenuTimer();\n if (!hasSubmenu(item) && (!items || !items.length)) {\n // This is an item without a menu. Click it.\n executeItemClick(item, ev);\n }\n else {\n if (item.key !== expandedMenuItemKey) {\n // This has a collapsed sub menu. Expand it.\n openSubMenu(item, target, \n // When Edge + Narrator are used together (regardless of if the button is in a form or not), pressing\n // \"Enter\" fires this method and not _onMenuKeyDown. Checking ev.nativeEvent.detail differentiates\n // between a real click event and a keypress event (detail should be the number of mouse clicks).\n // ...Plot twist! For a real click event in IE 11, detail is always 0 (Edge sets it properly to 1).\n // So we also check the pointerType property, which both Edge and IE set to \"mouse\" for real clicks\n // and \"\" for pressing \"Enter\" with Narrator on.\n ev.nativeEvent.detail !== 0 || ev.nativeEvent.pointerType === 'mouse');\n }\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n var onAnchorClick = function (item, ev) {\n executeItemClick(item, ev);\n ev.stopPropagation();\n };\n var executeItemClick = function (item, ev) {\n if (item.disabled || item.isDisabled) {\n return;\n }\n var shouldDismiss = false;\n if (item.onClick) {\n shouldDismiss = !!item.onClick(ev, item);\n }\n else if (props.onItemClick) {\n shouldDismiss = !!props.onItemClick(ev, item);\n }\n if (shouldDismiss || !ev.defaultPrevented) {\n dismiss(ev, true);\n }\n };\n return [\n onItemMouseEnterBase,\n onItemMouseMoveBase,\n onMouseItemLeave,\n onItemClick,\n onAnchorClick,\n executeItemClick,\n onItemClickBase,\n ];\n}\n//#endregion\nexport var ContextualMenuBase = React.memo(React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var _a;\n var _b = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults), ref = _b.ref, props = __rest(_b, [\"ref\"]);\n var hostElement = React.useRef(null);\n var asyncTracker = useAsync();\n var menuId = useId(COMPONENT_NAME, props.id);\n useWarnings({\n name: COMPONENT_NAME,\n props: props,\n deprecations: {\n getMenuClassNames: 'styles',\n },\n });\n var dismiss = function (ev, dismissAll) { var _a; return (_a = props.onDismiss) === null || _a === void 0 ? void 0 : _a.call(props, ev, dismissAll); };\n var _c = useTarget(props.target, hostElement), targetRef = _c[0], targetWindow = _c[1];\n var tryFocusPreviousActiveElement = usePreviousActiveElement(props, targetWindow)[0];\n var _d = useSubMenuState(props, dismiss), expandedMenuItemKey = _d[0], openSubMenu = _d[1], getSubmenuProps = _d[2], onSubMenuDismiss = _d[3];\n var _e = useShouldUpdateFocusOnMouseMove(props), shouldUpdateFocusOnMouseEvent = _e[0], gotMouseMove = _e[1], onMenuFocusCapture = _e[2];\n var _f = useScrollHandler(asyncTracker), onScroll = _f[0], isScrollIdle = _f[1];\n var _g = useSubmenuEnterTimer(props, asyncTracker), cancelSubMenuTimer = _g[0], startSubmenuTimer = _g[1], subMenuEntryTimer = _g[2];\n var responsiveMode = useResponsiveMode(hostElement, props.responsiveMode);\n useVisibility(props, targetWindow);\n var _h = useKeyHandlers(props, dismiss, hostElement, openSubMenu), onKeyDown = _h[0], onKeyUp = _h[1], onMenuKeyDown = _h[2], onItemKeyDown = _h[3];\n var _j = useMouseHandlers(props, isScrollIdle, subMenuEntryTimer, targetWindow, shouldUpdateFocusOnMouseEvent, gotMouseMove, expandedMenuItemKey, hostElement, startSubmenuTimer, cancelSubMenuTimer, openSubMenu, onSubMenuDismiss, dismiss), onItemMouseEnterBase = _j[0], onItemMouseMoveBase = _j[1], onMouseItemLeave = _j[2], onItemClick = _j[3], onAnchorClick = _j[4], executeItemClick = _j[5], onItemClickBase = _j[6];\n //#region Render helpers\n var onDefaultRenderMenuList = function (menuListProps, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, defaultRender) {\n var indexCorrection = 0;\n var items = menuListProps.items, totalItemCount = menuListProps.totalItemCount, hasCheckmarks = menuListProps.hasCheckmarks, hasIcons = menuListProps.hasIcons;\n return (React.createElement(\"ul\", { className: menuClassNames.list, onKeyDown: onKeyDown, onKeyUp: onKeyUp, role: 'presentation' }, items.map(function (item, index) {\n var menuItem = renderMenuItem(item, index, indexCorrection, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var indexIncrease = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n indexCorrection += indexIncrease;\n }\n return menuItem;\n })));\n };\n var renderFocusZone = function (children, adjustedFocusZoneProps) {\n var _a = props.focusZoneAs, ChildrenRenderer = _a === void 0 ? FocusZone : _a;\n return React.createElement(ChildrenRenderer, __assign({}, adjustedFocusZoneProps), children);\n };\n /**\n * !!!IMPORTANT!!! Avoid mutating `item: IContextualMenuItem` argument. It will\n * cause the menu items to always re-render because the component update is based on shallow comparison.\n */\n var renderMenuItem = function (item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var _a;\n var renderedItems = [];\n var iconProps = item.iconProps || { iconName: 'None' };\n var getItemClassNames = item.getItemClassNames, // eslint-disable-line deprecation/deprecation\n itemProps = item.itemProps;\n var styles = itemProps ? itemProps.styles : undefined;\n // We only send a dividerClassName when the item to be rendered is a divider.\n // For all other cases, the default divider style is used.\n var dividerClassName = item.itemType === ContextualMenuItemType.Divider ? item.className : undefined;\n var subMenuIconClassName = item.submenuIconProps ? item.submenuIconProps.className : '';\n // eslint-disable-next-line deprecation/deprecation\n var itemClassNames;\n // IContextualMenuItem#getItemClassNames for backwards compatibility\n // otherwise uses mergeStyles for class names.\n if (getItemClassNames) {\n itemClassNames = getItemClassNames(props.theme, isItemDisabled(item), expandedMenuItemKey === item.key, !!getIsChecked(item), !!item.href, iconProps.iconName !== 'None', item.className, dividerClassName, iconProps.className, subMenuIconClassName, item.primaryDisabled);\n }\n else {\n var itemStyleProps = {\n theme: props.theme,\n disabled: isItemDisabled(item),\n expanded: expandedMenuItemKey === item.key,\n checked: !!getIsChecked(item),\n isAnchorLink: !!item.href,\n knownIcon: iconProps.iconName !== 'None',\n itemClassName: item.className,\n dividerClassName: dividerClassName,\n iconClassName: iconProps.className,\n subMenuClassName: subMenuIconClassName,\n primaryDisabled: item.primaryDisabled,\n };\n // We need to generate default styles then override if styles are provided\n // since the ContextualMenu currently handles item classNames.\n itemClassNames = getContextualMenuItemClassNames(_getMenuItemStylesFunction((_a = menuClassNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.menuItem, styles), itemStyleProps);\n }\n // eslint-disable-next-line deprecation/deprecation\n if (item.text === '-' || item.name === '-') {\n item.itemType = ContextualMenuItemType.Divider;\n }\n switch (item.itemType) {\n case ContextualMenuItemType.Divider:\n renderedItems.push(renderSeparator(index, itemClassNames));\n break;\n case ContextualMenuItemType.Header:\n renderedItems.push(renderSeparator(index, itemClassNames));\n var headerItem = renderHeaderMenuItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n renderedItems.push(renderListItem(headerItem, item.key || index, itemClassNames, item.title));\n break;\n case ContextualMenuItemType.Section:\n renderedItems.push(renderSectionItem(item, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons));\n break;\n default:\n var menuItem = renderNormalItem(item, itemClassNames, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons);\n renderedItems.push(renderListItem(menuItem, item.key || index, itemClassNames, item.title));\n break;\n }\n // Since multiple nodes *could* be rendered, wrap them all in a fragment with this item's key.\n // This ensures the reconciler handles multi-item output per-node correctly and does not re-mount content.\n return React.createElement(React.Fragment, { key: item.key }, renderedItems);\n };\n var defaultMenuItemRenderer = function (item, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames) {\n var index = item.index, focusableElementIndex = item.focusableElementIndex, totalItemCount = item.totalItemCount, hasCheckmarks = item.hasCheckmarks, hasIcons = item.hasIcons;\n return renderMenuItem(item, index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons, menuClassNames);\n };\n var renderSectionItem = function (sectionItem, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var sectionProps = sectionItem.sectionProps;\n if (!sectionProps) {\n return;\n }\n var headerItem;\n var groupProps;\n if (sectionProps.title) {\n var headerContextualMenuItem = undefined;\n var ariaLabelledby = '';\n if (typeof sectionProps.title === 'string') {\n // Since title is a user-facing string, it needs to be stripped\n // of whitespace in order to build a valid element ID\n var id_1 = menuId + sectionProps.title.replace(/\\s/g, '');\n headerContextualMenuItem = {\n key: \"section-\" + sectionProps.title + \"-title\",\n itemType: ContextualMenuItemType.Header,\n text: sectionProps.title,\n id: id_1,\n };\n ariaLabelledby = id_1;\n }\n else {\n var id_2 = sectionProps.title.id || menuId + sectionProps.title.key.replace(/\\s/g, '');\n headerContextualMenuItem = __assign(__assign({}, sectionProps.title), { id: id_2 });\n ariaLabelledby = id_2;\n }\n if (headerContextualMenuItem) {\n groupProps = {\n role: 'group',\n 'aria-labelledby': ariaLabelledby,\n };\n headerItem = renderHeaderMenuItem(headerContextualMenuItem, itemClassNames, menuClassNames, index, hasCheckmarks, hasIcons);\n }\n }\n if (sectionProps.items && sectionProps.items.length > 0) {\n return (React.createElement(\"li\", { role: \"presentation\", key: sectionProps.key || sectionItem.key || \"section-\" + index },\n React.createElement(\"div\", __assign({}, groupProps),\n React.createElement(\"ul\", { className: menuClassNames.list, role: \"presentation\" },\n sectionProps.topDivider && renderSeparator(index, itemClassNames, true, true),\n headerItem && renderListItem(headerItem, sectionItem.key || index, itemClassNames, sectionItem.title),\n sectionProps.items.map(function (contextualMenuItem, itemsIndex) {\n return renderMenuItem(contextualMenuItem, itemsIndex, itemsIndex, sectionProps.items.length, hasCheckmarks, hasIcons, menuClassNames);\n }),\n sectionProps.bottomDivider && renderSeparator(index, itemClassNames, false, true)))));\n }\n };\n var renderListItem = function (content, key, classNames, // eslint-disable-line deprecation/deprecation\n title) {\n return (React.createElement(\"li\", { role: \"presentation\", title: title, key: key, className: classNames.item }, content));\n };\n var renderSeparator = function (index, classNames, // eslint-disable-line deprecation/deprecation\n top, fromSection) {\n if (fromSection || index > 0) {\n return (React.createElement(\"li\", { role: \"separator\", key: 'separator-' + index + (top === undefined ? '' : top ? '-top' : '-bottom'), className: classNames.divider, \"aria-hidden\": \"true\" }));\n }\n return null;\n };\n var renderNormalItem = function (item, classNames, // eslint-disable-line deprecation/deprecation\n index, focusableElementIndex, totalItemCount, hasCheckmarks, hasIcons) {\n if (item.onRender) {\n return item.onRender(__assign({ 'aria-posinset': focusableElementIndex + 1, 'aria-setsize': totalItemCount }, item), dismiss);\n }\n var contextualMenuItemAs = props.contextualMenuItemAs;\n var commonProps = {\n item: item,\n classNames: classNames,\n index: index,\n focusableElementIndex: focusableElementIndex,\n totalItemCount: totalItemCount,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n contextualMenuItemAs: contextualMenuItemAs,\n onItemMouseEnter: onItemMouseEnterBase,\n onItemMouseLeave: onMouseItemLeave,\n onItemMouseMove: onItemMouseMoveBase,\n onItemMouseDown: onItemMouseDown,\n executeItemClick: executeItemClick,\n onItemKeyDown: onItemKeyDown,\n expandedMenuItemKey: expandedMenuItemKey,\n openSubMenu: openSubMenu,\n dismissSubMenu: onSubMenuDismiss,\n dismissMenu: dismiss,\n };\n if (item.href) {\n return React.createElement(ContextualMenuAnchor, __assign({}, commonProps, { onItemClick: onAnchorClick }));\n }\n if (item.split && hasSubmenu(item)) {\n return (React.createElement(ContextualMenuSplitButton, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase, onTap: cancelSubMenuTimer })));\n }\n return React.createElement(ContextualMenuButton, __assign({}, commonProps, { onItemClick: onItemClick, onItemClickBase: onItemClickBase }));\n };\n var renderHeaderMenuItem = function (item, \n // eslint-disable-next-line deprecation/deprecation\n itemClassNames, \n // eslint-disable-next-line deprecation/deprecation\n menuClassNames, index, hasCheckmarks, hasIcons) {\n var _a = props.contextualMenuItemAs, ChildrenRenderer = _a === void 0 ? ContextualMenuItem : _a;\n var itemProps = item.itemProps, id = item.id;\n var divHtmlProperties = itemProps && getNativeProps(itemProps, divProperties);\n return (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", __assign({ id: id, className: menuClassNames.header }, divHtmlProperties, { style: item.style }),\n React.createElement(ChildrenRenderer, __assign({ item: item, classNames: itemClassNames, index: index, onCheckmarkClick: hasCheckmarks ? onItemClick : undefined, hasIcons: hasIcons }, itemProps))));\n };\n //#endregion\n //#region Main render\n var isBeakVisible = props.isBeakVisible;\n var items = props.items, labelElementId = props.labelElementId, id = props.id, className = props.className, beakWidth = props.beakWidth, directionalHint = props.directionalHint, directionalHintForRTL = props.directionalHintForRTL, alignTargetEdge = props.alignTargetEdge, gapSpace = props.gapSpace, coverTarget = props.coverTarget, ariaLabel = props.ariaLabel, doNotLayer = props.doNotLayer, target = props.target, bounds = props.bounds, useTargetWidth = props.useTargetWidth, useTargetAsMinWidth = props.useTargetAsMinWidth, directionalHintFixed = props.directionalHintFixed, shouldFocusOnMount = props.shouldFocusOnMount, shouldFocusOnContainer = props.shouldFocusOnContainer, title = props.title, styles = props.styles, theme = props.theme, calloutProps = props.calloutProps, _k = props.onRenderSubMenu, onRenderSubMenu = _k === void 0 ? onDefaultRenderSubMenu : _k, _l = props.onRenderMenuList, onRenderMenuList = _l === void 0 ? function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); } : _l, focusZoneProps = props.focusZoneProps, \n // eslint-disable-next-line deprecation/deprecation\n getMenuClassNames = props.getMenuClassNames;\n var classNames = getMenuClassNames\n ? getMenuClassNames(theme, className)\n : getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var hasIcons = itemsHaveIcons(items);\n function itemsHaveIcons(contextualMenuItems) {\n for (var _i = 0, contextualMenuItems_1 = contextualMenuItems; _i < contextualMenuItems_1.length; _i++) {\n var item = contextualMenuItems_1[_i];\n if (item.iconProps) {\n return true;\n }\n if (item.itemType === ContextualMenuItemType.Section &&\n item.sectionProps &&\n itemsHaveIcons(item.sectionProps.items)) {\n return true;\n }\n }\n return false;\n }\n var adjustedFocusZoneProps = __assign(__assign({ direction: FocusZoneDirection.vertical, handleTabKey: FocusZoneTabbableElements.all, isCircularNavigation: true }, focusZoneProps), { className: css(classNames.root, (_a = props.focusZoneProps) === null || _a === void 0 ? void 0 : _a.className) });\n var hasCheckmarks = canAnyMenuItemsCheck(items);\n var submenuProps = expandedMenuItemKey && props.hidden !== true ? getSubmenuProps() : null;\n isBeakVisible = isBeakVisible === undefined ? responsiveMode <= ResponsiveMode.medium : isBeakVisible;\n /**\n * When useTargetWidth is true, get the width of the target element and apply it for the context menu container\n */\n var contextMenuStyle;\n var targetAsHtmlElement = targetRef.current;\n if ((useTargetWidth || useTargetAsMinWidth) && targetAsHtmlElement && targetAsHtmlElement.offsetWidth) {\n var targetBoundingRect = targetAsHtmlElement.getBoundingClientRect();\n var targetWidth = targetBoundingRect.width - 2; /* Accounts for 1px border */\n if (useTargetWidth) {\n contextMenuStyle = {\n width: targetWidth,\n };\n }\n else if (useTargetAsMinWidth) {\n contextMenuStyle = {\n minWidth: targetWidth,\n };\n }\n }\n // The menu should only return if items were provided, if no items were provided then it should not appear.\n if (items && items.length > 0) {\n var totalItemCount_1 = 0;\n for (var _i = 0, items_1 = items; _i < items_1.length; _i++) {\n var item = items_1[_i];\n if (item.itemType !== ContextualMenuItemType.Divider && item.itemType !== ContextualMenuItemType.Header) {\n var itemCount = item.customOnRenderListLength ? item.customOnRenderListLength : 1;\n totalItemCount_1 += itemCount;\n }\n }\n var calloutStyles_1 = classNames.subComponentStyles\n ? classNames.subComponentStyles.callout\n : undefined;\n return (React.createElement(MenuContext.Consumer, null, function (menuContext) { return (React.createElement(Callout, __assign({ styles: calloutStyles_1, onRestoreFocus: tryFocusPreviousActiveElement }, calloutProps, { target: target || menuContext.target, isBeakVisible: isBeakVisible, beakWidth: beakWidth, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL, gapSpace: gapSpace, coverTarget: coverTarget, doNotLayer: doNotLayer, className: css('ms-ContextualMenu-Callout', calloutProps && calloutProps.className), setInitialFocus: shouldFocusOnMount, onDismiss: props.onDismiss || menuContext.onDismiss, onScroll: onScroll, bounds: bounds, directionalHintFixed: directionalHintFixed, alignTargetEdge: alignTargetEdge, hidden: props.hidden || menuContext.hidden, ref: forwardedRef }),\n React.createElement(\"div\", { style: contextMenuStyle, ref: hostElement, id: id, className: classNames.container, tabIndex: shouldFocusOnContainer ? 0 : -1, onKeyDown: onMenuKeyDown, onKeyUp: onKeyUp, onFocusCapture: onMenuFocusCapture, \"aria-label\": ariaLabel, \"aria-labelledby\": labelElementId, role: 'menu' },\n title && React.createElement(\"div\", { className: classNames.title },\n \" \",\n title,\n \" \"),\n items && items.length\n ? renderFocusZone(onRenderMenuList({\n ariaLabel: ariaLabel,\n items: items,\n totalItemCount: totalItemCount_1,\n hasCheckmarks: hasCheckmarks,\n hasIcons: hasIcons,\n defaultMenuItemRenderer: function (item) {\n return defaultMenuItemRenderer(item, classNames);\n },\n labelElementId: labelElementId,\n }, function (menuListProps, defaultRender) { return onDefaultRenderMenuList(menuListProps, classNames, defaultRender); }), adjustedFocusZoneProps)\n : null,\n submenuProps && onRenderSubMenu(submenuProps, onDefaultRenderSubMenu)))); }));\n }\n else {\n return null;\n }\n //#endregion\n}), function (prevProps, newProps) {\n if (!newProps.shouldUpdateWhenHidden && prevProps.hidden && newProps.hidden) {\n // Do not update when hidden.\n return true;\n }\n return shallowCompare(prevProps, newProps);\n});\nContextualMenuBase.displayName = 'ContextualMenuBase';\n/**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\nfunction isAltOrMeta(ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n}\nfunction onItemMouseDown(item, ev) {\n var _a;\n (_a = item.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(item, item, ev);\n}\nfunction onDefaultRenderSubMenu(subMenuProps, defaultRender) {\n throw Error('ContextualMenuBase: onRenderSubMenu callback is null or undefined. ' +\n 'Please ensure to set `onRenderSubMenu` property either manually or with `styled` helper.');\n}\n/**\n * Returns the item that matches a given key if any.\n * @param key - The key of the item to match\n * @param items - The items to look for the key\n */\nfunction findItemByKeyFromItems(key, items) {\n for (var _i = 0, items_2 = items; _i < items_2.length; _i++) {\n var item = items_2[_i];\n if (item.itemType === ContextualMenuItemType.Section && item.sectionProps) {\n var match = findItemByKeyFromItems(key, item.sectionProps.items);\n if (match) {\n return match;\n }\n }\n else if (item.key && item.key === key) {\n return item;\n }\n }\n}\n//# sourceMappingURL=ContextualMenu.base.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyleSets } from '../../Styling';\n/**\n * @deprecated use getStyles exported from VerticalDivider.styles.ts\n */\nexport var getDividerClassNames = memoizeFunction(\n// eslint-disable-next-line deprecation/deprecation\nfunction (theme) {\n return mergeStyleSets({\n wrapper: {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n divider: {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n });\n});\n//# sourceMappingURL=VerticalDivider.classNames.js.map","import { getDividerClassNames } from '../Divider/VerticalDivider.classNames';\nimport { getMenuItemStyles } from './ContextualMenu.cnstyles';\nimport { mergeStyleSets, getGlobalClassNames, getScreenSelector, ScreenWidthMaxMedium, hiddenContentStyle, } from '../../Styling';\nimport { memoizeFunction, IsFocusVisibleClassName } from '../../Utilities';\nvar CONTEXTUAL_SPLIT_MENU_MINWIDTH = '28px';\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nexport var getSplitButtonVerticalDividerClassNames = memoizeFunction(\n/* eslint-disable deprecation/deprecation */\nfunction (theme) {\n var _a;\n return mergeStyleSets(getDividerClassNames(theme), {\n /* eslint-enable deprecation/deprecation */\n wrapper: {\n position: 'absolute',\n right: 28,\n selectors: (_a = {},\n _a[MediumScreenSelector] = {\n right: 32,\n },\n _a),\n },\n divider: {\n height: 16,\n width: 1,\n },\n });\n});\nvar GlobalClassNames = {\n item: 'ms-ContextualMenu-item',\n divider: 'ms-ContextualMenu-divider',\n root: 'ms-ContextualMenu-link',\n isChecked: 'is-checked',\n isExpanded: 'is-expanded',\n isDisabled: 'is-disabled',\n linkContent: 'ms-ContextualMenu-linkContent',\n linkContentMenu: 'ms-ContextualMenu-linkContent',\n icon: 'ms-ContextualMenu-icon',\n iconColor: 'ms-ContextualMenu-iconColor',\n checkmarkIcon: 'ms-ContextualMenu-checkmarkIcon',\n subMenuIcon: 'ms-ContextualMenu-submenuIcon',\n label: 'ms-ContextualMenu-itemText',\n secondaryText: 'ms-ContextualMenu-secondaryText',\n splitMenu: 'ms-ContextualMenu-splitMenu',\n screenReaderText: 'ms-ContextualMenu-screenReaderText',\n};\n/**\n * @deprecated Will be removed in \\>= 7.0.\n * This is a package-internal method that has been depended on.\n * It is being kept in this form for backwards compatibility.\n * @internal\n */\n// TODO: Audit perf. impact of and potentially remove memoizeFunction.\n// https://github.com/microsoft/fluentui/issues/5534\nexport var getItemClassNames = memoizeFunction(function (theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className) {\n var _a, _b, _c, _d;\n var styles = getMenuItemStyles(theme);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return mergeStyleSets({\n item: [classNames.item, styles.item, itemClassName],\n divider: [classNames.divider, styles.divider, dividerClassName],\n root: [\n classNames.root,\n styles.root,\n checked && [classNames.isChecked, styles.rootChecked],\n isAnchorLink && styles.anchorLink,\n expanded && [classNames.isExpanded, styles.rootExpanded],\n disabled && [classNames.isDisabled, styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_a = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _a[\".\" + IsFocusVisibleClassName + \" &:hover\"] = { background: 'inherit;' },\n _a),\n },\n ],\n className,\n ],\n splitPrimary: [\n styles.root,\n {\n width: \"calc(100% - \" + CONTEXTUAL_SPLIT_MENU_MINWIDTH + \")\",\n },\n checked && ['is-checked', styles.rootChecked],\n (disabled || primaryDisabled) && ['is-disabled', styles.rootDisabled],\n !(disabled || primaryDisabled) &&\n !checked && [\n {\n selectors: (_b = {\n ':hover': styles.rootHovered\n },\n // when hovering over the splitPrimary also affect the splitMenu\n _b[\":hover ~ .\" + classNames.splitMenu] = styles.rootHovered,\n _b[':active'] = styles.rootPressed,\n _b[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _b[\".\" + IsFocusVisibleClassName + \" &:hover\"] = { background: 'inherit;' },\n _b),\n },\n ],\n ],\n splitMenu: [\n classNames.splitMenu,\n styles.root,\n {\n flexBasis: '0',\n padding: '0 8px',\n minWidth: CONTEXTUAL_SPLIT_MENU_MINWIDTH,\n },\n expanded && ['is-expanded', styles.rootExpanded],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !expanded && [\n {\n selectors: (_c = {\n ':hover': styles.rootHovered,\n ':active': styles.rootPressed\n },\n _c[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _c[\".\" + IsFocusVisibleClassName + \" &:hover\"] = { background: 'inherit;' },\n _c),\n },\n ],\n ],\n anchorLink: styles.anchorLink,\n linkContent: [classNames.linkContent, styles.linkContent],\n linkContentMenu: [\n classNames.linkContentMenu,\n styles.linkContent,\n {\n justifyContent: 'center',\n },\n ],\n icon: [\n classNames.icon,\n knownIcon && styles.iconColor,\n styles.icon,\n iconClassName,\n disabled && [classNames.isDisabled, styles.iconDisabled],\n ],\n iconColor: styles.iconColor,\n checkmarkIcon: [classNames.checkmarkIcon, knownIcon && styles.checkmarkIcon, styles.icon, iconClassName],\n subMenuIcon: [\n classNames.subMenuIcon,\n styles.subMenuIcon,\n subMenuClassName,\n expanded && { color: theme.palette.neutralPrimary },\n disabled && [styles.iconDisabled],\n ],\n label: [classNames.label, styles.label],\n secondaryText: [classNames.secondaryText, styles.secondaryText],\n splitContainer: [\n styles.splitButtonFlexContainer,\n !disabled &&\n !checked && [\n {\n selectors: (_d = {},\n _d[\".\" + IsFocusVisibleClassName + \" &:focus, .\" + IsFocusVisibleClassName + \" &:focus:hover\"] = styles.rootFocused,\n _d),\n },\n ],\n ],\n screenReaderText: [\n classNames.screenReaderText,\n styles.screenReaderText,\n hiddenContentStyle,\n { visibility: 'hidden' },\n ],\n });\n});\n/**\n * Wrapper function for generating ContextualMenuItem classNames which adheres to\n * the getStyles API, but invokes memoized className generator function with\n * primitive values.\n *\n * @param props the ContextualMenuItem style props used to generate its styles.\n */\nexport var getItemStyles = function (props) {\n var theme = props.theme, disabled = props.disabled, expanded = props.expanded, checked = props.checked, isAnchorLink = props.isAnchorLink, knownIcon = props.knownIcon, itemClassName = props.itemClassName, dividerClassName = props.dividerClassName, iconClassName = props.iconClassName, subMenuClassName = props.subMenuClassName, primaryDisabled = props.primaryDisabled, className = props.className;\n // eslint-disable-next-line deprecation/deprecation\n return getItemClassNames(theme, disabled, expanded, checked, isAnchorLink, knownIcon, itemClassName, dividerClassName, iconClassName, subMenuClassName, primaryDisabled, className);\n};\n//# sourceMappingURL=ContextualMenu.classNames.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets, getFocusStyle, HighContrastSelector, getScreenSelector, ScreenWidthMaxMedium, IconFontSizes, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nexport var CONTEXTUAL_MENU_ITEM_HEIGHT = 36;\nvar MediumScreenSelector = getScreenSelector(0, ScreenWidthMaxMedium);\nvar getItemHighContrastStyles = memoizeFunction(function () {\n var _a;\n return {\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _a),\n };\n});\nexport var getMenuItemStyles = memoizeFunction(function (theme) {\n var _a, _b, _c, _d, _e, _f, _g;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, palette = theme.palette;\n var ContextualMenuItemBackgroundHoverColor = semanticColors.menuItemBackgroundHovered;\n var ContextualMenuItemTextHoverColor = semanticColors.menuItemTextHovered;\n var ContextualMenuItemBackgroundSelectedColor = semanticColors.menuItemBackgroundPressed;\n var ContextualMenuItemDividerColor = semanticColors.bodyDivider;\n var menuItemStyles = {\n item: [\n fonts.medium,\n {\n color: semanticColors.bodyText,\n position: 'relative',\n boxSizing: 'border-box',\n },\n ],\n divider: {\n display: 'block',\n height: '1px',\n backgroundColor: ContextualMenuItemDividerColor,\n position: 'relative',\n },\n root: [\n getFocusStyle(theme),\n fonts.medium,\n {\n color: semanticColors.bodyText,\n backgroundColor: 'transparent',\n border: 'none',\n width: '100%',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n display: 'block',\n cursor: 'pointer',\n padding: '0px 8px 0 4px',\n textAlign: 'left',\n },\n ],\n rootDisabled: {\n color: semanticColors.disabledBodyText,\n cursor: 'default',\n pointerEvents: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ color: 'GrayText', opacity: 1 }, getHighContrastNoAdjustStyle()),\n _a),\n },\n rootHovered: __assign({ backgroundColor: ContextualMenuItemBackgroundHoverColor, color: ContextualMenuItemTextHoverColor, selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDarkAlt,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n } }, getItemHighContrastStyles()),\n rootFocused: __assign({ backgroundColor: palette.white }, getItemHighContrastStyles()),\n rootChecked: __assign({ selectors: {\n '.ms-ContextualMenu-checkmarkIcon': {\n color: palette.neutralPrimary,\n },\n } }, getItemHighContrastStyles()),\n rootPressed: __assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, selectors: {\n '.ms-ContextualMenu-icon': {\n color: palette.themeDark,\n },\n '.ms-ContextualMenu-submenuIcon': {\n color: palette.neutralPrimary,\n },\n } }, getItemHighContrastStyles()),\n rootExpanded: __assign({ backgroundColor: ContextualMenuItemBackgroundSelectedColor, color: semanticColors.bodyTextChecked }, getItemHighContrastStyles()),\n linkContent: {\n whiteSpace: 'nowrap',\n height: 'inherit',\n display: 'flex',\n alignItems: 'center',\n maxWidth: '100%',\n },\n anchorLink: {\n padding: '0px 8px 0 4px',\n textRendering: 'auto',\n color: 'inherit',\n letterSpacing: 'normal',\n wordSpacing: 'normal',\n textTransform: 'none',\n textIndent: '0px',\n textShadow: 'none',\n textDecoration: 'none',\n boxSizing: 'border-box',\n },\n label: {\n margin: '0 4px',\n verticalAlign: 'middle',\n display: 'inline-block',\n flexGrow: '1',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n },\n secondaryText: {\n color: theme.palette.neutralSecondary,\n paddingLeft: '20px',\n textAlign: 'right',\n },\n icon: {\n display: 'inline-block',\n minHeight: '1px',\n maxHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n fontSize: IconFontSizes.medium,\n width: IconFontSizes.medium,\n margin: '0 4px',\n verticalAlign: 'middle',\n flexShrink: '0',\n selectors: (_b = {},\n _b[MediumScreenSelector] = {\n fontSize: IconFontSizes.large,\n width: IconFontSizes.large,\n },\n _b),\n },\n iconColor: {\n color: semanticColors.menuIcon,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'inherit',\n },\n _c['$root:hover &'] = {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _d),\n },\n _c['$root:focus &'] = {\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _e),\n },\n _c),\n },\n iconDisabled: {\n color: semanticColors.disabledBodyText,\n },\n checkmarkIcon: {\n color: semanticColors.bodySubtext,\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _f),\n },\n subMenuIcon: {\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n color: palette.neutralSecondary,\n textAlign: 'center',\n display: 'inline-block',\n verticalAlign: 'middle',\n flexShrink: '0',\n fontSize: IconFontSizes.small,\n selectors: (_g = {\n ':hover': {\n color: palette.neutralPrimary,\n },\n ':active': {\n color: palette.neutralPrimary,\n }\n },\n _g[MediumScreenSelector] = {\n fontSize: IconFontSizes.medium,\n },\n _g[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _g),\n },\n splitButtonFlexContainer: [\n getFocusStyle(theme),\n {\n display: 'flex',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n flexWrap: 'nowrap',\n justifyContent: 'center',\n alignItems: 'flex-start',\n },\n ],\n };\n return concatStyleSets(menuItemStyles);\n});\n//# sourceMappingURL=ContextualMenu.cnstyles.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nimport { CONTEXTUAL_MENU_ITEM_HEIGHT } from './ContextualMenu.cnstyles';\nvar GlobalClassNames = {\n root: 'ms-ContextualMenu',\n container: 'ms-ContextualMenu-container',\n list: 'ms-ContextualMenu-list',\n header: 'ms-ContextualMenu-header',\n title: 'ms-ContextualMenu-title',\n isopen: 'is-open',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n classNames.isopen,\n {\n backgroundColor: semanticColors.menuBackground,\n minWidth: '180px',\n },\n className,\n ],\n container: [\n classNames.container,\n {\n selectors: {\n ':focus': { outline: 0 },\n },\n },\n ],\n list: [\n classNames.list,\n classNames.isopen,\n {\n listStyleType: 'none',\n margin: '0',\n padding: '0',\n },\n ],\n header: [\n classNames.header,\n fonts.small,\n {\n fontWeight: FontWeights.semibold,\n color: semanticColors.menuHeader,\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n height: CONTEXTUAL_MENU_ITEM_HEIGHT,\n lineHeight: CONTEXTUAL_MENU_ITEM_HEIGHT,\n cursor: 'default',\n padding: '0px 6px',\n userSelect: 'none',\n textAlign: 'left',\n },\n ],\n title: [\n classNames.title,\n {\n fontSize: fonts.mediumPlus.fontSize,\n paddingRight: '14px',\n paddingLeft: '14px',\n paddingBottom: '5px',\n paddingTop: '5px',\n backgroundColor: semanticColors.menuItemBackgroundPressed,\n },\n ],\n subComponentStyles: {\n callout: {\n root: {\n boxShadow: effects.elevation8,\n },\n },\n menuItem: {},\n },\n };\n};\n//# sourceMappingURL=ContextualMenu.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { styled } from '../../Utilities';\nimport { ContextualMenuBase } from './ContextualMenu.base';\nimport { getStyles } from './ContextualMenu.styles';\nfunction onRenderSubMenu(subMenuProps) {\n return React.createElement(LocalContextualMenu, __assign({}, subMenuProps));\n}\n// This is to prevent cyclic import with ContextualMenu.base.tsx.\nvar LocalContextualMenu = styled(ContextualMenuBase, getStyles, function () { return ({ onRenderSubMenu: onRenderSubMenu }); }, { scope: 'ContextualMenu' });\n/**\n * ContextualMenu description\n */\nexport var ContextualMenu = LocalContextualMenu;\nContextualMenu.displayName = 'ContextualMenu';\n//# sourceMappingURL=ContextualMenu.js.map","export { DirectionalHint } from '../../common/DirectionalHint';\n/**\n * {@docCategory ContextualMenu}\n */\nexport var ContextualMenuItemType;\n(function (ContextualMenuItemType) {\n ContextualMenuItemType[ContextualMenuItemType[\"Normal\"] = 0] = \"Normal\";\n ContextualMenuItemType[ContextualMenuItemType[\"Divider\"] = 1] = \"Divider\";\n ContextualMenuItemType[ContextualMenuItemType[\"Header\"] = 2] = \"Header\";\n ContextualMenuItemType[ContextualMenuItemType[\"Section\"] = 3] = \"Section\";\n})(ContextualMenuItemType || (ContextualMenuItemType = {}));\n//# sourceMappingURL=ContextualMenu.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { hasSubmenu, getIsChecked } from '../../utilities/contextualMenu/index';\nimport { getRTL, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nvar defaultIconRenderer = function (props) {\n var item = props.item, classNames = props.classNames;\n var iconProps = item.iconProps;\n return React.createElement(Icon, __assign({}, iconProps, { className: classNames.icon }));\n};\nvar renderItemIcon = function (props) {\n var item = props.item, hasIcons = props.hasIcons;\n if (!hasIcons) {\n return null;\n }\n if (item.onRenderIcon) {\n return item.onRenderIcon(props, defaultIconRenderer);\n }\n return defaultIconRenderer(props);\n};\nvar renderCheckMarkIcon = function (_a) {\n var onCheckmarkClick = _a.onCheckmarkClick, item = _a.item, classNames = _a.classNames;\n var isItemChecked = getIsChecked(item);\n if (onCheckmarkClick) {\n // Ensures that the item is passed as the first argument to the checkmark click callback.\n var onClick = function (e) { return onCheckmarkClick(item, e); };\n return (React.createElement(Icon, { iconName: item.canCheck !== false && isItemChecked ? 'CheckMark' : '', className: classNames.checkmarkIcon, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: onClick }));\n }\n return null;\n};\nvar renderItemName = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n /* eslint-disable deprecation/deprecation */\n if (item.text || item.name) {\n return React.createElement(\"span\", { className: classNames.label }, item.text || item.name);\n }\n /* eslint-enable deprecation/deprecation */\n return null;\n};\nvar renderSecondaryText = function (_a) {\n var item = _a.item, classNames = _a.classNames;\n if (item.secondaryText) {\n return React.createElement(\"span\", { className: classNames.secondaryText }, item.secondaryText);\n }\n return null;\n};\nvar renderSubMenuIcon = function (_a) {\n var item = _a.item, classNames = _a.classNames, theme = _a.theme;\n if (hasSubmenu(item)) {\n return (React.createElement(Icon, __assign({ iconName: getRTL(theme) ? 'ChevronLeft' : 'ChevronRight' }, item.submenuIconProps, { className: classNames.subMenuIcon })));\n }\n return null;\n};\nvar ContextualMenuItemBase = /** @class */ (function (_super) {\n __extends(ContextualMenuItemBase, _super);\n function ContextualMenuItemBase(props) {\n var _this = _super.call(this, props) || this;\n _this.openSubMenu = function () {\n var _a = _this.props, item = _a.item, openSubMenu = _a.openSubMenu, getSubmenuTarget = _a.getSubmenuTarget;\n if (getSubmenuTarget) {\n var submenuTarget = getSubmenuTarget();\n if (hasSubmenu(item) && openSubMenu && submenuTarget) {\n openSubMenu(item, submenuTarget);\n }\n }\n };\n _this.dismissSubMenu = function () {\n var _a = _this.props, item = _a.item, dismissSubMenu = _a.dismissSubMenu;\n if (hasSubmenu(item) && dismissSubMenu) {\n dismissSubMenu();\n }\n };\n _this.dismissMenu = function (dismissAll) {\n var dismissMenu = _this.props.dismissMenu;\n if (dismissMenu) {\n dismissMenu(undefined /* ev */, dismissAll);\n }\n };\n initializeComponentRef(_this);\n return _this;\n }\n ContextualMenuItemBase.prototype.render = function () {\n var _a = this.props, item = _a.item, classNames = _a.classNames;\n var renderContent = item.onRenderContent || this._renderLayout;\n return (React.createElement(\"div\", { className: item.split ? classNames.linkContentMenu : classNames.linkContent }, renderContent(this.props, {\n renderCheckMarkIcon: renderCheckMarkIcon,\n renderItemIcon: renderItemIcon,\n renderItemName: renderItemName,\n renderSecondaryText: renderSecondaryText,\n renderSubMenuIcon: renderSubMenuIcon,\n })));\n };\n ContextualMenuItemBase.prototype._renderLayout = function (props, defaultRenders) {\n return (React.createElement(React.Fragment, null,\n defaultRenders.renderCheckMarkIcon(props),\n defaultRenders.renderItemIcon(props),\n defaultRenders.renderItemName(props),\n defaultRenders.renderSecondaryText(props),\n defaultRenders.renderSubMenuIcon(props)));\n };\n return ContextualMenuItemBase;\n}(React.Component));\nexport { ContextualMenuItemBase };\n//# sourceMappingURL=ContextualMenuItem.base.js.map","import { styled } from '../../Utilities';\nimport { ContextualMenuItemBase } from './ContextualMenuItem.base';\nimport { getItemStyles } from './ContextualMenu.classNames';\n/**\n * ContextualMenuItem description\n */\nexport var ContextualMenuItem = styled(ContextualMenuItemBase, getItemStyles, undefined, { scope: 'ContextualMenuItem' });\n//# sourceMappingURL=ContextualMenuItem.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, classNamesFunction, getNativeProps, divProperties, css, format, getPropsWithDefaults, } from '@fluentui/utilities';\nimport { Calendar } from '../../Calendar';\nimport { FirstWeekOfYear, getDatePartHashValue, compareDatePart, DayOfWeek } from '@fluentui/date-time-utilities';\nimport { Callout, DirectionalHint } from '../../Callout';\nimport { TextField } from '../../TextField';\nimport { FocusTrapZone } from '../../FocusTrapZone';\nimport { useId, useAsync, useControllableValue } from '@fluentui/react-hooks';\nimport { defaultDatePickerStrings } from './defaults';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n allowTextInput: false,\n formatDate: function (date) { return (date ? date.toDateString() : ''); },\n parseDateFromString: function (dateStr) {\n var date = Date.parse(dateStr);\n return date ? new Date(date) : null;\n },\n firstDayOfWeek: DayOfWeek.Sunday,\n initialPickerDate: new Date(),\n isRequired: false,\n isMonthPickerVisible: true,\n showMonthPickerAsOverlay: false,\n strings: defaultDatePickerStrings,\n highlightCurrentMonth: false,\n highlightSelectedMonth: false,\n borderless: false,\n pickerAriaLabel: 'Calendar',\n showWeekNumbers: false,\n firstWeekOfYear: FirstWeekOfYear.FirstDay,\n showGoToToday: true,\n showCloseButton: false,\n underlined: false,\n allFocusable: false,\n};\nfunction useFocusLogic() {\n var textFieldRef = React.useRef(null);\n var preventFocusOpeningPicker = React.useRef(false);\n var focus = function () {\n var _a, _b;\n (_b = (_a = textFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);\n };\n var preventNextFocusOpeningPicker = function () {\n preventFocusOpeningPicker.current = true;\n };\n return [textFieldRef, focus, preventFocusOpeningPicker, preventNextFocusOpeningPicker];\n}\nfunction useCalendarVisibility(_a, focus) {\n var allowTextInput = _a.allowTextInput, onAfterMenuDismiss = _a.onAfterMenuDismiss;\n var _b = React.useState(false), isCalendarShown = _b[0], setIsCalendarShown = _b[1];\n var isMounted = React.useRef(false);\n var async = useAsync();\n React.useEffect(function () {\n if (isMounted.current && !isCalendarShown) {\n // In browsers like IE, textfield gets unfocused when datepicker is collapsed\n if (allowTextInput) {\n async.requestAnimationFrame(focus);\n }\n // If DatePicker's menu (Calendar) is closed, run onAfterMenuDismiss\n onAfterMenuDismiss === null || onAfterMenuDismiss === void 0 ? void 0 : onAfterMenuDismiss();\n }\n isMounted.current = true;\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [isCalendarShown]);\n return [isCalendarShown, setIsCalendarShown];\n}\nfunction useSelectedDate(_a) {\n var formatDate = _a.formatDate, value = _a.value, onSelectDate = _a.onSelectDate;\n var _b = useControllableValue(value, undefined, function (ev, newValue) { return onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(newValue); }), selectedDate = _b[0], setSelectedDateState = _b[1];\n var _c = React.useState(function () { return (value && formatDate ? formatDate(value) : ''); }), formattedDate = _c[0], setFormattedDate = _c[1];\n var setSelectedDate = function (newDate) {\n setSelectedDateState(newDate);\n setFormattedDate(newDate && formatDate ? formatDate(newDate) : '');\n };\n React.useEffect(function () {\n setFormattedDate(value && formatDate ? formatDate(value) : '');\n }, [formatDate, value]);\n return [selectedDate, formattedDate, setSelectedDate, setFormattedDate];\n}\nfunction useErrorMessage(_a, selectedDate, setSelectedDate, inputValue, isCalendarShown) {\n var isRequired = _a.isRequired, allowTextInput = _a.allowTextInput, strings = _a.strings, parseDateFromString = _a.parseDateFromString, onSelectDate = _a.onSelectDate, formatDate = _a.formatDate, minDate = _a.minDate, maxDate = _a.maxDate;\n var _b = React.useState(), errorMessage = _b[0], setErrorMessage = _b[1];\n var _c = React.useState(), statusMessage = _c[0], setStatusMessage = _c[1];\n var validateTextInput = function (date) {\n if (date === void 0) { date = null; }\n if (allowTextInput) {\n if (inputValue || date) {\n // Don't parse if the selected date has the same formatted string as what we're about to parse.\n // The formatted string might be ambiguous (ex: \"1/2/3\" or \"New Year Eve\") and the parser might\n // not be able to come up with the exact same date.\n if (selectedDate && !errorMessage && formatDate && formatDate(date !== null && date !== void 0 ? date : selectedDate) === inputValue) {\n return;\n }\n date = date || parseDateFromString(inputValue);\n // Check if date is null, or date is Invalid Date\n if (!date || isNaN(date.getTime())) {\n // Reset invalid input field, if formatting is available\n setSelectedDate(selectedDate);\n // default the newer isResetStatusMessage string to invalidInputErrorMessage for legacy support\n var selectedText = formatDate ? formatDate(selectedDate) : '';\n var statusText = strings.isResetStatusMessage\n ? format(strings.isResetStatusMessage, inputValue, selectedText)\n : strings.invalidInputErrorMessage || '';\n setStatusMessage(statusText);\n }\n else {\n // Check against optional date boundaries\n if (isDateOutOfBounds(date, minDate, maxDate)) {\n setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');\n }\n else {\n setSelectedDate(date);\n setErrorMessage(undefined);\n setStatusMessage(undefined);\n }\n }\n }\n else {\n // Only show error for empty inputValue if it is a required field\n setErrorMessage(isRequired ? strings.isRequiredErrorMessage || ' ' : undefined);\n // If no input date string or input date string is invalid\n // date variable will be null, callback should expect null value for this case\n onSelectDate === null || onSelectDate === void 0 ? void 0 : onSelectDate(date);\n }\n }\n else if (isRequired && !inputValue) {\n // Check when DatePicker is a required field but has NO input value\n setErrorMessage(strings.isRequiredErrorMessage || ' ');\n }\n else {\n // Cleanup the error message and status message\n setErrorMessage(undefined);\n setStatusMessage(undefined);\n }\n };\n React.useEffect(function () {\n if (isRequired && !selectedDate) {\n setErrorMessage(strings.isRequiredErrorMessage || ' ');\n }\n else if (selectedDate && isDateOutOfBounds(selectedDate, minDate, maxDate)) {\n setErrorMessage(strings.isOutOfBoundsErrorMessage || ' ');\n }\n else {\n setErrorMessage(undefined);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [\n // We don't want to compare the date itself, since two instances of date at the same time are not equal\n // eslint-disable-next-line react-hooks/exhaustive-deps\n minDate && getDatePartHashValue(minDate),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n maxDate && getDatePartHashValue(maxDate),\n // eslint-disable-next-line react-hooks/exhaustive-deps\n selectedDate && getDatePartHashValue(selectedDate),\n isRequired,\n ]);\n return [\n isCalendarShown ? undefined : errorMessage,\n validateTextInput,\n setErrorMessage,\n isCalendarShown ? undefined : statusMessage,\n setStatusMessage,\n ];\n}\nexport var DatePickerBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var firstDayOfWeek = props.firstDayOfWeek, strings = props.strings, label = props.label, theme = props.theme, className = props.className, styles = props.styles, initialPickerDate = props.initialPickerDate, isRequired = props.isRequired, disabled = props.disabled, ariaLabel = props.ariaLabel, pickerAriaLabel = props.pickerAriaLabel, placeholder = props.placeholder, allowTextInput = props.allowTextInput, borderless = props.borderless, minDate = props.minDate, maxDate = props.maxDate, showCloseButton = props.showCloseButton, calendarProps = props.calendarProps, calloutProps = props.calloutProps, textFieldProps = props.textField, underlined = props.underlined, allFocusable = props.allFocusable, _a = props.calendarAs, CalendarType = _a === void 0 ? Calendar : _a, tabIndex = props.tabIndex, _b = props.disableAutoFocus, disableAutoFocus = _b === void 0 ? true : _b;\n var id = useId('DatePicker', props.id);\n var calloutId = useId('DatePicker-Callout');\n var calendar = React.useRef(null);\n var datePickerDiv = React.useRef(null);\n var _c = useFocusLogic(), textFieldRef = _c[0], focus = _c[1], preventFocusOpeningPicker = _c[2], preventNextFocusOpeningPicker = _c[3];\n var _d = useCalendarVisibility(props, focus), isCalendarShown = _d[0], setIsCalendarShown = _d[1];\n var _e = useSelectedDate(props), selectedDate = _e[0], formattedDate = _e[1], setSelectedDate = _e[2], setFormattedDate = _e[3];\n var _f = useErrorMessage(props, selectedDate, setSelectedDate, formattedDate, isCalendarShown), errorMessage = _f[0], validateTextInput = _f[1], setErrorMessage = _f[2], statusMessage = _f[3], setStatusMessage = _f[4];\n var showDatePickerPopup = React.useCallback(function () {\n if (!isCalendarShown) {\n preventNextFocusOpeningPicker();\n setIsCalendarShown(true);\n }\n }, [isCalendarShown, preventNextFocusOpeningPicker, setIsCalendarShown]);\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: focus,\n reset: function () {\n setIsCalendarShown(false);\n setSelectedDate(undefined);\n setErrorMessage(undefined);\n setStatusMessage(undefined);\n },\n showDatePickerPopup: showDatePickerPopup,\n }); }, [focus, setErrorMessage, setIsCalendarShown, setSelectedDate, setStatusMessage, showDatePickerPopup]);\n var onTextFieldFocus = function () {\n if (disableAutoFocus) {\n return;\n }\n if (!allowTextInput) {\n if (!preventFocusOpeningPicker.current) {\n showDatePickerPopup();\n }\n preventFocusOpeningPicker.current = false;\n }\n };\n var onSelectDate = function (date) {\n if (props.calendarProps && props.calendarProps.onSelectDate) {\n props.calendarProps.onSelectDate(date);\n }\n calendarDismissed(date);\n };\n var onCalloutPositioned = function () {\n var shouldFocus = true;\n // If the user has specified that the callout shouldn't use initial focus, then respect\n // that and don't attempt to set focus. That will default to true within the callout\n // so we need to check if it's undefined here.\n if (props.calloutProps && props.calloutProps.setInitialFocus !== undefined) {\n shouldFocus = props.calloutProps.setInitialFocus;\n }\n if (calendar.current && shouldFocus) {\n calendar.current.focus();\n }\n };\n var onTextFieldBlur = function (ev) {\n validateTextInput();\n };\n var onTextFieldChanged = function (ev, newValue) {\n var _a;\n var textField = props.textField;\n if (allowTextInput) {\n if (isCalendarShown) {\n dismissDatePickerPopup();\n }\n setFormattedDate(newValue);\n }\n (_a = textField === null || textField === void 0 ? void 0 : textField.onChange) === null || _a === void 0 ? void 0 : _a.call(textField, ev, newValue);\n };\n var onTextFieldKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n ev.preventDefault();\n ev.stopPropagation();\n if (!isCalendarShown) {\n validateTextInput();\n showDatePickerPopup();\n }\n else {\n // When DatePicker allows input date string directly,\n // it is expected to hit another enter to close the popup\n if (props.allowTextInput) {\n dismissDatePickerPopup();\n }\n }\n break;\n case KeyCodes.escape:\n handleEscKey(ev);\n break;\n case KeyCodes.down:\n if (ev.altKey && !isCalendarShown) {\n showDatePickerPopup();\n }\n break;\n default:\n break;\n }\n };\n var onTextFieldClick = function (ev) {\n // default openOnClick to !props.disableAutoFocus for legacy support of disableAutoFocus behavior\n var openOnClick = props.openOnClick || !props.disableAutoFocus;\n if (openOnClick && !isCalendarShown && !props.disabled) {\n showDatePickerPopup();\n return;\n }\n if (props.allowTextInput) {\n dismissDatePickerPopup();\n }\n };\n var onIconClick = function (ev) {\n ev.stopPropagation();\n if (!isCalendarShown && !props.disabled) {\n showDatePickerPopup();\n }\n else if (props.allowTextInput) {\n dismissDatePickerPopup();\n }\n };\n var dismissDatePickerPopup = function (newlySelectedDate) {\n if (isCalendarShown) {\n setIsCalendarShown(false);\n validateTextInput(newlySelectedDate);\n if (!allowTextInput && newlySelectedDate) {\n setSelectedDate(newlySelectedDate);\n }\n }\n };\n var renderTextfieldDescription = function (inputProps, defaultRender) {\n return (React.createElement(React.Fragment, null,\n inputProps.description ? defaultRender(inputProps) : null,\n React.createElement(\"div\", { \"aria-live\": \"assertive\", className: classNames.statusMessage }, statusMessage)));\n };\n var renderReadOnlyInput = function (inputProps) {\n var divProps = getNativeProps(inputProps, divProperties);\n // Talkback on Android treats readonly inputs as disabled, so swipe gestures to open the Calendar\n // don't register. Workaround is rendering a div with role=\"combobox\" (passed in via TextField props).\n return (React.createElement(\"div\", __assign({}, divProps, { className: css(divProps.className, classNames.readOnlyTextField), tabIndex: tabIndex || 0 }), formattedDate || (\n // Putting the placeholder in a separate span fixes specificity issues for the text color\n React.createElement(\"span\", { className: classNames.readOnlyPlaceholder }, placeholder))));\n };\n /**\n * Callback for closing the calendar callout\n */\n var calendarDismissed = function (newlySelectedDate) {\n preventNextFocusOpeningPicker();\n dismissDatePickerPopup(newlySelectedDate);\n // don't need to focus the text box, if necessary the focusTrapZone will do it\n };\n var calloutDismissed = function (ev) {\n calendarDismissed();\n };\n var handleEscKey = function (ev) {\n ev.stopPropagation();\n calendarDismissed();\n };\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n disabled: disabled,\n underlined: underlined,\n label: !!label,\n isDatePickerShown: isCalendarShown,\n });\n var nativeProps = getNativeProps(props, divProperties, ['value']);\n var iconProps = textFieldProps && textFieldProps.iconProps;\n var textFieldId = textFieldProps && textFieldProps.id && textFieldProps.id !== id ? textFieldProps.id : id + '-label';\n var readOnly = !allowTextInput && !disabled;\n return (React.createElement(\"div\", __assign({}, nativeProps, { className: classNames.root, ref: forwardedRef }),\n React.createElement(\"div\", { ref: datePickerDiv, \"aria-owns\": isCalendarShown ? calloutId : undefined, className: classNames.wrapper },\n React.createElement(TextField, __assign({ role: \"combobox\", label: label, \"aria-expanded\": isCalendarShown, ariaLabel: ariaLabel, \"aria-haspopup\": \"dialog\", \"aria-controls\": isCalendarShown ? calloutId : undefined, required: isRequired, disabled: disabled, errorMessage: errorMessage, placeholder: placeholder, borderless: borderless, value: formattedDate, componentRef: textFieldRef, underlined: underlined, tabIndex: tabIndex, readOnly: !allowTextInput }, textFieldProps, { id: textFieldId, className: css(classNames.textField, textFieldProps && textFieldProps.className), iconProps: __assign(__assign({ iconName: 'Calendar' }, iconProps), { className: css(classNames.icon, iconProps && iconProps.className), onClick: onIconClick }), \n // eslint-disable-next-line react/jsx-no-bind\n onRenderDescription: renderTextfieldDescription, \n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown: onTextFieldKeyDown, \n // eslint-disable-next-line react/jsx-no-bind\n onFocus: onTextFieldFocus, \n // eslint-disable-next-line react/jsx-no-bind\n onBlur: onTextFieldBlur, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: onTextFieldClick, \n // eslint-disable-next-line react/jsx-no-bind\n onChange: onTextFieldChanged, onRenderInput: readOnly ? renderReadOnlyInput : undefined }))),\n isCalendarShown && (React.createElement(Callout, __assign({ id: calloutId, role: \"dialog\", ariaLabel: pickerAriaLabel, isBeakVisible: false, gapSpace: 0, doNotLayer: false, target: datePickerDiv.current, directionalHint: DirectionalHint.bottomLeftEdge }, calloutProps, { className: css(classNames.callout, calloutProps && calloutProps.className), \n // eslint-disable-next-line react/jsx-no-bind\n onDismiss: calloutDismissed, \n // eslint-disable-next-line react/jsx-no-bind\n onPositioned: onCalloutPositioned }),\n React.createElement(FocusTrapZone, { isClickableOutsideFocusTrap: true, disableFirstFocus: disableAutoFocus },\n React.createElement(CalendarType, __assign({}, calendarProps, { \n // eslint-disable-next-line react/jsx-no-bind\n onSelectDate: onSelectDate, \n // eslint-disable-next-line react/jsx-no-bind\n onDismiss: calendarDismissed, isMonthPickerVisible: props.isMonthPickerVisible, showMonthPickerAsOverlay: props.showMonthPickerAsOverlay, today: props.today, value: selectedDate || initialPickerDate, firstDayOfWeek: firstDayOfWeek, strings: strings, highlightCurrentMonth: props.highlightCurrentMonth, highlightSelectedMonth: props.highlightSelectedMonth, showWeekNumbers: props.showWeekNumbers, firstWeekOfYear: props.firstWeekOfYear, showGoToToday: props.showGoToToday, dateTimeFormatter: props.dateTimeFormatter, minDate: minDate, maxDate: maxDate, componentRef: calendar, showCloseButton: showCloseButton, allFocusable: allFocusable })))))));\n});\nDatePickerBase.displayName = 'DatePickerBase';\nfunction isDateOutOfBounds(date, minDate, maxDate) {\n return (!!minDate && compareDatePart(minDate, date) > 0) || (!!maxDate && compareDatePart(maxDate, date) < 0);\n}\n//# sourceMappingURL=DatePicker.base.js.map","import { normalize, getGlobalClassNames, FontSizes, HighContrastSelector } from '@fluentui/style-utilities';\nvar GlobalClassNames = {\n root: 'ms-DatePicker',\n callout: 'ms-DatePicker-callout',\n withLabel: 'ms-DatePicker-event--with-label',\n withoutLabel: 'ms-DatePicker-event--without-label',\n disabled: 'msDatePickerDisabled ',\n};\nvar TEXTFIELD_HEIGHT = 32;\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, disabled = props.disabled, underlined = props.underlined, label = props.label, isDatePickerShown = props.isDatePickerShown;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var DatePickerIcon = {\n color: palette.neutralSecondary,\n fontSize: FontSizes.icon,\n lineHeight: '18px',\n pointerEvents: 'none',\n position: 'absolute',\n right: '4px',\n padding: '5px',\n };\n return {\n root: [classNames.root, theme.fonts.large, isDatePickerShown && 'is-open', normalize, className],\n textField: [\n {\n position: 'relative',\n selectors: {\n '& input[readonly]': {\n cursor: 'pointer',\n },\n input: {\n selectors: {\n '::-ms-clear': {\n display: 'none',\n },\n },\n },\n },\n },\n disabled && {\n selectors: {\n '& input[readonly]': {\n cursor: 'default',\n },\n },\n },\n ],\n callout: [classNames.callout],\n icon: [\n DatePickerIcon,\n label ? classNames.withLabel : classNames.withoutLabel,\n { paddingTop: '7px' },\n !disabled && [\n classNames.disabled,\n {\n pointerEvents: 'initial',\n cursor: 'pointer',\n },\n ],\n disabled && {\n color: semanticColors.disabledText,\n cursor: 'default',\n },\n ],\n statusMessage: [\n fonts.small,\n {\n color: semanticColors.errorText,\n marginTop: 5,\n },\n ],\n readOnlyTextField: [\n {\n cursor: 'pointer',\n height: TEXTFIELD_HEIGHT,\n lineHeight: TEXTFIELD_HEIGHT - 2,\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n underlined && {\n lineHeight: TEXTFIELD_HEIGHT + 2,\n },\n ],\n readOnlyPlaceholder: (_a = {\n color: semanticColors.inputPlaceholderText\n },\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n };\n};\n//# sourceMappingURL=DatePicker.styles.js.map","import { styled } from '@fluentui/utilities';\nimport { DatePickerBase } from './DatePicker.base';\nimport { styles } from './DatePicker.styles';\nexport var DatePicker = styled(DatePickerBase, styles, undefined, {\n scope: 'DatePicker',\n});\n//# sourceMappingURL=DatePicker.js.map","import { __assign } from \"tslib\";\nimport { defaultCalendarStrings } from '../../Calendar';\nexport var defaultDatePickerStrings = __assign(__assign({}, defaultCalendarStrings), { prevMonthAriaLabel: 'Go to previous month', nextMonthAriaLabel: 'Go to next month', prevYearAriaLabel: 'Go to previous year', nextYearAriaLabel: 'Go to next year', closeButtonAriaLabel: 'Close date picker', isRequiredErrorMessage: 'Field is required', invalidInputErrorMessage: 'Invalid date format', isResetStatusMessage: 'Invalid entry \"{0}\", date reset to \"{1}\"' });\n//# sourceMappingURL=defaults.js.map","export var getStyles = function (props) {\n // eslint-disable-next-line deprecation/deprecation\n var theme = props.theme, getClassNames = props.getClassNames, className = props.className;\n if (!theme) {\n throw new Error('Theme is undefined or null.');\n }\n if (getClassNames) {\n var names = getClassNames(theme);\n return {\n wrapper: [names.wrapper],\n divider: [names.divider],\n };\n }\n return {\n wrapper: [\n {\n display: 'inline-flex',\n height: '100%',\n alignItems: 'center',\n },\n className,\n ],\n divider: [\n {\n width: 1,\n height: '100%',\n backgroundColor: theme.palette.neutralTertiaryAlt,\n },\n ],\n };\n};\n//# sourceMappingURL=VerticalDivider.styles.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nexport var VerticalDividerBase = React.forwardRef(function (props, ref) {\n // eslint-disable-next-line deprecation/deprecation\n var styles = props.styles, theme = props.theme, deprecatedGetClassNames = props.getClassNames, className = props.className;\n var classNames = getClassNames(styles, { theme: theme, getClassNames: deprecatedGetClassNames, className: className });\n return (React.createElement(\"span\", { className: classNames.wrapper, ref: ref },\n React.createElement(\"span\", { className: classNames.divider })));\n});\nVerticalDividerBase.displayName = 'VerticalDividerBase';\n//# sourceMappingURL=VerticalDivider.base.js.map","import { getStyles } from './VerticalDivider.styles';\nimport { VerticalDividerBase } from './VerticalDivider.base';\nimport { styled } from '../../Utilities';\nexport var VerticalDivider = styled(VerticalDividerBase, getStyles, undefined, {\n scope: 'VerticalDivider',\n});\n//# sourceMappingURL=VerticalDivider.js.map","import { __spreadArrays } from \"tslib\";\nimport { DropdownMenuItemType } from '../Dropdown.types';\n/**\n * A utility class to cache size and position in cache.\n *\n * Dropdown options has non-selectable display types. It is therefore not cheap to determine\n * the total number of actual selectable options as well as the position an option is in the\n * list of options - O(n) cost for each lookup.\n *\n * Given that we potentially have to make this determination on every single render pass, this\n * cache should provide a little bit of relief.\n */\nvar DropdownSizePosCache = /** @class */ (function () {\n function DropdownSizePosCache() {\n this._size = 0;\n }\n /**\n * Invalidates the cache and recalculate the size of selectable options.\n */\n DropdownSizePosCache.prototype.updateOptions = function (options) {\n var displayOnlyOptionsCache = [];\n var size = 0;\n for (var i = 0; i < options.length; i++) {\n if (options[i].itemType === DropdownMenuItemType.Divider || options[i].itemType === DropdownMenuItemType.Header) {\n displayOnlyOptionsCache.push(i);\n }\n else if (!options[i].hidden) {\n size++;\n }\n }\n this._size = size;\n this._displayOnlyOptionsCache = displayOnlyOptionsCache;\n this._cachedOptions = __spreadArrays(options);\n };\n Object.defineProperty(DropdownSizePosCache.prototype, \"optionSetSize\", {\n /**\n * The size of all the selectable options.\n */\n get: function () {\n return this._size;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(DropdownSizePosCache.prototype, \"cachedOptions\", {\n /**\n * The chached options array.\n */\n get: function () {\n return this._cachedOptions;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Returns the position of this option element relative to the full set of selectable option elements.\n * Note: the first selectable element is position 1 in the set.\n * @param index The raw index of the option element.\n */\n DropdownSizePosCache.prototype.positionInSet = function (index) {\n if (index === undefined) {\n return undefined;\n }\n // we could possibly memoize this too but this should be good enough, most of the time (the expectation is that\n // when you have a lot of options, the selectable options will heavily dominate over the non-selectable options.\n var offset = 0;\n while (index > this._displayOnlyOptionsCache[offset]) {\n offset++;\n }\n if (this._displayOnlyOptionsCache[offset] === index) {\n throw new Error(\"Unexpected: Option at index \" + index + \" is not a selectable element.\");\n }\n return index - offset + 1;\n };\n return DropdownSizePosCache;\n}());\nexport { DropdownSizePosCache };\n//# sourceMappingURL=DropdownSizePosCache.js.map","import { __assign, __extends, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, classNamesFunction, divProperties, findIndex, getDocument, getFirstFocusable, getId, getLastFocusable, getNativeProps, initializeComponentRef, isIOS, isMac, mergeAriaAttributeValues, safeRequestAnimationFrame, warn, warnDeprecations, warnMutuallyExclusive, } from '../../Utilities';\nimport { Callout, DirectionalHint } from '../../Callout';\nimport { CommandButton } from '../../Button';\nimport { DropdownMenuItemType } from './Dropdown.types';\nimport { DropdownSizePosCache } from './utilities/DropdownSizePosCache';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Icon } from '../../Icon';\nimport { Label } from '../../Label';\nimport { Panel } from '../../Panel';\nimport { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode';\nimport { SelectableOptionMenuItemType, getAllSelectedOptions } from '../../SelectableOption';\n// import and use V7 Checkbox to ensure no breaking changes.\nimport { Checkbox } from '../../Checkbox';\nimport { getPropsWithDefaults } from '@fluentui/utilities';\nimport { useMergedRefs, usePrevious } from '@fluentui/react-hooks';\nvar COMPONENT_NAME = 'Dropdown';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n options: [],\n};\nfunction useSelectedItemsState(_a) {\n var defaultSelectedKeys = _a.defaultSelectedKeys, selectedKeys = _a.selectedKeys, defaultSelectedKey = _a.defaultSelectedKey, selectedKey = _a.selectedKey, options = _a.options, multiSelect = _a.multiSelect;\n var oldOptions = usePrevious(options);\n var _b = React.useState([]), selectedIndices = _b[0], setSelectedIndices = _b[1];\n // In controlled component usage where selectedKey is provided, update the selectedIndex\n // state if the key or options change.\n var selectedKeyPropToUse;\n // this does a shallow compare (assumes options are pure), for the purposes of determining whether\n // defaultSelectedKey/defaultSelectedKeys are respected.\n var didOptionsChange = options !== oldOptions;\n if (multiSelect) {\n if (didOptionsChange && defaultSelectedKeys !== undefined) {\n selectedKeyPropToUse = defaultSelectedKeys;\n }\n else {\n selectedKeyPropToUse = selectedKeys;\n }\n }\n else {\n if (didOptionsChange && defaultSelectedKey !== undefined) {\n selectedKeyPropToUse = defaultSelectedKey;\n }\n else {\n selectedKeyPropToUse = selectedKey;\n }\n }\n var oldSelectedKeyProp = usePrevious(selectedKeyPropToUse);\n React.useEffect(function () {\n /** Get all selected indexes for multi-select mode */\n var getSelectedIndexes = function () {\n if (selectedKeyPropToUse === undefined) {\n if (multiSelect) {\n return getAllSelectedIndices();\n }\n var selectedIndex = getSelectedIndex(null);\n return selectedIndex !== -1 ? [selectedIndex] : [];\n }\n else if (!Array.isArray(selectedKeyPropToUse)) {\n var selectedIndex = getSelectedIndex(selectedKeyPropToUse);\n return selectedIndex !== -1 ? [selectedIndex] : [];\n }\n var returnValue = [];\n for (var _i = 0, selectedKeyPropToUse_1 = selectedKeyPropToUse; _i < selectedKeyPropToUse_1.length; _i++) {\n var key = selectedKeyPropToUse_1[_i];\n var selectedIndex = getSelectedIndex(key);\n selectedIndex !== -1 && returnValue.push(selectedIndex);\n }\n return returnValue;\n };\n var getAllSelectedIndices = function () {\n return options\n .map(function (option, index) { return (option.selected ? index : -1); })\n .filter(function (index) { return index !== -1; });\n };\n var getSelectedIndex = function (searchKey) {\n return findIndex(options, function (option) {\n // eslint-disable-next-line eqeqeq\n if (searchKey != null) {\n return option.key === searchKey;\n }\n else {\n // eslint-disable-next-line deprecation/deprecation\n return !!option.selected || !!option.isSelected;\n }\n });\n };\n if ((selectedKeyPropToUse !== undefined || !oldOptions) &&\n (selectedKeyPropToUse !== oldSelectedKeyProp || didOptionsChange)) {\n setSelectedIndices(getSelectedIndexes());\n }\n }, [didOptionsChange, multiSelect, oldOptions, oldSelectedKeyProp, options, selectedKeyPropToUse]);\n return [selectedIndices, setSelectedIndices];\n}\nexport var DropdownBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n var responsiveMode = useResponsiveMode(rootRef, props.responsiveMode);\n var _a = useSelectedItemsState(props), selectedIndices = _a[0], setSelectedIndices = _a[1];\n return (React.createElement(DropdownInternal, __assign({}, props, { responsiveMode: responsiveMode, hoisted: { rootRef: mergedRootRef, selectedIndices: selectedIndices, setSelectedIndices: setSelectedIndices } })));\n});\nDropdownBase.displayName = 'DropdownBase';\nvar DropdownInternal = /** @class */ (function (_super) {\n __extends(DropdownInternal, _super);\n function DropdownInternal(props) {\n var _this = _super.call(this, props) || this;\n _this._host = React.createRef();\n _this._focusZone = React.createRef();\n _this._dropDown = React.createRef();\n _this._scrollIdleDelay = 250 /* ms */;\n _this._sizePosCache = new DropdownSizePosCache();\n _this._requestAnimationFrame = safeRequestAnimationFrame(_this);\n _this._onChange = function (event, options, index, checked, multiSelect) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, onChange = _a.onChange, onChanged = _a.onChanged;\n if (onChange || onChanged) {\n // for single-select, option passed in will always be selected.\n // for multi-select, flip the checked value\n var changedOpt = multiSelect ? __assign(__assign({}, options[index]), { selected: !checked }) : options[index];\n onChange && onChange(__assign(__assign({}, event), { target: _this._dropDown.current }), changedOpt, index);\n onChanged && onChanged(changedOpt, index);\n }\n };\n /** Get either props.placeholder (new name) or props.placeHolder (old name) */\n _this._getPlaceholder = function () {\n // eslint-disable-next-line deprecation/deprecation\n return _this.props.placeholder || _this.props.placeHolder;\n };\n /** Get text in dropdown input as a string */\n _this._getTitle = function (items, _unused) {\n var _a = _this.props.multiSelectDelimiter, multiSelectDelimiter = _a === void 0 ? ', ' : _a;\n return items.map(function (i) { return i.text; }).join(multiSelectDelimiter);\n };\n /** Render text in dropdown input */\n _this._onRenderTitle = function (items) {\n return React.createElement(React.Fragment, null, _this._getTitle(items));\n };\n /** Render placeholder text in dropdown input */\n _this._onRenderPlaceholder = function (props) {\n if (!_this._getPlaceholder()) {\n return null;\n }\n return React.createElement(React.Fragment, null, _this._getPlaceholder());\n };\n /** Render Callout or Panel container and pass in list */\n _this._onRenderContainer = function (props) {\n var calloutProps = props.calloutProps, panelProps = props.panelProps;\n var _a = _this.props, responsiveMode = _a.responsiveMode, dropdownWidth = _a.dropdownWidth;\n var isSmall = responsiveMode <= ResponsiveMode.medium;\n var panelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.panel\n : undefined;\n var calloutWidth = undefined;\n var calloutMinWidth = undefined;\n if (dropdownWidth === 'auto') {\n calloutMinWidth = _this._dropDown.current ? _this._dropDown.current.clientWidth : 0;\n }\n else {\n calloutWidth = dropdownWidth || (_this._dropDown.current ? _this._dropDown.current.clientWidth : 0);\n }\n return isSmall ? (React.createElement(Panel, __assign({ isOpen: true, isLightDismiss: true, onDismiss: _this._onDismiss, hasCloseButton: false, styles: panelStyles }, panelProps), _this._renderFocusableList(props))) : (React.createElement(Callout, __assign({ isBeakVisible: false, gapSpace: 0, doNotLayer: false, directionalHintFixed: false, directionalHint: DirectionalHint.bottomLeftEdge, calloutWidth: calloutWidth, calloutMinWidth: calloutMinWidth }, calloutProps, { className: _this._classNames.callout, target: _this._dropDown.current, onDismiss: _this._onDismiss, onScroll: _this._onScroll, onPositioned: _this._onPositioned }), _this._renderFocusableList(props)));\n };\n /** Render Caret Down Icon */\n _this._onRenderCaretDown = function (props) {\n return React.createElement(Icon, { className: _this._classNames.caretDown, iconName: \"ChevronDown\", \"aria-hidden\": true });\n };\n /** Render List of items */\n _this._onRenderList = function (props) {\n var _a = props.onRenderItem, onRenderItem = _a === void 0 ? _this._onRenderItem : _a;\n var queue = { items: [] };\n var renderedList = [];\n var emptyQueue = function () {\n var newGroup = queue.id\n ? [\n React.createElement(\"div\", { role: \"group\", key: queue.id, \"aria-labelledby\": queue.id }, queue.items),\n ]\n : queue.items;\n renderedList = __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 = _this._id + item.key;\n queue.items.push(onRenderItem(__assign(__assign({ id: id }, item), { index: index }), _this._onRenderItem));\n queue.id = id;\n break;\n case SelectableOptionMenuItemType.Divider:\n index > 0 && queue.items.push(onRenderItem(__assign(__assign({}, item), { index: index }), _this._onRenderItem));\n queue.items.length > 0 && emptyQueue();\n break;\n default:\n queue.items.push(onRenderItem(__assign(__assign({}, item), { index: index }), _this._onRenderItem));\n }\n };\n // Place options into the queue. Queue will be emptied anytime a Header or Divider is encountered\n props.options.forEach(function (item, index) {\n placeRenderedOptionIntoQueue(item, index);\n });\n // Push remaining items into all renderedList\n queue.items.length > 0 && emptyQueue();\n return React.createElement(React.Fragment, null, renderedList);\n };\n _this._onRenderItem = function (item) {\n switch (item.itemType) {\n case SelectableOptionMenuItemType.Divider:\n return _this._renderSeparator(item);\n case SelectableOptionMenuItemType.Header:\n return _this._renderHeader(item);\n default:\n return _this._renderOption(item);\n }\n };\n _this._renderOption = function (item) {\n var _a = _this.props, _b = _a.onRenderOption, onRenderOption = _b === void 0 ? _this._onRenderOption : _b, _c = _a.hoisted.selectedIndices, selectedIndices = _c === void 0 ? [] : _c;\n var isItemSelected = item.index !== undefined && selectedIndices ? selectedIndices.indexOf(item.index) > -1 : false;\n // select the right className based on the combination of selected/disabled\n var itemClassName = item.hidden // predicate: item hidden\n ? _this._classNames.dropdownItemHidden\n : isItemSelected && item.disabled === true // predicate: both selected and disabled\n ? _this._classNames.dropdownItemSelectedAndDisabled\n : isItemSelected // predicate: selected only\n ? _this._classNames.dropdownItemSelected\n : item.disabled === true // predicate: disabled only\n ? _this._classNames.dropdownItemDisabled\n : _this._classNames.dropdownItem;\n var title = item.title;\n var multiSelectItemStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.multiSelectItem\n : undefined;\n return !_this.props.multiSelect ? (React.createElement(CommandButton, { id: _this._listId + item.index, key: item.key, \"data-index\": item.index, \"data-is-focusable\": !item.disabled, disabled: item.disabled, className: itemClassName, onClick: _this._onItemClick(item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseEnter: _this._onItemMouseEnter.bind(_this, item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseLeave: _this._onMouseItemLeave.bind(_this, item), \n // eslint-disable-next-line react/jsx-no-bind\n onMouseMove: _this._onItemMouseMove.bind(_this, item), role: \"option\", \"aria-selected\": isItemSelected ? 'true' : 'false', ariaLabel: item.ariaLabel, title: title, \"aria-posinset\": _this._sizePosCache.positionInSet(item.index), \"aria-setsize\": _this._sizePosCache.optionSetSize }, onRenderOption(item, _this._onRenderOption))) : (React.createElement(Checkbox, { id: _this._listId + item.index, key: item.key, disabled: item.disabled, onChange: _this._onItemClick(item), inputProps: __assign({ 'aria-selected': isItemSelected, onMouseEnter: _this._onItemMouseEnter.bind(_this, item), onMouseLeave: _this._onMouseItemLeave.bind(_this, item), onMouseMove: _this._onItemMouseMove.bind(_this, item), role: 'option' }, {\n 'data-index': item.index,\n 'data-is-focusable': !item.disabled,\n }), label: item.text, title: title, \n // eslint-disable-next-line react/jsx-no-bind\n onRenderLabel: _this._onRenderItemLabel.bind(_this, item), className: itemClassName, checked: isItemSelected, styles: multiSelectItemStyles, ariaPositionInSet: _this._sizePosCache.positionInSet(item.index), ariaSetSize: _this._sizePosCache.optionSetSize, ariaLabel: item.ariaLabel }));\n };\n /** Render content of item (i.e. text/icon inside of button) */\n _this._onRenderOption = function (item) {\n return React.createElement(\"span\", { className: _this._classNames.dropdownOptionText }, item.text);\n };\n /** Render custom label for drop down item */\n _this._onRenderItemLabel = function (item) {\n var _a = _this.props.onRenderOption, onRenderOption = _a === void 0 ? _this._onRenderOption : _a;\n return onRenderOption(item, _this._onRenderOption);\n };\n _this._onPositioned = function (positions) {\n if (_this._focusZone.current) {\n // Focusing an element can trigger a reflow. Making this wait until there is an animation\n // frame can improve perf significantly.\n _this._requestAnimationFrame(function () {\n var selectedIndices = _this.props.hoisted.selectedIndices;\n if (_this._focusZone.current) {\n if (!_this._hasBeenPositioned &&\n selectedIndices &&\n selectedIndices[0] &&\n !_this.props.options[selectedIndices[0]].disabled) {\n var element = getDocument().getElementById(_this._id + \"-list\" + selectedIndices[0]);\n if (element) {\n _this._focusZone.current.focusElement(element);\n }\n _this._hasBeenPositioned = true;\n }\n else {\n _this._focusZone.current.focus();\n }\n }\n });\n }\n if (!_this.state.calloutRenderEdge || _this.state.calloutRenderEdge !== positions.targetEdge) {\n _this.setState({\n calloutRenderEdge: positions.targetEdge,\n });\n }\n };\n _this._onItemClick = function (item) {\n return function (event) {\n if (!item.disabled) {\n _this.setSelectedIndex(event, item.index);\n if (!_this.props.multiSelect) {\n // only close the callout when it's in single-select mode\n _this.setState({\n isOpen: false,\n });\n }\n }\n };\n };\n /**\n * Scroll handler for the callout to make sure the mouse events\n * for updating focus are not interacting during scroll\n */\n _this._onScroll = function () {\n if (!_this._isScrollIdle && _this._scrollIdleTimeoutId !== undefined) {\n clearTimeout(_this._scrollIdleTimeoutId);\n _this._scrollIdleTimeoutId = undefined;\n }\n else {\n _this._isScrollIdle = false;\n }\n _this._scrollIdleTimeoutId = window.setTimeout(function () {\n _this._isScrollIdle = true;\n }, _this._scrollIdleDelay);\n };\n _this._onMouseItemLeave = function (item, ev) {\n if (_this._shouldIgnoreMouseEvent()) {\n return;\n }\n /**\n * IE11 focus() method forces parents to scroll to top of element.\n * Edge and IE expose a setActive() function for focusable divs that\n * sets the page focus but does not scroll the parent element.\n */\n if (_this._host.current) {\n if (_this._host.current.setActive) {\n try {\n _this._host.current.setActive();\n }\n catch (e) {\n /* no-op */\n }\n }\n else {\n _this._host.current.focus();\n }\n }\n };\n _this._onDismiss = function () {\n _this.setState({ isOpen: false });\n };\n _this._onDropdownBlur = function (ev) {\n // If Dropdown disabled do not proceed with this logic.\n var disabled = _this._isDisabled();\n if (disabled) {\n return;\n }\n if (_this.state.isOpen) {\n // Do not call onBlur or update focus state when the callout is opened\n return;\n }\n _this.setState({ hasFocus: false });\n if (_this.props.onBlur) {\n _this.props.onBlur(ev);\n }\n };\n _this._onDropdownKeyDown = function (ev) {\n // If Dropdown disabled do not process any keyboard events.\n var disabled = _this._isDisabled();\n if (disabled) {\n return;\n }\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in _shouldHandleKeyUp for reasoning.\n _this._lastKeyDownWasAltOrMeta = _this._isAltOrMeta(ev);\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n var newIndex;\n var selectedIndex = _this.props.hoisted.selectedIndices.length ? _this.props.hoisted.selectedIndices[0] : -1;\n var containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n var isOpen = _this.state.isOpen;\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.enter:\n _this.setState({\n isOpen: !isOpen,\n });\n break;\n case KeyCodes.escape:\n if (!isOpen) {\n return;\n }\n _this.setState({\n isOpen: false,\n });\n break;\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n if (isOpen) {\n _this.setState({ isOpen: false });\n break;\n }\n return;\n }\n if (_this.props.multiSelect) {\n _this.setState({ isOpen: true });\n }\n else if (!_this._isDisabled()) {\n newIndex = _this._moveIndex(ev, -1, selectedIndex - 1, selectedIndex);\n }\n break;\n case KeyCodes.down:\n if (containsExpandCollapseModifier) {\n ev.stopPropagation();\n ev.preventDefault();\n }\n if ((containsExpandCollapseModifier && !isOpen) || _this.props.multiSelect) {\n _this.setState({ isOpen: true });\n }\n else if (!_this._isDisabled()) {\n newIndex = _this._moveIndex(ev, 1, selectedIndex + 1, selectedIndex);\n }\n break;\n case KeyCodes.home:\n if (!_this.props.multiSelect) {\n newIndex = _this._moveIndex(ev, 1, 0, selectedIndex);\n }\n break;\n case KeyCodes.end:\n if (!_this.props.multiSelect) {\n newIndex = _this._moveIndex(ev, -1, _this.props.options.length - 1, selectedIndex);\n }\n break;\n case KeyCodes.space:\n // event handled in _onDropdownKeyUp\n break;\n default:\n return;\n }\n if (newIndex !== selectedIndex) {\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n _this._onDropdownKeyUp = function (ev) {\n // If Dropdown disabled do not process any keyboard events.\n var disabled = _this._isDisabled();\n if (disabled) {\n return;\n }\n var shouldHandleKey = _this._shouldHandleKeyUp(ev);\n var isOpen = _this.state.isOpen;\n if (_this.props.onKeyUp) {\n _this.props.onKeyUp(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.space:\n _this.setState({\n isOpen: !isOpen,\n });\n break;\n default:\n if (shouldHandleKey && isOpen) {\n _this.setState({ isOpen: false });\n }\n return;\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this._onZoneKeyDown = function (ev) {\n var elementToFocus;\n // Take note if we are processing an alt (option) or meta (command) keydown.\n // See comment in _shouldHandleKeyUp for reasoning.\n _this._lastKeyDownWasAltOrMeta = _this._isAltOrMeta(ev);\n var containsExpandCollapseModifier = ev.altKey || ev.metaKey;\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.up:\n if (containsExpandCollapseModifier) {\n _this.setState({ isOpen: false });\n }\n else {\n if (_this._host.current) {\n elementToFocus = getLastFocusable(_this._host.current, _this._host.current.lastChild, true);\n }\n }\n break;\n // All directional keystrokes should be canceled when the zone is rendered.\n // This avoids the body scroll from reacting and thus dismissing the dropdown.\n case KeyCodes.home:\n case KeyCodes.end:\n case KeyCodes.pageUp:\n case KeyCodes.pageDown:\n break;\n case KeyCodes.down:\n if (!containsExpandCollapseModifier && _this._host.current) {\n elementToFocus = getFirstFocusable(_this._host.current, _this._host.current.firstChild, true);\n }\n break;\n case KeyCodes.escape:\n _this.setState({ isOpen: false });\n break;\n case KeyCodes.tab:\n _this.setState({ isOpen: false });\n return;\n default:\n return;\n }\n if (elementToFocus) {\n elementToFocus.focus();\n }\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this._onZoneKeyUp = function (ev) {\n var shouldHandleKey = _this._shouldHandleKeyUp(ev);\n if (shouldHandleKey && _this.state.isOpen) {\n _this.setState({ isOpen: false });\n ev.preventDefault();\n }\n };\n _this._onDropdownClick = function (ev) {\n if (_this.props.onClick) {\n _this.props.onClick(ev);\n if (ev.defaultPrevented) {\n return;\n }\n }\n var isOpen = _this.state.isOpen;\n var disabled = _this._isDisabled();\n if (!disabled && !_this._shouldOpenOnFocus()) {\n _this.setState({\n isOpen: !isOpen,\n });\n }\n _this._isFocusedByClick = false; // reset\n };\n _this._onDropdownMouseDown = function () {\n _this._isFocusedByClick = true;\n };\n _this._onFocus = function (ev) {\n var disabled = _this._isDisabled();\n if (!disabled) {\n if (_this.props.onFocus) {\n _this.props.onFocus(ev);\n }\n var state = { hasFocus: true };\n if (_this._shouldOpenOnFocus()) {\n state.isOpen = true;\n }\n _this.setState(state);\n }\n };\n /**\n * Because the isDisabled prop is deprecated, we have had to repeat this logic all over the place.\n * This helper method avoids all the repetition.\n */\n _this._isDisabled = function () {\n var disabled = _this.props.disabled;\n // eslint-disable-next-line deprecation/deprecation\n var isDisabled = _this.props.isDisabled;\n // Remove this deprecation workaround at 1.0.0\n if (disabled === undefined) {\n disabled = isDisabled;\n }\n return disabled;\n };\n _this._onRenderLabel = function (props) {\n var label = props.label, required = props.required, disabled = props.disabled;\n var labelStyles = _this._classNames.subComponentStyles\n ? _this._classNames.subComponentStyles.label\n : undefined;\n return label ? (React.createElement(Label, { className: _this._classNames.label, id: _this._labelId, required: required, styles: labelStyles, disabled: disabled }, label)) : null;\n };\n initializeComponentRef(_this);\n var multiSelect = props.multiSelect, selectedKey = props.selectedKey, selectedKeys = props.selectedKeys, defaultSelectedKey = props.defaultSelectedKey, defaultSelectedKeys = props.defaultSelectedKeys, options = props.options;\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations(COMPONENT_NAME, props, {\n isDisabled: 'disabled',\n onChanged: 'onChange',\n placeHolder: 'placeholder',\n onRenderPlaceHolder: 'onRenderPlaceholder',\n });\n warnMutuallyExclusive(COMPONENT_NAME, props, {\n defaultSelectedKey: 'selectedKey',\n defaultSelectedKeys: 'selectedKeys',\n selectedKeys: 'selectedKey',\n });\n if (multiSelect) {\n var warnMultiSelect = function (prop) {\n return warn(\"Dropdown property '\" + prop + \"' cannot be used when 'multiSelect' is true. Use '\" + prop + \"s' instead.\");\n };\n if (selectedKey !== undefined) {\n warnMultiSelect('selectedKey');\n }\n if (defaultSelectedKey !== undefined) {\n warnMultiSelect('defaultSelectedKey');\n }\n }\n else {\n var warnNotMultiSelect = function (prop) {\n return warn(\"Dropdown property '\" + prop + \"s' cannot be used when 'multiSelect' is false/unset. Use '\" + prop + \"' instead.\");\n };\n if (selectedKeys !== undefined) {\n warnNotMultiSelect('selectedKey');\n }\n if (defaultSelectedKeys !== undefined) {\n warnNotMultiSelect('defaultSelectedKey');\n }\n }\n }\n _this._id = props.id || getId('Dropdown');\n _this._labelId = _this._id + '-label';\n _this._listId = _this._id + '-list';\n _this._optionId = _this._id + '-option';\n _this._isScrollIdle = true;\n _this._hasBeenPositioned = false;\n _this._sizePosCache.updateOptions(options);\n _this.state = {\n isOpen: false,\n hasFocus: false,\n calloutRenderEdge: undefined,\n };\n return _this;\n }\n Object.defineProperty(DropdownInternal.prototype, \"selectedOptions\", {\n /**\n * All selected options\n */\n get: function () {\n var _a = this.props, options = _a.options, selectedIndices = _a.hoisted.selectedIndices;\n return getAllSelectedOptions(options, selectedIndices);\n },\n enumerable: false,\n configurable: true\n });\n DropdownInternal.prototype.componentWillUnmount = function () {\n clearTimeout(this._scrollIdleTimeoutId);\n };\n DropdownInternal.prototype.componentDidUpdate = function (prevProps, prevState) {\n if (prevState.isOpen === true && this.state.isOpen === false) {\n this._gotMouseMove = false;\n this._hasBeenPositioned = false;\n if (this.props.onDismiss) {\n this.props.onDismiss();\n }\n }\n };\n DropdownInternal.prototype.render = function () {\n var id = this._id;\n var props = this.props;\n var className = props.className, label = props.label, options = props.options, ariaLabel = props.ariaLabel, required = props.required, errorMessage = props.errorMessage, propStyles = props.styles, theme = props.theme, panelProps = props.panelProps, calloutProps = props.calloutProps, _a = props.onRenderTitle, onRenderTitle = _a === void 0 ? this._getTitle : _a, _b = props.onRenderContainer, onRenderContainer = _b === void 0 ? this._onRenderContainer : _b, _c = props.onRenderCaretDown, onRenderCaretDown = _c === void 0 ? this._onRenderCaretDown : _c, _d = props.onRenderLabel, onRenderLabel = _d === void 0 ? this._onRenderLabel : _d, selectedIndices = props.hoisted.selectedIndices;\n var _e = this.state, isOpen = _e.isOpen, calloutRenderEdge = _e.calloutRenderEdge, hasFocus = _e.hasFocus;\n // eslint-disable-next-line deprecation/deprecation\n var onRenderPlaceholder = props.onRenderPlaceholder || props.onRenderPlaceHolder || this._getPlaceholder;\n // If our cached options are out of date update our cache\n if (options !== this._sizePosCache.cachedOptions) {\n this._sizePosCache.updateOptions(options);\n }\n var selectedOptions = getAllSelectedOptions(options, selectedIndices);\n var divProps = getNativeProps(props, divProperties);\n var disabled = this._isDisabled();\n var errorMessageId = id + '-errorMessage';\n var ariaActiveDescendant = disabled\n ? undefined\n : isOpen && selectedIndices.length === 1 && selectedIndices[0] >= 0\n ? this._listId + selectedIndices[0]\n : undefined;\n this._classNames = getClassNames(propStyles, {\n theme: theme,\n className: className,\n hasError: !!(errorMessage && errorMessage.length > 0),\n hasLabel: !!label,\n isOpen: isOpen,\n required: required,\n disabled: disabled,\n isRenderingPlaceholder: !selectedOptions.length,\n panelClassName: panelProps ? panelProps.className : undefined,\n calloutClassName: calloutProps ? calloutProps.className : undefined,\n calloutRenderEdge: calloutRenderEdge,\n });\n var hasErrorMessage = !!errorMessage && errorMessage.length > 0;\n return (React.createElement(\"div\", { className: this._classNames.root, ref: this.props.hoisted.rootRef, \"aria-owns\": isOpen ? this._listId : undefined },\n onRenderLabel(this.props, this._onRenderLabel),\n React.createElement(\"div\", __assign({ \"data-is-focusable\": !disabled, \"data-ktp-target\": true, ref: this._dropDown, id: id, tabIndex: disabled ? -1 : 0, role: \"combobox\", \"aria-haspopup\": \"listbox\", \"aria-expanded\": isOpen ? 'true' : 'false', \"aria-label\": ariaLabel, \"aria-labelledby\": label && !ariaLabel ? mergeAriaAttributeValues(this._labelId, this._optionId) : undefined, \"aria-describedby\": hasErrorMessage ? this._id + '-errorMessage' : undefined, \"aria-activedescendant\": ariaActiveDescendant, \"aria-required\": required, \"aria-disabled\": disabled, \"aria-controls\": isOpen ? this._listId : undefined }, divProps, { className: this._classNames.dropdown, onBlur: this._onDropdownBlur, onKeyDown: this._onDropdownKeyDown, onKeyUp: this._onDropdownKeyUp, onClick: this._onDropdownClick, onMouseDown: this._onDropdownMouseDown, onFocus: this._onFocus }),\n React.createElement(\"span\", { id: this._optionId, className: this._classNames.title, \"aria-live\": hasFocus ? 'polite' : undefined, \"aria-atomic\": hasFocus ? true : undefined, \"aria-invalid\": hasErrorMessage }, \n // If option is selected render title, otherwise render the placeholder text\n selectedOptions.length\n ? onRenderTitle(selectedOptions, this._onRenderTitle)\n : onRenderPlaceholder(props, this._onRenderPlaceholder)),\n React.createElement(\"span\", { className: this._classNames.caretDownWrapper }, onRenderCaretDown(props, this._onRenderCaretDown))),\n isOpen && onRenderContainer(__assign(__assign({}, props), { onDismiss: this._onDismiss }), this._onRenderContainer),\n hasErrorMessage && (React.createElement(\"div\", { role: \"alert\", id: errorMessageId, className: this._classNames.errorMessage }, errorMessage))));\n };\n DropdownInternal.prototype.focus = function (shouldOpenOnFocus) {\n if (this._dropDown.current) {\n this._dropDown.current.focus();\n if (shouldOpenOnFocus) {\n this.setState({\n isOpen: true,\n });\n }\n }\n };\n DropdownInternal.prototype.setSelectedIndex = function (event, index) {\n var _a = this.props, options = _a.options, selectedKey = _a.selectedKey, selectedKeys = _a.selectedKeys, multiSelect = _a.multiSelect, notifyOnReselect = _a.notifyOnReselect, _b = _a.hoisted.selectedIndices, selectedIndices = _b === void 0 ? [] : _b;\n var checked = selectedIndices ? selectedIndices.indexOf(index) > -1 : false;\n var newIndexes = [];\n index = Math.max(0, Math.min(options.length - 1, index));\n // If this is a controlled component then no state change should take place.\n if (selectedKey !== undefined || selectedKeys !== undefined) {\n this._onChange(event, options, index, checked, multiSelect);\n return;\n }\n if (!multiSelect && !notifyOnReselect && index === selectedIndices[0]) {\n return;\n }\n else if (multiSelect) {\n newIndexes = selectedIndices ? this._copyArray(selectedIndices) : [];\n if (checked) {\n var position = newIndexes.indexOf(index);\n if (position > -1) {\n // unchecked the current one\n newIndexes.splice(position, 1);\n }\n }\n else {\n // add the new selected index into the existing one\n newIndexes.push(index);\n }\n }\n else {\n // Set the selected option if this is an uncontrolled component\n newIndexes = [index];\n }\n event.persist();\n // Call onChange after state is updated\n this.props.hoisted.setSelectedIndices(newIndexes);\n this._onChange(event, options, index, checked, multiSelect);\n };\n DropdownInternal.prototype._copyArray = function (array) {\n var newArray = [];\n for (var _i = 0, array_1 = array; _i < array_1.length; _i++) {\n var element = array_1[_i];\n newArray.push(element);\n }\n return newArray;\n };\n /**\n * Finds the next valid Dropdown option and sets the selected index to it.\n * @param stepValue - Value of how many items the function should traverse. Should be -1 or 1.\n * @param index - Index of where the search should start\n * @param selectedIndex - The selectedIndex Dropdown's state\n * @returns The next valid dropdown option's index\n */\n DropdownInternal.prototype._moveIndex = function (event, stepValue, index, selectedIndex) {\n var options = this.props.options;\n // Return selectedIndex if nothing has changed or options is empty\n if (selectedIndex === index || options.length === 0) {\n return selectedIndex;\n }\n // If the user is pressing the up or down key we want to make\n // sure that the dropdown cycles through the options without\n // causing the screen to scroll. In _onDropdownKeyDown\n // at the very end is a check to see if newIndex !== selectedIndex.\n // If the index is less than 0 and we set it back to 0, then\n // newIndex will equal selectedIndex and not stop the action\n // of the key press happening and vice versa for indexes greater\n // than or equal to the options length.\n if (index >= options.length) {\n index = 0;\n }\n else if (index < 0) {\n index = options.length - 1;\n }\n var stepCounter = 0;\n // If current index is a header or divider, or disabled, increment by step\n while (options[index].itemType === DropdownMenuItemType.Header ||\n options[index].itemType === DropdownMenuItemType.Divider ||\n options[index].disabled) {\n // If stepCounter exceeds length of options, then return selectedIndex (-1)\n if (stepCounter >= options.length) {\n return selectedIndex;\n }\n // If index + stepValue is out of bounds, wrap around\n if (index + stepValue < 0) {\n index = options.length;\n }\n else if (index + stepValue >= options.length) {\n index = -1;\n }\n index = index + stepValue;\n stepCounter++;\n }\n this.setSelectedIndex(event, index);\n return index;\n };\n /** Wrap item list in a FocusZone */\n DropdownInternal.prototype._renderFocusableList = function (props) {\n var _a = props.onRenderList, onRenderList = _a === void 0 ? this._onRenderList : _a, label = props.label, ariaLabel = props.ariaLabel, multiSelect = props.multiSelect;\n return (React.createElement(\"div\", { className: this._classNames.dropdownItemsWrapper, onKeyDown: this._onZoneKeyDown, onKeyUp: this._onZoneKeyUp, ref: this._host, tabIndex: 0 },\n React.createElement(FocusZone, { ref: this._focusZone, direction: FocusZoneDirection.vertical, id: this._listId, className: this._classNames.dropdownItems, role: \"listbox\", \"aria-label\": ariaLabel, \"aria-labelledby\": label && !ariaLabel ? this._labelId : undefined, \"aria-multiselectable\": multiSelect }, onRenderList(props, this._onRenderList))));\n };\n DropdownInternal.prototype._renderSeparator = function (item) {\n var index = item.index, key = item.key;\n if (index > 0) {\n return React.createElement(\"div\", { role: \"separator\", key: key, className: this._classNames.dropdownDivider });\n }\n return null;\n };\n DropdownInternal.prototype._renderHeader = function (item) {\n var _a = this.props.onRenderOption, onRenderOption = _a === void 0 ? this._onRenderOption : _a;\n var key = item.key, id = item.id;\n return (React.createElement(\"div\", { id: id, key: key, className: this._classNames.dropdownItemHeader }, onRenderOption(item, this._onRenderOption)));\n };\n DropdownInternal.prototype._onItemMouseEnter = function (item, ev) {\n if (this._shouldIgnoreMouseEvent()) {\n return;\n }\n var targetElement = ev.currentTarget;\n targetElement.focus();\n };\n DropdownInternal.prototype._onItemMouseMove = function (item, ev) {\n var targetElement = ev.currentTarget;\n this._gotMouseMove = true;\n if (!this._isScrollIdle || document.activeElement === targetElement) {\n return;\n }\n targetElement.focus();\n };\n DropdownInternal.prototype._shouldIgnoreMouseEvent = function () {\n return !this._isScrollIdle || !this._gotMouseMove;\n };\n /**\n * Returns true if the key for the event is alt (Mac option) or meta (Mac command).\n */\n DropdownInternal.prototype._isAltOrMeta = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === KeyCodes.alt || ev.key === 'Meta';\n };\n /**\n * We close the menu on key up only if ALL of the following are true:\n * - Most recent key down was alt or meta (command)\n * - The alt/meta key down was NOT followed by some other key (such as down/up arrow to\n * expand/collapse the menu)\n * - We're not on a Mac (or iOS)\n *\n * This is because on Windows, pressing alt moves focus to the application menu bar or similar,\n * closing any open context menus. There is not a similar behavior on Macs.\n */\n DropdownInternal.prototype._shouldHandleKeyUp = function (ev) {\n var keyPressIsAltOrMetaAlone = this._lastKeyDownWasAltOrMeta && this._isAltOrMeta(ev);\n this._lastKeyDownWasAltOrMeta = false;\n return !!keyPressIsAltOrMetaAlone && !(isMac() || isIOS());\n };\n /**\n * Returns true if dropdown should set to open on focus.\n * Otherwise, isOpen state should be toggled on click\n */\n DropdownInternal.prototype._shouldOpenOnFocus = function () {\n var hasFocus = this.state.hasFocus;\n var openOnKeyboardFocus = this.props.openOnKeyboardFocus;\n return !this._isFocusedByClick && openOnKeyboardFocus === true && !hasFocus;\n };\n DropdownInternal.defaultProps = {\n options: [],\n };\n return DropdownInternal;\n}(React.Component));\n//# sourceMappingURL=Dropdown.base.js.map","var _a, _b, _c;\nimport { __assign, __spreadArrays } from \"tslib\";\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { RectangleEdge } from '../../Positioning';\nimport { FontWeights, HighContrastSelector, getGlobalClassNames, normalize, HighContrastSelectorWhite, getScreenSelector, ScreenWidthMinMedium, getHighContrastNoAdjustStyle, } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Dropdown-container',\n label: 'ms-Dropdown-label',\n dropdown: 'ms-Dropdown',\n title: 'ms-Dropdown-title',\n caretDownWrapper: 'ms-Dropdown-caretDownWrapper',\n caretDown: 'ms-Dropdown-caretDown',\n callout: 'ms-Dropdown-callout',\n panel: 'ms-Dropdown-panel',\n dropdownItems: 'ms-Dropdown-items',\n dropdownItem: 'ms-Dropdown-item',\n dropdownDivider: 'ms-Dropdown-divider',\n dropdownOptionText: 'ms-Dropdown-optionText',\n dropdownItemHeader: 'ms-Dropdown-header',\n titleIsPlaceHolder: 'ms-Dropdown-titleIsPlaceHolder',\n titleHasError: 'ms-Dropdown-title--hasError',\n};\nvar DROPDOWN_HEIGHT = 32;\nvar DROPDOWN_ITEM_HEIGHT = 36;\nvar highContrastAdjustMixin = (_a = {},\n _a[HighContrastSelector + \", \" + HighContrastSelectorWhite.replace('@media ', '')] = __assign({}, getHighContrastNoAdjustStyle()),\n _a);\nvar highContrastItemAndTitleStateMixin = {\n selectors: __assign((_b = {}, _b[HighContrastSelector] = {\n backgroundColor: 'Highlight',\n borderColor: 'Highlight',\n color: 'HighlightText',\n }, _b), highContrastAdjustMixin),\n};\nvar highContrastBorderState = {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n borderColor: 'Highlight',\n },\n _c),\n};\nvar MinimumScreenSelector = getScreenSelector(0, ScreenWidthMinMedium);\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n var theme = props.theme, hasError = props.hasError, hasLabel = props.hasLabel, className = props.className, isOpen = props.isOpen, disabled = props.disabled, required = props.required, isRenderingPlaceholder = props.isRenderingPlaceholder, panelClassName = props.panelClassName, calloutClassName = props.calloutClassName, calloutRenderEdge = props.calloutRenderEdge;\n if (!theme) {\n throw new Error('theme is undefined or null in base Dropdown getStyles function.');\n }\n var globalClassnames = getGlobalClassNames(GlobalClassNames, theme);\n var palette = theme.palette, semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var rootHoverFocusActiveSelectorNeutralDarkMixin = {\n color: semanticColors.menuItemTextHovered,\n };\n var rootHoverFocusActiveSelectorNeutralPrimaryMixin = {\n color: semanticColors.menuItemText,\n };\n var borderColorError = {\n borderColor: semanticColors.errorText,\n };\n var dropdownItemStyle = [\n globalClassnames.dropdownItem,\n {\n backgroundColor: 'transparent',\n boxSizing: 'border-box',\n cursor: 'pointer',\n display: 'flex',\n alignItems: 'center',\n padding: '0 8px',\n width: '100%',\n minHeight: DROPDOWN_ITEM_HEIGHT,\n lineHeight: 20,\n height: 0,\n position: 'relative',\n border: '1px solid transparent',\n borderRadius: 0,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n textAlign: 'left',\n '.ms-Button-flexContainer': {\n width: '100%',\n },\n },\n ];\n var selectedItemBackgroundColor = semanticColors.menuItemBackgroundPressed;\n var itemSelectors = function (isSelected) {\n var _a;\n if (isSelected === void 0) { isSelected = false; }\n return {\n selectors: (_a = {\n '&:hover:focus': [\n {\n color: semanticColors.menuItemTextHovered,\n backgroundColor: !isSelected ? semanticColors.menuItemBackgroundHovered : selectedItemBackgroundColor,\n },\n highContrastItemAndTitleStateMixin,\n ],\n '&:focus': [\n {\n backgroundColor: !isSelected ? 'transparent' : selectedItemBackgroundColor,\n },\n highContrastItemAndTitleStateMixin,\n ],\n '&:active': [\n {\n color: semanticColors.menuItemTextHovered,\n backgroundColor: !isSelected ? semanticColors.menuBackground : semanticColors.menuItemBackgroundHovered,\n },\n highContrastItemAndTitleStateMixin,\n ]\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus:after\"] = {\n left: 0,\n top: 0,\n bottom: 0,\n right: 0,\n },\n _a[HighContrastSelector] = {\n border: 'none',\n },\n _a),\n };\n };\n var dropdownItemSelected = __spreadArrays(dropdownItemStyle, [\n {\n backgroundColor: selectedItemBackgroundColor,\n color: semanticColors.menuItemTextHovered,\n },\n itemSelectors(true),\n highContrastItemAndTitleStateMixin,\n ]);\n var dropdownItemDisabled = __spreadArrays(dropdownItemStyle, [\n {\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n border: 'none',\n },\n _a),\n },\n ]);\n var titleOpenBorderRadius = calloutRenderEdge === RectangleEdge.bottom\n ? effects.roundedCorner2 + \" \" + effects.roundedCorner2 + \" 0 0\"\n : \"0 0 \" + effects.roundedCorner2 + \" \" + effects.roundedCorner2;\n var calloutOpenBorderRadius = calloutRenderEdge === RectangleEdge.bottom\n ? \"0 0 \" + effects.roundedCorner2 + \" \" + effects.roundedCorner2\n : effects.roundedCorner2 + \" \" + effects.roundedCorner2 + \" 0 0\";\n return {\n root: [globalClassnames.root, className],\n label: globalClassnames.label,\n dropdown: [\n globalClassnames.dropdown,\n normalize,\n fonts.medium,\n {\n color: semanticColors.menuItemText,\n borderColor: semanticColors.focusBorder,\n position: 'relative',\n outline: 0,\n userSelect: 'none',\n selectors: (_b = {},\n _b['&:hover .' + globalClassnames.title] = [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { borderColor: isOpen ? palette.neutralSecondary : palette.neutralPrimary },\n highContrastBorderState,\n ],\n _b['&:focus .' + globalClassnames.title] = [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { selectors: (_c = {}, _c[HighContrastSelector] = { color: 'Highlight' }, _c) },\n ],\n _b['&:focus:after'] = [\n {\n pointerEvents: 'none',\n content: \"''\",\n position: 'absolute',\n boxSizing: 'border-box',\n top: '0px',\n left: '0px',\n width: '100%',\n height: '100%',\n // see https://github.com/microsoft/fluentui/pull/9182 for semantic color disc\n border: !disabled ? \"2px solid \" + palette.themePrimary : 'none',\n borderRadius: '2px',\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n color: 'Highlight',\n },\n _d),\n },\n ],\n _b['&:active .' + globalClassnames.title] = [\n !disabled && rootHoverFocusActiveSelectorNeutralDarkMixin,\n { borderColor: palette.themePrimary },\n highContrastBorderState,\n ],\n _b['&:hover .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _b['&:focus .' + globalClassnames.caretDown] = [\n !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n { selectors: (_e = {}, _e[HighContrastSelector] = { color: 'Highlight' }, _e) },\n ],\n _b['&:active .' + globalClassnames.caretDown] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _b['&:hover .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _b['&:focus .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _b['&:active .' + globalClassnames.titleIsPlaceHolder] = !disabled && rootHoverFocusActiveSelectorNeutralPrimaryMixin,\n _b['&:hover .' + globalClassnames.titleHasError] = borderColorError,\n _b['&:active .' + globalClassnames.titleHasError] = borderColorError,\n _b),\n },\n isOpen && 'is-open',\n disabled && 'is-disabled',\n required && 'is-required',\n required &&\n !hasLabel && {\n selectors: (_f = {\n ':before': {\n content: \"'*'\",\n color: semanticColors.errorText,\n position: 'absolute',\n top: -5,\n right: -10,\n }\n },\n _f[HighContrastSelector] = {\n selectors: {\n ':after': {\n right: -14,\n },\n },\n },\n _f),\n },\n ],\n title: [\n globalClassnames.title,\n normalize,\n {\n backgroundColor: semanticColors.inputBackground,\n borderWidth: 1,\n borderStyle: 'solid',\n borderColor: semanticColors.inputBorder,\n borderRadius: isOpen ? titleOpenBorderRadius : effects.roundedCorner2,\n cursor: 'pointer',\n display: 'block',\n height: DROPDOWN_HEIGHT,\n lineHeight: DROPDOWN_HEIGHT - 2,\n padding: \"0 28px 0 8px\",\n position: 'relative',\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n },\n isRenderingPlaceholder && [globalClassnames.titleIsPlaceHolder, { color: semanticColors.inputPlaceholderText }],\n hasError && [globalClassnames.titleHasError, borderColorError],\n disabled && {\n backgroundColor: semanticColors.disabledBackground,\n border: 'none',\n color: semanticColors.disabledText,\n cursor: 'default',\n selectors: (_g = {},\n _g[HighContrastSelector] = __assign({ border: '1px solid GrayText', color: 'GrayText', backgroundColor: 'Window' }, getHighContrastNoAdjustStyle()),\n _g),\n },\n ],\n caretDownWrapper: [\n globalClassnames.caretDownWrapper,\n {\n height: DROPDOWN_HEIGHT,\n lineHeight: DROPDOWN_HEIGHT - 2,\n paddingTop: 1,\n position: 'absolute',\n right: 8,\n top: 0,\n },\n !disabled && {\n cursor: 'pointer',\n },\n ],\n caretDown: [\n globalClassnames.caretDown,\n { color: palette.neutralSecondary, fontSize: fonts.small.fontSize, pointerEvents: 'none' },\n disabled && {\n color: semanticColors.disabledText,\n selectors: (_h = {},\n _h[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _h),\n },\n ],\n errorMessage: __assign(__assign({ color: semanticColors.errorText }, theme.fonts.small), { paddingTop: 5 }),\n callout: [\n globalClassnames.callout,\n {\n boxShadow: effects.elevation8,\n borderRadius: calloutOpenBorderRadius,\n selectors: (_j = {},\n _j['.ms-Callout-main'] = { borderRadius: calloutOpenBorderRadius },\n _j),\n },\n calloutClassName,\n ],\n dropdownItemsWrapper: { selectors: { '&:focus': { outline: 0 } } },\n dropdownItems: [globalClassnames.dropdownItems, { display: 'block' }],\n dropdownItem: __spreadArrays(dropdownItemStyle, [itemSelectors()]),\n dropdownItemSelected: dropdownItemSelected,\n dropdownItemDisabled: dropdownItemDisabled,\n dropdownItemSelectedAndDisabled: [dropdownItemSelected, dropdownItemDisabled, { backgroundColor: 'transparent' }],\n dropdownItemHidden: __spreadArrays(dropdownItemStyle, [{ display: 'none' }]),\n dropdownDivider: [globalClassnames.dropdownDivider, { height: 1, backgroundColor: semanticColors.bodyDivider }],\n dropdownOptionText: [\n globalClassnames.dropdownOptionText,\n {\n overflow: 'hidden',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n minWidth: 0,\n maxWidth: '100%',\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n margin: '1px',\n },\n ],\n dropdownItemHeader: [\n globalClassnames.dropdownItemHeader,\n __assign(__assign({}, fonts.medium), { fontWeight: FontWeights.semibold, color: semanticColors.menuHeader, background: 'none', backgroundColor: 'transparent', border: 'none', height: DROPDOWN_ITEM_HEIGHT, lineHeight: DROPDOWN_ITEM_HEIGHT, cursor: 'default', padding: '0 8px', userSelect: 'none', textAlign: 'left', selectors: (_k = {},\n _k[HighContrastSelector] = __assign({ color: 'GrayText' }, getHighContrastNoAdjustStyle()),\n _k) }),\n ],\n subComponentStyles: {\n label: { root: { display: 'inline-block' } },\n multiSelectItem: {\n root: {\n padding: 0,\n },\n label: {\n alignSelf: 'stretch',\n padding: '0 8px',\n width: '100%',\n },\n input: {\n selectors: (_l = {},\n _l[\".\" + IsFocusVisibleClassName + \" &:focus + label::before\"] = {\n outlineOffset: '0px',\n },\n _l),\n },\n },\n panel: {\n root: [panelClassName],\n main: {\n selectors: (_m = {},\n // In case of extra small screen sizes\n _m[MinimumScreenSelector] = {\n // panelWidth xs\n width: 272,\n },\n _m),\n },\n contentInner: { padding: '0 0 20px' },\n },\n },\n };\n};\n//# sourceMappingURL=Dropdown.styles.js.map","import { styled } from '../../Utilities';\nimport { DropdownBase } from './Dropdown.base';\nimport { getStyles } from './Dropdown.styles';\nexport var Dropdown = styled(DropdownBase, getStyles, undefined, {\n scope: 'Dropdown',\n});\nDropdown.displayName = 'Dropdown';\n//# sourceMappingURL=Dropdown.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { getNativeProps, divProperties, classNamesFunction, getDocument, memoizeFunction, getRTL, Customizer, useFocusRects, } from '../../Utilities';\nimport { createTheme } from '../../Styling';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar getFabricTheme = memoizeFunction(function (theme, isRTL) { return createTheme(__assign(__assign({}, theme), { rtl: isRTL })); });\nvar getDir = function (_a) {\n var theme = _a.theme, dir = _a.dir;\n var contextDir = getRTL(theme) ? 'rtl' : 'ltr';\n var pageDir = getRTL() ? 'rtl' : 'ltr';\n var componentDir = dir ? dir : contextDir;\n return {\n // If Fabric dir !== contextDir\n // Or If contextDir !== pageDir\n // Then we need to set dir of the Fabric root\n rootDir: componentDir !== contextDir || componentDir !== pageDir ? componentDir : dir,\n // If dir !== contextDir || pageDir\n // then set contextual theme around content\n needsTheme: componentDir !== contextDir,\n };\n};\nexport var FabricBase = React.forwardRef(function (props, ref) {\n var className = props.className, theme = props.theme, applyTheme = props.applyTheme, applyThemeToBody = props.applyThemeToBody, styles = props.styles;\n var classNames = getClassNames(styles, {\n theme: theme,\n applyTheme: applyTheme,\n className: className,\n });\n var rootElement = React.useRef(null);\n useApplyThemeToBody(applyThemeToBody, classNames, rootElement);\n useFocusRects(rootElement);\n return React.createElement(React.Fragment, null, useRenderedContent(props, classNames, rootElement, ref));\n});\nFabricBase.displayName = 'FabricBase';\nfunction useRenderedContent(props, _a, rootElement, ref) {\n var root = _a.root;\n var _b = props.as, Root = _b === void 0 ? 'div' : _b, dir = props.dir, theme = props.theme;\n var divProps = getNativeProps(props, divProperties, ['dir']);\n var _c = getDir(props), rootDir = _c.rootDir, needsTheme = _c.needsTheme;\n var renderedContent = React.createElement(Root, __assign({ dir: rootDir }, divProps, { className: root, ref: useMergedRefs(rootElement, ref) }));\n // Create the contextual theme if component direction does not match parent direction.\n if (needsTheme) {\n // Disabling ThemeProvider here because theme doesn't need to be re-provided by ThemeProvider if dir has changed.\n renderedContent = (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(Customizer, { settings: { theme: getFabricTheme(theme, dir === 'rtl') } }, renderedContent));\n }\n return renderedContent;\n}\nfunction useApplyThemeToBody(applyThemeToBody, _a, rootElement) {\n var bodyThemed = _a.bodyThemed;\n React.useEffect(function () {\n if (applyThemeToBody) {\n var currentDoc_1 = getDocument(rootElement.current);\n if (currentDoc_1) {\n currentDoc_1.body.classList.add(bodyThemed);\n return function () {\n currentDoc_1.body.classList.remove(bodyThemed);\n };\n }\n }\n }, [bodyThemed, applyThemeToBody, rootElement]);\n return rootElement;\n}\n//# sourceMappingURL=Fabric.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar inheritFont = { fontFamily: 'inherit' };\nvar GlobalClassNames = {\n root: 'ms-Fabric',\n bodyThemed: 'ms-Fabric-bodyThemed',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, applyTheme = props.applyTheme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: theme.palette.neutralPrimary,\n selectors: {\n '& button': inheritFont,\n '& input': inheritFont,\n '& textarea': inheritFont,\n },\n },\n // apply theme to only if applyTheme is true\n applyTheme && {\n color: theme.semanticColors.bodyText,\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n className,\n ],\n bodyThemed: [\n {\n backgroundColor: theme.semanticColors.bodyBackground,\n },\n ],\n };\n};\n//# sourceMappingURL=Fabric.styles.js.map","import { styled } from '../../Utilities';\nimport { FabricBase } from './Fabric.base';\nimport { getStyles } from './Fabric.styles';\n/**\n * @deprecated This component is deprecated as of `@fluentui/react` version 8. Use `ThemeProvider` instead.\n */\nexport var Fabric = styled(FabricBase, getStyles, undefined, {\n scope: 'Fabric',\n});\n//# sourceMappingURL=Fabric.js.map","import { __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 { classNames, MS_ICON } from './Icon.styles';\nimport { css, getNativeProps, htmlElementProperties, memoizeFunction } from '../../Utilities';\nimport { getIcon } from '../../Styling';\nexport var getIconContent = memoizeFunction(function (iconName) {\n var _a = getIcon(iconName) || {\n subset: {},\n code: undefined,\n }, code = _a.code, subset = _a.subset;\n if (!code) {\n return null;\n }\n return {\n children: code,\n iconClassName: subset.className,\n fontFamily: subset.fontFace && subset.fontFace.fontFamily,\n mergeImageProps: subset.mergeImageProps,\n };\n}, undefined, true /*ignoreNullOrUndefinedResult */);\n/**\n * Fast icon component which only supports font glyphs (not images) and can't be targeted by customizations.\n * To style the icon, use `className` or reference `ms-Icon` in CSS.\n * {@docCategory Icon}\n */\nexport var FontIcon = function (props) {\n var iconName = props.iconName, className = props.className, _a = props.style, style = _a === void 0 ? {} : _a;\n var iconContent = getIconContent(iconName) || {};\n var iconClassName = iconContent.iconClassName, children = iconContent.children, fontFamily = iconContent.fontFamily, mergeImageProps = iconContent.mergeImageProps;\n var nativeProps = getNativeProps(props, htmlElementProperties);\n var accessibleName = props['aria-label'] || props.title;\n var containerProps = props['aria-label'] || props['aria-labelledby'] || props.title\n ? {\n role: mergeImageProps ? undefined : 'img',\n }\n : {\n 'aria-hidden': true,\n };\n var finalChildren = children;\n if (mergeImageProps) {\n if (typeof children === 'object' && typeof children.props === 'object' && accessibleName) {\n finalChildren = React.cloneElement(children, { alt: accessibleName });\n }\n }\n return (React.createElement(\"i\", __assign({ \"data-icon-name\": iconName }, containerProps, nativeProps, (mergeImageProps\n ? {\n title: undefined,\n 'aria-label': undefined,\n }\n : {}), { className: css(MS_ICON, classNames.root, iconClassName, !iconName && classNames.placeholder, className), \n // Apply the font family this way to ensure it doesn't get overridden by Fabric Core ms-Icon styles\n // https://github.com/microsoft/fluentui/issues/10449\n style: __assign({ fontFamily: fontFamily }, style) }), finalChildren));\n};\n/**\n * Memoized helper for rendering a FontIcon.\n * @param iconName - The name of the icon to use from the icon font.\n * @param className - Class name for styling the icon.\n * @param ariaLabel - Label for the icon for the benefit of screen readers.\n * {@docCategory Icon}\n */\nexport var getFontIcon = memoizeFunction(function (iconName, className, ariaLabel) {\n return FontIcon({ iconName: iconName, className: className, 'aria-label': ariaLabel });\n});\n//# sourceMappingURL=FontIcon.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { IconType } from './Icon.types';\nimport { Image } from '../Image/Image';\nimport { ImageLoadState } from '../Image/Image.types';\nimport { getNativeProps, htmlElementProperties, classNamesFunction } from '../../Utilities';\nimport { getIconContent } from './FontIcon';\nvar getClassNames = classNamesFunction({\n // Icon is used a lot by other components.\n // It's likely to see expected cases which pass different className to the Icon.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar IconBase = /** @class */ (function (_super) {\n __extends(IconBase, _super);\n function IconBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onImageLoadingStateChange = function (state) {\n if (_this.props.imageProps && _this.props.imageProps.onLoadingStateChange) {\n _this.props.imageProps.onLoadingStateChange(state);\n }\n if (state === ImageLoadState.error) {\n _this.setState({ imageLoadError: true });\n }\n };\n _this.state = {\n imageLoadError: false,\n };\n return _this;\n }\n IconBase.prototype.render = function () {\n var _a = this.props, children = _a.children, className = _a.className, styles = _a.styles, iconName = _a.iconName, imageErrorAs = _a.imageErrorAs, theme = _a.theme;\n var isPlaceholder = typeof iconName === 'string' && iconName.length === 0;\n var isImage = \n // eslint-disable-next-line deprecation/deprecation\n !!this.props.imageProps || this.props.iconType === IconType.image || this.props.iconType === IconType.Image;\n var iconContent = getIconContent(iconName) || {};\n var iconClassName = iconContent.iconClassName, iconContentChildren = iconContent.children, mergeImageProps = iconContent.mergeImageProps;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n iconClassName: iconClassName,\n isImage: isImage,\n isPlaceholder: isPlaceholder,\n });\n var RootType = isImage ? 'span' : 'i';\n var nativeProps = getNativeProps(this.props, htmlElementProperties, [\n 'aria-label',\n ]);\n var imageLoadError = this.state.imageLoadError;\n var imageProps = __assign(__assign({}, this.props.imageProps), { onLoadingStateChange: this._onImageLoadingStateChange });\n var ImageType = (imageLoadError && imageErrorAs) || Image;\n // eslint-disable-next-line deprecation/deprecation\n var ariaLabel = this.props['aria-label'] || this.props.ariaLabel;\n var accessibleName = imageProps.alt || ariaLabel || this.props.title;\n var hasName = !!(accessibleName ||\n this.props['aria-labelledby'] ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby']);\n var containerProps = hasName\n ? {\n role: isImage || mergeImageProps ? undefined : 'img',\n 'aria-label': isImage || mergeImageProps ? undefined : accessibleName,\n }\n : {\n 'aria-hidden': true,\n };\n var finalIconContentChildren = iconContentChildren;\n if (mergeImageProps && iconContentChildren && typeof iconContentChildren === 'object' && accessibleName) {\n finalIconContentChildren = React.cloneElement(iconContentChildren, {\n alt: accessibleName,\n });\n }\n return (React.createElement(RootType, __assign({ \"data-icon-name\": iconName }, containerProps, nativeProps, (mergeImageProps\n ? {\n title: undefined,\n 'aria-label': undefined,\n }\n : {}), { className: classNames.root }), isImage ? React.createElement(ImageType, __assign({}, imageProps)) : children || finalIconContentChildren));\n };\n return IconBase;\n}(React.Component));\nexport { IconBase };\n//# sourceMappingURL=Icon.base.js.map","import { styled } from '../../Utilities';\nimport { IconBase } from './Icon.base';\nimport { getStyles } from './Icon.styles';\n/**\n * Legacy Icon component which can be targeted by customization. It's recommended to use `FontIcon`\n * or `ImageIcon` instead, especially in scenarios where rendering performance is important.\n * {@docCategory Icon}\n */\nexport var Icon = styled(IconBase, getStyles, undefined, {\n scope: 'Icon',\n}, true);\nIcon.displayName = 'Icon';\n//# sourceMappingURL=Icon.js.map","import { mergeStyleSets } from '../../Styling';\n/** Class names used in themeable and non-themeable Icon components */\nexport var classNames = mergeStyleSets({\n root: {\n display: 'inline-block',\n },\n placeholder: [\n 'ms-Icon-placeHolder',\n {\n width: '1em',\n },\n ],\n image: [\n 'ms-Icon-imageContainer',\n {\n overflow: 'hidden',\n },\n ],\n});\n/** Class name used only in non-themeable Icon components */\nexport var MS_ICON = 'ms-Icon';\nexport var getStyles = function (props) {\n var className = props.className, iconClassName = props.iconClassName, isPlaceholder = props.isPlaceholder, isImage = props.isImage, styles = props.styles;\n return {\n root: [\n isPlaceholder && classNames.placeholder,\n classNames.root,\n isImage && classNames.image,\n iconClassName,\n className,\n styles && styles.root,\n // eslint-disable-next-line deprecation/deprecation\n styles && styles.imageContainer,\n ],\n };\n};\n//# sourceMappingURL=Icon.styles.js.map","/**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n * {@docCategory Icon}\n */\nexport var IconType;\n(function (IconType) {\n /**\n * Render using the fabric icon font.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"default\"] = 0] = \"default\";\n /**\n * Render using an image, where imageProps would be used.\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"image\"] = 1] = \"image\";\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"Default\"] = 100000] = \"Default\";\n /**\n * @deprecated Icon type is inferred based on presence of `IIconProps.imageProps`\n */\n IconType[IconType[\"Image\"] = 100001] = \"Image\";\n})(IconType || (IconType = {}));\n//# sourceMappingURL=Icon.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { Image } from '../Image/Image';\nimport { css, getNativeProps, htmlElementProperties } from '../../Utilities';\nimport { classNames, MS_ICON } from './Icon.styles';\n/**\n * Fast icon component which only supports images (not font glyphs) and can't be targeted by customizations.\n * To style the icon, use `className` or reference `ms-Icon` in CSS.\n * {@docCategory Icon}\n */\nexport var ImageIcon = function (props) {\n var className = props.className, imageProps = props.imageProps;\n var nativeProps = getNativeProps(props, htmlElementProperties, [\n 'aria-label',\n 'aria-labelledby',\n 'title',\n 'aria-describedby',\n ]);\n var altText = imageProps.alt || props['aria-label'];\n var hasName = altText ||\n props['aria-labelledby'] ||\n props.title ||\n imageProps['aria-label'] ||\n imageProps['aria-labelledby'] ||\n imageProps.title;\n // move naming or describing attributes from the container (where they are invalid) to the image\n var imageNameProps = {\n 'aria-labelledby': props['aria-labelledby'],\n 'aria-describedby': props['aria-describedby'],\n title: props.title,\n };\n var containerProps = hasName\n ? {}\n : {\n 'aria-hidden': true,\n };\n return (React.createElement(\"div\", __assign({}, containerProps, nativeProps, { className: css(MS_ICON, classNames.root, classNames.image, className) }),\n React.createElement(Image, __assign({}, imageNameProps, imageProps, { alt: hasName ? altText : '' }))));\n};\n//# sourceMappingURL=ImageIcon.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, getNativeProps, imgProperties } from '../../Utilities';\nimport { ImageCoverStyle, ImageFit, ImageLoadState } from './Image.types';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar SVG_REGEX = /\\.svg$/i;\nvar KEY_PREFIX = 'fabricImage';\nfunction useLoadState(props, imageElement) {\n var onLoadingStateChange = props.onLoadingStateChange, onLoad = props.onLoad, onError = props.onError, src = props.src;\n var _a = React.useState(ImageLoadState.notLoaded), loadState = _a[0], setLoadState = _a[1];\n // eslint-disable-next-line no-restricted-properties\n React.useLayoutEffect(function () {\n // If the src property changes, reset the load state\n // (does nothing if the load state is already notLoaded)\n setLoadState(ImageLoadState.notLoaded);\n }, [src]);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- intended to run every render\n React.useEffect(function () {\n if (loadState === ImageLoadState.notLoaded) {\n // testing if naturalWidth and naturalHeight are greater than zero is better than checking\n // .complete, because .complete will also be set to true if the image breaks. However,\n // for some browsers, SVG images do not have a naturalWidth or naturalHeight, so fall back\n // to checking .complete for these images.\n var isLoaded = imageElement.current\n ? (src && imageElement.current.naturalWidth > 0 && imageElement.current.naturalHeight > 0) ||\n (imageElement.current.complete && SVG_REGEX.test(src))\n : false;\n if (isLoaded) {\n setLoadState(ImageLoadState.loaded);\n }\n }\n });\n React.useEffect(function () {\n onLoadingStateChange === null || onLoadingStateChange === void 0 ? void 0 : onLoadingStateChange(loadState);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run when loadState changes\n }, [loadState]);\n var onImageLoaded = React.useCallback(function (ev) {\n onLoad === null || onLoad === void 0 ? void 0 : onLoad(ev);\n if (src) {\n setLoadState(ImageLoadState.loaded);\n }\n }, [src, onLoad]);\n var onImageError = React.useCallback(function (ev) {\n onError === null || onError === void 0 ? void 0 : onError(ev);\n setLoadState(ImageLoadState.error);\n }, [onError]);\n return [loadState, onImageLoaded, onImageError];\n}\nexport var ImageBase = React.forwardRef(function (props, forwardedRef) {\n var frameElement = React.useRef();\n var imageElement = React.useRef();\n var _a = useLoadState(props, imageElement), loadState = _a[0], onImageLoaded = _a[1], onImageError = _a[2];\n var imageProps = getNativeProps(props, imgProperties, [\n 'width',\n 'height',\n ]);\n var src = props.src, alt = props.alt, width = props.width, height = props.height, _b = props.shouldFadeIn, shouldFadeIn = _b === void 0 ? true : _b, shouldStartVisible = props.shouldStartVisible, className = props.className, imageFit = props.imageFit, role = props.role, maximizeFrame = props.maximizeFrame, styles = props.styles, theme = props.theme, loading = props.loading;\n var coverStyle = useCoverStyle(props, loadState, imageElement, frameElement);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n width: width,\n height: height,\n maximizeFrame: maximizeFrame,\n shouldFadeIn: shouldFadeIn,\n shouldStartVisible: shouldStartVisible,\n isLoaded: loadState === ImageLoadState.loaded || (loadState === ImageLoadState.notLoaded && props.shouldStartVisible),\n isLandscape: coverStyle === ImageCoverStyle.landscape,\n isCenter: imageFit === ImageFit.center,\n isCenterContain: imageFit === ImageFit.centerContain,\n isCenterCover: imageFit === ImageFit.centerCover,\n isContain: imageFit === ImageFit.contain,\n isCover: imageFit === ImageFit.cover,\n isNone: imageFit === ImageFit.none,\n isError: loadState === ImageLoadState.error,\n isNotImageFit: imageFit === undefined,\n });\n // If image dimensions aren't specified, the natural size of the image is used.\n return (React.createElement(\"div\", { className: classNames.root, style: { width: width, height: height }, ref: frameElement },\n React.createElement(\"img\", __assign({}, imageProps, { onLoad: onImageLoaded, onError: onImageError, key: KEY_PREFIX + props.src || '', className: classNames.image, ref: useMergedRefs(imageElement, forwardedRef), src: src, alt: alt, role: role, loading: loading }))));\n});\nImageBase.displayName = 'ImageBase';\nfunction useCoverStyle(props, loadState, imageElement, frameElement) {\n var previousLoadState = React.useRef(loadState);\n var coverStyle = React.useRef();\n if (coverStyle === undefined ||\n (previousLoadState.current === ImageLoadState.notLoaded && loadState === ImageLoadState.loaded)) {\n coverStyle.current = computeCoverStyle(props, loadState, imageElement, frameElement);\n }\n previousLoadState.current = loadState;\n return coverStyle.current;\n}\nfunction computeCoverStyle(props, loadState, imageElement, frameElement) {\n var imageFit = props.imageFit, width = props.width, height = props.height;\n // Do not compute cover style if it was already specified in props\n if (props.coverStyle !== undefined) {\n return props.coverStyle;\n }\n else if (loadState === ImageLoadState.loaded &&\n (imageFit === ImageFit.cover ||\n imageFit === ImageFit.contain ||\n imageFit === ImageFit.centerContain ||\n imageFit === ImageFit.centerCover) &&\n imageElement.current &&\n frameElement.current) {\n // Determine the desired ratio using the width and height props.\n // If those props aren't available, measure measure the frame.\n var desiredRatio = void 0;\n if (typeof width === 'number' &&\n typeof height === 'number' &&\n imageFit !== ImageFit.centerContain &&\n imageFit !== ImageFit.centerCover) {\n desiredRatio = width / height;\n }\n else {\n desiredRatio = frameElement.current.clientWidth / frameElement.current.clientHeight;\n }\n // Examine the source image to determine its original ratio.\n var naturalRatio = imageElement.current.naturalWidth / imageElement.current.naturalHeight;\n // Should we crop from the top or the sides?\n if (naturalRatio > desiredRatio) {\n return ImageCoverStyle.landscape;\n }\n }\n return ImageCoverStyle.portrait;\n}\n//# sourceMappingURL=Image.base.js.map","import { AnimationClassNames, getGlobalClassNames } from '../../Styling';\nimport { getWindow } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-Image',\n rootMaximizeFrame: 'ms-Image--maximizeFrame',\n image: 'ms-Image-image',\n imageCenter: 'ms-Image-image--center',\n imageContain: 'ms-Image-image--contain',\n imageCover: 'ms-Image-image--cover',\n imageCenterContain: 'ms-Image-image--centerContain',\n imageCenterCover: 'ms-Image-image--centerCover',\n imageNone: 'ms-Image-image--none',\n imageLandscape: 'ms-Image-image--landscape',\n imagePortrait: 'ms-Image-image--portrait',\n};\nexport var getStyles = function (props) {\n var className = props.className, width = props.width, height = props.height, maximizeFrame = props.maximizeFrame, isLoaded = props.isLoaded, shouldFadeIn = props.shouldFadeIn, shouldStartVisible = props.shouldStartVisible, isLandscape = props.isLandscape, isCenter = props.isCenter, isContain = props.isContain, isCover = props.isCover, isCenterContain = props.isCenterContain, isCenterCover = props.isCenterCover, isNone = props.isNone, isError = props.isError, isNotImageFit = props.isNotImageFit, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var ImageFitStyles = {\n position: 'absolute',\n left: '50% /* @noflip */',\n top: '50%',\n transform: 'translate(-50%,-50%)',\n };\n // Cut the mustard using msMaxTouchPoints to detect IE11 which does not support CSS object-fit\n var window = getWindow();\n var supportsObjectFit = window !== undefined && window.navigator.msMaxTouchPoints === undefined;\n var fallbackObjectFitStyles = (isContain && isLandscape) || (isCover && !isLandscape)\n ? { width: '100%', height: 'auto' }\n : { width: 'auto', height: '100%' };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n overflow: 'hidden',\n },\n maximizeFrame && [\n classNames.rootMaximizeFrame,\n {\n height: '100%',\n width: '100%',\n },\n ],\n isLoaded && shouldFadeIn && !shouldStartVisible && AnimationClassNames.fadeIn400,\n (isCenter || isContain || isCover || isCenterContain || isCenterCover) && {\n position: 'relative',\n },\n className,\n ],\n image: [\n classNames.image,\n {\n display: 'block',\n opacity: 0,\n },\n isLoaded && [\n 'is-loaded',\n {\n opacity: 1,\n },\n ],\n isCenter && [classNames.imageCenter, ImageFitStyles],\n isContain && [\n classNames.imageContain,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'contain',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n !supportsObjectFit && ImageFitStyles,\n ],\n isCover && [\n classNames.imageCover,\n supportsObjectFit && {\n width: '100%',\n height: '100%',\n objectFit: 'cover',\n },\n !supportsObjectFit && fallbackObjectFitStyles,\n !supportsObjectFit && ImageFitStyles,\n ],\n isCenterContain && [\n classNames.imageCenterContain,\n isLandscape && {\n maxWidth: '100%',\n },\n !isLandscape && {\n maxHeight: '100%',\n },\n ImageFitStyles,\n ],\n isCenterCover && [\n classNames.imageCenterCover,\n isLandscape && {\n maxHeight: '100%',\n },\n !isLandscape && {\n maxWidth: '100%',\n },\n ImageFitStyles,\n ],\n isNone && [\n classNames.imageNone,\n {\n width: 'auto',\n height: 'auto',\n },\n ],\n isNotImageFit && [\n !!width &&\n !height && {\n height: 'auto',\n width: '100%',\n },\n !width &&\n !!height && {\n height: '100%',\n width: 'auto',\n },\n !!width &&\n !!height && {\n height: '100%',\n width: '100%',\n },\n ],\n isLandscape && classNames.imageLandscape,\n !isLandscape && classNames.imagePortrait,\n !isLoaded && 'is-notLoaded',\n shouldFadeIn && 'is-fadeIn',\n isError && 'is-error',\n ],\n };\n};\n//# sourceMappingURL=Image.styles.js.map","import { styled } from '../../Utilities';\nimport { ImageBase } from './Image.base';\nimport { getStyles } from './Image.styles';\nexport var Image = styled(ImageBase, getStyles, undefined, {\n scope: 'Image',\n}, true);\nImage.displayName = 'Image';\n//# sourceMappingURL=Image.js.map","/**\n * The possible methods that can be used to fit the image.\n * {@docCategory Image}\n */\nexport var ImageFit;\n(function (ImageFit) {\n /**\n * The image is not scaled. The image is centered and cropped within the content box.\n */\n ImageFit[ImageFit[\"center\"] = 0] = \"center\";\n /**\n * The image is scaled to maintain its aspect ratio while being fully contained within the frame. The image will\n * be centered horizontally and vertically within the frame. The space in the top and bottom or in the sides of\n * the frame will be empty depending on the difference in aspect ratio between the image and the frame.\n */\n ImageFit[ImageFit[\"contain\"] = 1] = \"contain\";\n /**\n * The image is scaled to maintain its aspect ratio while filling the frame. Portions of the image will be cropped\n * from the top and bottom, or the sides, depending on the difference in aspect ratio between the image and the frame.\n */\n ImageFit[ImageFit[\"cover\"] = 2] = \"cover\";\n /**\n * Neither the image nor the frame are scaled. If their sizes do not match, the image will either be cropped or the\n * frame will have empty space.\n */\n ImageFit[ImageFit[\"none\"] = 3] = \"none\";\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height or width is less than the Image frame's height or width,\n * but if both natural height and width are larger than the frame it will behave as ImageFit.cover.\n */\n ImageFit[ImageFit[\"centerCover\"] = 4] = \"centerCover\";\n /**\n * The image will be centered horizontally and vertically within the frame and maintains its aspect ratio. It will\n * behave as ImageFit.center if the image's natural height and width is less than the Image frame's height and width,\n * but if either natural height or width are larger than the frame it will behave as ImageFit.contain.\n */\n ImageFit[ImageFit[\"centerContain\"] = 5] = \"centerContain\";\n})(ImageFit || (ImageFit = {}));\n/**\n * The cover style to be used on the image\n * {@docCategory Image}\n */\nexport var ImageCoverStyle;\n(function (ImageCoverStyle) {\n /**\n * The image will be shown at 100% height of container and the width will be scaled accordingly\n */\n ImageCoverStyle[ImageCoverStyle[\"landscape\"] = 0] = \"landscape\";\n /**\n * The image will be shown at 100% width of container and the height will be scaled accordingly\n */\n ImageCoverStyle[ImageCoverStyle[\"portrait\"] = 1] = \"portrait\";\n})(ImageCoverStyle || (ImageCoverStyle = {}));\n/**\n * {@docCategory Image}\n */\nexport var ImageLoadState;\n(function (ImageLoadState) {\n /**\n * The image has not yet been loaded, and there is no error yet.\n */\n ImageLoadState[ImageLoadState[\"notLoaded\"] = 0] = \"notLoaded\";\n /**\n * The image has been loaded successfully.\n */\n ImageLoadState[ImageLoadState[\"loaded\"] = 1] = \"loaded\";\n /**\n * An error has been encountered while loading the image.\n */\n ImageLoadState[ImageLoadState[\"error\"] = 2] = \"error\";\n /**\n * @deprecated Not used. Use `onLoadingStateChange` and re-render the Image with a different src.\n */\n ImageLoadState[ImageLoadState[\"errorLoaded\"] = 3] = \"errorLoaded\";\n})(ImageLoadState || (ImageLoadState = {}));\n//# sourceMappingURL=Image.types.js.map","import { __rest } from \"tslib\";\nimport { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET } from '../../utilities/keytips/index';\nimport { useKeytipData } from './useKeytipData';\n/**\n * A small element to help the target component correctly read out its aria-describedby for its Keytip\n * {@docCategory Keytips}\n */\nexport var KeytipData = function (props) {\n var _a;\n var children = props.children, keytipDataProps = __rest(props, [\"children\"]);\n var _b = useKeytipData(keytipDataProps), keytipId = _b.keytipId, ariaDescribedBy = _b.ariaDescribedBy;\n return children((_a = {},\n _a[DATAKTP_TARGET] = keytipId,\n _a[DATAKTP_EXECUTE_TARGET] = keytipId,\n _a['aria-describedby'] = ariaDescribedBy,\n _a));\n};\n//# sourceMappingURL=KeytipData.js.map","import { __assign, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { useConst, usePrevious } from '@fluentui/react-hooks';\nimport { mergeAriaAttributeValues } from '../../Utilities';\nimport { KeytipManager, mergeOverflows, sequencesToID, getAriaDescribedBy } from '../../utilities/keytips/index';\n/**\n * Hook that creates attributes for components which are enabled with Keytip.\n */\nexport function useKeytipData(options) {\n var uniqueId = React.useRef();\n var keytipProps = options.keytipProps\n ? __assign({ disabled: options.disabled }, options.keytipProps) : undefined;\n var keytipManager = useConst(KeytipManager.getInstance());\n var prevOptions = usePrevious(options);\n // useLayoutEffect used to strictly emulate didUpdate/didMount behavior\n // eslint-disable-next-line no-restricted-properties\n React.useLayoutEffect(function () {\n if (uniqueId.current &&\n keytipProps &&\n ((prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.keytipProps) !== options.keytipProps || (prevOptions === null || prevOptions === void 0 ? void 0 : prevOptions.disabled) !== options.disabled)) {\n keytipManager.update(keytipProps, uniqueId.current);\n }\n });\n // eslint-disable-next-line no-restricted-properties\n React.useLayoutEffect(function () {\n // Register Keytip in KeytipManager\n if (keytipProps) {\n uniqueId.current = keytipManager.register(keytipProps);\n }\n return function () {\n // Unregister Keytip in KeytipManager\n keytipProps && keytipManager.unregister(keytipProps, uniqueId.current);\n };\n // this is meant to run only at mount, and updates are handled separately\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, []);\n var nativeKeytipProps = {\n ariaDescribedBy: undefined,\n keytipId: undefined,\n };\n if (keytipProps) {\n nativeKeytipProps = getKeytipData(keytipManager, keytipProps, options.ariaDescribedBy);\n }\n return nativeKeytipProps;\n}\n/**\n * Gets the aria- and data- attributes to attach to the component\n * @param keytipProps - options for Keytip\n * @param describedByPrepend - ariaDescribedBy value to prepend\n */\nfunction getKeytipData(keytipManager, keytipProps, describedByPrepend) {\n // Add the parent overflow sequence if necessary\n var newKeytipProps = keytipManager.addParentOverflow(keytipProps);\n // Construct aria-describedby and data-ktp-id attributes\n var ariaDescribedBy = mergeAriaAttributeValues(describedByPrepend, getAriaDescribedBy(newKeytipProps.keySequences));\n var keySequences = __spreadArrays(newKeytipProps.keySequences);\n if (newKeytipProps.overflowSetSequence) {\n keySequences = mergeOverflows(keySequences, newKeytipProps.overflowSetSequence);\n }\n var keytipId = sequencesToID(keySequences);\n return {\n ariaDescribedBy: ariaDescribedBy,\n keytipId: keytipId,\n };\n}\n//# sourceMappingURL=useKeytipData.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 } from \"tslib\";\nimport * as React from 'react';\nimport * as ReactDOM from 'react-dom';\nimport { Fabric } from '../../Fabric';\nimport { classNamesFunction, setPortalAttribute, setVirtualParent } from '../../Utilities';\nimport { registerLayer, getDefaultTarget, unregisterLayer } from './Layer.notification';\nimport { useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport { useDocument } from '../../WindowProvider';\nvar getClassNames = classNamesFunction();\nexport var LayerBase = React.forwardRef(function (props, ref) {\n var rootRef = React.useRef(null);\n var mergedRef = useMergedRefs(rootRef, ref);\n var layerRef = React.useRef();\n // Tracks if the layer mount events need to be raised.\n // Required to allow the DOM to render after the layer element is added.\n var _a = React.useState(false), needRaiseLayerMount = _a[0], setNeedRaiseLayerMount = _a[1];\n var doc = useDocument();\n var eventBubblingEnabled = props.eventBubblingEnabled, styles = props.styles, theme = props.theme, className = props.className, children = props.children, hostId = props.hostId, _b = props.onLayerDidMount, onLayerDidMount = _b === void 0 ? function () { return undefined; } : _b, \n // eslint-disable-next-line deprecation/deprecation\n _c = props.onLayerMounted, \n // eslint-disable-next-line deprecation/deprecation\n onLayerMounted = _c === void 0 ? function () { return undefined; } : _c, onLayerWillUnmount = props.onLayerWillUnmount, insertFirst = props.insertFirst;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isNotHost: !hostId,\n });\n // Returns the user provided hostId props element, the default target selector,\n // or undefined if document doesn't exist.\n var getHost = function () {\n if (!doc) {\n return undefined;\n }\n if (hostId) {\n return doc.getElementById(hostId);\n }\n else {\n var defaultHostSelector = getDefaultTarget();\n return defaultHostSelector ? doc.querySelector(defaultHostSelector) : doc.body;\n }\n };\n // Removes the current layer element's parentNode and runs onLayerWillUnmount prop if provided.\n var removeLayerElement = function () {\n onLayerWillUnmount === null || onLayerWillUnmount === void 0 ? void 0 : onLayerWillUnmount();\n var elem = layerRef.current;\n // Clear ref before removing from the DOM\n layerRef.current = undefined;\n if (elem && elem.parentNode) {\n elem.parentNode.removeChild(elem);\n }\n };\n // If a doc or host exists, it will remove and update layer parentNodes.\n var createLayerElement = function () {\n var host = getHost();\n if (!doc || !host) {\n return;\n }\n // Remove and re-create any previous existing layer elements.\n removeLayerElement();\n var el = doc.createElement('div');\n el.className = classNames.root;\n setPortalAttribute(el);\n setVirtualParent(el, rootRef.current);\n insertFirst ? host.insertBefore(el, host.firstChild) : host.appendChild(el);\n layerRef.current = el;\n setNeedRaiseLayerMount(true);\n };\n // eslint-disable-next-line no-restricted-properties\n React.useLayoutEffect(function () {\n createLayerElement();\n // Check if the user provided a hostId prop and register the layer with the ID.\n if (hostId) {\n registerLayer(hostId, createLayerElement);\n }\n return function () {\n removeLayerElement();\n if (hostId) {\n unregisterLayer(hostId, createLayerElement);\n }\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should run if the hostId updates.\n }, [hostId]);\n React.useEffect(function () {\n if (layerRef.current && needRaiseLayerMount) {\n onLayerMounted === null || onLayerMounted === void 0 ? void 0 : onLayerMounted();\n onLayerDidMount === null || onLayerDidMount === void 0 ? void 0 : onLayerDidMount();\n setNeedRaiseLayerMount(false);\n }\n }, [needRaiseLayerMount, onLayerMounted, onLayerDidMount]);\n useDebugWarnings(props);\n return (React.createElement(\"span\", { className: \"ms-layer\", ref: mergedRef }, layerRef.current &&\n ReactDOM.createPortal(\n /* eslint-disable deprecation/deprecation */\n React.createElement(Fabric, __assign({}, (!eventBubblingEnabled && getFilteredEvents()), { className: classNames.content }), children), \n /* eslint-enable deprecation/deprecation */\n layerRef.current)));\n});\nLayerBase.displayName = 'LayerBase';\nvar filteredEventProps;\nvar onFilterEvent = function (ev) {\n // We should just be able to check ev.bubble here and only stop events that are bubbling up. However, even though\n // mouseenter and mouseleave do NOT bubble up, they are showing up as bubbling. Therefore we stop events based on\n // event name rather than ev.bubble.\n if (ev.eventPhase === Event.BUBBLING_PHASE &&\n ev.type !== 'mouseenter' &&\n ev.type !== 'mouseleave' &&\n ev.type !== 'touchstart' &&\n ev.type !== 'touchend') {\n ev.stopPropagation();\n }\n};\nfunction getFilteredEvents() {\n if (!filteredEventProps) {\n filteredEventProps = {};\n [\n 'onClick',\n 'onContextMenu',\n 'onDoubleClick',\n 'onDrag',\n 'onDragEnd',\n 'onDragEnter',\n 'onDragExit',\n 'onDragLeave',\n 'onDragOver',\n 'onDragStart',\n 'onDrop',\n 'onMouseDown',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseMove',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseUp',\n 'onTouchMove',\n 'onTouchStart',\n 'onTouchCancel',\n 'onTouchEnd',\n 'onKeyDown',\n 'onKeyPress',\n 'onKeyUp',\n 'onFocus',\n 'onBlur',\n 'onChange',\n 'onInput',\n 'onInvalid',\n 'onSubmit',\n ].forEach(function (name) { return (filteredEventProps[name] = onFilterEvent); });\n }\n return filteredEventProps;\n}\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: 'Layer',\n props: props,\n deprecations: { onLayerMounted: 'onLayerDidMount' },\n });\n }\n}\n//# sourceMappingURL=Layer.base.js.map","import { ZIndexes, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Layer',\n rootNoHost: 'ms-Layer--fixed',\n content: 'ms-Layer-content',\n};\nexport var getStyles = function (props) {\n var className = props.className, isNotHost = props.isNotHost, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n isNotHost && [\n classNames.rootNoHost,\n {\n position: 'fixed',\n zIndex: ZIndexes.Layer,\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n visibility: 'hidden',\n },\n ],\n className,\n ],\n content: [\n classNames.content,\n {\n visibility: 'visible',\n },\n ],\n };\n};\n//# sourceMappingURL=Layer.styles.js.map","import { styled } from '../../Utilities';\nimport { LayerBase } from './Layer.base';\nimport { getStyles } from './Layer.styles';\nexport var Layer = styled(LayerBase, getStyles, undefined, {\n scope: 'Layer',\n fields: ['hostId', 'theme', 'styles'],\n});\n//# sourceMappingURL=Layer.js.map","var _layersByHostId = {};\nvar _defaultHostSelector;\n/**\n * Register a layer for a given host id\n * @param hostId Id of the layer host\n * @param layer Layer instance\n */\nexport function registerLayer(hostId, callback) {\n if (!_layersByHostId[hostId]) {\n _layersByHostId[hostId] = [];\n }\n _layersByHostId[hostId].push(callback);\n}\n/**\n * Unregister a layer for a given host id\n * @param hostId Id of the layer host\n * @param layer Layer instance\n */\nexport function unregisterLayer(hostId, callback) {\n if (_layersByHostId[hostId]) {\n var idx = _layersByHostId[hostId].indexOf(callback);\n if (idx >= 0) {\n _layersByHostId[hostId].splice(idx, 1);\n if (_layersByHostId[hostId].length === 0) {\n delete _layersByHostId[hostId];\n }\n }\n }\n}\n/**\n * Used for notifying applicable Layers that a host is available/unavailable and to re-evaluate Layers that\n * care about the specific host.\n */\nexport function notifyHostChanged(id) {\n if (_layersByHostId[id]) {\n _layersByHostId[id].forEach(function (callback) { return callback(); });\n }\n}\n/**\n * Sets the default target selector to use when determining the host in which\n * Layered content will be injected into. If not provided, an element will be\n * created at the end of the document body.\n *\n * Passing in a falsy value will clear the default target and reset back to\n * using a created element at the end of document body.\n */\nexport function setDefaultTarget(selector) {\n _defaultHostSelector = selector;\n}\n/**\n * Get the default target selector when determining a host\n */\nexport function getDefaultTarget() {\n return _defaultHostSelector;\n}\n//# sourceMappingURL=Layer.notification.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nimport { classNamesFunction, useFocusRects } from '@fluentui/utilities';\nvar getClassNames = classNamesFunction();\n/**\n * The useLink hook processes the Link component props and returns\n * state, slots and slotProps for consumption by the component.\n */\nexport var useLink = function (props, forwardedRef) {\n var as = props.as, className = props.className, disabled = props.disabled, href = props.href, onClick = props.onClick, styles = props.styles, theme = props.theme, underline = props.underline;\n var rootRef = React.useRef(null);\n var mergedRootRefs = useMergedRefs(rootRef, forwardedRef);\n useComponentRef(props, rootRef);\n useFocusRects(rootRef);\n var classNames = getClassNames(styles, {\n className: className,\n isButton: !href,\n isDisabled: disabled,\n isUnderlined: underline,\n theme: theme,\n });\n var _onClick = function (ev) {\n if (disabled) {\n ev.preventDefault();\n }\n else if (onClick) {\n onClick(ev);\n }\n };\n var rootType = as ? as : href ? 'a' : 'button';\n var state = {};\n var slots = { root: rootType };\n var slotProps = {\n root: __assign(__assign({}, adjustPropsForRootType(rootType, props)), { 'aria-disabled': disabled, className: classNames.root, onClick: _onClick, ref: mergedRootRefs }),\n };\n return { state: state, slots: slots, slotProps: slotProps };\n};\nvar useComponentRef = function (props, link) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n if (link.current) {\n link.current.focus();\n }\n },\n }); }, [link]);\n};\nvar adjustPropsForRootType = function (RootType, props) {\n // Deconstruct the props so we remove props like `as`, `theme` and `styles`\n // as those will always be removed. We also take some props that are optional\n // based on the RootType.\n var as = props.as, disabled = props.disabled, target = props.target, href = props.href, theme = props.theme, getStyles = props.getStyles, styles = props.styles, componentRef = props.componentRef, underline = props.underline, restProps = __rest(props, [\"as\", \"disabled\", \"target\", \"href\", \"theme\", \"getStyles\", \"styles\", \"componentRef\", \"underline\"]);\n // RootType will be a string if we're dealing with an html component\n if (typeof RootType === 'string') {\n // Remove the disabled prop for anchor elements\n if (RootType === 'a') {\n return __assign({ target: target, href: disabled ? undefined : href }, restProps);\n }\n // Add the type='button' prop for button elements\n if (RootType === 'button') {\n return __assign({ type: 'button', disabled: disabled }, restProps);\n }\n // Remove the target and href props for all other non anchor elements\n return __assign(__assign({}, restProps), { disabled: disabled });\n }\n // Retain all props except 'as' for ReactComponents\n return __assign({ target: target, href: href, disabled: disabled }, restProps);\n};\n//# sourceMappingURL=useLink.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { useLink } from './useLink';\nexport var LinkBase = React.forwardRef(function (props, ref) {\n var _a = useLink(props, ref), slots = _a.slots, slotProps = _a.slotProps;\n return React.createElement(slots.root, __assign({}, slotProps.root));\n});\nLinkBase.displayName = 'LinkBase';\n//# sourceMappingURL=Link.base.js.map","import { styled } from '@fluentui/utilities';\nimport { LinkBase } from './Link.base';\nimport { getStyles } from './Link.styles';\nexport var Link = styled(LinkBase, getStyles, undefined, {\n scope: 'Link',\n});\n//# sourceMappingURL=Link.js.map","import { getGlobalClassNames, HighContrastSelector } from '@fluentui/style-utilities';\nexport var GlobalClassNames = {\n root: 'ms-Link',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f;\n var className = props.className, isButton = props.isButton, isDisabled = props.isDisabled, isUnderlined = props.isUnderlined, theme = props.theme;\n var semanticColors = theme.semanticColors;\n // Tokens\n var linkColor = semanticColors.link;\n var linkInteractedColor = semanticColors.linkHovered;\n var linkDisabledColor = semanticColors.disabledText;\n var focusBorderColor = semanticColors.focusBorder;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n color: linkColor,\n outline: 'none',\n fontSize: 'inherit',\n fontWeight: 'inherit',\n textDecoration: isUnderlined ? 'underline' : 'none',\n selectors: (_a = {\n '.ms-Fabric--isFocusVisible &:focus': {\n // Can't use getFocusStyle because it doesn't support wrapping links\n // https://github.com/microsoft/fluentui/issues/4883#issuecomment-406743543\n // Using box-shadow and outline allows the focus rect to wrap links that span multiple lines\n // and helps the focus rect avoid getting clipped.\n boxShadow: \"0 0 0 1px \" + focusBorderColor + \" inset\",\n outline: \"1px auto \" + focusBorderColor,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n outline: '1px solid WindowText',\n },\n _b),\n }\n },\n _a[HighContrastSelector] = {\n // For IE high contrast mode\n borderBottom: 'none',\n },\n _a),\n },\n isButton && {\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n cursor: 'pointer',\n display: 'inline',\n margin: 0,\n overflow: 'inherit',\n padding: 0,\n textAlign: 'left',\n textOverflow: 'inherit',\n userSelect: 'text',\n borderBottom: '1px solid transparent',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'LinkText',\n forcedColorAdjust: 'none',\n },\n _c),\n },\n !isButton && {\n selectors: (_d = {},\n _d[HighContrastSelector] = {\n // This is mainly for MessageBar, which sets MsHighContrastAdjust: none by default\n MsHighContrastAdjust: 'auto',\n forcedColorAdjust: 'auto',\n },\n _d),\n },\n isDisabled && [\n 'is-disabled',\n {\n color: linkDisabledColor,\n cursor: 'default',\n },\n {\n selectors: {\n '&:link, &:visited': {\n pointerEvents: 'none',\n },\n },\n },\n ],\n !isDisabled && {\n selectors: {\n '&:active, &:hover, &:active:hover': {\n color: linkInteractedColor,\n textDecoration: 'underline',\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'LinkText',\n },\n _e),\n },\n '&:focus': {\n color: linkColor,\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'LinkText',\n },\n _f),\n },\n },\n },\n classNames.root,\n className,\n ],\n };\n};\n//# sourceMappingURL=Link.styles.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, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, getNativeProps, divProperties, enableBodyScroll, disableBodyScroll, initializeComponentRef, } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar OverlayBase = /** @class */ (function (_super) {\n __extends(OverlayBase, _super);\n function OverlayBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n var _a = _this.props.allowTouchBodyScroll, allowTouchBodyScroll = _a === void 0 ? false : _a;\n _this._allowTouchBodyScroll = allowTouchBodyScroll;\n return _this;\n }\n OverlayBase.prototype.componentDidMount = function () {\n !this._allowTouchBodyScroll && disableBodyScroll();\n };\n OverlayBase.prototype.componentWillUnmount = function () {\n !this._allowTouchBodyScroll && enableBodyScroll();\n };\n OverlayBase.prototype.render = function () {\n var _a = this.props, isDark = _a.isDarkThemed, className = _a.className, theme = _a.theme, styles = _a.styles;\n var divProps = getNativeProps(this.props, divProperties);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isDark: isDark,\n });\n return React.createElement(\"div\", __assign({}, divProps, { className: classNames.root }));\n };\n return OverlayBase;\n}(React.Component));\nexport { OverlayBase };\n//# sourceMappingURL=Overlay.base.js.map","import { HighContrastSelector, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Overlay',\n rootDark: 'ms-Overlay--dark',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, isNone = props.isNone, isDark = props.isDark;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n backgroundColor: palette.whiteTranslucent40,\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n position: 'absolute',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: '1px solid WindowText',\n opacity: 0,\n },\n _a),\n },\n isNone && {\n visibility: 'hidden',\n },\n isDark && [\n classNames.rootDark,\n {\n backgroundColor: palette.blackTranslucent40,\n },\n ],\n className,\n ],\n };\n};\n//# sourceMappingURL=Overlay.styles.js.map","import { styled } from '../../Utilities';\nimport { OverlayBase } from './Overlay.base';\nimport { getStyles } from './Overlay.styles';\nexport var Overlay = styled(OverlayBase, getStyles, undefined, {\n scope: 'Overlay',\n});\n//# sourceMappingURL=Overlay.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { IconButton } from '../../Button';\nimport { Layer } from '../../Layer';\nimport { Overlay } from '../../Overlay';\nimport { Popup } from '../../Popup';\nimport { allowScrollOnElement, allowOverscrollOnElement, classNamesFunction, divProperties, elementContains, getId, getNativeProps, getRTL, css, warnDeprecations, Async, EventGroup, initializeComponentRef, } from '../../Utilities';\nimport { FocusTrapZone } from '../FocusTrapZone/index';\nimport { PanelType } from './Panel.types';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'Panel';\nvar PanelVisibilityState;\n(function (PanelVisibilityState) {\n PanelVisibilityState[PanelVisibilityState[\"closed\"] = 0] = \"closed\";\n PanelVisibilityState[PanelVisibilityState[\"animatingOpen\"] = 1] = \"animatingOpen\";\n PanelVisibilityState[PanelVisibilityState[\"open\"] = 2] = \"open\";\n PanelVisibilityState[PanelVisibilityState[\"animatingClosed\"] = 3] = \"animatingClosed\";\n})(PanelVisibilityState || (PanelVisibilityState = {}));\nvar PanelBase = /** @class */ (function (_super) {\n __extends(PanelBase, _super);\n function PanelBase(props) {\n var _this = _super.call(this, props) || this;\n _this._panel = React.createRef();\n _this._animationCallback = null;\n _this._hasCustomNavigation = !!(_this.props.onRenderNavigation || _this.props.onRenderNavigationContent);\n _this.dismiss = function (ev) {\n if (_this.props.onDismiss && _this.isActive) {\n _this.props.onDismiss(ev);\n }\n if (!ev || (ev && !ev.defaultPrevented)) {\n _this.close();\n }\n };\n // Allow the user to scroll within the panel but not on the body\n _this._allowScrollOnPanel = function (elt) {\n if (elt) {\n if (_this._allowTouchBodyScroll) {\n allowOverscrollOnElement(elt, _this._events);\n }\n else {\n allowScrollOnElement(elt, _this._events);\n }\n }\n else {\n _this._events.off(_this._scrollableContent);\n }\n _this._scrollableContent = elt;\n };\n _this._onRenderNavigation = function (props) {\n if (!_this.props.onRenderNavigationContent && !_this.props.onRenderNavigation && !_this.props.hasCloseButton) {\n return null;\n }\n var _a = _this.props.onRenderNavigationContent, onRenderNavigationContent = _a === void 0 ? _this._onRenderNavigationContent : _a;\n return (React.createElement(\"div\", { className: _this._classNames.navigation }, onRenderNavigationContent(props, _this._onRenderNavigationContent)));\n };\n _this._onRenderNavigationContent = function (props) {\n var _a;\n var closeButtonAriaLabel = props.closeButtonAriaLabel, hasCloseButton = props.hasCloseButton, _b = props.onRenderHeader, onRenderHeader = _b === void 0 ? _this._onRenderHeader : _b;\n if (hasCloseButton) {\n var iconButtonStyles = (_a = _this._classNames.subComponentStyles) === null || _a === void 0 ? void 0 : _a.closeButton();\n return (React.createElement(React.Fragment, null,\n !_this._hasCustomNavigation && onRenderHeader(_this.props, _this._onRenderHeader, _this._headerTextId),\n React.createElement(IconButton, { styles: iconButtonStyles, className: _this._classNames.closeButton, onClick: _this._onPanelClick, ariaLabel: closeButtonAriaLabel, title: closeButtonAriaLabel, \"data-is-visible\": true, iconProps: { iconName: 'Cancel' } })));\n }\n return null;\n };\n _this._onRenderHeader = function (props, defaultRender, headerTextId) {\n var headerText = props.headerText, _a = props.headerTextProps, headerTextProps = _a === void 0 ? {} : _a;\n if (headerText) {\n return (React.createElement(\"div\", { className: _this._classNames.header },\n React.createElement(\"div\", __assign({ id: headerTextId, role: \"heading\", \"aria-level\": 1 }, headerTextProps, { className: css(_this._classNames.headerText, headerTextProps.className) }), headerText)));\n }\n return null;\n };\n _this._onRenderBody = function (props) {\n return React.createElement(\"div\", { className: _this._classNames.content }, props.children);\n };\n _this._onRenderFooter = function (props) {\n var _a = _this.props.onRenderFooterContent, onRenderFooterContent = _a === void 0 ? null : _a;\n if (onRenderFooterContent) {\n return (React.createElement(\"div\", { className: _this._classNames.footer },\n React.createElement(\"div\", { className: _this._classNames.footerInner }, onRenderFooterContent())));\n }\n return null;\n };\n _this._animateTo = function (newVisibilityState) {\n if (newVisibilityState === PanelVisibilityState.open && _this.props.onOpen) {\n _this.props.onOpen();\n }\n _this._animationCallback = _this._async.setTimeout(function () {\n _this.setState({ visibility: newVisibilityState });\n _this._onTransitionComplete();\n }, 200);\n };\n _this._clearExistingAnimationTimer = function () {\n if (_this._animationCallback !== null) {\n _this._async.clearTimeout(_this._animationCallback);\n }\n };\n _this._onPanelClick = function (ev) {\n _this.dismiss(ev);\n };\n _this._onTransitionComplete = function () {\n _this._updateFooterPosition();\n if (_this.state.visibility === PanelVisibilityState.open && _this.props.onOpened) {\n _this.props.onOpened();\n }\n if (_this.state.visibility === PanelVisibilityState.closed && _this.props.onDismissed) {\n _this.props.onDismissed();\n }\n };\n var _a = _this.props.allowTouchBodyScroll, allowTouchBodyScroll = _a === void 0 ? false : _a;\n _this._allowTouchBodyScroll = allowTouchBodyScroll;\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n ignoreExternalFocusing: 'focusTrapZoneProps',\n forceFocusInsideTrap: 'focusTrapZoneProps',\n firstFocusableSelector: 'focusTrapZoneProps',\n });\n _this.state = {\n isFooterSticky: false,\n // intentionally ignore props so animation takes place during componentDidMount\n visibility: PanelVisibilityState.closed,\n id: getId('Panel'),\n };\n return _this;\n }\n PanelBase.getDerivedStateFromProps = function (nextProps, prevState) {\n if (nextProps.isOpen === undefined) {\n return null; // no state update\n }\n if (nextProps.isOpen &&\n (prevState.visibility === PanelVisibilityState.closed ||\n prevState.visibility === PanelVisibilityState.animatingClosed)) {\n return { visibility: PanelVisibilityState.animatingOpen };\n }\n if (!nextProps.isOpen &&\n (prevState.visibility === PanelVisibilityState.open ||\n prevState.visibility === PanelVisibilityState.animatingOpen)) {\n return { visibility: PanelVisibilityState.animatingClosed };\n }\n return null;\n };\n PanelBase.prototype.componentDidMount = function () {\n this._events.on(window, 'resize', this._updateFooterPosition);\n if (this._shouldListenForOuterClick(this.props)) {\n this._events.on(document.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n if (this.props.isOpen) {\n this.setState({ visibility: PanelVisibilityState.animatingOpen });\n }\n };\n PanelBase.prototype.componentDidUpdate = function (previousProps, previousState) {\n var shouldListenOnOuterClick = this._shouldListenForOuterClick(this.props);\n var previousShouldListenOnOuterClick = this._shouldListenForOuterClick(previousProps);\n if (this.state.visibility !== previousState.visibility) {\n this._clearExistingAnimationTimer();\n if (this.state.visibility === PanelVisibilityState.animatingOpen) {\n this._animateTo(PanelVisibilityState.open);\n }\n else if (this.state.visibility === PanelVisibilityState.animatingClosed) {\n this._animateTo(PanelVisibilityState.closed);\n }\n }\n if (shouldListenOnOuterClick && !previousShouldListenOnOuterClick) {\n this._events.on(document.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n else if (!shouldListenOnOuterClick && previousShouldListenOnOuterClick) {\n this._events.off(document.body, 'mousedown', this._dismissOnOuterClick, true);\n }\n };\n PanelBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n PanelBase.prototype.render = function () {\n var _a = this.props, _b = _a.className, className = _b === void 0 ? '' : _b, elementToFocusOnDismiss = _a.elementToFocusOnDismiss, \n /* eslint-disable deprecation/deprecation */\n firstFocusableSelector = _a.firstFocusableSelector, focusTrapZoneProps = _a.focusTrapZoneProps, forceFocusInsideTrap = _a.forceFocusInsideTrap, hasCloseButton = _a.hasCloseButton, headerText = _a.headerText, _c = _a.headerClassName, headerClassName = _c === void 0 ? '' : _c, ignoreExternalFocusing = _a.ignoreExternalFocusing, isBlocking = _a.isBlocking, isFooterAtBottom = _a.isFooterAtBottom, isLightDismiss = _a.isLightDismiss, isHiddenOnDismiss = _a.isHiddenOnDismiss, layerProps = _a.layerProps, overlayProps = _a.overlayProps, popupProps = _a.popupProps, type = _a.type, styles = _a.styles, theme = _a.theme, customWidth = _a.customWidth, _d = _a.onLightDismissClick, onLightDismissClick = _d === void 0 ? this._onPanelClick : _d, _e = _a.onRenderNavigation, onRenderNavigation = _e === void 0 ? this._onRenderNavigation : _e, _f = _a.onRenderHeader, onRenderHeader = _f === void 0 ? this._onRenderHeader : _f, _g = _a.onRenderBody, onRenderBody = _g === void 0 ? this._onRenderBody : _g, _h = _a.onRenderFooter, onRenderFooter = _h === void 0 ? this._onRenderFooter : _h;\n var _j = this.state, isFooterSticky = _j.isFooterSticky, visibility = _j.visibility, id = _j.id;\n var isLeft = type === PanelType.smallFixedNear || type === PanelType.customNear ? true : false;\n var isRTL = getRTL(theme);\n var isOnRightSide = isRTL ? isLeft : !isLeft;\n var customWidthStyles = type === PanelType.custom || type === PanelType.customNear ? { width: customWidth } : {};\n var nativeProps = getNativeProps(this.props, divProperties);\n var isOpen = this.isActive;\n var isAnimating = visibility === PanelVisibilityState.animatingClosed || visibility === PanelVisibilityState.animatingOpen;\n this._headerTextId = headerText && id + '-headerText';\n if (!isOpen && !isAnimating && !isHiddenOnDismiss) {\n return null;\n }\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n focusTrapZoneClassName: focusTrapZoneProps ? focusTrapZoneProps.className : undefined,\n hasCloseButton: hasCloseButton,\n headerClassName: headerClassName,\n isAnimating: isAnimating,\n isFooterSticky: isFooterSticky,\n isFooterAtBottom: isFooterAtBottom,\n isOnRightSide: isOnRightSide,\n isOpen: isOpen,\n isHiddenOnDismiss: isHiddenOnDismiss,\n type: type,\n hasCustomNavigation: this._hasCustomNavigation,\n });\n var _k = this, _classNames = _k._classNames, _allowTouchBodyScroll = _k._allowTouchBodyScroll;\n var overlay;\n if (isBlocking && isOpen) {\n overlay = (React.createElement(Overlay, __assign({ className: _classNames.overlay, isDarkThemed: false, onClick: isLightDismiss ? onLightDismissClick : undefined, allowTouchBodyScroll: _allowTouchBodyScroll }, overlayProps)));\n }\n return (React.createElement(Layer, __assign({}, layerProps),\n React.createElement(Popup, __assign({ role: \"dialog\", \"aria-modal\": isBlocking ? 'true' : undefined, ariaLabelledBy: this._headerTextId ? this._headerTextId : undefined, onDismiss: this.dismiss, className: _classNames.hiddenPanel }, popupProps),\n React.createElement(\"div\", __assign({ \"aria-hidden\": !isOpen && isAnimating }, nativeProps, { ref: this._panel, className: _classNames.root }),\n overlay,\n React.createElement(FocusTrapZone, __assign({ ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: !isBlocking || (isHiddenOnDismiss && !isOpen) ? false : forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector, isClickableOutsideFocusTrap: true }, focusTrapZoneProps, { className: _classNames.main, style: customWidthStyles, elementToFocusOnDismiss: elementToFocusOnDismiss }),\n React.createElement(\"div\", { className: _classNames.contentInner },\n React.createElement(\"div\", { ref: this._allowScrollOnPanel, className: _classNames.scrollableContent, \"data-is-scrollable\": true },\n React.createElement(\"div\", { className: _classNames.commands, \"data-is-visible\": true }, onRenderNavigation(this.props, this._onRenderNavigation)),\n (this._hasCustomNavigation || !hasCloseButton) &&\n onRenderHeader(this.props, this._onRenderHeader, this._headerTextId),\n onRenderBody(this.props, this._onRenderBody),\n onRenderFooter(this.props, this._onRenderFooter))))))));\n };\n PanelBase.prototype.open = function () {\n if (this.props.isOpen !== undefined) {\n return;\n }\n if (this.isActive) {\n return;\n }\n this.setState({ visibility: PanelVisibilityState.animatingOpen });\n };\n PanelBase.prototype.close = function () {\n if (this.props.isOpen !== undefined) {\n return;\n }\n if (!this.isActive) {\n return;\n }\n this.setState({ visibility: PanelVisibilityState.animatingClosed });\n };\n Object.defineProperty(PanelBase.prototype, \"isActive\", {\n /** isActive is true when panel is open or opening. */\n get: function () {\n return (this.state.visibility === PanelVisibilityState.open ||\n this.state.visibility === PanelVisibilityState.animatingOpen);\n },\n enumerable: false,\n configurable: true\n });\n PanelBase.prototype._shouldListenForOuterClick = function (props) {\n return !!props.isBlocking && !!props.isOpen;\n };\n PanelBase.prototype._updateFooterPosition = function () {\n var scrollableContent = this._scrollableContent;\n if (scrollableContent) {\n var height = scrollableContent.clientHeight;\n var innerHeight_1 = scrollableContent.scrollHeight;\n this.setState({\n isFooterSticky: height < innerHeight_1 ? true : false,\n });\n }\n };\n PanelBase.prototype._dismissOnOuterClick = function (ev) {\n var panel = this._panel.current;\n if (this.isActive && panel && !ev.defaultPrevented) {\n if (!elementContains(panel, ev.target)) {\n if (this.props.onOuterClick) {\n this.props.onOuterClick(ev);\n }\n else {\n this.dismiss(ev);\n }\n }\n }\n };\n PanelBase.defaultProps = {\n isHiddenOnDismiss: false,\n isOpen: undefined,\n isBlocking: true,\n hasCloseButton: true,\n type: PanelType.smallFixedFar,\n };\n return PanelBase;\n}(React.Component));\nexport { PanelBase };\n//# sourceMappingURL=Panel.base.js.map","var _a, _b, _c, _d, _e;\nimport { __assign } from \"tslib\";\nimport { PanelType } from './Panel.types';\nimport { AnimationClassNames, AnimationVariables, getGlobalClassNames, HighContrastSelector, ScreenWidthMinMedium, ScreenWidthMinLarge, ScreenWidthMinXLarge, ScreenWidthMinXXLarge, ScreenWidthMinUhfMobile, IconFontSizes, } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Panel',\n main: 'ms-Panel-main',\n commands: 'ms-Panel-commands',\n contentInner: 'ms-Panel-contentInner',\n scrollableContent: 'ms-Panel-scrollableContent',\n navigation: 'ms-Panel-navigation',\n closeButton: 'ms-Panel-closeButton ms-PanelAction-close',\n header: 'ms-Panel-header',\n headerText: 'ms-Panel-headerText',\n content: 'ms-Panel-content',\n footer: 'ms-Panel-footer',\n footerInner: 'ms-Panel-footerInner',\n isOpen: 'is-open',\n hasCloseButton: 'ms-Panel--hasCloseButton',\n smallFluid: 'ms-Panel--smFluid',\n smallFixedNear: 'ms-Panel--smLeft',\n smallFixedFar: 'ms-Panel--sm',\n medium: 'ms-Panel--md',\n large: 'ms-Panel--lg',\n largeFixed: 'ms-Panel--fixed',\n extraLarge: 'ms-Panel--xl',\n custom: 'ms-Panel--custom',\n customNear: 'ms-Panel--customLeft',\n};\nvar panelWidth = {\n full: '100%',\n auto: 'auto',\n xs: 272,\n sm: 340,\n md1: 592,\n md2: 644,\n lg: 940,\n};\nvar panelMargin = {\n auto: 'auto',\n none: 0,\n md: 48,\n lg: 428,\n xl: 176,\n};\n// Following consts are used below in `getPanelBreakpoints()` function to provide\n// necessary fallbacks for different types of Panel in different breakpoints.\nvar smallPanelSelectors = (_a = {},\n _a[\"@media (min-width: \" + ScreenWidthMinMedium + \"px)\"] = {\n width: panelWidth.sm,\n },\n _a);\nvar mediumPanelSelectors = (_b = {},\n _b[\"@media (min-width: \" + ScreenWidthMinLarge + \"px)\"] = {\n width: panelWidth.md1,\n },\n _b[\"@media (min-width: \" + ScreenWidthMinXLarge + \"px)\"] = {\n width: panelWidth.md2,\n },\n _b);\nvar largePanelSelectors = (_c = {},\n _c[\"@media (min-width: \" + ScreenWidthMinUhfMobile + \"px)\"] = {\n left: panelMargin.md,\n width: panelWidth.auto,\n },\n _c[\"@media (min-width: \" + ScreenWidthMinXXLarge + \"px)\"] = {\n left: panelMargin.lg,\n },\n _c);\nvar largeFixedPanelSelectors = (_d = {},\n _d[\"@media (min-width: \" + ScreenWidthMinXXLarge + \"px)\"] = {\n left: panelMargin.auto,\n width: panelWidth.lg,\n },\n _d);\nvar extraLargePanelSelectors = (_e = {},\n _e[\"@media (min-width: \" + ScreenWidthMinXXLarge + \"px)\"] = {\n left: panelMargin.xl,\n },\n _e);\n// Make sure Panels have fallbacks to different breakpoints by reusing same selectors.\n// This is done in the effort to follow design redlines.\nvar getPanelBreakpoints = function (type) {\n var selectors;\n // Panel types `smallFluid`, `smallFixedNear`, `custom` and `customNear`\n // are not checked in here because they render the same in all the breakpoints\n // and have the checks done separately in the `getStyles` function below.\n switch (type) {\n case PanelType.smallFixedFar:\n selectors = __assign({}, smallPanelSelectors);\n break;\n case PanelType.medium:\n selectors = __assign(__assign({}, smallPanelSelectors), mediumPanelSelectors);\n break;\n case PanelType.large:\n selectors = __assign(__assign(__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors);\n break;\n case PanelType.largeFixed:\n selectors = __assign(__assign(__assign(__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors), largeFixedPanelSelectors);\n break;\n case PanelType.extraLarge:\n selectors = __assign(__assign(__assign(__assign({}, smallPanelSelectors), mediumPanelSelectors), largePanelSelectors), extraLargePanelSelectors);\n break;\n default:\n break;\n }\n return selectors;\n};\nvar commandBarHeight = '44px';\nvar sharedPaddingStyles = {\n paddingLeft: '24px',\n paddingRight: '24px',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d;\n var className = props.className, focusTrapZoneClassName = props.focusTrapZoneClassName, hasCloseButton = props.hasCloseButton, headerClassName = props.headerClassName, isAnimating = props.isAnimating, isFooterSticky = props.isFooterSticky, isFooterAtBottom = props.isFooterAtBottom, isOnRightSide = props.isOnRightSide, isOpen = props.isOpen, isHiddenOnDismiss = props.isHiddenOnDismiss, hasCustomNavigation = props.hasCustomNavigation, theme = props.theme, _e = props.type, type = _e === void 0 ? PanelType.smallFixedFar : _e;\n var effects = theme.effects, fonts = theme.fonts, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var isCustomPanel = type === PanelType.custom || type === PanelType.customNear;\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n isOpen && classNames.isOpen,\n hasCloseButton && classNames.hasCloseButton,\n {\n pointerEvents: 'none',\n position: 'absolute',\n top: 0,\n left: 0,\n right: 0,\n bottom: 0,\n },\n isCustomPanel && isOnRightSide && classNames.custom,\n isCustomPanel && !isOnRightSide && classNames.customNear,\n className,\n ],\n overlay: [\n {\n pointerEvents: 'auto',\n cursor: 'pointer',\n },\n isOpen && isAnimating && AnimationClassNames.fadeIn100,\n !isOpen && isAnimating && AnimationClassNames.fadeOut100,\n ],\n hiddenPanel: [\n !isOpen &&\n !isAnimating &&\n isHiddenOnDismiss && {\n visibility: 'hidden',\n },\n ],\n main: [\n classNames.main,\n {\n backgroundColor: semanticColors.bodyBackground,\n boxShadow: effects.elevation64,\n pointerEvents: 'auto',\n position: 'absolute',\n display: 'flex',\n flexDirection: 'column',\n overflowX: 'hidden',\n overflowY: 'auto',\n WebkitOverflowScrolling: 'touch',\n bottom: 0,\n top: 0,\n // left, right, width are overridden depending on the type of the Panel and the screen breakpoint.\n left: panelMargin.auto,\n right: panelMargin.none,\n width: panelWidth.full,\n selectors: __assign((_a = {}, _a[HighContrastSelector] = {\n borderLeft: \"3px solid \" + semanticColors.variantBorder,\n borderRight: \"3px solid \" + semanticColors.variantBorder,\n }, _a), getPanelBreakpoints(type)),\n },\n type === PanelType.smallFluid && {\n left: panelMargin.none,\n },\n type === PanelType.smallFixedNear && {\n left: panelMargin.none,\n right: panelMargin.auto,\n width: panelWidth.xs,\n },\n type === PanelType.customNear && {\n right: 'auto',\n left: 0,\n },\n isCustomPanel && {\n maxWidth: '100vw',\n },\n isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideRightIn40,\n isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideLeftIn40,\n !isOpen && isAnimating && !isOnRightSide && AnimationClassNames.slideLeftOut40,\n !isOpen && isAnimating && isOnRightSide && AnimationClassNames.slideRightOut40,\n focusTrapZoneClassName,\n ],\n commands: [\n classNames.commands,\n {\n marginTop: 18,\n selectors: (_b = {},\n _b[\"@media (min-height: \" + ScreenWidthMinMedium + \"px)\"] = {\n backgroundColor: semanticColors.bodyBackground,\n position: 'sticky',\n top: 0,\n zIndex: 1,\n },\n _b),\n },\n hasCustomNavigation && {\n marginTop: 'inherit',\n },\n ],\n navigation: [\n classNames.navigation,\n {\n display: 'flex',\n justifyContent: 'flex-end',\n },\n hasCustomNavigation && {\n height: commandBarHeight,\n },\n ],\n contentInner: [\n classNames.contentInner,\n {\n display: 'flex',\n flexDirection: 'column',\n flexGrow: 1,\n overflowY: 'hidden',\n },\n ],\n header: [\n classNames.header,\n sharedPaddingStyles,\n {\n alignSelf: 'flex-start',\n },\n hasCloseButton &&\n !hasCustomNavigation && {\n flexGrow: 1,\n },\n hasCustomNavigation && {\n // Ensure that title doesn't shrink if screen is too small\n flexShrink: 0,\n },\n ],\n headerText: [\n classNames.headerText,\n fonts.xLarge,\n {\n color: semanticColors.bodyText,\n lineHeight: '27px',\n overflowWrap: 'break-word',\n wordWrap: 'break-word',\n wordBreak: 'break-word',\n hyphens: 'auto',\n },\n headerClassName,\n ],\n scrollableContent: [\n classNames.scrollableContent,\n {\n overflowY: 'auto',\n },\n isFooterAtBottom && {\n flexGrow: 1,\n display: 'inherit',\n flexDirection: 'inherit',\n },\n ],\n content: [\n classNames.content,\n sharedPaddingStyles,\n {\n paddingBottom: 20,\n },\n isFooterAtBottom && {\n selectors: (_c = {},\n _c[\"@media (min-height: \" + ScreenWidthMinMedium + \"px)\"] = {\n flexGrow: 1,\n },\n _c),\n },\n ],\n footer: [\n classNames.footer,\n {\n // Ensure that footer doesn't shrink if screen is too small\n flexShrink: 0,\n borderTop: '1px solid transparent',\n transition: \"opacity \" + AnimationVariables.durationValue3 + \" \" + AnimationVariables.easeFunction2,\n selectors: (_d = {},\n _d[\"@media (min-height: \" + ScreenWidthMinMedium + \"px)\"] = {\n background: semanticColors.bodyBackground,\n position: 'sticky',\n bottom: 0,\n },\n _d),\n },\n isFooterSticky && {\n background: semanticColors.bodyBackground,\n borderTopColor: semanticColors.variantBorder,\n },\n ],\n footerInner: [\n classNames.footerInner,\n sharedPaddingStyles,\n {\n paddingBottom: 16,\n paddingTop: 16,\n },\n ],\n subComponentStyles: {\n closeButton: {\n root: [\n classNames.closeButton,\n {\n marginRight: 14,\n color: theme.palette.neutralSecondary,\n fontSize: IconFontSizes.large,\n },\n hasCustomNavigation && {\n marginRight: 0,\n height: 'auto',\n width: '44px',\n },\n ],\n rootHovered: {\n color: theme.palette.neutralPrimary,\n },\n },\n },\n };\n};\n//# sourceMappingURL=Panel.styles.js.map","import { styled } from '../../Utilities';\nimport { PanelBase } from './Panel.base';\nimport { getStyles } from './Panel.styles';\n/**\n * Panel description\n */\nexport var Panel = styled(PanelBase, getStyles, undefined, {\n scope: 'Panel',\n});\n//# sourceMappingURL=Panel.js.map","/**\n * {@docCategory Panel}\n */\nexport var PanelType;\n(function (PanelType) {\n /**\n * Renders the Panel with a `fluid` (full screen) width.\n * Recommended for use on small screen breakpoints.\n * - Small (320-479): full screen width, 16px left/right padding\n * - Medium (480-639): full screen width, 16px left/right padding\n * - Large (640-1023): full screen width, 32px left/right padding\n * - XLarge (1024-1365): full screen width, 32px left/right padding\n * - XXLarge (1366-up): full screen width, 40px left/right padding\n */\n PanelType[PanelType[\"smallFluid\"] = 0] = \"smallFluid\";\n /**\n * Renders the Panel in fixed-width `small` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): 340px width, 16px left/right padding\n * - Large (640-1023): 340px width, 32px left/right padding\n * - XLarge (1024-1365): 340px width, 32px left/right padding\n * - XXLarge (1366-up): 340px width, 40px left/right padding\n */\n PanelType[PanelType[\"smallFixedFar\"] = 1] = \"smallFixedFar\";\n /**\n * Renders the Panel in fixed-width `small` size, anchored to the near side (left in LTR mode).\n * - Small (320-479): 272px width, 16px left/right padding\n * - Medium (480-639): 272px width, 16px left/right padding\n * - Large (640-1023): 272px width, 32px left/right padding\n * - XLarge (1024-1365): 272px width, 32px left/right padding\n * - XXLarge (1366-up): 272px width, 40px left/right padding\n */\n PanelType[PanelType[\"smallFixedNear\"] = 2] = \"smallFixedNear\";\n /**\n * Renders the Panel in `medium` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): 592px width, 32px left/right padding\n * - XLarge (1024-1365): 644px width, 32px left/right padding\n * - XXLarge (1366-up): 644px width, 40px left/right padding\n */\n PanelType[PanelType[\"medium\"] = 3] = \"medium\";\n /**\n * Renders the Panel in `large` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding\n * - XXLarge (1366-up): 428px fixed left margin, fluid width, 40px left/right padding\n */\n PanelType[PanelType[\"large\"] = 4] = \"large\";\n /**\n * Renders the Panel in `large` size, anchored to the far side (right in LTR mode), with a fixed width at\n * XX-Large breakpoint.\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n * - XLarge (1024-1365): 48px fixed left margin, fluid width, 32px left/right padding\n * - XXLarge (1366-up): 940px width, 40px left/right padding\n */\n PanelType[PanelType[\"largeFixed\"] = 5] = \"largeFixed\";\n /**\n * Renders the Panel in `extra large` size, anchored to the far side (right in LTR mode).\n * - Small (320-479): adapts to `PanelType.smallFluid` at this breakpoint\n * - Medium (480-639): adapts to `PanelType.smallFixedFar` at this breakpoint\n * - Large (640-1023): adapts to `PanelType.medium` at this breakpoint\n * - XLarge (1024-1365): adapts to `PanelType.large` at this breakpoint\n * - XXLarge (1366-1919): 176px fixed left margin, fluid width, 40px left/right padding\n * - XXXLarge (1920-up): 176px fixed left margin, fluid width, 40px left/right padding\n */\n PanelType[PanelType[\"extraLarge\"] = 6] = \"extraLarge\";\n /**\n * Renders the Panel in `custom` size using `customWidth`, anchored to the far side (right in LTR mode).\n * - Has a fixed width provided by the `customWidth` prop\n * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel\n * taking up 100% of the viewport width\n */\n PanelType[PanelType[\"custom\"] = 7] = \"custom\";\n /**\n * Renders the Panel in `custom` size using `customWidth`, anchored to the near side (left in LTR mode).\n * - Has a fixed width provided by the `customWidth` prop\n * - When screen width reaches the `customWidth` value it will behave like a fluid width Panel\n * taking up 100% of the viewport width\n */\n PanelType[PanelType[\"customNear\"] = 8] = \"customNear\";\n})(PanelType || (PanelType = {}));\n//# sourceMappingURL=Panel.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getNativeProps, getPropsWithDefaults } from '../../Utilities';\nimport { TooltipHost, TooltipOverflowMode } from '../../Tooltip';\nimport { PersonaCoin } from './PersonaCoin/PersonaCoin';\nimport { PersonaPresence as PersonaPresenceEnum, PersonaSize } from './Persona.types';\nimport { useWarnings, useMergedRefs } from '@fluentui/react-hooks';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_PROPS = {\n size: PersonaSize.size48,\n presence: PersonaPresenceEnum.none,\n imageAlt: '',\n showOverflowTooltip: true,\n};\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: 'Persona',\n props: props,\n deprecations: { primaryText: 'text' },\n });\n }\n}\n/**\n * Persona with no default styles.\n * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)\n */\nexport var PersonaBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n useDebugWarnings(props);\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n /**\n * Deprecation helper for getting text.\n */\n var getText = function () {\n // eslint-disable-next-line deprecation/deprecation\n return props.text || props.primaryText || '';\n };\n /**\n * Renders various types of Text (primaryText, secondaryText, etc)\n * based on the classNames passed\n * @param elementClassNames - element className\n * @param renderFunction - render function\n * @param defaultRenderFunction - default render function\n */\n var renderElement = function (elementClassNames, renderFunction, defaultRenderFunction) {\n return (React.createElement(\"div\", { dir: \"auto\", className: elementClassNames }, renderFunction && renderFunction(props, defaultRenderFunction)));\n };\n /**\n * using closure to wrap the default render behavior\n * to make it independent of the type of text passed\n * @param text - text to render\n */\n var onRenderText = function (text, tooltip) {\n if (tooltip === void 0) { tooltip = true; }\n // return default render behavior for valid text or undefined\n return text\n ? tooltip\n ? function () {\n // default onRender behavior\n return (React.createElement(TooltipHost, { content: text, overflowMode: TooltipOverflowMode.Parent, directionalHint: DirectionalHint.topLeftEdge }, text));\n }\n : function () { return React.createElement(React.Fragment, null, text); }\n : undefined;\n };\n var onInternalRenderPersonaCoin = function (providedCoinProps) {\n return React.createElement(PersonaCoin, __assign({}, providedCoinProps));\n };\n // wrapping default render behavior based on various props properties\n var onInternalRenderPrimaryText = onRenderText(getText(), props.showOverflowTooltip);\n var onInternalRenderSecondaryText = onRenderText(props.secondaryText, props.showOverflowTooltip);\n var onInternalRenderTertiaryText = onRenderText(props.tertiaryText, props.showOverflowTooltip);\n var onInternalRenderOptionalText = onRenderText(props.optionalText, props.showOverflowTooltip);\n var hidePersonaDetails = props.hidePersonaDetails, _a = props.onRenderOptionalText, onRenderOptionalText = _a === void 0 ? onInternalRenderOptionalText : _a, _b = props.onRenderPrimaryText, onRenderPrimaryText = _b === void 0 ? onInternalRenderPrimaryText : _b, _c = props.onRenderSecondaryText, onRenderSecondaryText = _c === void 0 ? onInternalRenderSecondaryText : _c, _d = props.onRenderTertiaryText, onRenderTertiaryText = _d === void 0 ? onInternalRenderTertiaryText : _d, _e = props.onRenderPersonaCoin, onRenderPersonaCoin = _e === void 0 ? onInternalRenderPersonaCoin : _e;\n var size = props.size;\n // These properties are to be explicitly passed into PersonaCoin because they are the only props directly used\n var allowPhoneInitials = props.allowPhoneInitials, className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageAlt = props.imageAlt, imageInitials = props.imageInitials, imageShouldFadeIn = props.imageShouldFadeIn, imageShouldStartVisible = props.imageShouldStartVisible, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, onPhotoLoadingStateChange = props.onPhotoLoadingStateChange, \n // eslint-disable-next-line deprecation/deprecation\n onRenderCoin = props.onRenderCoin, onRenderInitials = props.onRenderInitials, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, showSecondaryText = props.showSecondaryText, theme = props.theme;\n var personaCoinProps = __assign({ allowPhoneInitials: allowPhoneInitials,\n showUnknownPersonaCoin: showUnknownPersonaCoin,\n coinSize: coinSize,\n imageAlt: imageAlt,\n imageInitials: imageInitials,\n imageShouldFadeIn: imageShouldFadeIn,\n imageShouldStartVisible: imageShouldStartVisible,\n imageUrl: imageUrl,\n initialsColor: initialsColor,\n initialsTextColor: initialsTextColor,\n onPhotoLoadingStateChange: onPhotoLoadingStateChange,\n onRenderCoin: onRenderCoin,\n onRenderInitials: onRenderInitials,\n presence: presence,\n presenceTitle: presenceTitle,\n showInitialsUntilImageLoads: showInitialsUntilImageLoads,\n size: size, text: getText(), isOutOfOffice: isOutOfOffice,\n presenceColors: presenceColors }, coinProps);\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n showSecondaryText: showSecondaryText,\n presence: presence,\n size: size,\n });\n var divProps = getNativeProps(props, divProperties);\n var personaDetails = (React.createElement(\"div\", { className: classNames.details },\n renderElement(classNames.primaryText, onRenderPrimaryText, onInternalRenderPrimaryText),\n renderElement(classNames.secondaryText, onRenderSecondaryText, onInternalRenderSecondaryText),\n renderElement(classNames.tertiaryText, onRenderTertiaryText, onInternalRenderTertiaryText),\n renderElement(classNames.optionalText, onRenderOptionalText, onInternalRenderOptionalText),\n props.children));\n return (React.createElement(\"div\", __assign({}, divProps, { ref: mergedRootRef, className: classNames.root, style: coinSize ? { height: coinSize, minWidth: coinSize } : undefined }),\n onRenderPersonaCoin(personaCoinProps, onRenderPersonaCoin),\n /* eslint-disable deprecation/deprecation */\n (!hidePersonaDetails ||\n size === PersonaSize.size8 ||\n size === PersonaSize.size10 ||\n size === PersonaSize.tiny) &&\n personaDetails\n /* eslint-enable deprecation/deprecation */\n ));\n});\nPersonaBase.displayName = 'PersonaBase';\n//# sourceMappingURL=Persona.base.js.map","import { FontWeights, normalize, noWrap, getGlobalClassNames } from '../../Styling';\nimport { personaSize, presenceBoolean, sizeBoolean } from './PersonaConsts';\nvar GlobalClassNames = {\n root: 'ms-Persona',\n size8: 'ms-Persona--size8',\n size10: 'ms-Persona--size10',\n size16: 'ms-Persona--size16',\n size24: 'ms-Persona--size24',\n size28: 'ms-Persona--size28',\n size32: 'ms-Persona--size32',\n size40: 'ms-Persona--size40',\n size48: 'ms-Persona--size48',\n size56: 'ms-Persona--size56',\n size72: 'ms-Persona--size72',\n size100: 'ms-Persona--size100',\n size120: 'ms-Persona--size120',\n available: 'ms-Persona--online',\n away: 'ms-Persona--away',\n blocked: 'ms-Persona--blocked',\n busy: 'ms-Persona--busy',\n doNotDisturb: 'ms-Persona--donotdisturb',\n offline: 'ms-Persona--offline',\n details: 'ms-Persona-details',\n primaryText: 'ms-Persona-primaryText',\n secondaryText: 'ms-Persona-secondaryText',\n tertiaryText: 'ms-Persona-tertiaryText',\n optionalText: 'ms-Persona-optionalText',\n textContent: 'ms-Persona-textContent',\n};\nexport var getStyles = function (props) {\n var className = props.className, showSecondaryText = props.showSecondaryText, theme = props.theme;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var size = sizeBoolean(props.size);\n var presence = presenceBoolean(props.presence);\n var showSecondaryTextDefaultHeight = '16px';\n var sharedTextStyles = {\n color: semanticColors.bodySubtext,\n fontWeight: FontWeights.regular,\n fontSize: fonts.small.fontSize,\n };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n normalize,\n {\n color: semanticColors.bodyText,\n position: 'relative',\n height: personaSize.size48,\n minWidth: personaSize.size48,\n display: 'flex',\n alignItems: 'center',\n selectors: {\n '.contextualHost': {\n display: 'none',\n },\n },\n },\n size.isSize8 && [\n classNames.size8,\n {\n height: personaSize.size8,\n minWidth: personaSize.size8,\n },\n ],\n // TODO: Deprecated size and needs to be removed in a future major release.\n size.isSize10 && [\n classNames.size10,\n {\n height: personaSize.size10,\n minWidth: personaSize.size10,\n },\n ],\n // TODO: Deprecated size and needs to be removed in a future major release.\n size.isSize16 && [\n classNames.size16,\n {\n height: personaSize.size16,\n minWidth: personaSize.size16,\n },\n ],\n size.isSize24 && [\n classNames.size24,\n {\n height: personaSize.size24,\n minWidth: personaSize.size24,\n },\n ],\n size.isSize24 &&\n showSecondaryText && {\n height: '36px',\n },\n // TODO: Deprecated size and needs to be removed in a future major release.\n size.isSize28 && [\n classNames.size28,\n {\n height: personaSize.size28,\n minWidth: personaSize.size28,\n },\n ],\n size.isSize28 &&\n showSecondaryText && {\n height: '32px',\n },\n size.isSize32 && [\n classNames.size32,\n {\n height: personaSize.size32,\n minWidth: personaSize.size32,\n },\n ],\n size.isSize40 && [\n classNames.size40,\n {\n height: personaSize.size40,\n minWidth: personaSize.size40,\n },\n ],\n size.isSize48 && classNames.size48,\n size.isSize56 && [\n classNames.size56,\n {\n height: personaSize.size56,\n minWidth: personaSize.size56,\n },\n ],\n size.isSize72 && [\n classNames.size72,\n {\n height: personaSize.size72,\n minWidth: personaSize.size72,\n },\n ],\n size.isSize100 && [\n classNames.size100,\n {\n height: personaSize.size100,\n minWidth: personaSize.size100,\n },\n ],\n size.isSize120 && [\n classNames.size120,\n {\n height: personaSize.size120,\n minWidth: personaSize.size120,\n },\n ],\n /**\n * Modifiers: presence\n */\n presence.isAvailable && classNames.available,\n presence.isAway && classNames.away,\n presence.isBlocked && classNames.blocked,\n presence.isBusy && classNames.busy,\n presence.isDoNotDisturb && classNames.doNotDisturb,\n presence.isOffline && classNames.offline,\n className,\n ],\n details: [\n classNames.details,\n {\n padding: '0 24px 0 16px',\n minWidth: 0,\n width: '100%',\n textAlign: 'left',\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'space-around',\n },\n (size.isSize8 || size.isSize10) && {\n paddingLeft: 17,\n },\n (size.isSize24 || size.isSize28 || size.isSize32) && {\n padding: '0 8px',\n },\n (size.isSize40 || size.isSize48) && {\n padding: '0 12px',\n },\n ],\n primaryText: [\n classNames.primaryText,\n noWrap,\n {\n color: semanticColors.bodyText,\n fontWeight: FontWeights.regular,\n fontSize: fonts.medium.fontSize,\n selectors: {\n ':hover': {\n color: semanticColors.inputTextHovered,\n },\n },\n },\n showSecondaryText && {\n height: showSecondaryTextDefaultHeight,\n lineHeight: showSecondaryTextDefaultHeight,\n overflowX: 'hidden',\n },\n (size.isSize8 || size.isSize10) && {\n fontSize: fonts.small.fontSize,\n lineHeight: personaSize.size8,\n },\n size.isSize16 && {\n lineHeight: personaSize.size28,\n },\n (size.isSize24 || size.isSize28 || size.isSize32 || size.isSize40 || size.isSize48) &&\n showSecondaryText && {\n height: 18,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {\n fontSize: fonts.xLarge.fontSize,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&\n showSecondaryText && {\n height: 22,\n },\n ],\n secondaryText: [\n classNames.secondaryText,\n noWrap,\n sharedTextStyles,\n (size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) && {\n display: 'none',\n },\n showSecondaryText && {\n display: 'block',\n height: showSecondaryTextDefaultHeight,\n lineHeight: showSecondaryTextDefaultHeight,\n overflowX: 'hidden',\n },\n size.isSize24 &&\n showSecondaryText && {\n height: 18,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) && {\n fontSize: fonts.medium.fontSize,\n },\n (size.isSize56 || size.isSize72 || size.isSize100 || size.isSize120) &&\n showSecondaryText && {\n height: 18,\n },\n ],\n tertiaryText: [\n classNames.tertiaryText,\n noWrap,\n sharedTextStyles,\n {\n display: 'none',\n fontSize: fonts.medium.fontSize,\n },\n (size.isSize72 || size.isSize100 || size.isSize120) && {\n display: 'block',\n },\n ],\n optionalText: [\n classNames.optionalText,\n noWrap,\n sharedTextStyles,\n {\n display: 'none',\n fontSize: fonts.medium.fontSize,\n },\n (size.isSize100 || size.isSize120) && {\n display: 'block',\n },\n ],\n textContent: [classNames.textContent, noWrap],\n };\n};\n//# sourceMappingURL=Persona.styles.js.map","import { styled } from '../../Utilities';\nimport { PersonaBase } from './Persona.base';\nimport { getStyles } from './Persona.styles';\n/**\n * Personas are used for rendering an individual's avatar, presence and details.\n * They are used within the PeoplePicker components.\n */\nexport var Persona = styled(PersonaBase, getStyles, undefined, {\n scope: 'Persona',\n});\n//# sourceMappingURL=Persona.js.map","/**\n * {@docCategory Persona}\n */\nexport var PersonaSize;\n(function (PersonaSize) {\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size8` instead.\n */\n PersonaSize[PersonaSize[\"tiny\"] = 0] = \"tiny\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size24` instead.\n */\n PersonaSize[PersonaSize[\"extraExtraSmall\"] = 1] = \"extraExtraSmall\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size32` instead.\n */\n PersonaSize[PersonaSize[\"extraSmall\"] = 2] = \"extraSmall\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size40` instead.\n */\n PersonaSize[PersonaSize[\"small\"] = 3] = \"small\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size48` instead.\n */\n PersonaSize[PersonaSize[\"regular\"] = 4] = \"regular\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size72` instead.\n */\n PersonaSize[PersonaSize[\"large\"] = 5] = \"large\";\n /**\n * Deprecated in favor of standardized numeric sizing.\n * @deprecated Use `size100` instead.\n */\n PersonaSize[PersonaSize[\"extraLarge\"] = 6] = \"extraLarge\";\n /**\n * No `PersonaCoin` is rendered.\n */\n PersonaSize[PersonaSize[\"size8\"] = 17] = \"size8\";\n /**\n * No `PersonaCoin` is rendered. Deprecated to align with design specifications.\n * @deprecated Use `size8` instead.\n */\n PersonaSize[PersonaSize[\"size10\"] = 9] = \"size10\";\n /**\n * Renders a 16px `PersonaCoin`.\n * @deprecated Deprecated due to not being in the design specification.\n */\n PersonaSize[PersonaSize[\"size16\"] = 8] = \"size16\";\n /**\n * Renders a 24px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size24\"] = 10] = \"size24\";\n /**\n * Renders a 28px `PersonaCoin`.\n * @deprecated Deprecated due to not being in the design specification.\n */\n PersonaSize[PersonaSize[\"size28\"] = 7] = \"size28\";\n /**\n * Renders a 32px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size32\"] = 11] = \"size32\";\n /**\n * Renders a 40px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size40\"] = 12] = \"size40\";\n /**\n * Renders a 48px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size48\"] = 13] = \"size48\";\n /**\n * Renders a 56px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size56\"] = 16] = \"size56\";\n /**\n * Renders a 72px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size72\"] = 14] = \"size72\";\n /**\n * Renders a 100px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size100\"] = 15] = \"size100\";\n /**\n * Renders a 120px `PersonaCoin`.\n */\n PersonaSize[PersonaSize[\"size120\"] = 18] = \"size120\";\n})(PersonaSize || (PersonaSize = {}));\n/**\n * {@docCategory Persona}\n */\nexport var PersonaPresence;\n(function (PersonaPresence) {\n PersonaPresence[PersonaPresence[\"none\"] = 0] = \"none\";\n PersonaPresence[PersonaPresence[\"offline\"] = 1] = \"offline\";\n PersonaPresence[PersonaPresence[\"online\"] = 2] = \"online\";\n PersonaPresence[PersonaPresence[\"away\"] = 3] = \"away\";\n PersonaPresence[PersonaPresence[\"dnd\"] = 4] = \"dnd\";\n PersonaPresence[PersonaPresence[\"blocked\"] = 5] = \"blocked\";\n PersonaPresence[PersonaPresence[\"busy\"] = 6] = \"busy\";\n})(PersonaPresence || (PersonaPresence = {}));\n/**\n * {@docCategory Persona}\n */\nexport var PersonaInitialsColor;\n(function (PersonaInitialsColor) {\n PersonaInitialsColor[PersonaInitialsColor[\"lightBlue\"] = 0] = \"lightBlue\";\n PersonaInitialsColor[PersonaInitialsColor[\"blue\"] = 1] = \"blue\";\n PersonaInitialsColor[PersonaInitialsColor[\"darkBlue\"] = 2] = \"darkBlue\";\n PersonaInitialsColor[PersonaInitialsColor[\"teal\"] = 3] = \"teal\";\n PersonaInitialsColor[PersonaInitialsColor[\"lightGreen\"] = 4] = \"lightGreen\";\n PersonaInitialsColor[PersonaInitialsColor[\"green\"] = 5] = \"green\";\n PersonaInitialsColor[PersonaInitialsColor[\"darkGreen\"] = 6] = \"darkGreen\";\n PersonaInitialsColor[PersonaInitialsColor[\"lightPink\"] = 7] = \"lightPink\";\n PersonaInitialsColor[PersonaInitialsColor[\"pink\"] = 8] = \"pink\";\n PersonaInitialsColor[PersonaInitialsColor[\"magenta\"] = 9] = \"magenta\";\n PersonaInitialsColor[PersonaInitialsColor[\"purple\"] = 10] = \"purple\";\n /**\n * @deprecated `black` is a color that can result in offensive persona coins with some initials combinations,\n * so it can only be set with overrides. Will be removed in a future major release.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"black\"] = 11] = \"black\";\n PersonaInitialsColor[PersonaInitialsColor[\"orange\"] = 12] = \"orange\";\n /**\n * @deprecated `red` is a color that often has a special meaning, so it is considered a reserved color and\n * can only be set with overrides. Will be removed in a future major release.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"red\"] = 13] = \"red\";\n PersonaInitialsColor[PersonaInitialsColor[\"darkRed\"] = 14] = \"darkRed\";\n /**\n * Transparent is not intended to be used with typical initials due to accessibility issues.\n * Its primary use is for overflow buttons, so it is considered a reserved color and can only be set with overrides.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"transparent\"] = 15] = \"transparent\";\n PersonaInitialsColor[PersonaInitialsColor[\"violet\"] = 16] = \"violet\";\n PersonaInitialsColor[PersonaInitialsColor[\"lightRed\"] = 17] = \"lightRed\";\n PersonaInitialsColor[PersonaInitialsColor[\"gold\"] = 18] = \"gold\";\n PersonaInitialsColor[PersonaInitialsColor[\"burgundy\"] = 19] = \"burgundy\";\n PersonaInitialsColor[PersonaInitialsColor[\"warmGray\"] = 20] = \"warmGray\";\n PersonaInitialsColor[PersonaInitialsColor[\"coolGray\"] = 21] = \"coolGray\";\n /**\n * `gray` is a color that can result in offensive persona coins with some initials combinations,\n * so it can only be set with overrides.\n */\n PersonaInitialsColor[PersonaInitialsColor[\"gray\"] = 22] = \"gray\";\n PersonaInitialsColor[PersonaInitialsColor[\"cyan\"] = 23] = \"cyan\";\n PersonaInitialsColor[PersonaInitialsColor[\"rust\"] = 24] = \"rust\";\n})(PersonaInitialsColor || (PersonaInitialsColor = {}));\n//# sourceMappingURL=Persona.types.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../../Utilities';\nimport { Icon } from '../../../Icon';\nimport { PersonaPresence as PersonaPresenceEnum } from '../Persona.types';\nimport { sizeBoolean } from '../PersonaConsts';\nimport { useMergedRefs } from '@fluentui/react-hooks';\nvar coinSizeFontScaleFactor = 6;\nvar coinSizePresenceScaleFactor = 3;\nvar presenceMaxSize = 40;\nvar presenceFontMaxSize = 20;\nvar getClassNames = classNamesFunction({\n // There can be many PersonaPresence rendered with different sizes.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\n/**\n * PersonaPresence with no default styles.\n * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)\n */\nexport var PersonaPresenceBase = React.forwardRef(function (props, forwardedRef) {\n var coinSize = props.coinSize, isOutOfOffice = props.isOutOfOffice, styles = props.styles, // Use getStyles from props.\n presence = props.presence, theme = props.theme, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors;\n var rootRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(forwardedRef, rootRef);\n var size = sizeBoolean(props.size);\n // Render Presence Icon if Persona is above size 32.\n var renderIcon = !(size.isSize8 || size.isSize10 || size.isSize16 || size.isSize24 || size.isSize28 || size.isSize32) &&\n (coinSize ? coinSize > 32 : true);\n var presenceHeightWidth = coinSize\n ? coinSize / coinSizePresenceScaleFactor < presenceMaxSize\n ? coinSize / coinSizePresenceScaleFactor + 'px'\n : presenceMaxSize + 'px'\n : '';\n var presenceFontSize = coinSize\n ? coinSize / coinSizeFontScaleFactor < presenceFontMaxSize\n ? coinSize / coinSizeFontScaleFactor + 'px'\n : presenceFontMaxSize + 'px'\n : '';\n var coinSizeWithPresenceIconStyle = coinSize\n ? { fontSize: presenceFontSize, lineHeight: presenceHeightWidth }\n : undefined;\n var coinSizeWithPresenceStyle = coinSize ? { width: presenceHeightWidth, height: presenceHeightWidth } : undefined;\n // Use getStyles from props, or fall back to getStyles from styles file.\n var classNames = getClassNames(styles, {\n theme: theme,\n presence: presence,\n size: props.size,\n isOutOfOffice: isOutOfOffice,\n presenceColors: presenceColors,\n });\n if (presence === PersonaPresenceEnum.none) {\n return null;\n }\n return (React.createElement(\"div\", { role: \"presentation\", className: classNames.presence, style: coinSizeWithPresenceStyle, title: presenceTitle, ref: mergedRootRef }, renderIcon && (React.createElement(Icon, { className: classNames.presenceIcon, iconName: determineIcon(props.presence, props.isOutOfOffice), style: coinSizeWithPresenceIconStyle }))));\n});\nPersonaPresenceBase.displayName = 'PersonaPresenceBase';\nfunction determineIcon(presence, isOutOfOffice) {\n if (!presence) {\n return undefined;\n }\n var oofIcon = 'SkypeArrow';\n switch (PersonaPresenceEnum[presence]) {\n case 'online':\n return 'SkypeCheck';\n case 'away':\n return isOutOfOffice ? oofIcon : 'SkypeClock';\n case 'dnd':\n return 'SkypeMinus';\n case 'offline':\n return isOutOfOffice ? oofIcon : '';\n }\n return '';\n}\n//# sourceMappingURL=PersonaPresence.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { personaPresenceSize, presenceBoolean, sizeBoolean } from '../PersonaConsts';\nvar GlobalClassNames = {\n presence: 'ms-Persona-presence',\n presenceIcon: 'ms-Persona-presenceIcon',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e, _f;\n var theme = props.theme, presenceColors = props.presenceColors;\n var semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var size = sizeBoolean(props.size);\n var presence = presenceBoolean(props.presence);\n // Presence colors\n var presenceColorAvailable = (presenceColors && presenceColors.available) || '#6BB700';\n var presenceColorAway = (presenceColors && presenceColors.away) || '#FFAA44';\n var presenceColorBusy = (presenceColors && presenceColors.busy) || '#C43148';\n var presenceColorDnd = (presenceColors && presenceColors.dnd) || '#C50F1F';\n var presenceColorOffline = (presenceColors && presenceColors.offline) || '#8A8886';\n var presenceColorOof = (presenceColors && presenceColors.oof) || '#B4009E';\n var presenceColorBackground = (presenceColors && presenceColors.background) || semanticColors.bodyBackground;\n var isOpenCirclePresence = presence.isOffline ||\n (props.isOutOfOffice && (presence.isAvailable || presence.isBusy || presence.isAway || presence.isDoNotDisturb));\n var borderSizeForSmallPersonas = '1px';\n var borderSizeForLargePersonas = '2px';\n var borderSize = size.isSize72 || size.isSize100 ? borderSizeForLargePersonas : borderSizeForSmallPersonas;\n return {\n presence: [\n classNames.presence,\n __assign(__assign({ position: 'absolute', height: personaPresenceSize.size12, width: personaPresenceSize.size12, borderRadius: '50%', top: 'auto', right: '-2px', bottom: '-2px', border: \"2px solid \" + presenceColorBackground, textAlign: 'center', boxSizing: 'content-box', backgroundClip: 'border-box' }, getHighContrastNoAdjustStyle()), { selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'Window',\n backgroundColor: 'WindowText',\n },\n _a) }),\n (size.isSize8 || size.isSize10) && {\n right: 'auto',\n top: '7px',\n left: 0,\n border: 0,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n top: '9px',\n border: '1px solid WindowText',\n },\n _b),\n },\n (size.isSize8 || size.isSize10 || size.isSize24 || size.isSize28 || size.isSize32) &&\n makeSizeStyle(personaPresenceSize.size8),\n (size.isSize40 || size.isSize48) && makeSizeStyle(personaPresenceSize.size12),\n size.isSize16 && {\n height: personaPresenceSize.size6,\n width: personaPresenceSize.size6,\n borderWidth: '1.5px',\n },\n size.isSize56 && makeSizeStyle(personaPresenceSize.size16),\n size.isSize72 && makeSizeStyle(personaPresenceSize.size20),\n size.isSize100 && makeSizeStyle(personaPresenceSize.size28),\n size.isSize120 && makeSizeStyle(personaPresenceSize.size32),\n presence.isAvailable && {\n backgroundColor: presenceColorAvailable,\n selectors: (_c = {},\n _c[HighContrastSelector] = backgroundColor('Highlight'),\n _c),\n },\n presence.isAway && backgroundColor(presenceColorAway),\n presence.isBlocked && [\n {\n selectors: (_d = {\n // Only show :after at larger sizes\n ':after': size.isSize40 || size.isSize48 || size.isSize72 || size.isSize100\n ? {\n content: '\"\"',\n width: '100%',\n height: borderSize,\n backgroundColor: presenceColorBusy,\n transform: 'translateY(-50%) rotate(-45deg)',\n position: 'absolute',\n top: '50%',\n left: 0,\n }\n : undefined\n },\n _d[HighContrastSelector] = {\n selectors: {\n ':after': {\n width: \"calc(100% - 4px)\",\n left: '2px',\n backgroundColor: 'Window',\n },\n },\n },\n _d),\n },\n ],\n presence.isBusy && backgroundColor(presenceColorBusy),\n presence.isDoNotDisturb && backgroundColor(presenceColorDnd),\n presence.isOffline && backgroundColor(presenceColorOffline),\n (isOpenCirclePresence || presence.isBlocked) && [\n {\n backgroundColor: presenceColorBackground,\n selectors: (_e = {\n ':before': {\n content: '\"\"',\n width: '100%',\n height: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n border: borderSize + \" solid \" + presenceColorBusy,\n borderRadius: '50%',\n boxSizing: 'border-box',\n }\n },\n _e[HighContrastSelector] = {\n backgroundColor: 'WindowText',\n selectors: {\n ':before': {\n width: \"calc(100% - 2px)\",\n height: \"calc(100% - 2px)\",\n top: '1px',\n left: '1px',\n borderColor: 'Window',\n },\n },\n },\n _e),\n },\n ],\n isOpenCirclePresence && presence.isAvailable && makeBeforeBorderStyle(borderSize, presenceColorAvailable),\n isOpenCirclePresence && presence.isBusy && makeBeforeBorderStyle(borderSize, presenceColorBusy),\n isOpenCirclePresence && presence.isAway && makeBeforeBorderStyle(borderSize, presenceColorOof),\n isOpenCirclePresence && presence.isDoNotDisturb && makeBeforeBorderStyle(borderSize, presenceColorDnd),\n isOpenCirclePresence && presence.isOffline && makeBeforeBorderStyle(borderSize, presenceColorOffline),\n isOpenCirclePresence &&\n presence.isOffline &&\n props.isOutOfOffice &&\n makeBeforeBorderStyle(borderSize, presenceColorOof),\n ],\n presenceIcon: [\n classNames.presenceIcon,\n {\n color: presenceColorBackground,\n fontSize: '6px',\n lineHeight: personaPresenceSize.size12,\n verticalAlign: 'top',\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'Window',\n },\n _f),\n },\n size.isSize56 && {\n fontSize: '8px',\n lineHeight: personaPresenceSize.size16,\n },\n size.isSize72 && {\n fontSize: fonts.small.fontSize,\n lineHeight: personaPresenceSize.size20,\n },\n size.isSize100 && {\n fontSize: fonts.medium.fontSize,\n lineHeight: personaPresenceSize.size28,\n },\n size.isSize120 && {\n fontSize: fonts.medium.fontSize,\n lineHeight: personaPresenceSize.size32,\n },\n presence.isAway && {\n position: 'relative',\n left: isOpenCirclePresence ? undefined : '1px',\n },\n isOpenCirclePresence && presence.isAvailable && makeOpenCircleIconStyle(presenceColorAvailable),\n isOpenCirclePresence && presence.isBusy && makeOpenCircleIconStyle(presenceColorBusy),\n isOpenCirclePresence && presence.isAway && makeOpenCircleIconStyle(presenceColorOof),\n isOpenCirclePresence && presence.isDoNotDisturb && makeOpenCircleIconStyle(presenceColorDnd),\n isOpenCirclePresence && presence.isOffline && makeOpenCircleIconStyle(presenceColorOffline),\n isOpenCirclePresence && presence.isOffline && props.isOutOfOffice && makeOpenCircleIconStyle(presenceColorOof),\n ],\n };\n};\nfunction makeOpenCircleIconStyle(color) {\n return {\n color: color,\n borderColor: color,\n };\n}\nfunction makeBeforeBorderStyle(borderSize, color) {\n return {\n selectors: {\n ':before': {\n border: borderSize + \" solid \" + color,\n },\n },\n };\n}\nfunction makeSizeStyle(size) {\n return {\n height: size,\n width: size,\n };\n}\nfunction backgroundColor(color) {\n return { backgroundColor: color };\n}\n//# sourceMappingURL=PersonaPresence.styles.js.map","import { styled } from '../../../Utilities';\nimport { PersonaPresenceBase } from './PersonaPresence.base';\nimport { getStyles } from './PersonaPresence.styles';\n/**\n * PersonaPresence is used to render an individual's presence.\n */\nexport var PersonaPresence = styled(PersonaPresenceBase, getStyles, undefined, { scope: 'PersonaPresence' });\n//# sourceMappingURL=PersonaPresence.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, memoizeFunction, getInitials, getNativeProps, getRTL, getPropsWithDefaults, } from '../../../Utilities';\nimport { mergeStyles } from '../../../Styling';\nimport { PersonaPresence } from '../PersonaPresence/index';\nimport { Icon } from '../../../Icon';\nimport { Image, ImageFit, ImageLoadState } from '../../../Image';\nimport { PersonaPresence as PersonaPresenceEnum, PersonaSize } from '../Persona.types';\nimport { getPersonaInitialsColor } from '../PersonaInitialsColor';\nimport { sizeToPixels } from '../PersonaConsts';\nimport { useWarnings } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction({\n // There can be many PersonaCoin rendered with different sizes.\n // Therefore setting a larger cache size.\n cacheSize: 100,\n});\nvar getInitialsStyles = memoizeFunction(function (className, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin) {\n return mergeStyles(className, !showUnknownPersonaCoin && {\n backgroundColor: getPersonaInitialsColor({ text: text, initialsColor: initialsColor, primaryText: primaryText }),\n color: initialsTextColor,\n });\n});\nvar DEFAULT_PROPS = {\n size: PersonaSize.size48,\n presence: PersonaPresenceEnum.none,\n imageAlt: '',\n};\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: 'PersonaCoin',\n props: props,\n deprecations: { primaryText: 'text' },\n });\n }\n}\nfunction useImageLoadState(_a) {\n var onPhotoLoadingStateChange = _a.onPhotoLoadingStateChange, imageUrl = _a.imageUrl;\n var _b = React.useState(ImageLoadState.notLoaded), imageLoadState = _b[0], setImageLoadstate = _b[1];\n React.useEffect(function () {\n setImageLoadstate(ImageLoadState.notLoaded);\n }, [imageUrl]);\n var onLoadingStateChange = function (loadState) {\n setImageLoadstate(loadState);\n onPhotoLoadingStateChange === null || onPhotoLoadingStateChange === void 0 ? void 0 : onPhotoLoadingStateChange(loadState);\n };\n return [imageLoadState, onLoadingStateChange];\n}\n/**\n * PersonaCoin with no default styles.\n * [Use the `getStyles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Styling)\n */\nexport var PersonaCoinBase = React.forwardRef(function (propsWithoutDefaults, forwardedRef) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n useDebugWarnings(props);\n var _a = useImageLoadState(props), imageLoadState = _a[0], onLoadingStateChange = _a[1];\n var renderCoin = getCoinRenderer(onLoadingStateChange);\n var className = props.className, coinProps = props.coinProps, showUnknownPersonaCoin = props.showUnknownPersonaCoin, coinSize = props.coinSize, styles = props.styles, imageUrl = props.imageUrl, initialsColor = props.initialsColor, initialsTextColor = props.initialsTextColor, isOutOfOffice = props.isOutOfOffice, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.onRenderCoin, \n // eslint-disable-next-line deprecation/deprecation\n onRenderCoin = _b === void 0 ? renderCoin : _b, \n // eslint-disable-next-line deprecation/deprecation\n _c = props.onRenderPersonaCoin, \n // eslint-disable-next-line deprecation/deprecation\n onRenderPersonaCoin = _c === void 0 ? onRenderCoin : _c, _d = props.onRenderInitials, onRenderInitials = _d === void 0 ? renderPersonaCoinInitials : _d, presence = props.presence, presenceTitle = props.presenceTitle, presenceColors = props.presenceColors, \n // eslint-disable-next-line deprecation/deprecation\n primaryText = props.primaryText, showInitialsUntilImageLoads = props.showInitialsUntilImageLoads, text = props.text, theme = props.theme, size = props.size;\n var divProps = getNativeProps(props, divProperties);\n var divCoinProps = getNativeProps(coinProps || {}, divProperties);\n var coinSizeStyle = coinSize ? { width: coinSize, height: coinSize } : undefined;\n var hideImage = showUnknownPersonaCoin;\n var personaPresenceProps = {\n coinSize: coinSize,\n isOutOfOffice: isOutOfOffice,\n presence: presence,\n presenceTitle: presenceTitle,\n presenceColors: presenceColors,\n size: size,\n theme: theme,\n };\n // Use getStyles from props, or fall back to getStyles from styles file.\n var classNames = getClassNames(styles, {\n theme: theme,\n className: coinProps && coinProps.className ? coinProps.className : className,\n size: size,\n coinSize: coinSize,\n showUnknownPersonaCoin: showUnknownPersonaCoin,\n });\n var shouldRenderInitials = Boolean(imageLoadState !== ImageLoadState.loaded &&\n ((showInitialsUntilImageLoads && imageUrl) || !imageUrl || imageLoadState === ImageLoadState.error || hideImage));\n return (React.createElement(\"div\", __assign({ role: \"presentation\" }, divProps, { className: classNames.coin, ref: forwardedRef }),\n // Render PersonaCoin if size is not size8. size10 and tiny need to removed after a deprecation cleanup.\n // eslint-disable-next-line deprecation/deprecation\n size !== PersonaSize.size8 && size !== PersonaSize.size10 && size !== PersonaSize.tiny ? (React.createElement(\"div\", __assign({ role: \"presentation\" }, divCoinProps, { className: classNames.imageArea, style: coinSizeStyle }),\n shouldRenderInitials && (React.createElement(\"div\", { className: getInitialsStyles(classNames.initials, initialsColor, initialsTextColor, text, primaryText, showUnknownPersonaCoin), style: coinSizeStyle, \"aria-hidden\": \"true\" }, onRenderInitials(props, renderPersonaCoinInitials))),\n !hideImage && onRenderPersonaCoin(props, renderCoin),\n React.createElement(PersonaPresence, __assign({}, personaPresenceProps)))) : // Otherwise, render just PersonaPresence.\n props.presence ? (React.createElement(PersonaPresence, __assign({}, personaPresenceProps))) : (\n // Just render Contact Icon if there isn't a Presence prop.\n React.createElement(Icon, { iconName: \"Contact\", className: classNames.size10WithoutPresenceIcon })),\n props.children));\n});\nPersonaCoinBase.displayName = 'PersonaCoinBase';\nvar getCoinRenderer = function (onLoadingStateChange) { return function (_a) {\n var coinSize = _a.coinSize, styles = _a.styles, imageUrl = _a.imageUrl, imageAlt = _a.imageAlt, imageShouldFadeIn = _a.imageShouldFadeIn, imageShouldStartVisible = _a.imageShouldStartVisible, theme = _a.theme, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, _b = _a.size, size = _b === void 0 ? DEFAULT_PROPS.size : _b;\n // Render the Image component only if an image URL is provided\n if (!imageUrl) {\n return null;\n }\n var classNames = getClassNames(styles, {\n theme: theme,\n size: size,\n showUnknownPersonaCoin: showUnknownPersonaCoin,\n });\n var dimension = coinSize || sizeToPixels[size];\n return (React.createElement(Image, { className: classNames.image, imageFit: ImageFit.cover, src: imageUrl, width: dimension, height: dimension, alt: imageAlt, shouldFadeIn: imageShouldFadeIn, shouldStartVisible: imageShouldStartVisible, onLoadingStateChange: onLoadingStateChange }));\n}; };\nvar renderPersonaCoinInitials = function (_a) {\n var imageInitials = _a.imageInitials, allowPhoneInitials = _a.allowPhoneInitials, showUnknownPersonaCoin = _a.showUnknownPersonaCoin, text = _a.text, \n // eslint-disable-next-line deprecation/deprecation\n primaryText = _a.primaryText, theme = _a.theme;\n if (showUnknownPersonaCoin) {\n return React.createElement(Icon, { iconName: \"Help\" });\n }\n var isRTL = getRTL(theme);\n imageInitials = imageInitials || getInitials(text || primaryText || '', isRTL, allowPhoneInitials);\n return imageInitials !== '' ? React.createElement(\"span\", null, imageInitials) : React.createElement(Icon, { iconName: \"Contact\" });\n};\n//# sourceMappingURL=PersonaCoin.base.js.map","import { __assign } from \"tslib\";\nimport { HighContrastSelector, FontWeights, getGlobalClassNames, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { sizeBoolean, sizeToPixels } from '../PersonaConsts';\nvar GlobalClassNames = {\n coin: 'ms-Persona-coin',\n imageArea: 'ms-Persona-imageArea',\n image: 'ms-Persona-image',\n initials: 'ms-Persona-initials',\n size8: 'ms-Persona--size8',\n size10: 'ms-Persona--size10',\n size16: 'ms-Persona--size16',\n size24: 'ms-Persona--size24',\n size28: 'ms-Persona--size28',\n size32: 'ms-Persona--size32',\n size40: 'ms-Persona--size40',\n size48: 'ms-Persona--size48',\n size56: 'ms-Persona--size56',\n size72: 'ms-Persona--size72',\n size100: 'ms-Persona--size100',\n size120: 'ms-Persona--size120',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, coinSize = props.coinSize;\n var palette = theme.palette, fonts = theme.fonts;\n var size = sizeBoolean(props.size);\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // Static colors used when displaying 'unknown persona' coin\n var unknownPersonaBackgroundColor = 'rgb(234, 234, 234)';\n var unknownPersonaFontColor = 'rgb(168, 0, 0)';\n var dimension = coinSize || (props.size && sizeToPixels[props.size]) || 48;\n return {\n coin: [\n classNames.coin,\n fonts.medium,\n size.isSize8 && classNames.size8,\n size.isSize10 && classNames.size10,\n size.isSize16 && classNames.size16,\n size.isSize24 && classNames.size24,\n size.isSize28 && classNames.size28,\n size.isSize32 && classNames.size32,\n size.isSize40 && classNames.size40,\n size.isSize48 && classNames.size48,\n size.isSize56 && classNames.size56,\n size.isSize72 && classNames.size72,\n size.isSize100 && classNames.size100,\n size.isSize120 && classNames.size120,\n className,\n ],\n size10WithoutPresenceIcon: {\n fontSize: fonts.xSmall.fontSize,\n position: 'absolute',\n top: '5px',\n right: 'auto',\n left: 0,\n },\n imageArea: [\n classNames.imageArea,\n {\n position: 'relative',\n textAlign: 'center',\n flex: '0 0 auto',\n height: dimension,\n width: dimension,\n },\n dimension <= 10 && {\n overflow: 'visible',\n background: 'transparent',\n height: 0,\n width: 0,\n },\n ],\n image: [\n classNames.image,\n {\n marginRight: '10px',\n position: 'absolute',\n top: 0,\n left: 0,\n width: '100%',\n height: '100%',\n border: 0,\n borderRadius: '50%',\n perspective: '1px',\n },\n dimension <= 10 && {\n overflow: 'visible',\n background: 'transparent',\n height: 0,\n width: 0,\n },\n dimension > 10 && {\n height: dimension,\n width: dimension,\n },\n ],\n initials: [\n classNames.initials,\n {\n borderRadius: '50%',\n color: props.showUnknownPersonaCoin ? unknownPersonaFontColor : palette.white,\n fontSize: fonts.large.fontSize,\n fontWeight: FontWeights.semibold,\n // copying the logic for the dimensions; defaulted to 46 for size48\n lineHeight: dimension === 48 ? 46 : dimension,\n height: dimension,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign(__assign({ border: '1px solid WindowText' }, getHighContrastNoAdjustStyle()), { color: 'WindowText', boxSizing: 'border-box', backgroundColor: 'Window !important' }),\n _a.i = {\n fontWeight: FontWeights.semibold,\n },\n _a),\n },\n props.showUnknownPersonaCoin && {\n backgroundColor: unknownPersonaBackgroundColor,\n },\n dimension < 32 && {\n fontSize: fonts.xSmall.fontSize,\n },\n dimension >= 32 &&\n dimension < 40 && {\n fontSize: fonts.medium.fontSize,\n },\n dimension >= 40 &&\n dimension < 56 && {\n fontSize: fonts.mediumPlus.fontSize,\n },\n dimension >= 56 &&\n dimension < 72 && {\n fontSize: fonts.xLarge.fontSize,\n },\n dimension >= 72 &&\n dimension < 100 && {\n fontSize: fonts.xxLarge.fontSize,\n },\n dimension >= 100 && {\n fontSize: fonts.superLarge.fontSize,\n },\n ],\n };\n};\n//# sourceMappingURL=PersonaCoin.styles.js.map","import { styled } from '../../../Utilities';\nimport { PersonaCoinBase } from './PersonaCoin.base';\nimport { getStyles } from './PersonaCoin.styles';\n/**\n * PersonaCoin is used to render an individual's avatar and presence.\n */\nexport var PersonaCoin = styled(PersonaCoinBase, getStyles, undefined, {\n scope: 'PersonaCoin',\n});\n//# sourceMappingURL=PersonaCoin.js.map","var _a;\nimport { PersonaPresence, PersonaSize } from './Persona.types';\n// Persona Sizes\nexport var personaSize;\n(function (personaSize) {\n personaSize.size8 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n personaSize.size10 = '20px';\n // TODO: remove in a future major release as it's deprecated.\n personaSize.size16 = '16px';\n personaSize.size24 = '24px';\n // TODO: remove in a future major release as it's deprecated.\n personaSize.size28 = '28px';\n personaSize.size32 = '32px';\n personaSize.size40 = '40px';\n personaSize.size48 = '48px';\n personaSize.size56 = '56px';\n personaSize.size72 = '72px';\n personaSize.size100 = '100px';\n personaSize.size120 = '120px';\n})(personaSize || (personaSize = {}));\n// Persona Presence Sizes\nexport var personaPresenceSize;\n(function (personaPresenceSize) {\n personaPresenceSize.size6 = '6px';\n personaPresenceSize.size8 = '8px';\n personaPresenceSize.size12 = '12px';\n personaPresenceSize.size16 = '16px';\n personaPresenceSize.size20 = '20px';\n personaPresenceSize.size28 = '28px';\n personaPresenceSize.size32 = '32px';\n /**\n * @deprecated This is now unused\n */\n personaPresenceSize.border = '2px';\n})(personaPresenceSize || (personaPresenceSize = {}));\n// TODO: remove the deprecated parts in a future major release.\nexport var sizeBoolean = function (size) { return ({\n isSize8: size === PersonaSize.size8,\n /* eslint-disable deprecation/deprecation */\n isSize10: size === PersonaSize.size10 || size === PersonaSize.tiny,\n isSize16: size === PersonaSize.size16,\n isSize24: size === PersonaSize.size24 || size === PersonaSize.extraExtraSmall,\n isSize28: size === PersonaSize.size28 || size === PersonaSize.extraSmall,\n isSize32: size === PersonaSize.size32,\n isSize40: size === PersonaSize.size40 || size === PersonaSize.small,\n isSize48: size === PersonaSize.size48 || size === PersonaSize.regular,\n isSize56: size === PersonaSize.size56,\n isSize72: size === PersonaSize.size72 || size === PersonaSize.large,\n isSize100: size === PersonaSize.size100 || size === PersonaSize.extraLarge,\n isSize120: size === PersonaSize.size120,\n}); };\nexport var sizeToPixels = (_a = {},\n // Old deprecated sizes\n _a[PersonaSize.tiny] = 10,\n _a[PersonaSize.extraExtraSmall] = 24,\n _a[PersonaSize.extraSmall] = 28,\n _a[PersonaSize.small] = 40,\n _a[PersonaSize.regular] = 48,\n _a[PersonaSize.large] = 72,\n _a[PersonaSize.extraLarge] = 100,\n // New sizes\n _a[PersonaSize.size8] = 8,\n _a[PersonaSize.size10] = 10,\n _a[PersonaSize.size16] = 16,\n _a[PersonaSize.size24] = 24,\n _a[PersonaSize.size28] = 28,\n /* eslint-enable deprecation/deprecation */\n _a[PersonaSize.size32] = 32,\n _a[PersonaSize.size40] = 40,\n _a[PersonaSize.size48] = 48,\n _a[PersonaSize.size56] = 56,\n _a[PersonaSize.size72] = 72,\n _a[PersonaSize.size100] = 100,\n _a[PersonaSize.size120] = 120,\n _a);\nexport var presenceBoolean = function (presence) { return ({\n isAvailable: presence === PersonaPresence.online,\n isAway: presence === PersonaPresence.away,\n isBlocked: presence === PersonaPresence.blocked,\n isBusy: presence === PersonaPresence.busy,\n isDoNotDisturb: presence === PersonaPresence.dnd,\n isOffline: presence === PersonaPresence.offline,\n}); };\n//# sourceMappingURL=PersonaConsts.js.map","import { PersonaInitialsColor } from './Persona.types';\n/**\n * Following colors are considered reserved and can only be set with overrides, so they are excluded from this set:\n * - `gray` and `black` can result in offensive persona coins with some initials combinations\n * - `red` often has a special meaning\n * - `transparent` is not intended to be used with typical initials due to accessibility issues;\n * its primary use is for Facepile overflow buttons.\n */\nvar COLOR_SWATCHES_LOOKUP = [\n PersonaInitialsColor.lightBlue,\n PersonaInitialsColor.blue,\n PersonaInitialsColor.darkBlue,\n PersonaInitialsColor.teal,\n PersonaInitialsColor.green,\n PersonaInitialsColor.darkGreen,\n PersonaInitialsColor.lightPink,\n PersonaInitialsColor.pink,\n PersonaInitialsColor.magenta,\n PersonaInitialsColor.purple,\n PersonaInitialsColor.orange,\n PersonaInitialsColor.lightRed,\n PersonaInitialsColor.darkRed,\n PersonaInitialsColor.violet,\n PersonaInitialsColor.gold,\n PersonaInitialsColor.burgundy,\n PersonaInitialsColor.warmGray,\n PersonaInitialsColor.cyan,\n PersonaInitialsColor.rust,\n PersonaInitialsColor.coolGray,\n];\nvar COLOR_SWATCHES_NUM_ENTRIES = COLOR_SWATCHES_LOOKUP.length;\nfunction getInitialsColorFromName(displayName) {\n var color = PersonaInitialsColor.blue;\n if (!displayName) {\n return color;\n }\n var hashCode = 0;\n for (var iLen = displayName.length - 1; iLen >= 0; iLen--) {\n var ch = displayName.charCodeAt(iLen);\n var shift = iLen % 8;\n // eslint-disable-next-line no-bitwise\n hashCode ^= (ch << shift) + (ch >> (8 - shift));\n }\n color = COLOR_SWATCHES_LOOKUP[hashCode % COLOR_SWATCHES_NUM_ENTRIES];\n return color;\n}\nfunction personaInitialsColorToHexCode(personaInitialsColor) {\n switch (personaInitialsColor) {\n case PersonaInitialsColor.lightBlue:\n return '#4F6BED';\n case PersonaInitialsColor.blue:\n return '#0078D4';\n case PersonaInitialsColor.darkBlue:\n return '#004E8C';\n case PersonaInitialsColor.teal:\n return '#038387';\n case PersonaInitialsColor.lightGreen:\n case PersonaInitialsColor.green:\n return '#498205';\n case PersonaInitialsColor.darkGreen:\n return '#0B6A0B';\n case PersonaInitialsColor.lightPink:\n return '#C239B3';\n case PersonaInitialsColor.pink:\n return '#E3008C';\n case PersonaInitialsColor.magenta:\n return '#881798';\n case PersonaInitialsColor.purple:\n return '#5C2E91';\n case PersonaInitialsColor.orange:\n return '#CA5010';\n // eslint-disable-next-line deprecation/deprecation\n case PersonaInitialsColor.red:\n return '#EE1111';\n case PersonaInitialsColor.lightRed:\n return '#D13438';\n case PersonaInitialsColor.darkRed:\n return '#A4262C';\n case PersonaInitialsColor.transparent:\n return 'transparent';\n case PersonaInitialsColor.violet:\n return '#8764B8';\n case PersonaInitialsColor.gold:\n return '#986F0B';\n case PersonaInitialsColor.burgundy:\n return '#750B1C';\n case PersonaInitialsColor.warmGray:\n return '#7A7574';\n case PersonaInitialsColor.cyan:\n return '#005B70';\n case PersonaInitialsColor.rust:\n return '#8E562E';\n case PersonaInitialsColor.coolGray:\n return '#69797E';\n // eslint-disable-next-line deprecation/deprecation\n case PersonaInitialsColor.black:\n return '#1D1D1D';\n case PersonaInitialsColor.gray:\n return '#393939';\n }\n}\n/** @deprecated Use `getPersonaInitialsColor` */\nexport function initialsColorPropToColorCode(props) {\n return getPersonaInitialsColor(props);\n}\n/**\n * Gets the hex color string (prefixed with #) for the given persona props.\n * This is the logic used internally by the Persona control.\n * @param props - Current persona props\n * @returns Hex color string prefixed with #\n */\nexport function getPersonaInitialsColor(props) {\n // eslint-disable-next-line deprecation/deprecation\n var primaryText = props.primaryText, text = props.text;\n var initialsColor = props.initialsColor;\n var initialsColorCode;\n if (typeof initialsColor === 'string') {\n initialsColorCode = initialsColor;\n }\n else {\n initialsColor = initialsColor !== undefined ? initialsColor : getInitialsColorFromName(text || primaryText);\n initialsColorCode = personaInitialsColorToHexCode(initialsColor);\n }\n return initialsColorCode;\n}\n//# sourceMappingURL=PersonaInitialsColor.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, divProperties, doesElementContainFocus, getDocument, getNativeProps, getWindow, } from '../../Utilities';\nimport { useMergedRefs, useAsync, useOnEvent } from '@fluentui/react-hooks';\nimport { useWindow } from '@fluentui/react-window-provider';\nfunction useScrollbarAsync(props, root) {\n var async = useAsync();\n var _a = React.useState(false), needsVerticalScrollBarState = _a[0], setNeedsVerticalScrollBar = _a[1];\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n var _a;\n // If overflowY is overridden, don't waste time calculating whether the scrollbar is necessary.\n if (props.style && props.style.overflowY) {\n return;\n }\n var needsVerticalScrollBar = false;\n if (root && root.current && ((_a = root.current) === null || _a === void 0 ? void 0 : _a.firstElementChild)) {\n // ClientHeight returns the client height of an element rounded to an\n // integer. On some browsers at different zoom levels this rounding\n // can generate different results for the root container and child even\n // though they are the same height. This causes us to show a scroll bar\n // when not needed. Ideally we would use BoundingClientRect().height\n // instead however seems that the API is 90% slower than using ClientHeight.\n // Therefore instead we will calculate the difference between heights and\n // allow for a 1px difference to still be considered ok and not show the\n // scroll bar.\n var rootHeight = root.current.clientHeight;\n var firstChildHeight = root.current.firstElementChild.clientHeight;\n if (rootHeight > 0 && firstChildHeight > rootHeight) {\n needsVerticalScrollBar = firstChildHeight - rootHeight > 1;\n }\n }\n if (needsVerticalScrollBarState !== needsVerticalScrollBar) {\n setNeedsVerticalScrollBar(needsVerticalScrollBar);\n }\n });\n return function () { return async.dispose(); };\n });\n return needsVerticalScrollBarState;\n}\nfunction defaultFocusRestorer(options) {\n var originalElement = options.originalElement, containsFocus = options.containsFocus;\n if (originalElement && containsFocus && originalElement !== getWindow()) {\n // Make sure that the focus method actually exists\n // In some cases the object might exist but not be a real element.\n // This is primarily for IE 11 and should be removed once IE 11 is no longer in use.\n // This is wrapped in a setTimeout because of a React 16 bug that is resolved in 17.\n // Once we move to 17, the setTimeout should be removed (ref: https://github.com/facebook/react/issues/17894#issuecomment-656094405)\n setTimeout(function () {\n var _a;\n (_a = originalElement.focus) === null || _a === void 0 ? void 0 : _a.call(originalElement);\n }, 0);\n }\n}\nfunction useRestoreFocus(props, root) {\n var _a = props.onRestoreFocus, onRestoreFocus = _a === void 0 ? defaultFocusRestorer : _a;\n var originalFocusedElement = React.useRef();\n var containsFocus = React.useRef(false);\n React.useEffect(function () {\n originalFocusedElement.current = getDocument().activeElement;\n if (doesElementContainFocus(root.current)) {\n containsFocus.current = true;\n }\n return function () {\n var _a;\n onRestoreFocus === null || onRestoreFocus === void 0 ? void 0 : onRestoreFocus({\n originalElement: originalFocusedElement.current,\n containsFocus: containsFocus.current,\n documentContainsFocus: ((_a = getDocument()) === null || _a === void 0 ? void 0 : _a.hasFocus()) || false,\n });\n // De-reference DOM Node to avoid retainment via transpiled closure of _onKeyDown\n originalFocusedElement.current = undefined;\n };\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []);\n useOnEvent(root, 'focus', React.useCallback(function () {\n containsFocus.current = true;\n }, []), true);\n useOnEvent(root, 'blur', React.useCallback(function (ev) {\n /** The popup should update this._containsFocus when:\n * relatedTarget exists AND\n * the relatedTarget is not contained within the popup.\n * If the relatedTarget is within the popup, that means the popup still has focus\n * and focused moved from one element to another within the popup.\n * If relatedTarget is undefined or null that usually means that a\n * keyboard event occurred and focus didn't change\n */\n if (root.current && ev.relatedTarget && !root.current.contains(ev.relatedTarget)) {\n containsFocus.current = false;\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []), true);\n}\nfunction useHideSiblingNodes(props, root) {\n var isModalOrPanel = props['aria-modal'];\n React.useEffect(function () {\n var _a;\n var targetDocument = getDocument();\n if (isModalOrPanel && targetDocument && root && root.current) {\n var popupPortalNode = (_a = root.current.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;\n var nodesToHide_1 = findSiblingNodes(popupPortalNode, popupPortalNode === null || popupPortalNode === void 0 ? void 0 : popupPortalNode.parentElement);\n //if popupPortalNode is not a direct child of body, its ancestor's siblings need to be hidden as well.\n if ((popupPortalNode === null || popupPortalNode === void 0 ? void 0 : popupPortalNode.parentElement) !== targetDocument.body) {\n var popupAncestorNode = findAncestorNode(root.current, targetDocument);\n nodesToHide_1.concat(findSiblingNodes(popupAncestorNode, targetDocument.body));\n }\n nodesToHide_1 = nodesToHide_1.filter(function (child) {\n return child.tagName !== 'TEMPLATE' &&\n child.tagName !== 'SCRIPT' &&\n child.tagName !== 'STYLE' &&\n !child.hasAttribute('aria-hidden');\n });\n nodesToHide_1.forEach(function (node) { return node.setAttribute('aria-hidden', 'true'); });\n return function () { return nodesToHide_1.forEach(function (child) { return child.removeAttribute('aria-hidden'); }); };\n }\n }, [isModalOrPanel, root]);\n}\nfunction findAncestorNode(node, targetDocument) {\n var currNode = node;\n while (currNode && currNode.parentElement !== targetDocument.body) {\n currNode = currNode.parentElement;\n }\n return currNode;\n}\nvar findSiblingNodes = function (node, parentNode) {\n return node && parentNode ? [].slice.call(parentNode.children).filter(function (child) { return child !== node; }) : [];\n};\n/**\n * This adds accessibility to Dialog and Panel controls\n */\nexport var Popup = React.forwardRef(function (props, forwardedRef) {\n // Default props\n // eslint-disable-next-line deprecation/deprecation\n props = __assign({ shouldRestoreFocus: true }, props);\n var root = React.useRef();\n var mergedRootRef = useMergedRefs(root, forwardedRef);\n useHideSiblingNodes(props, root);\n useRestoreFocus(props, root);\n var role = props.role, className = props.className, ariaLabel = props.ariaLabel, ariaLabelledBy = props.ariaLabelledBy, ariaDescribedBy = props.ariaDescribedBy, style = props.style, children = props.children, onDismiss = props.onDismiss;\n var needsVerticalScrollBar = useScrollbarAsync(props, root);\n var onKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.escape:\n if (onDismiss) {\n onDismiss(ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n break;\n }\n }, [onDismiss]);\n var win = useWindow();\n useOnEvent(win, 'keydown', onKeyDown);\n return (React.createElement(\"div\", __assign({ ref: mergedRootRef }, getNativeProps(props, divProperties), { className: className, role: role, \"aria-label\": ariaLabel, \"aria-labelledby\": ariaLabelledBy, \"aria-describedby\": ariaDescribedBy, onKeyDown: onKeyDown, style: __assign({ overflowY: needsVerticalScrollBar ? 'scroll' : undefined, outline: 'none' }, style) }), children));\n});\n//# sourceMappingURL=Popup.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../Utilities';\nimport { ResizeGroupDirection } from './ResizeGroup.types';\nimport { useConst, useMergedRefs, useAsync, useOnEvent, useWarnings } from '@fluentui/react-hooks';\nimport { useWindow } from '../../WindowProvider';\nvar RESIZE_DELAY = 16;\n/**\n * Returns a simple object is able to store measurements with a given key.\n */\nexport var getMeasurementCache = function () {\n var measurementsCache = {};\n return {\n /**\n * Checks if the provided data has a cacheKey. If it has a cacheKey and there is a\n * corresponding entry in the measurementsCache, then it will return that value.\n * Returns undefined otherwise.\n */\n getCachedMeasurement: function (data) {\n if (data && data.cacheKey && measurementsCache.hasOwnProperty(data.cacheKey)) {\n return measurementsCache[data.cacheKey];\n }\n return undefined;\n },\n /**\n * Should be called whenever there is a new measurement associated with a given data object.\n * If the data has a cacheKey, store that measurement in the measurementsCache.\n */\n addMeasurementToCache: function (data, measurement) {\n if (data.cacheKey) {\n measurementsCache[data.cacheKey] = measurement;\n }\n },\n };\n};\n/**\n * Returns a function that is able to compute the next state for the ResizeGroup given the current\n * state and any measurement updates.\n */\nexport var getNextResizeGroupStateProvider = function (measurementCache) {\n if (measurementCache === void 0) { measurementCache = getMeasurementCache(); }\n var _measurementCache = measurementCache;\n var _containerDimension;\n /**\n * Gets the width/height of the data rendered in a hidden div.\n * @param measuredData - The data corresponding to the measurement we wish to take.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _getMeasuredDimension(measuredData, getElementToMeasureDimension) {\n var cachedDimension = _measurementCache.getCachedMeasurement(measuredData);\n if (cachedDimension !== undefined) {\n return cachedDimension;\n }\n var measuredDimension = getElementToMeasureDimension();\n _measurementCache.addMeasurementToCache(measuredData, measuredDimension);\n return measuredDimension;\n }\n /**\n * Will get the next IResizeGroupState based on the current data while trying to shrink contents\n * to fit in the container.\n * @param data - The initial data point to start measuring.\n * @param onReduceData - Function that transforms the data into something that should render with less width/height.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _shrinkContentsUntilTheyFit(data, onReduceData, getElementToMeasureDimension) {\n var dataToMeasure = data;\n var measuredDimension = _getMeasuredDimension(data, getElementToMeasureDimension);\n while (measuredDimension > _containerDimension) {\n var nextMeasuredData = onReduceData(dataToMeasure);\n // We don't want to get stuck in an infinite render loop when there are no more\n // scaling steps, so implementations of onReduceData should return undefined when\n // there are no more scaling states to apply.\n if (nextMeasuredData === undefined) {\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n // If the measurement isn't in the cache, we need to re-render with some data in a hidden div\n if (measuredDimension === undefined) {\n return {\n dataToMeasure: nextMeasuredData,\n resizeDirection: 'shrink',\n };\n }\n dataToMeasure = nextMeasuredData;\n }\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n /**\n * This function should be called when the state changes in a manner that might allow for more content to fit\n * on the screen, such as the window width/height growing.\n * @param data - The initial data point to start measuring.\n * @param onGrowData - Function that transforms the data into something that may take up more space when rendering.\n * @param getElementToMeasureDimension - A function that returns the measurement of the rendered data.\n * Only called when the measurement is not in the cache.\n */\n function _growDataUntilItDoesNotFit(data, onGrowData, getElementToMeasureDimension, onReduceData) {\n var dataToMeasure = data;\n var measuredDimension = _getMeasuredDimension(data, getElementToMeasureDimension);\n while (measuredDimension < _containerDimension) {\n var nextMeasuredData = onGrowData(dataToMeasure);\n // We don't want to get stuck in an infinite render loop when there are no more\n // scaling steps, so implementations of onGrowData should return undefined when\n // there are no more scaling states to apply.\n if (nextMeasuredData === undefined) {\n return {\n renderedData: dataToMeasure,\n resizeDirection: undefined,\n dataToMeasure: undefined,\n };\n }\n measuredDimension = _measurementCache.getCachedMeasurement(nextMeasuredData);\n // If the measurement isn't in the cache, we need to re-render with some data in a hidden div\n if (measuredDimension === undefined) {\n return {\n dataToMeasure: nextMeasuredData,\n };\n }\n dataToMeasure = nextMeasuredData;\n }\n // Once the loop is done, we should now shrink until the contents fit.\n return __assign({ resizeDirection: 'shrink' }, _shrinkContentsUntilTheyFit(dataToMeasure, onReduceData, getElementToMeasureDimension));\n }\n /**\n * Handles an update to the container width/height.\n * Should only be called when we knew the previous container width/height.\n * @param newDimension - The new width/height of the container.\n * @param fullDimensionData - The initial data passed in as a prop to resizeGroup.\n * @param renderedData - The data that was rendered prior to the container size changing.\n * @param onGrowData - Set to true if the Resize group has an onGrowData function.\n */\n function _updateContainerDimension(newDimension, fullDimensionData, renderedData, onGrowData) {\n var nextState;\n if (newDimension > _containerDimension) {\n if (onGrowData) {\n nextState = {\n resizeDirection: 'grow',\n dataToMeasure: onGrowData(renderedData),\n };\n }\n else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: fullDimensionData,\n };\n }\n }\n else {\n nextState = {\n resizeDirection: 'shrink',\n dataToMeasure: renderedData,\n };\n }\n _containerDimension = newDimension;\n return __assign(__assign({}, nextState), { measureContainer: false });\n }\n function getNextState(props, currentState, getElementToMeasureDimension, newContainerDimension) {\n // If there is no new container width/height or data to measure, there is no need for a new state update\n if (newContainerDimension === undefined && currentState.dataToMeasure === undefined) {\n return undefined;\n }\n if (newContainerDimension) {\n // If we know the last container size and we rendered data at that width/height, we can do an optimized render\n if (_containerDimension && currentState.renderedData && !currentState.dataToMeasure) {\n return __assign(__assign({}, currentState), _updateContainerDimension(newContainerDimension, props.data, currentState.renderedData, props.onGrowData));\n }\n // If we are just setting the container width/height for the first time, we can't do any optimizations\n _containerDimension = newContainerDimension;\n }\n var nextState = __assign(__assign({}, currentState), { measureContainer: false });\n if (currentState.dataToMeasure) {\n if (currentState.resizeDirection === 'grow' && props.onGrowData) {\n nextState = __assign(__assign({}, nextState), _growDataUntilItDoesNotFit(currentState.dataToMeasure, props.onGrowData, getElementToMeasureDimension, props.onReduceData));\n }\n else {\n nextState = __assign(__assign({}, nextState), _shrinkContentsUntilTheyFit(currentState.dataToMeasure, props.onReduceData, getElementToMeasureDimension));\n }\n }\n return nextState;\n }\n /** Function that determines if we need to render content for measurement based on the measurement cache contents. */\n function shouldRenderDataForMeasurement(dataToMeasure) {\n if (!dataToMeasure || _measurementCache.getCachedMeasurement(dataToMeasure) !== undefined) {\n return false;\n }\n return true;\n }\n function getInitialResizeGroupState(data) {\n return {\n dataToMeasure: __assign({}, data),\n resizeDirection: 'grow',\n measureContainer: true,\n };\n }\n return {\n getNextState: getNextState,\n shouldRenderDataForMeasurement: shouldRenderDataForMeasurement,\n getInitialResizeGroupState: getInitialResizeGroupState,\n };\n};\n// Provides a context property that (if true) tells any child components that\n// they are only being used for measurement purposes and will not be visible.\nexport var MeasuredContext = React.createContext({ isMeasured: false });\n// Styles for the hidden div used for measurement\nvar hiddenDivStyles = { position: 'fixed', visibility: 'hidden' };\nvar hiddenParentStyles = { position: 'relative' };\nvar COMPONENT_NAME = 'ResizeGroup';\n/**\n * Use useReducer instead of userState because React is not batching the state updates\n * when state is set in callbacks of setTimeout or requestAnimationFrame.\n * See issue: https://github.com/facebook/react/issues/14259\n */\nfunction resizeDataReducer(state, action) {\n var _a;\n switch (action.type) {\n case 'resizeData':\n return __assign({}, action.value);\n case 'dataToMeasure':\n return __assign(__assign({}, state), { dataToMeasure: action.value, resizeDirection: 'grow', measureContainer: true });\n default:\n return __assign(__assign({}, state), (_a = {}, _a[action.type] = action.value, _a));\n }\n}\nfunction useResizeState(props, nextResizeGroupStateProvider, rootRef) {\n var initialStateData = useConst(function () { return nextResizeGroupStateProvider.getInitialResizeGroupState(props.data); });\n var _a = React.useReducer(resizeDataReducer, initialStateData), resizeData = _a[0], dispatchResizeDataAction = _a[1];\n // Reset state when new data is provided\n React.useEffect(function () {\n dispatchResizeDataAction({\n type: 'dataToMeasure',\n value: props.data,\n });\n }, [props.data]);\n // Because it's possible that we may force more than one re-render per animation frame, we\n // want to make sure that the RAF request is using the most recent data.\n var stateRef = React.useRef(initialStateData);\n stateRef.current = __assign({}, resizeData);\n var updateResizeState = React.useCallback(function (nextState) {\n if (nextState) {\n dispatchResizeDataAction({\n type: 'resizeData',\n value: nextState,\n });\n }\n }, []);\n var remeasure = React.useCallback(function () {\n if (rootRef.current) {\n dispatchResizeDataAction({\n type: 'measureContainer',\n value: true,\n });\n }\n }, [rootRef]);\n return [stateRef, updateResizeState, remeasure];\n}\nfunction useResizingBehavior(props, rootRef) {\n var nextResizeGroupStateProvider = useConst(getNextResizeGroupStateProvider);\n // A div that can be used for the initial measurement so that we can avoid mounting a second instance\n // of the component being measured for the initial render.\n var initialHiddenDiv = React.useRef(null);\n // A hidden div that is used for mounting a new instance of the component for measurement in a hidden\n // div without unmounting the currently visible content.\n var updateHiddenDiv = React.useRef(null);\n // Tracks if any content has been rendered to the user. This enables us to do some performance optimizations\n // for the initial render.\n var hasRenderedContent = React.useRef(false);\n var async = useAsync();\n var _a = useResizeState(props, nextResizeGroupStateProvider, rootRef), stateRef = _a[0], updateResizeState = _a[1], remeasure = _a[2];\n React.useEffect(function () {\n var _a;\n if (stateRef.current.renderedData) {\n hasRenderedContent.current = true;\n (_a = props.dataDidRender) === null || _a === void 0 ? void 0 : _a.call(props, stateRef.current.renderedData);\n }\n });\n React.useEffect(function () {\n async.requestAnimationFrame(function () {\n var containerDimension = undefined;\n if (stateRef.current.measureContainer && rootRef.current) {\n var boundingRect = rootRef.current.getBoundingClientRect();\n containerDimension =\n props.direction === ResizeGroupDirection.vertical ? boundingRect.height : boundingRect.width;\n }\n var nextState = nextResizeGroupStateProvider.getNextState(props, stateRef.current, function () {\n var refToMeasure = !hasRenderedContent.current ? initialHiddenDiv : updateHiddenDiv;\n if (!refToMeasure.current) {\n return 0;\n }\n return props.direction === ResizeGroupDirection.vertical\n ? refToMeasure.current.scrollHeight\n : refToMeasure.current.scrollWidth;\n }, containerDimension);\n updateResizeState(nextState);\n }, rootRef.current);\n });\n var win = useWindow();\n useOnEvent(win, 'resize', async.debounce(remeasure, RESIZE_DELAY, { leading: true }));\n var dataNeedsMeasuring = nextResizeGroupStateProvider.shouldRenderDataForMeasurement(stateRef.current.dataToMeasure);\n var isInitialMeasure = !hasRenderedContent.current && dataNeedsMeasuring;\n return [\n stateRef.current.dataToMeasure,\n stateRef.current.renderedData,\n remeasure,\n initialHiddenDiv,\n updateHiddenDiv,\n dataNeedsMeasuring,\n isInitialMeasure,\n ];\n}\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 deprecations: { styles: 'className' },\n });\n }\n}\nvar measuredContextValue = { isMeasured: true };\nexport var ResizeGroupBase = React.forwardRef(function (props, forwardedRef) {\n var rootRef = React.useRef(null);\n // The root div which is the container inside of which we are trying to fit content.\n var mergedRootRef = useMergedRefs(rootRef, forwardedRef);\n var _a = useResizingBehavior(props, rootRef), dataToMeasure = _a[0], renderedData = _a[1], remeasure = _a[2], initialHiddenDiv = _a[3], updateHiddenDiv = _a[4], dataNeedsMeasuring = _a[5], isInitialMeasure = _a[6];\n React.useImperativeHandle(props.componentRef, function () { return ({ remeasure: remeasure }); }, [remeasure]);\n useDebugWarnings(props);\n var className = props.className, onRenderData = props.onRenderData;\n var divProps = getNativeProps(props, divProperties, ['data']);\n // We only ever render the final content to the user. All measurements are done in a hidden div.\n // For the initial render, we want this to be as fast as possible, so we need to make sure that we only mount one\n // version of the component for measurement and the final render. For renders that update what is on screen, we\n // want to make sure that there are no jarring effects such as the screen flashing as we apply scaling steps for\n // measurement. In the update case, we mount a second version of the component just for measurement purposes and\n // leave the rendered content untouched until we know the next state to show to the user.\n return (React.createElement(\"div\", __assign({}, divProps, { className: className, ref: mergedRootRef }),\n React.createElement(\"div\", { style: hiddenParentStyles },\n dataNeedsMeasuring && !isInitialMeasure && (React.createElement(\"div\", { style: hiddenDivStyles, ref: updateHiddenDiv },\n React.createElement(MeasuredContext.Provider, { value: measuredContextValue }, onRenderData(dataToMeasure)))),\n React.createElement(\"div\", { ref: initialHiddenDiv, style: isInitialMeasure ? hiddenDivStyles : undefined, \"data-automation-id\": \"visibleContent\" }, isInitialMeasure ? onRenderData(dataToMeasure) : renderedData && onRenderData(renderedData)))));\n});\nResizeGroupBase.displayName = 'ResizeGroupBase';\n//# sourceMappingURL=ResizeGroup.base.js.map","import { ResizeGroupBase } from './ResizeGroup.base';\nexport var ResizeGroup = ResizeGroupBase;\n//# sourceMappingURL=ResizeGroup.js.map","/**\n * {@docCategory ResizeGroup}\n */\nexport var ResizeGroupDirection;\n(function (ResizeGroupDirection) {\n ResizeGroupDirection[ResizeGroupDirection[\"horizontal\"] = 0] = \"horizontal\";\n ResizeGroupDirection[ResizeGroupDirection[\"vertical\"] = 1] = \"vertical\";\n})(ResizeGroupDirection || (ResizeGroupDirection = {}));\n//# sourceMappingURL=ResizeGroup.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, classNamesFunction, getNativeProps, inputProperties } from '../../Utilities';\nimport { useControllableValue, useId, useMergedRefs, useWarnings } from '@fluentui/react-hooks';\nimport { IconButton } from '../../Button';\nimport { Icon } from '../../Icon';\nvar COMPONENT_NAME = 'SearchBox';\nvar iconButtonStyles = { root: { height: 'auto' }, icon: { fontSize: '12px' } };\nvar iconButtonProps = { iconName: 'Clear' };\nvar defaultClearButtonProps = { ariaLabel: 'Clear text' };\nvar getClassNames = classNamesFunction();\nvar useComponentRef = function (componentRef, inputElementRef, hasFocus) {\n React.useImperativeHandle(componentRef, function () { return ({\n focus: function () { var _a; return (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus(); },\n hasFocus: function () { return hasFocus; },\n }); }, [inputElementRef, hasFocus]);\n};\nexport var SearchBoxBase = React.forwardRef(function (props, forwardedRef) {\n var ariaLabel = props.ariaLabel, className = props.className, _a = props.defaultValue, defaultValue = _a === void 0 ? '' : _a, disabled = props.disabled, underlined = props.underlined, styles = props.styles, \n // eslint-disable-next-line deprecation/deprecation\n labelText = props.labelText, \n // eslint-disable-next-line deprecation/deprecation\n _b = props.placeholder, \n // eslint-disable-next-line deprecation/deprecation\n placeholder = _b === void 0 ? labelText : _b, theme = props.theme, _c = props.clearButtonProps, clearButtonProps = _c === void 0 ? defaultClearButtonProps : _c, _d = props.disableAnimation, disableAnimation = _d === void 0 ? false : _d, _e = props.showIcon, showIcon = _e === void 0 ? false : _e, customOnClear = props.onClear, customOnBlur = props.onBlur, customOnEscape = props.onEscape, customOnSearch = props.onSearch, customOnKeyDown = props.onKeyDown, iconProps = props.iconProps, role = props.role, onChange = props.onChange, \n // eslint-disable-next-line deprecation/deprecation\n onChanged = props.onChanged;\n var _f = React.useState(false), hasFocus = _f[0], setHasFocus = _f[1];\n var _g = useControllableValue(props.value, defaultValue, React.useCallback(function (ev) {\n onChange === null || onChange === void 0 ? void 0 : onChange(ev, ev === null || ev === void 0 ? void 0 : ev.target.value);\n onChanged === null || onChanged === void 0 ? void 0 : onChanged(ev === null || ev === void 0 ? void 0 : ev.target.value);\n }, [onChange, onChanged])), uncastValue = _g[0], setValue = _g[1];\n var value = String(uncastValue);\n var rootElementRef = React.useRef(null);\n var inputElementRef = React.useRef(null);\n var mergedRootRef = useMergedRefs(rootElementRef, forwardedRef);\n var id = useId(COMPONENT_NAME, props.id);\n var customOnClearClick = clearButtonProps.onClick;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n underlined: underlined,\n hasFocus: hasFocus,\n disabled: disabled,\n hasInput: value.length > 0,\n disableAnimation: disableAnimation,\n showIcon: showIcon,\n });\n var nativeProps = getNativeProps(props, inputProperties, [\n 'className',\n 'placeholder',\n 'onFocus',\n 'onBlur',\n 'value',\n 'role',\n ]);\n var onClear = React.useCallback(function (ev) {\n var _a;\n customOnClear === null || customOnClear === void 0 ? void 0 : customOnClear(ev);\n if (!ev.defaultPrevented) {\n setValue('');\n (_a = inputElementRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n ev.stopPropagation();\n ev.preventDefault();\n }\n }, [customOnClear, setValue]);\n var onClearClick = React.useCallback(function (ev) {\n customOnClearClick === null || customOnClearClick === void 0 ? void 0 : customOnClearClick(ev);\n if (!ev.defaultPrevented) {\n onClear(ev);\n }\n }, [customOnClearClick, onClear]);\n var onFocusCapture = function (ev) {\n var _a;\n setHasFocus(true);\n (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, ev);\n };\n var onClickFocus = function () {\n if (inputElementRef.current) {\n inputElementRef.current.focus();\n inputElementRef.current.selectionStart = inputElementRef.current.selectionEnd = 0;\n }\n };\n var onBlur = React.useCallback(function (ev) {\n setHasFocus(false);\n customOnBlur === null || customOnBlur === void 0 ? void 0 : customOnBlur(ev);\n }, [customOnBlur]);\n var onInputChange = function (ev) {\n setValue(ev.target.value, ev);\n };\n var onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.escape:\n customOnEscape === null || customOnEscape === void 0 ? void 0 : customOnEscape(ev);\n // Only call onClear if the search box has a value to clear. Otherwise, allow the Esc key\n // to propagate from the empty search box to a parent element such as a dialog, etc.\n if (value && !ev.defaultPrevented) {\n onClear(ev);\n }\n break;\n case KeyCodes.enter:\n if (customOnSearch) {\n customOnSearch(value);\n ev.preventDefault();\n ev.stopPropagation();\n }\n break;\n default:\n // REVIEW: Why aren't we calling customOnKeyDown for Escape or Enter?\n customOnKeyDown === null || customOnKeyDown === void 0 ? void 0 : customOnKeyDown(ev);\n // REVIEW: Why are we calling stopPropagation if customOnKeyDown called preventDefault?\n // customOnKeyDown should call stopPropagation if it needs it.\n if (ev.defaultPrevented) {\n ev.stopPropagation();\n }\n break;\n }\n };\n useDebugWarning(props);\n useComponentRef(props.componentRef, inputElementRef, hasFocus);\n return (React.createElement(\"div\", { role: role, ref: mergedRootRef, className: classNames.root, onFocusCapture: onFocusCapture },\n React.createElement(\"div\", { className: classNames.iconContainer, onClick: onClickFocus, \"aria-hidden\": true },\n React.createElement(Icon, __assign({ iconName: \"Search\" }, iconProps, { className: classNames.icon }))),\n React.createElement(\"input\", __assign({}, nativeProps, { id: id, className: classNames.field, placeholder: placeholder, onChange: onInputChange, onInput: onInputChange, onBlur: onBlur, onKeyDown: onKeyDown, value: value, disabled: disabled, role: \"searchbox\", \"aria-label\": ariaLabel, ref: inputElementRef })),\n value.length > 0 && (React.createElement(\"div\", { className: classNames.clearButton },\n React.createElement(IconButton, __assign({ onBlur: onBlur, styles: iconButtonStyles, iconProps: iconButtonProps }, clearButtonProps, { onClick: onClearClick }))))));\n});\nSearchBoxBase.displayName = COMPONENT_NAME;\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: COMPONENT_NAME,\n props: props,\n deprecations: { labelText: 'placeholder' },\n });\n }\n}\n//# sourceMappingURL=SearchBox.base.js.map","import { HighContrastSelector, AnimationVariables, normalize, getPlaceholderStyles, getGlobalClassNames, getInputFocusStyle, } from '../../Styling';\nimport { getRTL } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-SearchBox',\n iconContainer: 'ms-SearchBox-iconContainer',\n icon: 'ms-SearchBox-icon',\n clearButton: 'ms-SearchBox-clearButton',\n field: 'ms-SearchBox-field',\n};\nexport function getStyles(props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, underlined = props.underlined, disabled = props.disabled, hasFocus = props.hasFocus, className = props.className, hasInput = props.hasInput, disableAnimation = props.disableAnimation, showIcon = props.showIcon;\n var palette = theme.palette, fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // placeholder style constants\n var placeholderStyles = {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n };\n var inputIconAlt = palette.neutralSecondary;\n var inputIconAltHovered = palette.neutralPrimary;\n var inputBorderDisabled = palette.neutralLighter;\n var inputBackgroundHovered = palette.neutralLighter;\n var inputBackgroundDisabled = palette.neutralLighter;\n return {\n root: [\n classNames.root,\n fonts.medium,\n normalize,\n {\n color: semanticColors.inputText,\n backgroundColor: semanticColors.inputBackground,\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'nowrap',\n alignItems: 'stretch',\n // The 1px top and bottom padding ensure the input field does not overlap the border\n padding: '1px 0 1px 4px',\n borderRadius: effects.roundedCorner2,\n border: \"1px solid \" + semanticColors.inputBorder,\n height: 32,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n borderColor: 'WindowText',\n },\n _a[':hover'] = {\n borderColor: semanticColors.inputBorderHovered,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n borderColor: 'Highlight',\n },\n _b),\n },\n _a[\":hover .\" + classNames.iconContainer] = {\n color: semanticColors.inputIconHovered,\n },\n _a),\n },\n !hasFocus &&\n hasInput && {\n selectors: (_c = {},\n _c[\":hover .\" + classNames.iconContainer] = {\n width: 4,\n },\n _c[\":hover .\" + classNames.icon] = {\n opacity: 0,\n pointerEvents: 'none',\n },\n _c),\n },\n hasFocus && [\n 'is-active',\n {\n position: 'relative',\n },\n getInputFocusStyle(semanticColors.inputFocusBorderAlt, underlined ? 0 : effects.roundedCorner2, underlined ? 'borderBottom' : 'border'),\n ],\n showIcon && [\n {\n selectors: (_d = {},\n _d[\":hover .\" + classNames.iconContainer] = {\n width: 32,\n },\n _d[\":hover .\" + classNames.icon] = {\n opacity: 1,\n },\n _d),\n },\n ],\n disabled && [\n 'is-disabled',\n {\n borderColor: inputBorderDisabled,\n backgroundColor: inputBackgroundDisabled,\n pointerEvents: 'none',\n cursor: 'default',\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n borderColor: 'GrayText',\n },\n _e),\n },\n ],\n underlined && [\n 'is-underlined',\n {\n borderWidth: '0 0 1px 0',\n borderRadius: 0,\n // Underlined SearchBox has a larger padding left to vertically align with the waffle in product\n padding: '1px 0 1px 8px',\n },\n ],\n underlined &&\n disabled && {\n backgroundColor: 'transparent',\n },\n hasInput && 'can-clear',\n className,\n ],\n iconContainer: [\n classNames.iconContainer,\n {\n display: 'flex',\n flexDirection: 'column',\n justifyContent: 'center',\n flexShrink: 0,\n fontSize: 16,\n width: 32,\n textAlign: 'center',\n color: semanticColors.inputIcon,\n cursor: 'text',\n },\n hasFocus && {\n width: 4,\n },\n disabled && {\n color: semanticColors.inputIconDisabled,\n },\n !disableAnimation && {\n transition: \"width \" + AnimationVariables.durationValue1,\n },\n showIcon &&\n hasFocus && {\n width: 32,\n },\n ],\n icon: [\n classNames.icon,\n {\n opacity: 1,\n },\n hasFocus && {\n opacity: 0,\n pointerEvents: 'none',\n },\n !disableAnimation && {\n transition: \"opacity \" + AnimationVariables.durationValue1 + \" 0s\",\n },\n showIcon &&\n hasFocus && {\n opacity: 1,\n },\n ],\n clearButton: [\n classNames.clearButton,\n {\n display: 'flex',\n flexDirection: 'row',\n alignItems: 'stretch',\n cursor: 'pointer',\n flexBasis: '32px',\n flexShrink: 0,\n padding: 0,\n margin: '-1px 0px',\n selectors: {\n '&:hover .ms-Button': {\n backgroundColor: inputBackgroundHovered,\n },\n '&:hover .ms-Button-icon': {\n color: inputIconAltHovered,\n },\n '.ms-Button': {\n borderRadius: getRTL(theme) ? '1px 0 0 1px' : '0 1px 1px 0',\n },\n '.ms-Button-icon': {\n color: inputIconAlt,\n },\n },\n },\n ],\n field: [\n classNames.field,\n normalize,\n getPlaceholderStyles(placeholderStyles),\n {\n backgroundColor: 'transparent',\n border: 'none',\n outline: 'none',\n fontWeight: 'inherit',\n fontFamily: 'inherit',\n fontSize: 'inherit',\n color: semanticColors.inputText,\n flex: '1 1 0px',\n // The default implicit value of 'auto' prevents the input from shrinking. Setting min-width to\n // 0px allows the input element to shrink to fit the container.\n minWidth: '0px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n // This padding forces the text placement to round up.\n paddingBottom: 0.5,\n // This removes the IE specific clear button in the input since we implemented our own\n selectors: {\n '::-ms-clear': {\n display: 'none',\n },\n },\n },\n disabled && {\n color: semanticColors.disabledText,\n },\n ],\n };\n}\n//# sourceMappingURL=SearchBox.styles.js.map","import { styled } from '../../Utilities';\nimport { SearchBoxBase } from './SearchBox.base';\nimport { getStyles } from './SearchBox.styles';\nexport var SearchBox = styled(SearchBoxBase, getStyles, undefined, { scope: 'SearchBox' });\n//# sourceMappingURL=SearchBox.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { SpinnerType, SpinnerSize } from './Spinner.types';\nimport { classNamesFunction, DelayedRender, getNativeProps, divProperties } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar SpinnerBase = /** @class */ (function (_super) {\n __extends(SpinnerBase, _super);\n function SpinnerBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n SpinnerBase.prototype.render = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, type = _a.type, size = _a.size, ariaLabel = _a.ariaLabel, ariaLive = _a.ariaLive, styles = _a.styles, label = _a.label, theme = _a.theme, className = _a.className, labelPosition = _a.labelPosition;\n var statusMessage = ariaLabel;\n var nativeProps = getNativeProps(this.props, divProperties, ['size']);\n // SpinnerType is deprecated. If someone is still using this property, rather than putting the SpinnerType into the\n // ISpinnerStyleProps, we'll map SpinnerType to its equivalent SpinnerSize and pass that in. Once SpinnerType\n // finally goes away we should delete this.\n var styleSize = size;\n if (styleSize === undefined && type !== undefined) {\n // eslint-disable-next-line deprecation/deprecation\n styleSize = type === SpinnerType.large ? SpinnerSize.large : SpinnerSize.medium;\n }\n var classNames = getClassNames(styles, {\n theme: theme,\n size: styleSize,\n className: className,\n labelPosition: labelPosition,\n });\n return (React.createElement(\"div\", __assign({}, nativeProps, { className: classNames.root }),\n React.createElement(\"div\", { className: classNames.circle }),\n label && React.createElement(\"div\", { className: classNames.label }, label),\n statusMessage && (React.createElement(\"div\", { role: \"status\", \"aria-live\": ariaLive },\n React.createElement(DelayedRender, null,\n React.createElement(\"div\", { className: classNames.screenReaderText }, statusMessage))))));\n };\n SpinnerBase.defaultProps = {\n size: SpinnerSize.medium,\n ariaLive: 'polite',\n labelPosition: 'bottom',\n };\n return SpinnerBase;\n}(React.Component));\nexport { SpinnerBase };\n//# sourceMappingURL=Spinner.base.js.map","import { __assign } from \"tslib\";\nimport { SpinnerSize } from './Spinner.types';\nimport { hiddenContentStyle, keyframes, HighContrastSelector, getGlobalClassNames, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-Spinner',\n circle: 'ms-Spinner-circle',\n label: 'ms-Spinner-label',\n};\nvar spinAnimation = memoizeFunction(function () {\n return keyframes({\n '0%': {\n transform: 'rotate(0deg)',\n },\n '100%': {\n transform: 'rotate(360deg)',\n },\n });\n});\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, size = props.size, className = props.className, labelPosition = props.labelPosition;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n display: 'flex',\n flexDirection: 'column',\n alignItems: 'center',\n justifyContent: 'center',\n },\n labelPosition === 'top' && {\n flexDirection: 'column-reverse',\n },\n labelPosition === 'right' && {\n flexDirection: 'row',\n },\n labelPosition === 'left' && {\n flexDirection: 'row-reverse',\n },\n className,\n ],\n circle: [\n classNames.circle,\n {\n boxSizing: 'border-box',\n borderRadius: '50%',\n border: '1.5px solid ' + palette.themeLight,\n borderTopColor: palette.themePrimary,\n animationName: spinAnimation(),\n animationDuration: '1.3s',\n animationIterationCount: 'infinite',\n animationTimingFunction: 'cubic-bezier(.53,.21,.29,.67)',\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ borderTopColor: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _a),\n },\n size === SpinnerSize.xSmall && [\n 'ms-Spinner--xSmall',\n {\n width: 12,\n height: 12,\n },\n ],\n size === SpinnerSize.small && [\n 'ms-Spinner--small',\n {\n width: 16,\n height: 16,\n },\n ],\n size === SpinnerSize.medium && [\n 'ms-Spinner--medium',\n {\n width: 20,\n height: 20,\n },\n ],\n size === SpinnerSize.large && [\n 'ms-Spinner--large',\n {\n width: 28,\n height: 28,\n },\n ],\n ],\n label: [\n classNames.label,\n theme.fonts.small,\n {\n color: palette.themePrimary,\n margin: '8px 0 0',\n textAlign: 'center',\n },\n labelPosition === 'top' && {\n margin: '0 0 8px',\n },\n labelPosition === 'right' && {\n margin: '0 0 0 8px',\n },\n labelPosition === 'left' && {\n margin: '0 8px 0 0',\n },\n ],\n screenReaderText: hiddenContentStyle,\n };\n};\n//# sourceMappingURL=Spinner.styles.js.map","import { styled } from '../../Utilities';\nimport { SpinnerBase } from './Spinner.base';\nimport { getStyles } from './Spinner.styles';\nexport var Spinner = styled(SpinnerBase, getStyles, undefined, { scope: 'Spinner' });\n//# sourceMappingURL=Spinner.js.map","/**\n * Possible variations of the spinner circle size.\n * {@docCategory Spinner}\n */\nexport var SpinnerSize;\n(function (SpinnerSize) {\n /**\n * 12px Spinner diameter\n */\n SpinnerSize[SpinnerSize[\"xSmall\"] = 0] = \"xSmall\";\n /**\n * 16px Spinner diameter\n */\n SpinnerSize[SpinnerSize[\"small\"] = 1] = \"small\";\n /**\n * 20px Spinner diameter\n */\n SpinnerSize[SpinnerSize[\"medium\"] = 2] = \"medium\";\n /**\n * 28px Spinner diameter\n */\n SpinnerSize[SpinnerSize[\"large\"] = 3] = \"large\";\n})(SpinnerSize || (SpinnerSize = {}));\n/**\n * @deprecated Use `SpinnerSize` instead. Will be removed at \\>= 2.0.0.\n * {@docCategory Spinner}\n */\nexport var SpinnerType;\n(function (SpinnerType) {\n /**\n * @deprecated Use `SpinnerSize.medium` instead. Will be removed at \\>= 2.0.0.\n */\n SpinnerType[SpinnerType[\"normal\"] = 0] = \"normal\";\n /**\n * @deprecated Use `SpinnerSize.large` instead. Will be removed at \\>= 2.0.0.\n */\n SpinnerType[SpinnerType[\"large\"] = 1] = \"large\";\n})(SpinnerType || (SpinnerType = {}));\n//# sourceMappingURL=Spinner.types.js.map","// Helper function that converts a themed spacing key (if given) to the corresponding themed spacing value.\nvar _getThemedSpacing = function (space, theme) {\n if (theme.spacing.hasOwnProperty(space)) {\n return theme.spacing[space];\n }\n return space;\n};\n// Helper function that takes a gap as a string and converts it into a { value, unit } representation.\nvar _getValueUnitGap = function (gap) {\n var numericalPart = parseFloat(gap);\n var numericalValue = isNaN(numericalPart) ? 0 : numericalPart;\n var numericalString = isNaN(numericalPart) ? '' : numericalPart.toString();\n var unitPart = gap.substring(numericalString.toString().length);\n return {\n value: numericalValue,\n unit: unitPart || 'px',\n };\n};\n/**\n * Takes in a gap size in either a CSS-style format (e.g. 10 or \"10px\")\n * or a key of a themed spacing value (e.g. \"s1\").\n * Returns the separate numerical value of the padding (e.g. 10)\n * and the CSS unit (e.g. \"px\").\n */\nexport var parseGap = function (gap, theme) {\n if (gap === undefined || gap === '') {\n return {\n rowGap: {\n value: 0,\n unit: 'px',\n },\n columnGap: {\n value: 0,\n unit: 'px',\n },\n };\n }\n if (typeof gap === 'number') {\n return {\n rowGap: {\n value: gap,\n unit: 'px',\n },\n columnGap: {\n value: gap,\n unit: 'px',\n },\n };\n }\n var splitGap = gap.split(' ');\n // If the array has more than two values, then return 0px.\n if (splitGap.length > 2) {\n return {\n rowGap: {\n value: 0,\n unit: 'px',\n },\n columnGap: {\n value: 0,\n unit: 'px',\n },\n };\n }\n // If the array has two values, then parse each one.\n if (splitGap.length === 2) {\n return {\n rowGap: _getValueUnitGap(_getThemedSpacing(splitGap[0], theme)),\n columnGap: _getValueUnitGap(_getThemedSpacing(splitGap[1], theme)),\n };\n }\n // Else, parse the numerical value and pass it as both the vertical and horizontal gap.\n var calculatedGap = _getValueUnitGap(_getThemedSpacing(gap, theme));\n return {\n rowGap: calculatedGap,\n columnGap: calculatedGap,\n };\n};\n/**\n * Takes in a padding in a CSS-style format (e.g. 10, \"10px\", \"10px 10px\", etc.)\n * where the separate padding values can also be the key of a themed spacing value\n * (e.g. \"s1 m\", \"10px l1 20px l2\", etc.).\n * Returns a CSS-style padding.\n */\nexport var parsePadding = function (padding, theme) {\n if (padding === undefined || typeof padding === 'number' || padding === '') {\n return padding;\n }\n var paddingValues = padding.split(' ');\n if (paddingValues.length < 2) {\n return _getThemedSpacing(padding, theme);\n }\n return paddingValues.reduce(function (padding1, padding2) {\n return _getThemedSpacing(padding1, theme) + ' ' + _getThemedSpacing(padding2, theme);\n });\n};\n//# sourceMappingURL=StackUtils.js.map","import { __assign } from \"tslib\";\nimport { parseGap, parsePadding } from './StackUtils';\nimport { getGlobalClassNames } from '../../Styling';\nvar nameMap = {\n start: 'flex-start',\n end: 'flex-end',\n};\nvar GlobalClassNames = {\n root: 'ms-Stack',\n inner: 'ms-Stack-inner',\n};\nexport var styles = function (props, theme, tokens) {\n var _a, _b, _c, _d, _e, _f, _g;\n var verticalFill = props.verticalFill, horizontal = props.horizontal, reversed = props.reversed, grow = props.grow, wrap = props.wrap, horizontalAlign = props.horizontalAlign, verticalAlign = props.verticalAlign, disableShrink = props.disableShrink, className = props.className;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n /* eslint-disable deprecation/deprecation */\n var childrenGap = tokens && tokens.childrenGap ? tokens.childrenGap : props.gap;\n var maxHeight = tokens && tokens.maxHeight ? tokens.maxHeight : props.maxHeight;\n var maxWidth = tokens && tokens.maxWidth ? tokens.maxWidth : props.maxWidth;\n var padding = tokens && tokens.padding ? tokens.padding : props.padding;\n /* eslint-enable deprecation/deprecation */\n var _h = parseGap(childrenGap, theme), rowGap = _h.rowGap, columnGap = _h.columnGap;\n var horizontalMargin = \"\" + -0.5 * columnGap.value + columnGap.unit;\n var verticalMargin = \"\" + -0.5 * rowGap.value + rowGap.unit;\n // styles to be applied to all direct children regardless of wrap or direction\n var childStyles = {\n textOverflow: 'ellipsis',\n };\n // selectors to be applied regardless of wrap or direction\n var commonSelectors = {\n // flexShrink styles are applied by the StackItem\n '> *:not(.ms-StackItem)': {\n flexShrink: disableShrink ? 0 : 1,\n },\n };\n if (wrap) {\n return {\n root: [\n classNames.root,\n {\n flexWrap: 'wrap',\n maxWidth: maxWidth,\n maxHeight: maxHeight,\n width: 'auto',\n overflow: 'visible',\n height: '100%',\n },\n horizontalAlign && (_a = {},\n _a[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,\n _a),\n verticalAlign && (_b = {},\n _b[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,\n _b),\n className,\n {\n // not allowed to be overridden by className\n // since this is necessary in order to prevent collapsing margins\n display: 'flex',\n },\n horizontal && {\n height: verticalFill ? '100%' : 'auto',\n },\n ],\n inner: [\n classNames.inner,\n {\n display: 'flex',\n flexWrap: 'wrap',\n marginLeft: horizontalMargin,\n marginRight: horizontalMargin,\n marginTop: verticalMargin,\n marginBottom: verticalMargin,\n overflow: 'visible',\n boxSizing: 'border-box',\n padding: parsePadding(padding, theme),\n // avoid unnecessary calc() calls if horizontal gap is 0\n width: columnGap.value === 0 ? '100%' : \"calc(100% + \" + columnGap.value + columnGap.unit + \")\",\n maxWidth: '100vw',\n selectors: __assign({ '> *': __assign({ margin: \"\" + 0.5 * rowGap.value + rowGap.unit + \" \" + 0.5 * columnGap.value + columnGap.unit }, childStyles) }, commonSelectors),\n },\n horizontalAlign && (_c = {},\n _c[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,\n _c),\n verticalAlign && (_d = {},\n _d[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,\n _d),\n horizontal && {\n flexDirection: reversed ? 'row-reverse' : 'row',\n // avoid unnecessary calc() calls if vertical gap is 0\n height: rowGap.value === 0 ? '100%' : \"calc(100% + \" + rowGap.value + rowGap.unit + \")\",\n selectors: {\n '> *': {\n maxWidth: columnGap.value === 0 ? '100%' : \"calc(100% - \" + columnGap.value + columnGap.unit + \")\",\n },\n },\n },\n !horizontal && {\n flexDirection: reversed ? 'column-reverse' : 'column',\n height: \"calc(100% + \" + rowGap.value + rowGap.unit + \")\",\n selectors: {\n '> *': {\n maxHeight: rowGap.value === 0 ? '100%' : \"calc(100% - \" + rowGap.value + rowGap.unit + \")\",\n },\n },\n },\n ],\n };\n }\n return {\n root: [\n classNames.root,\n {\n display: 'flex',\n flexDirection: horizontal ? (reversed ? 'row-reverse' : 'row') : reversed ? 'column-reverse' : 'column',\n flexWrap: 'nowrap',\n width: 'auto',\n height: verticalFill ? '100%' : 'auto',\n maxWidth: maxWidth,\n maxHeight: maxHeight,\n padding: parsePadding(padding, theme),\n boxSizing: 'border-box',\n selectors: __assign((_e = { '> *': childStyles }, _e[reversed ? '> *:not(:last-child)' : '> *:not(:first-child)'] = [\n horizontal && {\n marginLeft: \"\" + columnGap.value + columnGap.unit,\n },\n !horizontal && {\n marginTop: \"\" + rowGap.value + rowGap.unit,\n },\n ], _e), commonSelectors),\n },\n grow && {\n flexGrow: grow === true ? 1 : grow,\n },\n horizontalAlign && (_f = {},\n _f[horizontal ? 'justifyContent' : 'alignItems'] = nameMap[horizontalAlign] || horizontalAlign,\n _f),\n verticalAlign && (_g = {},\n _g[horizontal ? 'alignItems' : 'justifyContent'] = nameMap[verticalAlign] || verticalAlign,\n _g),\n className,\n ],\n };\n};\n//# sourceMappingURL=Stack.styles.js.map","import { __assign, __rest } from \"tslib\";\n/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport * as React from 'react';\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties, warnDeprecations } from '../../Utilities';\nimport { styles } from './Stack.styles';\nimport { StackItem } from './StackItem/StackItem';\nvar StackView = function (props) {\n var _a = props.as, RootType = _a === void 0 ? 'div' : _a, disableShrink = props.disableShrink, wrap = props.wrap, rest = __rest(props, [\"as\", \"disableShrink\", \"wrap\"]);\n warnDeprecations('Stack', props, {\n gap: 'tokens.childrenGap',\n maxHeight: 'tokens.maxHeight',\n maxWidth: 'tokens.maxWidth',\n padding: 'tokens.padding',\n });\n var stackChildren = React.Children.map(props.children, function (child, index) {\n if (!child) {\n return null;\n }\n if (_isStackItem(child)) {\n var defaultItemProps = {\n shrink: !disableShrink,\n };\n return React.cloneElement(child, __assign(__assign({}, defaultItemProps), child.props));\n }\n return child;\n });\n var nativeProps = getNativeProps(rest, htmlElementProperties);\n var Slots = getSlots(props, {\n root: RootType,\n inner: 'div',\n });\n if (wrap) {\n return (withSlots(Slots.root, __assign({}, nativeProps),\n withSlots(Slots.inner, null, stackChildren)));\n }\n return withSlots(Slots.root, __assign({}, nativeProps), stackChildren);\n};\nfunction _isStackItem(item) {\n // In theory, we should be able to just check item.type === StackItem.\n // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),\n // the object identity is different despite the function implementation being the same.\n return (!!item &&\n typeof item === 'object' &&\n !!item.type &&\n // StackItem is generated by createComponent, so we need to check its displayName instead of name\n item.type.displayName === StackItem.displayName);\n}\nvar StackStatics = {\n Item: StackItem,\n};\nexport var Stack = createComponent(StackView, {\n displayName: 'Stack',\n styles: styles,\n statics: StackStatics,\n});\nexport default Stack;\n//# sourceMappingURL=Stack.js.map","import { getGlobalClassNames } from '../../../Styling';\nvar GlobalClassNames = {\n root: 'ms-StackItem',\n};\nvar alignMap = {\n start: 'flex-start',\n end: 'flex-end',\n};\nexport var StackItemStyles = function (props, theme, tokens) {\n var grow = props.grow, shrink = props.shrink, disableShrink = props.disableShrink, align = props.align, verticalFill = props.verticalFill, order = props.order, className = props.className;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n {\n margin: tokens.margin,\n padding: tokens.padding,\n height: verticalFill ? '100%' : 'auto',\n width: 'auto',\n },\n grow && { flexGrow: grow === true ? 1 : grow },\n (disableShrink || (!grow && !shrink)) && {\n flexShrink: 0,\n },\n shrink &&\n !disableShrink && {\n flexShrink: 1,\n },\n align && {\n alignSelf: alignMap[align] || align,\n },\n order && {\n order: order,\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=StackItem.styles.js.map","import { __assign } from \"tslib\";\nimport { withSlots, createComponent, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../../Utilities';\nimport { StackItemStyles as styles } from './StackItem.styles';\nvar StackItemView = function (props) {\n var children = props.children;\n var nativeProps = getNativeProps(props, htmlElementProperties);\n // eslint-disable-next-line eqeqeq\n if (children == null) {\n return null;\n }\n var Slots = getSlots(props, {\n root: 'div',\n });\n return withSlots(Slots.root, __assign({}, nativeProps), children);\n};\nexport var StackItem = createComponent(StackItemView, {\n displayName: 'StackItem',\n styles: styles,\n});\nexport default StackItem;\n//# sourceMappingURL=StackItem.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 { createComponent } from '@fluentui/foundation-legacy';\nimport { TextView } from './Text.view';\nimport { TextStyles as styles } from './Text.styles';\nexport var Text = createComponent(TextView, {\n displayName: 'Text',\n styles: styles,\n});\nexport default Text;\n//# sourceMappingURL=Text.js.map","export var TextStyles = function (props, theme) {\n var as = props.as, className = props.className, block = props.block, nowrap = props.nowrap, variant = props.variant;\n var fonts = theme.fonts, semanticColors = theme.semanticColors;\n var variantObject = fonts[variant || 'medium'];\n return {\n root: [\n variantObject,\n {\n color: variantObject.color || semanticColors.bodyText,\n display: block ? (as === 'td' ? 'table-cell' : 'block') : 'inline',\n mozOsxFontSmoothing: variantObject.MozOsxFontSmoothing,\n webkitFontSmoothing: variantObject.WebkitFontSmoothing,\n },\n nowrap && {\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=Text.styles.js.map","import { __assign, __rest } from \"tslib\";\n/** @jsxRuntime classic */\n/** @jsx withSlots */\nimport { withSlots, getSlots } from '@fluentui/foundation-legacy';\nimport { getNativeProps, htmlElementProperties } from '../../Utilities';\nexport var TextView = function (props) {\n // eslint-disable-next-line eqeqeq\n if (props.children == null) {\n return null;\n }\n var block = props.block, className = props.className, _a = props.as, RootType = _a === void 0 ? 'span' : _a, variant = props.variant, nowrap = props.nowrap, rest = __rest(props, [\"block\", \"className\", \"as\", \"variant\", \"nowrap\"]);\n var Slots = getSlots(props, {\n root: RootType,\n });\n return withSlots(Slots.root, __assign({}, getNativeProps(rest, htmlElementProperties)));\n};\n//# sourceMappingURL=Text.view.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, divProperties, getNativeProps } from '../../Utilities';\nimport { Callout } from '../../Callout';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nvar getClassNames = classNamesFunction();\nvar TooltipBase = /** @class */ (function (_super) {\n __extends(TooltipBase, _super);\n function TooltipBase() {\n var _this = _super !== null && _super.apply(this, arguments) || this;\n _this._onRenderContent = function (props) {\n if (typeof props.content === 'string') {\n return React.createElement(\"p\", { className: _this._classNames.subText }, props.content);\n }\n else {\n return React.createElement(\"div\", { className: _this._classNames.subText }, props.content);\n }\n };\n return _this;\n }\n TooltipBase.prototype.render = function () {\n var _a = this.props, className = _a.className, calloutProps = _a.calloutProps, directionalHint = _a.directionalHint, directionalHintForRTL = _a.directionalHintForRTL, styles = _a.styles, id = _a.id, maxWidth = _a.maxWidth, _b = _a.onRenderContent, onRenderContent = _b === void 0 ? this._onRenderContent : _b, targetElement = _a.targetElement, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className || (calloutProps && calloutProps.className),\n beakWidth: calloutProps && calloutProps.beakWidth,\n gapSpace: calloutProps && calloutProps.gapSpace,\n maxWidth: maxWidth,\n });\n return (React.createElement(Callout, __assign({ target: targetElement, directionalHint: directionalHint, directionalHintForRTL: directionalHintForRTL }, calloutProps, getNativeProps(this.props, divProperties, ['id']), { className: this._classNames.root }),\n React.createElement(\"div\", { className: this._classNames.content, id: id, onMouseEnter: this.props.onMouseEnter, onMouseLeave: this.props.onMouseLeave }, onRenderContent(this.props, this._onRenderContent))));\n };\n // Specify default props values\n TooltipBase.defaultProps = {\n directionalHint: DirectionalHint.topCenter,\n maxWidth: '364px',\n calloutProps: {\n isBeakVisible: true,\n beakWidth: 16,\n gapSpace: 0,\n setInitialFocus: true,\n doNotLayer: false,\n },\n };\n return TooltipBase;\n}(React.Component));\nexport { TooltipBase };\n//# sourceMappingURL=Tooltip.base.js.map","import { styled } from '../../Utilities';\nimport { TooltipBase } from './Tooltip.base';\nimport { getStyles } from './Tooltip.styles';\nexport var Tooltip = styled(TooltipBase, getStyles, undefined, {\n scope: 'Tooltip',\n});\n//# sourceMappingURL=Tooltip.js.map","import { AnimationClassNames } from '../../Styling';\nexport var getStyles = function (props) {\n var className = props.className, _a = props.beakWidth, beakWidth = _a === void 0 ? 16 : _a, _b = props.gapSpace, gapSpace = _b === void 0 ? 0 : _b, maxWidth = props.maxWidth, theme = props.theme;\n var semanticColors = theme.semanticColors, fonts = theme.fonts, effects = theme.effects;\n // The math here is done to account for the 45 degree rotation of the beak\n // and sub-pixel rounding that differs across browsers, which is more noticeable when\n // the device pixel ratio is larger\n var tooltipGapSpace = -(Math.sqrt((beakWidth * beakWidth) / 2) + gapSpace) + 1 / window.devicePixelRatio;\n return {\n root: [\n 'ms-Tooltip',\n theme.fonts.medium,\n AnimationClassNames.fadeIn200,\n {\n background: semanticColors.menuBackground,\n boxShadow: effects.elevation8,\n padding: '8px',\n maxWidth: maxWidth,\n selectors: {\n ':after': {\n content: \"''\",\n position: 'absolute',\n bottom: tooltipGapSpace,\n left: tooltipGapSpace,\n right: tooltipGapSpace,\n top: tooltipGapSpace,\n zIndex: 0,\n },\n },\n },\n className,\n ],\n content: [\n 'ms-Tooltip-content',\n fonts.small,\n {\n position: 'relative',\n zIndex: 1,\n color: semanticColors.menuItemText,\n wordWrap: 'break-word',\n overflowWrap: 'break-word',\n overflow: 'hidden',\n },\n ],\n subText: [\n 'ms-Tooltip-subtext',\n {\n // Using inherit here to avoid unintentional global overrides of the tag.\n fontSize: 'inherit',\n fontWeight: 'inherit',\n color: 'inherit',\n margin: 0,\n },\n ],\n };\n};\n//# sourceMappingURL=Tooltip.styles.js.map","/**\n * {@docCategory Tooltip}\n */\nexport var TooltipDelay;\n(function (TooltipDelay) {\n TooltipDelay[TooltipDelay[\"zero\"] = 0] = \"zero\";\n /** 300 ms delay before showing the tooltip */\n TooltipDelay[TooltipDelay[\"medium\"] = 1] = \"medium\";\n /** 500 ms delay before showing the tooltip */\n TooltipDelay[TooltipDelay[\"long\"] = 2] = \"long\";\n})(TooltipDelay || (TooltipDelay = {}));\n//# sourceMappingURL=Tooltip.types.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","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","/**\n * {@docCategory Tooltip}\n */\nexport var TooltipOverflowMode;\n(function (TooltipOverflowMode) {\n /** Only show tooltip if parent DOM element is overflowing */\n TooltipOverflowMode[TooltipOverflowMode[\"Parent\"] = 0] = \"Parent\";\n /**\n * Only show tooltip if tooltip host's content is overflowing.\n * Note that this does not check the children for overflow, only the TooltipHost root.\n */\n TooltipOverflowMode[TooltipOverflowMode[\"Self\"] = 1] = \"Self\";\n})(TooltipOverflowMode || (TooltipOverflowMode = {}));\n//# sourceMappingURL=TooltipHost.types.js.map","import { mergeStyles } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nexport var getClassNames = memoizeFunction(function (styles, className, activityPersonas, isCompact) {\n return {\n root: mergeStyles('ms-ActivityItem', className, styles.root, isCompact && styles.isCompactRoot),\n pulsingBeacon: mergeStyles('ms-ActivityItem-pulsingBeacon', styles.pulsingBeacon),\n personaContainer: mergeStyles('ms-ActivityItem-personaContainer', styles.personaContainer, isCompact && styles.isCompactPersonaContainer),\n activityPersona: mergeStyles('ms-ActivityItem-activityPersona', styles.activityPersona, isCompact && styles.isCompactPersona, !isCompact && activityPersonas && activityPersonas.length === 2 && styles.doublePersona),\n activityTypeIcon: mergeStyles('ms-ActivityItem-activityTypeIcon', styles.activityTypeIcon, isCompact && styles.isCompactIcon),\n activityContent: mergeStyles('ms-ActivityItem-activityContent', styles.activityContent, isCompact && styles.isCompactContent),\n activityText: mergeStyles('ms-ActivityItem-activityText', styles.activityText),\n commentText: mergeStyles('ms-ActivityItem-commentText', styles.commentText),\n timeStamp: mergeStyles('ms-ActivityItem-timeStamp', styles.timeStamp, isCompact && styles.isCompactTimeStamp),\n };\n});\n//# sourceMappingURL=ActivityItem.classNames.js.map","import { concatStyleSets, getTheme, HighContrastSelector, keyframes, PulsingBeaconAnimationStyles, } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nvar DEFAULT_PERSONA_SIZE = '32px';\nvar COMPACT_PERSONA_SIZE = '16px';\nvar DEFAULT_ICON_SIZE = '16px';\nvar COMPACT_ICON_SIZE = '13px';\nvar ANIMATION_INNER_DIMENSION = '4px';\nvar ANIMATION_OUTER_DIMENSION = '28px';\nvar ANIMATION_BORDER_WIDTH = '4px';\nvar fadeIn = memoizeFunction(function () {\n return keyframes({\n from: { opacity: 0 },\n to: { opacity: 1 },\n });\n});\nvar slideIn = memoizeFunction(function () {\n return keyframes({\n from: { transform: 'translateX(-10px)' },\n to: { transform: 'translateX(0)' },\n });\n});\nexport var getStyles = memoizeFunction(function (theme, customStyles, animateBeaconSignal, beaconColorOne, beaconColorTwo, isCompact) {\n var _a;\n if (theme === void 0) { theme = getTheme(); }\n var continuousPulse = PulsingBeaconAnimationStyles.continuousPulseAnimationSingle(beaconColorOne ? beaconColorOne : theme.palette.themePrimary, beaconColorTwo ? beaconColorTwo : theme.palette.themeTertiary, ANIMATION_INNER_DIMENSION, ANIMATION_OUTER_DIMENSION, ANIMATION_BORDER_WIDTH);\n var continuousPulseAnimation = {\n animationName: continuousPulse,\n animationIterationCount: '1',\n animationDuration: '.8s',\n zIndex: 1,\n };\n var slideInAnimation = {\n animationName: slideIn(),\n animationIterationCount: '1',\n animationDuration: '.5s',\n };\n var fadeInAnimation = {\n animationName: fadeIn(),\n animationIterationCount: '1',\n animationDuration: '.5s',\n };\n var ActivityItemStyles = {\n root: [\n theme.fonts.small,\n {\n display: 'flex',\n justifyContent: 'flex-start',\n alignItems: 'flex-start',\n boxSizing: 'border-box',\n color: theme.palette.neutralSecondary,\n },\n isCompact && animateBeaconSignal && fadeInAnimation,\n ],\n pulsingBeacon: [\n {\n position: 'absolute',\n top: '50%',\n left: '50%',\n transform: 'translate(-50%, -50%)',\n width: '0px',\n height: '0px',\n borderRadius: '225px',\n borderStyle: 'solid',\n opacity: 0,\n },\n isCompact && animateBeaconSignal && continuousPulseAnimation,\n ],\n isCompactRoot: {\n alignItems: 'center',\n },\n personaContainer: {\n display: 'flex',\n flexWrap: 'wrap',\n minWidth: DEFAULT_PERSONA_SIZE,\n width: DEFAULT_PERSONA_SIZE,\n height: DEFAULT_PERSONA_SIZE,\n },\n isCompactPersonaContainer: {\n display: 'inline-flex',\n flexWrap: 'nowrap',\n flexBasis: 'auto',\n height: COMPACT_PERSONA_SIZE,\n width: 'auto',\n minWidth: '0',\n paddingRight: '6px',\n },\n activityTypeIcon: {\n height: DEFAULT_PERSONA_SIZE,\n fontSize: DEFAULT_ICON_SIZE,\n lineHeight: DEFAULT_ICON_SIZE,\n marginTop: '3px',\n },\n isCompactIcon: {\n height: COMPACT_PERSONA_SIZE,\n minWidth: COMPACT_PERSONA_SIZE,\n fontSize: COMPACT_ICON_SIZE,\n lineHeight: COMPACT_ICON_SIZE,\n color: theme.palette.themePrimary,\n marginTop: '1px',\n position: 'relative',\n display: 'flex',\n justifyContent: 'center',\n alignItems: 'center',\n selectors: {\n '.ms-Persona-imageArea': {\n margin: '-2px 0 0 -2px',\n border: '2px solid' + theme.palette.white,\n borderRadius: '50%',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: 'none',\n margin: '0',\n },\n _a),\n },\n },\n },\n activityPersona: {\n display: 'block',\n },\n doublePersona: {\n selectors: {\n ':first-child': {\n alignSelf: 'flex-end',\n },\n },\n },\n isCompactPersona: {\n display: 'inline-block',\n width: '8px',\n minWidth: '8px',\n overflow: 'visible',\n },\n activityContent: [\n {\n padding: '0 8px',\n },\n isCompact && animateBeaconSignal && slideInAnimation,\n ],\n activityText: {\n display: 'inline',\n },\n isCompactContent: {\n flex: '1',\n padding: '0 4px',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflowX: 'hidden',\n },\n commentText: {\n color: theme.palette.neutralPrimary,\n },\n timeStamp: [\n theme.fonts.tiny,\n {\n fontWeight: 400,\n color: theme.palette.neutralSecondary,\n },\n ],\n isCompactTimeStamp: {\n display: 'inline-block',\n paddingLeft: '0.3em',\n fontSize: '1em',\n },\n };\n return concatStyleSets(ActivityItemStyles, customStyles);\n});\n//# sourceMappingURL=ActivityItem.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getClassNames } from './ActivityItem.classNames';\nimport { getStyles } from './ActivityItem.styles';\nimport { PersonaSize, PersonaCoin } from '../../Persona';\n/**\n * {@docCategory ActivityItem}\n */\nvar ActivityItem = /** @class */ (function (_super) {\n __extends(ActivityItem, _super);\n function ActivityItem(props) {\n var _this = _super.call(this, props) || this;\n _this._onRenderIcon = function (props) {\n if (props.activityPersonas) {\n return _this._onRenderPersonaArray(props);\n }\n else {\n return _this.props.activityIcon;\n }\n };\n _this._onRenderActivityDescription = function (props) {\n var classNames = _this._getClassNames(props);\n // eslint-disable-next-line deprecation/deprecation\n var activityDescription = props.activityDescription || props.activityDescriptionText;\n if (activityDescription) {\n return React.createElement(\"span\", { className: classNames.activityText }, activityDescription);\n }\n return null;\n };\n _this._onRenderComments = function (props) {\n var classNames = _this._getClassNames(props);\n // eslint-disable-next-line deprecation/deprecation\n var comments = props.comments || props.commentText;\n if (!props.isCompact && comments) {\n return React.createElement(\"div\", { className: classNames.commentText }, comments);\n }\n return null;\n };\n _this._onRenderTimeStamp = function (props) {\n var classNames = _this._getClassNames(props);\n if (!props.isCompact && props.timeStamp) {\n return React.createElement(\"div\", { className: classNames.timeStamp }, props.timeStamp);\n }\n return null;\n };\n // If activityPersonas is an array of persona props, build the persona cluster element.\n _this._onRenderPersonaArray = function (props) {\n var classNames = _this._getClassNames(props);\n var personaElement = null;\n var activityPersonas = props.activityPersonas;\n if (activityPersonas[0].imageUrl || activityPersonas[0].imageInitials) {\n var personaList_1 = [];\n var showSize16Personas_1 = activityPersonas.length > 1 || props.isCompact;\n var personaLimit_1 = props.isCompact ? 3 : 4;\n var style_1 = undefined;\n if (props.isCompact) {\n style_1 = {\n display: 'inline-block',\n width: '10px',\n minWidth: '10px',\n overflow: 'visible',\n };\n }\n activityPersonas\n .filter(function (person, index) { return index < personaLimit_1; })\n .forEach(function (person, index) {\n personaList_1.push(React.createElement(PersonaCoin, __assign({}, person, { key: person.key || index, className: classNames.activityPersona, \n // eslint-disable-next-line deprecation/deprecation\n size: showSize16Personas_1 ? PersonaSize.size16 : PersonaSize.size32, style: style_1 })));\n });\n personaElement = React.createElement(\"div\", { className: classNames.personaContainer }, personaList_1);\n }\n return personaElement;\n };\n return _this;\n }\n ActivityItem.prototype.render = function () {\n var _a = this.props, _b = _a.onRenderIcon, onRenderIcon = _b === void 0 ? this._onRenderIcon : _b, _c = _a.onRenderActivityDescription, onRenderActivityDescription = _c === void 0 ? this._onRenderActivityDescription : _c, _d = _a.onRenderComments, onRenderComments = _d === void 0 ? this._onRenderComments : _d, _e = _a.onRenderTimeStamp, onRenderTimeStamp = _e === void 0 ? this._onRenderTimeStamp : _e, animateBeaconSignal = _a.animateBeaconSignal, isCompact = _a.isCompact;\n var classNames = this._getClassNames(this.props);\n return (React.createElement(\"div\", { className: classNames.root, style: this.props.style },\n (this.props.activityPersonas || this.props.activityIcon || this.props.onRenderIcon) && (React.createElement(\"div\", { className: classNames.activityTypeIcon },\n animateBeaconSignal && isCompact && React.createElement(\"div\", { className: classNames.pulsingBeacon }),\n onRenderIcon(this.props))),\n React.createElement(\"div\", { className: classNames.activityContent },\n onRenderActivityDescription(this.props, this._onRenderActivityDescription),\n onRenderComments(this.props, this._onRenderComments),\n onRenderTimeStamp(this.props, this._onRenderTimeStamp))));\n };\n ActivityItem.prototype._getClassNames = function (props) {\n return getClassNames(getStyles(undefined, props.styles, props.animateBeaconSignal, props.beaconColorOne, props.beaconColorTwo, props.isCompact), props.className, props.activityPersonas, props.isCompact);\n };\n return ActivityItem;\n}(React.Component));\nexport { ActivityItem };\n//# sourceMappingURL=ActivityItem.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, getNativeProps, initializeComponentRef, inputProperties, isIE11, KeyCodes } from '../../Utilities';\nvar SELECTION_FORWARD = 'forward';\nvar SELECTION_BACKWARD = 'backward';\n/**\n * {@docCategory Autofill}\n */\nvar Autofill = /** @class */ (function (_super) {\n __extends(Autofill, _super);\n function Autofill(props) {\n var _this = _super.call(this, props) || this;\n _this._inputElement = React.createRef();\n _this._autoFillEnabled = true;\n // Composition events are used when the character/text requires several keystrokes to be completed.\n // Some examples of this are mobile text input and languages like Japanese or Arabic.\n // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart\n _this._onCompositionStart = function (ev) {\n _this.setState({ isComposing: true });\n _this._autoFillEnabled = false;\n };\n // Composition events are used when the character/text requires several keystrokes to be completed.\n // Some examples of this are mobile text input and languages like Japanese or Arabic.\n // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart\n _this._onCompositionUpdate = function () {\n if (isIE11()) {\n _this._updateValue(_this._getCurrentInputValue(), true);\n }\n };\n // Composition events are used when the character/text requires several keystrokes to be completed.\n // Some examples of this are mobile text input and languages like Japanese or Arabic.\n // Find out more at https://developer.mozilla.org/en-US/docs/Web/Events/compositionstart\n _this._onCompositionEnd = function (ev) {\n var inputValue = _this._getCurrentInputValue();\n _this._tryEnableAutofill(inputValue, _this.value, false, true);\n _this.setState({ isComposing: false });\n // Due to timing, this needs to be async, otherwise no text will be selected.\n _this._async.setTimeout(function () {\n // it's technically possible that the value of isComposing is reset during this timeout,\n // so explicitly trigger this with composing=true here, since it is supposed to be the\n // update for composition end\n _this._updateValue(_this._getCurrentInputValue(), false);\n }, 0);\n };\n _this._onClick = function () {\n if (_this.value && _this.value !== '' && _this._autoFillEnabled) {\n _this._autoFillEnabled = false;\n }\n };\n _this._onKeyDown = function (ev) {\n if (_this.props.onKeyDown) {\n _this.props.onKeyDown(ev);\n }\n // If the event is actively being composed, then don't alert autofill.\n // Right now typing does not have isComposing, once that has been fixed any should be removed.\n if (!ev.nativeEvent.isComposing) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.backspace:\n _this._autoFillEnabled = false;\n break;\n case KeyCodes.left:\n case KeyCodes.right:\n if (_this._autoFillEnabled) {\n _this.setState({ inputValue: _this.props.suggestedDisplayValue || '' });\n _this._autoFillEnabled = false;\n }\n break;\n default:\n if (!_this._autoFillEnabled) {\n // eslint-disable-next-line deprecation/deprecation\n if (_this.props.enableAutofillOnKeyPress.indexOf(ev.which) !== -1) {\n _this._autoFillEnabled = true;\n }\n }\n break;\n }\n }\n };\n _this._onInputChanged = function (ev) {\n var value = _this._getCurrentInputValue(ev);\n if (!_this.state.isComposing) {\n _this._tryEnableAutofill(value, _this.value, ev.nativeEvent.isComposing);\n }\n // If it is not IE11 and currently composing, update the value\n if (!(isIE11() && _this.state.isComposing)) {\n var nativeEventComposing = ev.nativeEvent.isComposing;\n var isComposing = nativeEventComposing === undefined ? _this.state.isComposing : nativeEventComposing;\n _this._updateValue(value, isComposing);\n }\n };\n _this._onChanged = function () {\n // Swallow this event, we don't care about it\n // We must provide it because React PropTypes marks it as required, but onInput serves the correct purpose\n return;\n };\n /**\n * Updates the current input value as well as getting a new display value.\n * @param newValue - The new value from the input\n */\n _this._updateValue = function (newValue, composing) {\n // Only proceed if the value is nonempty and is different from the old value\n // This is to work around the fact that, in IE 11, inputs with a placeholder fire an onInput event on focus\n if (!newValue && newValue === _this.value) {\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, onInputChange = _a.onInputChange, onInputValueChange = _a.onInputValueChange;\n if (onInputChange) {\n newValue = (onInputChange === null || onInputChange === void 0 ? void 0 : onInputChange(newValue, composing)) || '';\n }\n _this.setState({ inputValue: newValue }, function () { return onInputValueChange === null || onInputValueChange === void 0 ? void 0 : onInputValueChange(newValue, composing); });\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this.state = {\n inputValue: props.defaultVisibleValue || '',\n isComposing: false,\n };\n return _this;\n }\n Autofill.getDerivedStateFromProps = function (props, state) {\n // eslint-disable-next-line deprecation/deprecation\n if (props.updateValueInWillReceiveProps) {\n // eslint-disable-next-line deprecation/deprecation\n var updatedInputValue = props.updateValueInWillReceiveProps();\n // Don't update if we have a null value or the value isn't changing\n // the value should still update if an empty string is passed in\n if (updatedInputValue !== null && updatedInputValue !== state.inputValue && !state.isComposing) {\n return __assign(__assign({}, state), { inputValue: updatedInputValue });\n }\n }\n return null;\n };\n Object.defineProperty(Autofill.prototype, \"cursorLocation\", {\n get: function () {\n if (this._inputElement.current) {\n var inputElement = this._inputElement.current;\n if (inputElement.selectionDirection !== SELECTION_FORWARD) {\n return inputElement.selectionEnd;\n }\n else {\n return inputElement.selectionStart;\n }\n }\n else {\n return -1;\n }\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"isValueSelected\", {\n get: function () {\n return Boolean(this.inputElement && this.inputElement.selectionStart !== this.inputElement.selectionEnd);\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"value\", {\n get: function () {\n return this._getControlledValue() || this.state.inputValue || '';\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"selectionStart\", {\n get: function () {\n return this._inputElement.current ? this._inputElement.current.selectionStart : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"selectionEnd\", {\n get: function () {\n return this._inputElement.current ? this._inputElement.current.selectionEnd : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(Autofill.prototype, \"inputElement\", {\n get: function () {\n return this._inputElement.current;\n },\n enumerable: false,\n configurable: true\n });\n Autofill.prototype.componentDidUpdate = function (_, _1, cursor) {\n var _a = this.props, suggestedDisplayValue = _a.suggestedDisplayValue, shouldSelectFullInputValueInComponentDidUpdate = _a.shouldSelectFullInputValueInComponentDidUpdate, preventValueSelection = _a.preventValueSelection;\n var differenceIndex = 0;\n if (preventValueSelection) {\n return;\n }\n if (this._autoFillEnabled &&\n this.value &&\n suggestedDisplayValue &&\n _doesTextStartWith(suggestedDisplayValue, this.value)) {\n var shouldSelectFullRange = false;\n if (shouldSelectFullInputValueInComponentDidUpdate) {\n shouldSelectFullRange = shouldSelectFullInputValueInComponentDidUpdate();\n }\n if (shouldSelectFullRange && this._inputElement.current) {\n this._inputElement.current.setSelectionRange(0, suggestedDisplayValue.length, SELECTION_BACKWARD);\n }\n else {\n while (differenceIndex < this.value.length &&\n this.value[differenceIndex].toLocaleLowerCase() === suggestedDisplayValue[differenceIndex].toLocaleLowerCase()) {\n differenceIndex++;\n }\n if (differenceIndex > 0 && this._inputElement.current) {\n this._inputElement.current.setSelectionRange(differenceIndex, suggestedDisplayValue.length, SELECTION_BACKWARD);\n }\n }\n }\n else if (this._inputElement.current) {\n if (cursor !== null && !this._autoFillEnabled && !this.state.isComposing) {\n this._inputElement.current.setSelectionRange(cursor.start, cursor.end, cursor.dir);\n }\n }\n };\n Autofill.prototype.componentWillUnmount = function () {\n this._async.dispose();\n };\n Autofill.prototype.render = function () {\n var nativeProps = getNativeProps(this.props, inputProperties);\n var style = __assign(__assign({}, this.props.style), { fontFamily: 'inherit' });\n return (React.createElement(\"input\", __assign({ autoCapitalize: \"off\", autoComplete: \"off\", \"aria-autocomplete\": 'both' }, nativeProps, { style: style, ref: this._inputElement, value: this._getDisplayValue(), onCompositionStart: this._onCompositionStart, onCompositionUpdate: this._onCompositionUpdate, onCompositionEnd: this._onCompositionEnd, \n // TODO (Fabric 8?) - switch to calling only onChange. See notes in TextField._onInputChange.\n onChange: this._onChanged, onInput: this._onInputChanged, onKeyDown: this._onKeyDown, onClick: this.props.onClick ? this.props.onClick : this._onClick, \"data-lpignore\": true })));\n };\n Autofill.prototype.focus = function () {\n this._inputElement.current && this._inputElement.current.focus();\n };\n Autofill.prototype.clear = function () {\n this._autoFillEnabled = true;\n this._updateValue('', false);\n this._inputElement.current && this._inputElement.current.setSelectionRange(0, 0);\n };\n Autofill.prototype.getSnapshotBeforeUpdate = function () {\n var _a, _b;\n var inel = this._inputElement.current;\n if (inel && inel.selectionStart !== this.value.length) {\n return {\n start: (_a = inel.selectionStart) !== null && _a !== void 0 ? _a : inel.value.length,\n end: (_b = inel.selectionEnd) !== null && _b !== void 0 ? _b : inel.value.length,\n dir: inel.selectionDirection || 'backward' || 'none',\n };\n }\n return null;\n };\n Autofill.prototype._getCurrentInputValue = function (ev) {\n if (ev && ev.target && ev.target.value) {\n return ev.target.value;\n }\n else if (this.inputElement && this.inputElement.value) {\n return this.inputElement.value;\n }\n else {\n return '';\n }\n };\n /**\n * Attempts to enable autofill. Whether or not autofill is enabled depends on the input value,\n * whether or not any text is selected, and only if the new input value is longer than the old input value.\n * Autofill should never be set to true if the value is composing. Once compositionEnd is called, then\n * it should be completed.\n * See https://developer.mozilla.org/en-US/docs/Web/API/CompositionEvent for more information on composition.\n * @param newValue - new input value\n * @param oldValue - old input value\n * @param isComposing - if true then the text is actively being composed and it has not completed.\n * @param isComposed - if the text is a composed text value.\n */\n Autofill.prototype._tryEnableAutofill = function (newValue, oldValue, isComposing, isComposed) {\n if (!isComposing &&\n newValue &&\n this._inputElement.current &&\n this._inputElement.current.selectionStart === newValue.length &&\n !this._autoFillEnabled &&\n (newValue.length > oldValue.length || isComposed)) {\n this._autoFillEnabled = true;\n }\n };\n Autofill.prototype._getDisplayValue = function () {\n if (this._autoFillEnabled) {\n return _getDisplayValue(this.value, this.props.suggestedDisplayValue);\n }\n return this.value;\n };\n Autofill.prototype._getControlledValue = function () {\n var value = this.props.value;\n if (value === undefined || typeof value === 'string') {\n return value;\n }\n // eslint-disable-next-line no-console\n console.warn(\"props.value of Autofill should be a string, but it is \" + value + \" with type of \" + typeof value);\n return value.toString();\n };\n Autofill.defaultProps = {\n enableAutofillOnKeyPress: [KeyCodes.down, KeyCodes.up],\n };\n return Autofill;\n}(React.Component));\nexport { Autofill };\n/**\n * Returns a string that should be used as the display value.\n * It evaluates this based on whether or not the suggested value starts with the input value\n * and whether or not autofill is enabled.\n * @param inputValue - the value that the input currently has.\n * @param suggestedDisplayValue - the possible full value\n */\nfunction _getDisplayValue(inputValue, suggestedDisplayValue) {\n var displayValue = inputValue;\n if (suggestedDisplayValue && inputValue && _doesTextStartWith(suggestedDisplayValue, displayValue)) {\n displayValue = suggestedDisplayValue;\n }\n return displayValue;\n}\nfunction _doesTextStartWith(text, startWith) {\n if (!text || !startWith) {\n return false;\n }\n if (process.env.NODE_ENV !== 'production') {\n for (var _i = 0, _a = [text, startWith]; _i < _a.length; _i++) {\n var val = _a[_i];\n if (typeof val !== 'string') {\n throw new Error(Autofill.name + \" received non-string value \\\"\" + val + \"\\\" of type \" + typeof val + \" from either input's value or suggestedDisplayValue\");\n }\n }\n }\n return text.toLocaleLowerCase().indexOf(startWith.toLocaleLowerCase()) === 0;\n}\n//# sourceMappingURL=Autofill.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 { __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 { 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, __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 { 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","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","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 { 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 { 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 * as React from 'react';\nimport { useConst } from './useConst';\n/**\n * Returns a wrapper function for `setTimeout` which automatically handles disposal.\n */\nexport var useSetTimeout = function () {\n var timeoutIds = useConst({});\n // Cleanup function.\n React.useEffect(function () { return function () {\n for (var _i = 0, _a = Object.keys(timeoutIds); _i < _a.length; _i++) {\n var id = _a[_i];\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n clearTimeout(id);\n }\n }; }, \n // useConst ensures this will never change, but react-hooks/exhaustive-deps doesn't know that\n [timeoutIds]);\n // Return wrapper which will auto cleanup.\n return useConst({\n setTimeout: function (func, duration) {\n var id = setTimeout(func, duration);\n timeoutIds[id] = 1;\n return id;\n },\n clearTimeout: function (id) {\n delete timeoutIds[id];\n clearTimeout(id);\n },\n });\n};\n//# sourceMappingURL=useSetTimeout.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 { __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","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","/**\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 { createMemoizer } from '../memoize';\nfunction createComposedComponent(outer) {\n var Outer = outer;\n var outerMemoizer = createMemoizer(function (inner) {\n if (outer === inner) {\n throw new Error('Attempted to compose a component with itself.');\n }\n var Inner = inner;\n var innerMemoizer = createMemoizer(function (defaultRender) {\n var InnerWithDefaultRender = function (innerProps) {\n return React.createElement(Inner, __assign({}, innerProps, { defaultRender: defaultRender }));\n };\n return InnerWithDefaultRender;\n });\n var OuterWithDefaultRender = function (outerProps) {\n var defaultRender = outerProps.defaultRender;\n return React.createElement(Outer, __assign({}, outerProps, { defaultRender: defaultRender ? innerMemoizer(defaultRender) : Inner }));\n };\n return OuterWithDefaultRender;\n });\n return outerMemoizer;\n}\nvar componentAsMemoizer = createMemoizer(createComposedComponent);\n/**\n * Composes two components which conform to the `IComponentAs` specification; that is, two\n * components which accept a `defaultRender` prop, which is a 'default' implementation of\n * a component which accepts the same overall props.\n *\n * @public\n */\nexport function composeComponentAs(outer, inner) {\n return componentAsMemoizer(outer)(inner);\n}\n//# sourceMappingURL=composeComponentAs.js.map","export var SELECTION_CHANGE = 'change';\nexport var SELECTION_ITEMS_CHANGE = 'items-change';\n/**\n * {@docCategory Selection}\n */\nexport var SelectionMode;\n(function (SelectionMode) {\n SelectionMode[SelectionMode[\"none\"] = 0] = \"none\";\n SelectionMode[SelectionMode[\"single\"] = 1] = \"single\";\n SelectionMode[SelectionMode[\"multiple\"] = 2] = \"multiple\";\n})(SelectionMode || (SelectionMode = {}));\n/**\n * {@docCategory Selection}\n */\nexport var SelectionDirection;\n(function (SelectionDirection) {\n SelectionDirection[SelectionDirection[\"horizontal\"] = 0] = \"horizontal\";\n SelectionDirection[SelectionDirection[\"vertical\"] = 1] = \"vertical\";\n})(SelectionDirection || (SelectionDirection = {}));\n//# sourceMappingURL=Selection.types.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
.\n // TODO We may need to elevate classNames from
into ?\n var nativeProps = getNativeProps(this.props, divProperties);\n return (React.createElement(ResizeGroupAs, __assign({}, nativeProps, { componentRef: this._resizeGroup, data: commandBarData, onReduceData: onReduceData, onGrowData: onGrowData, onRenderData: this._onRenderData, dataDidRender: dataDidRender })));\n };\n CommandBarBase.prototype.focus = function () {\n var overflowSet = this._overflowSet.current;\n overflowSet && overflowSet.focus();\n };\n CommandBarBase.prototype.remeasure = function () {\n this._resizeGroup.current && this._resizeGroup.current.remeasure();\n };\n CommandBarBase.prototype._onButtonClick = function (item) {\n return function (ev) {\n // inactive is deprecated. remove check in 7.0\n // eslint-disable-next-line deprecation/deprecation\n if (item.inactive) {\n return;\n }\n if (item.onClick) {\n item.onClick(ev, item);\n }\n };\n };\n CommandBarBase.prototype._computeCacheKey = function (data) {\n var primaryItems = data.primaryItems, overflow = data.overflow;\n var returnKey = function (acc, current) {\n var _a = current.cacheKey, cacheKey = _a === void 0 ? current.key : _a;\n return acc + cacheKey;\n };\n var primaryKey = primaryItems && primaryItems.reduce(returnKey, '');\n var overflowKey = overflow ? 'overflow' : '';\n return [primaryKey, overflowKey].join('');\n };\n CommandBarBase.defaultProps = {\n items: [],\n overflowItems: [],\n };\n return CommandBarBase;\n}(React.Component));\nexport { CommandBarBase };\n//# sourceMappingURL=CommandBar.base.js.map","import { styled } from '../../Utilities';\nimport { CommandBarBase } from './CommandBar.base';\nimport { getStyles } from './CommandBar.styles';\n// Create a CommandBar variant which uses these default styles and this styled subcomponent.\nexport var CommandBar = styled(CommandBarBase, getStyles, undefined, {\n scope: 'CommandBar',\n});\n//# sourceMappingURL=CommandBar.js.map","import { SELECTION_CHANGE, SelectionMode, SELECTION_ITEMS_CHANGE } from './Selection.types';\nimport { EventGroup } from '../EventGroup';\n/**\n * {@docCategory Selection}\n */\nvar Selection = /** @class */ (function () {\n /**\n * Create a new Selection. If `TItem` does not have a `key` property, you must provide an options\n * object with a `getKey` implementation. Providing options is optional otherwise.\n * (At most one `options` object is accepted.)\n */\n function Selection() {\n var options = []; // Otherwise, arguments require options with `getKey`.\n for (var _i = 0 // Otherwise, arguments require options with `getKey`.\n ; _i < arguments.length // Otherwise, arguments require options with `getKey`.\n ; _i++ // Otherwise, arguments require options with `getKey`.\n ) {\n options[_i] = arguments[_i]; // Otherwise, arguments require options with `getKey`.\n }\n var _a = options[0] || {}, onSelectionChanged = _a.onSelectionChanged, onItemsChanged = _a.onItemsChanged, getKey = _a.getKey, _b = _a.canSelectItem, canSelectItem = _b === void 0 ? function () { return true; } : _b, items = _a.items, _c = _a.selectionMode, selectionMode = _c === void 0 ? SelectionMode.multiple : _c;\n this.mode = selectionMode;\n this._getKey = getKey || defaultGetKey;\n this._changeEventSuppressionCount = 0;\n this._exemptedCount = 0;\n this._anchoredIndex = 0;\n this._unselectableCount = 0;\n this._onSelectionChanged = onSelectionChanged;\n this._onItemsChanged = onItemsChanged;\n this._canSelectItem = canSelectItem;\n this._keyToIndexMap = {};\n this._isModal = false;\n this.setItems(items || [], true);\n this.count = this.getSelectedCount();\n }\n Selection.prototype.canSelectItem = function (item, index) {\n if (typeof index === 'number' && index < 0) {\n return false;\n }\n return this._canSelectItem(item, index);\n };\n Selection.prototype.getKey = function (item, index) {\n var key = this._getKey(item, index);\n return typeof key === 'number' || key ? \"\".concat(key) : '';\n };\n Selection.prototype.setChangeEvents = function (isEnabled, suppressChange) {\n this._changeEventSuppressionCount += isEnabled ? -1 : 1;\n if (this._changeEventSuppressionCount === 0 && this._hasChanged) {\n this._hasChanged = false;\n if (!suppressChange) {\n this._change();\n }\n }\n };\n Selection.prototype.isModal = function () {\n return this._isModal;\n };\n Selection.prototype.setModal = function (isModal) {\n if (this._isModal !== isModal) {\n this.setChangeEvents(false);\n this._isModal = isModal;\n if (!isModal) {\n this.setAllSelected(false);\n }\n this._change();\n this.setChangeEvents(true);\n }\n };\n /**\n * Selection needs the items, call this method to set them. If the set\n * of items is the same, this will re-evaluate selection and index maps.\n * Otherwise, shouldClear should be set to true, so that selection is\n * cleared.\n */\n Selection.prototype.setItems = function (items, shouldClear) {\n if (shouldClear === void 0) { shouldClear = true; }\n var newKeyToIndexMap = {};\n var newUnselectableIndices = {};\n var hasSelectionChanged = false;\n this.setChangeEvents(false);\n // Reset the unselectable count.\n this._unselectableCount = 0;\n var haveItemsChanged = false;\n // Build lookup table for quick selection evaluation.\n for (var i = 0; i < items.length; i++) {\n var item = items[i];\n if (item) {\n var key = this.getKey(item, i);\n if (key) {\n if (!haveItemsChanged && (!(key in this._keyToIndexMap) || this._keyToIndexMap[key] !== i)) {\n haveItemsChanged = true;\n }\n newKeyToIndexMap[key] = i;\n }\n }\n newUnselectableIndices[i] = item && !this.canSelectItem(item);\n if (newUnselectableIndices[i]) {\n this._unselectableCount++;\n }\n }\n if (shouldClear || items.length === 0) {\n this._setAllSelected(false, true);\n }\n // Check the exemption list for discrepencies.\n var newExemptedIndicies = {};\n var newExemptedCount = 0;\n for (var indexProperty in this._exemptedIndices) {\n if (this._exemptedIndices.hasOwnProperty(indexProperty)) {\n var index = Number(indexProperty);\n var item = this._items[index];\n var exemptKey = item ? this.getKey(item, Number(index)) : undefined;\n var newIndex = exemptKey ? newKeyToIndexMap[exemptKey] : index;\n if (newIndex === undefined) {\n // The item has likely been replaced or removed.\n hasSelectionChanged = true;\n }\n else {\n // We know the new index of the item. update the existing exemption table.\n newExemptedIndicies[newIndex] = true;\n newExemptedCount++;\n hasSelectionChanged = hasSelectionChanged || newIndex !== index;\n }\n }\n }\n if (this._items && this._exemptedCount === 0 && items.length !== this._items.length && this._isAllSelected) {\n // If everything was selected but the number of items has changed, selection has changed.\n hasSelectionChanged = true;\n }\n if (!haveItemsChanged) {\n for (var _i = 0, _a = Object.keys(this._keyToIndexMap); _i < _a.length; _i++) {\n var key = _a[_i];\n if (!(key in newKeyToIndexMap)) {\n haveItemsChanged = true;\n break;\n }\n }\n }\n this._exemptedIndices = newExemptedIndicies;\n this._exemptedCount = newExemptedCount;\n this._keyToIndexMap = newKeyToIndexMap;\n this._unselectableIndices = newUnselectableIndices;\n this._items = items;\n this._selectedItems = null;\n if (hasSelectionChanged) {\n this._updateCount();\n }\n if (haveItemsChanged) {\n EventGroup.raise(this, SELECTION_ITEMS_CHANGE);\n if (this._onItemsChanged) {\n this._onItemsChanged();\n }\n }\n if (hasSelectionChanged) {\n this._change();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.getItems = function () {\n return this._items;\n };\n Selection.prototype.getSelection = function () {\n if (!this._selectedItems) {\n this._selectedItems = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedItems.push(items[i]);\n }\n }\n }\n }\n return this._selectedItems;\n };\n Selection.prototype.getSelectedCount = function () {\n return this._isAllSelected\n ? this._items.length - this._exemptedCount - this._unselectableCount\n : this._exemptedCount;\n };\n Selection.prototype.getSelectedIndices = function () {\n if (!this._selectedIndices) {\n this._selectedIndices = [];\n var items = this._items;\n if (items) {\n for (var i = 0; i < items.length; i++) {\n if (this.isIndexSelected(i)) {\n this._selectedIndices.push(i);\n }\n }\n }\n }\n return this._selectedIndices;\n };\n Selection.prototype.getItemIndex = function (key) {\n var index = this._keyToIndexMap[key];\n return index !== null && index !== void 0 ? index : -1;\n };\n Selection.prototype.isRangeSelected = function (fromIndex, count) {\n if (count === 0) {\n return false;\n }\n var endIndex = fromIndex + count;\n for (var i = fromIndex; i < endIndex; i++) {\n if (!this.isIndexSelected(i)) {\n return false;\n }\n }\n return true;\n };\n Selection.prototype.isAllSelected = function () {\n var selectableCount = this._items.length - this._unselectableCount;\n // In single mode, we can only have a max of 1 item.\n if (this.mode === SelectionMode.single) {\n selectableCount = Math.min(selectableCount, 1);\n }\n return ((this.count > 0 && this._isAllSelected && this._exemptedCount === 0) ||\n (!this._isAllSelected && this._exemptedCount === selectableCount && selectableCount > 0));\n };\n Selection.prototype.isKeySelected = function (key) {\n var index = this._keyToIndexMap[key];\n return this.isIndexSelected(index);\n };\n Selection.prototype.isIndexSelected = function (index) {\n return !!((this.count > 0 && this._isAllSelected && !this._exemptedIndices[index] && !this._unselectableIndices[index]) ||\n (!this._isAllSelected && this._exemptedIndices[index]));\n };\n Selection.prototype.setAllSelected = function (isAllSelected) {\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount();\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.setKeySelected = function (key, isSelected, shouldAnchor) {\n var index = this._keyToIndexMap[key];\n if (index >= 0) {\n this.setIndexSelected(index, isSelected, shouldAnchor);\n }\n };\n Selection.prototype.setIndexSelected = function (index, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n index = Math.min(Math.max(0, index), this._items.length - 1);\n // No-op on out of bounds selections.\n if (index < 0 || index >= this._items.length) {\n return;\n }\n this.setChangeEvents(false);\n var isExempt = this._exemptedIndices[index];\n var canSelect = !this._unselectableIndices[index];\n if (canSelect) {\n if (isSelected && this.mode === SelectionMode.single) {\n // If this is single-select, the previous selection should be removed.\n this._setAllSelected(false, true);\n }\n // Determine if we need to remove the exemption.\n if (isExempt && ((isSelected && this._isAllSelected) || (!isSelected && !this._isAllSelected))) {\n delete this._exemptedIndices[index];\n this._exemptedCount--;\n }\n // Determine if we need to add the exemption.\n if (!isExempt && ((isSelected && !this._isAllSelected) || (!isSelected && this._isAllSelected))) {\n this._exemptedIndices[index] = true;\n this._exemptedCount++;\n }\n if (shouldAnchor) {\n this._anchoredIndex = index;\n }\n }\n this._updateCount();\n this.setChangeEvents(true);\n };\n Selection.prototype.setRangeSelected = function (fromIndex, count, isSelected, shouldAnchor) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n // Clamp the index.\n fromIndex = Math.min(Math.max(0, fromIndex), this._items.length - 1);\n // Clamp the range.\n count = Math.min(Math.max(0, count), this._items.length - fromIndex);\n // No-op on out of bounds selections.\n if (fromIndex < 0 || fromIndex >= this._items.length || count === 0) {\n return;\n }\n this.setChangeEvents(false);\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = fromIndex;\n var endIndex = fromIndex + count - 1;\n var newAnchorIndex = anchorIndex >= endIndex ? startIndex : endIndex;\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, isSelected, shouldAnchor ? startIndex === newAnchorIndex : false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToKey = function (key, clearSelection) {\n this.selectToIndex(this._keyToIndexMap[key], clearSelection);\n };\n Selection.prototype.selectToRange = function (fromIndex, count, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n if (count === 1) {\n this.setIndexSelected(fromIndex, true, true);\n }\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(fromIndex, anchorIndex);\n var endIndex = Math.max(fromIndex + count - 1, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.selectToIndex = function (index, clearSelection) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n if (this.mode === SelectionMode.single) {\n this.setIndexSelected(index, true, true);\n return;\n }\n var anchorIndex = this._anchoredIndex || 0;\n var startIndex = Math.min(index, anchorIndex);\n var endIndex = Math.max(index, anchorIndex);\n this.setChangeEvents(false);\n if (clearSelection) {\n this._setAllSelected(false, true);\n }\n for (; startIndex <= endIndex; startIndex++) {\n this.setIndexSelected(startIndex, true, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype.toggleAllSelected = function () {\n this.setAllSelected(!this.isAllSelected());\n };\n Selection.prototype.toggleKeySelected = function (key) {\n this.setKeySelected(key, !this.isKeySelected(key), true);\n };\n Selection.prototype.toggleIndexSelected = function (index) {\n this.setIndexSelected(index, !this.isIndexSelected(index), true);\n };\n Selection.prototype.toggleRangeSelected = function (fromIndex, count) {\n if (this.mode === SelectionMode.none) {\n return;\n }\n var isRangeSelected = this.isRangeSelected(fromIndex, count);\n var endIndex = fromIndex + count;\n if (this.mode === SelectionMode.single && count > 1) {\n return;\n }\n this.setChangeEvents(false);\n for (var i = fromIndex; i < endIndex; i++) {\n this.setIndexSelected(i, !isRangeSelected, false);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._updateCount = function (preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n var count = this.getSelectedCount();\n if (count !== this.count) {\n this.count = count;\n this._change();\n }\n if (!this.count && !preserveModalState) {\n this.setModal(false);\n }\n };\n Selection.prototype._setAllSelected = function (isAllSelected, preserveModalState) {\n if (preserveModalState === void 0) { preserveModalState = false; }\n if (isAllSelected && this.mode !== SelectionMode.multiple) {\n return;\n }\n var selectableCount = this._items ? this._items.length - this._unselectableCount : 0;\n this.setChangeEvents(false);\n if (selectableCount > 0 && (this._exemptedCount > 0 || isAllSelected !== this._isAllSelected)) {\n this._exemptedIndices = {};\n if (isAllSelected !== this._isAllSelected || this._exemptedCount > 0) {\n this._exemptedCount = 0;\n this._isAllSelected = isAllSelected;\n this._change();\n }\n this._updateCount(preserveModalState);\n }\n this.setChangeEvents(true);\n };\n Selection.prototype._change = function () {\n if (this._changeEventSuppressionCount === 0) {\n this._selectedItems = null;\n this._selectedIndices = undefined;\n EventGroup.raise(this, SELECTION_CHANGE);\n if (this._onSelectionChanged) {\n this._onSelectionChanged();\n }\n }\n else {\n this._hasChanged = true;\n }\n };\n return Selection;\n}());\nexport { Selection };\nfunction defaultGetKey(item, index) {\n // 0 may be used as a key\n var _a = (item || {}).key, key = _a === void 0 ? \"\".concat(index) : _a;\n return key;\n}\n//# sourceMappingURL=Selection.js.map","/**\n * {@docCategory GroupedList}\n */\nexport var CollapseAllVisibility;\n(function (CollapseAllVisibility) {\n CollapseAllVisibility[CollapseAllVisibility[\"hidden\"] = 0] = \"hidden\";\n CollapseAllVisibility[CollapseAllVisibility[\"visible\"] = 1] = \"visible\";\n})(CollapseAllVisibility || (CollapseAllVisibility = {}));\n//# sourceMappingURL=GroupedList.types.js.map","/**\n * Enum to describe how a particular column header behaves.\n * This is used to to specify the property `IColumn.columnActionsMode`.\n * If `IColumn.columnActionsMode` is undefined, it's equivalent to `ColumnActionsMode.clickable`.\n * {@docCategory DetailsList}\n */\nexport var ColumnActionsMode;\n(function (ColumnActionsMode) {\n /** Renders the column header as disabled. */\n ColumnActionsMode[ColumnActionsMode[\"disabled\"] = 0] = \"disabled\";\n /** Renders the column header as clickable. Default value. */\n ColumnActionsMode[ColumnActionsMode[\"clickable\"] = 1] = \"clickable\";\n /** Renders the column header as clickable and displays the dropdown chevron. */\n ColumnActionsMode[ColumnActionsMode[\"hasDropdown\"] = 2] = \"hasDropdown\";\n})(ColumnActionsMode || (ColumnActionsMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var ConstrainMode;\n(function (ConstrainMode) {\n /** Lets the content grow which allows the page to manage scrolling. */\n ConstrainMode[ConstrainMode[\"unconstrained\"] = 0] = \"unconstrained\";\n /** Constrains the list to the given layout space. */\n ConstrainMode[ConstrainMode[\"horizontalConstrained\"] = 1] = \"horizontalConstrained\";\n})(ConstrainMode || (ConstrainMode = {}));\n/**\n * Enum to describe where the column has been dropped, after starting the drag\n * {@docCategory DetailsList}\n */\nexport var ColumnDragEndLocation;\n(function (ColumnDragEndLocation) {\n /** Drag ended outside of current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"outside\"] = 0] = \"outside\";\n /** Drag ended within current list */\n ColumnDragEndLocation[ColumnDragEndLocation[\"surface\"] = 1] = \"surface\";\n /** Drag ended on header */\n ColumnDragEndLocation[ColumnDragEndLocation[\"header\"] = 2] = \"header\";\n})(ColumnDragEndLocation || (ColumnDragEndLocation = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var DetailsListLayoutMode;\n(function (DetailsListLayoutMode) {\n /**\n * Lets the user resize columns and makes not attempt to fit them.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"fixedColumns\"] = 0] = \"fixedColumns\";\n /**\n * Manages which columns are visible, tries to size them according to their min/max rules and drops\n * off columns that can't fit and have isCollapsible set.\n */\n DetailsListLayoutMode[DetailsListLayoutMode[\"justified\"] = 1] = \"justified\";\n})(DetailsListLayoutMode || (DetailsListLayoutMode = {}));\n/**\n * {@docCategory DetailsList}\n */\nexport var CheckboxVisibility;\n(function (CheckboxVisibility) {\n /** Visible on hover. */\n CheckboxVisibility[CheckboxVisibility[\"onHover\"] = 0] = \"onHover\";\n /** Visible always. */\n CheckboxVisibility[CheckboxVisibility[\"always\"] = 1] = \"always\";\n /** Hide checkboxes. */\n CheckboxVisibility[CheckboxVisibility[\"hidden\"] = 2] = \"hidden\";\n})(CheckboxVisibility || (CheckboxVisibility = {}));\n//# sourceMappingURL=DetailsList.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, KeyCodes, elementContains, findScrollableParent, getParent, getDocument, getWindow, isElementTabbable, css, initializeComponentRef, FocusRects, } from '../../Utilities';\nimport { SelectionMode } from './interfaces';\n// Selection definitions:\n//\n// Anchor index: the point from which a range selection starts.\n// Focus index: the point from which layout movement originates from.\n//\n// These two can differ. Tests:\n//\n// If you start at index 5\n// Shift click to index 10\n// The focus is 10, the anchor is 5.\n// If you shift click at index 0\n// The anchor remains at 5, the items between 0 and 5 are selected and everything else is cleared.\n// If you click index 8\n// The anchor and focus are set to 8.\nvar SELECTION_DISABLED_ATTRIBUTE_NAME = 'data-selection-disabled';\nvar SELECTION_INDEX_ATTRIBUTE_NAME = 'data-selection-index';\nvar SELECTION_TOGGLE_ATTRIBUTE_NAME = 'data-selection-toggle';\nvar SELECTION_INVOKE_ATTRIBUTE_NAME = 'data-selection-invoke';\nvar SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME = 'data-selection-touch-invoke';\nvar SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME = 'data-selection-all-toggle';\nvar SELECTION_SELECT_ATTRIBUTE_NAME = 'data-selection-select';\n/**\n * {@docCategory Selection}\n */\nvar SelectionZone = /** @class */ (function (_super) {\n __extends(SelectionZone, _super);\n function SelectionZone(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n /**\n * In some cases, the consuming scenario requires to set focus on a row without having SelectionZone\n * react to the event. Note that focus events in IE \\<= 11 will occur asynchronously after .focus() has\n * been called on an element, so we need a flag to store the idea that we will bypass the \"next\"\n * focus event that occurs. This method does that.\n */\n _this.ignoreNextFocus = function () {\n _this._handleNextFocus(false);\n };\n _this._onSelectionChange = function () {\n var selection = _this.props.selection;\n var isModal = selection.isModal && selection.isModal();\n _this.setState({\n isModal: isModal,\n });\n };\n _this._onMouseDownCapture = function (ev) {\n var target = ev.target;\n if (document.activeElement !== target && !elementContains(document.activeElement, target)) {\n _this.ignoreNextFocus();\n return;\n }\n if (!elementContains(target, _this._root.current)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n _this.ignoreNextFocus();\n break;\n }\n target = getParent(target);\n }\n };\n /**\n * When we focus an item, for single/multi select scenarios, we should try to select it immediately\n * as long as the focus did not originate from a mouse down/touch event. For those cases, we handle them\n * specially.\n */\n _this._onFocus = function (ev) {\n var target = ev.target;\n var selection = _this.props.selection;\n var isToggleModifierPressed = _this._isCtrlPressed || _this._isMetaPressed;\n var selectionMode = _this._getSelectionMode();\n if (_this._shouldHandleFocus && selectionMode !== SelectionMode.none) {\n var isToggle = _this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME);\n var itemRoot = _this._findItemRoot(target);\n if (!isToggle && itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n if (isToggleModifierPressed) {\n // set anchor only.\n selection.setIndexSelected(index, selection.isIndexSelected(index), true);\n if (_this.props.enterModalOnTouch && _this._isTouch && selection.setModal) {\n selection.setModal(true);\n _this._setIsTouch(false);\n }\n }\n else {\n if (_this.props.isSelectedOnFocus) {\n _this._onItemSurfaceClick(ev, index);\n }\n }\n }\n }\n _this._handleNextFocus(false);\n };\n _this._onMouseDown = function (ev) {\n _this._updateModifiers(ev);\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n // No-op if selection is disabled\n if (_this._isSelectionDisabled(target)) {\n return;\n }\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n break;\n }\n else if (itemRoot) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (_this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if ((target === itemRoot || _this._shouldAutoSelect(target)) &&\n !_this._isShiftPressed &&\n !_this._isCtrlPressed &&\n !_this._isMetaPressed) {\n _this._onInvokeMouseDown(ev, _this._getItemIndex(itemRoot));\n break;\n }\n else if (_this.props.disableAutoSelectOnInputElements &&\n (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT')) {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onTouchStartCapture = function (ev) {\n _this._setIsTouch(true);\n };\n _this._onClick = function (ev) {\n var _a = _this.props.enableTouchInvocationTarget, enableTouchInvocationTarget = _a === void 0 ? false : _a;\n _this._updateModifiers(ev);\n var target = ev.target;\n var itemRoot = _this._findItemRoot(target);\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTALL_TOGGLE_ALL_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n _this._onToggleAllClick(ev);\n }\n break;\n }\n else if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n if (!isSelectionDisabled) {\n if (_this._isShiftPressed) {\n _this._onItemSurfaceClick(ev, index);\n }\n else {\n _this._onToggleClick(ev, index);\n }\n }\n break;\n }\n else if ((_this._isTouch &&\n enableTouchInvocationTarget &&\n _this._hasAttribute(target, SELECTION_INVOKE_TOUCH_ATTRIBUTE_NAME)) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n break;\n }\n else if (target === itemRoot) {\n if (!isSelectionDisabled) {\n _this._onItemSurfaceClick(ev, index);\n }\n break;\n }\n else if (target.tagName === 'A' || target.tagName === 'BUTTON' || target.tagName === 'INPUT') {\n return;\n }\n }\n target = getParent(target);\n }\n };\n _this._onContextMenu = function (ev) {\n var target = ev.target;\n var _a = _this.props, onItemContextMenu = _a.onItemContextMenu, selection = _a.selection;\n if (onItemContextMenu) {\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n _this._onInvokeMouseDown(ev, index);\n var skipPreventDefault = onItemContextMenu(selection.getItems()[index], index, ev.nativeEvent);\n // In order to keep back compat, if the value here is undefined, then we should still\n // call preventDefault(). Only in the case where true is explicitly returned should\n // the call be skipped.\n if (!skipPreventDefault) {\n ev.preventDefault();\n }\n }\n }\n };\n /**\n * In multi selection, if you double click within an item's root (but not within the invoke element or\n * input elements), we should execute the invoke handler.\n */\n _this._onDoubleClick = function (ev) {\n var target = ev.target;\n var onItemInvoked = _this.props.onItemInvoked;\n var itemRoot = _this._findItemRoot(target);\n if (itemRoot && onItemInvoked && !_this._isInputElement(target)) {\n var index = _this._getItemIndex(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME) ||\n _this._hasAttribute(target, SELECTION_INVOKE_ATTRIBUTE_NAME)) {\n break;\n }\n else if (target === itemRoot) {\n _this._onInvokeClick(ev, index);\n break;\n }\n target = getParent(target);\n }\n target = getParent(target);\n }\n };\n _this._onKeyDownCapture = function (ev) {\n _this._updateModifiers(ev);\n _this._handleNextFocus(true);\n };\n _this._onKeyDown = function (ev) {\n _this._updateModifiers(ev);\n var target = ev.target;\n var isSelectionDisabled = _this._isSelectionDisabled(target);\n var selection = _this.props.selection;\n // eslint-disable-next-line deprecation/deprecation\n var isSelectAllKey = ev.which === KeyCodes.a && (_this._isCtrlPressed || _this._isMetaPressed);\n // eslint-disable-next-line deprecation/deprecation\n var isClearSelectionKey = ev.which === KeyCodes.escape;\n // Ignore key downs from input elements.\n if (_this._isInputElement(target)) {\n // A key was pressed while an item in this zone was focused.\n return;\n }\n var selectionMode = _this._getSelectionMode();\n // If ctrl-a is pressed, select all (if all are not already selected.)\n if (isSelectAllKey && selectionMode === SelectionMode.multiple && !selection.isAllSelected()) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(true);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n // If escape is pressed, clear selection (if any are selected.)\n if (isClearSelectionKey && selection.getSelectedCount() > 0) {\n if (!isSelectionDisabled) {\n selection.setAllSelected(false);\n }\n ev.stopPropagation();\n ev.preventDefault();\n return;\n }\n var itemRoot = _this._findItemRoot(target);\n // If a key was pressed within an item, we should treat \"enters\" as invokes and \"space\" as toggle\n if (itemRoot) {\n var index = _this._getItemIndex(itemRoot);\n while (target !== _this._root.current) {\n if (_this._hasAttribute(target, SELECTION_TOGGLE_ATTRIBUTE_NAME)) {\n // For toggle elements, assuming they are rendered as buttons, they will generate a click event,\n // so we can no-op for any keydowns in this case.\n break;\n }\n else if (_this._shouldAutoSelect(target)) {\n if (!isSelectionDisabled) {\n // If the event went to an element which should trigger auto-select, select it and then let\n // the default behavior kick in.\n _this._onInvokeMouseDown(ev, index);\n }\n break;\n }\n else if (\n // eslint-disable-next-line deprecation/deprecation\n (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) &&\n (target.tagName === 'BUTTON' || target.tagName === 'A' || target.tagName === 'INPUT')) {\n return false;\n }\n else if (target === itemRoot) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n // Items should be invokable even if selection is disabled.\n _this._onInvokeClick(ev, index);\n ev.preventDefault();\n return;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.space) {\n if (!isSelectionDisabled) {\n _this._onToggleClick(ev, index);\n }\n ev.preventDefault();\n return;\n }\n break;\n }\n target = getParent(target);\n }\n }\n };\n _this._events = new EventGroup(_this);\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n var selection = _this.props.selection;\n // Reflect the initial modal state of selection into the state.\n var isModal = selection.isModal && selection.isModal();\n _this.state = {\n isModal: isModal,\n };\n return _this;\n }\n SelectionZone.getDerivedStateFromProps = function (nextProps, prevState) {\n var isModal = nextProps.selection.isModal && nextProps.selection.isModal();\n return __assign(__assign({}, prevState), { isModal: isModal });\n };\n SelectionZone.prototype.componentDidMount = function () {\n var win = getWindow(this._root.current);\n // Track the latest modifier keys globally.\n this._events.on(win, 'keydown, keyup', this._updateModifiers, true);\n this._events.on(document, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(document.body, 'touchstart', this._onTouchStartCapture, true);\n this._events.on(document.body, 'touchend', this._onTouchStartCapture, true);\n // Subscribe to the selection to keep modal state updated.\n this._events.on(this.props.selection, 'change', this._onSelectionChange);\n };\n SelectionZone.prototype.render = function () {\n var isModal = this.state.isModal;\n return (React.createElement(\"div\", { className: css('ms-SelectionZone', this.props.className, {\n 'ms-SelectionZone--modal': !!isModal,\n }), ref: this._root, onKeyDown: this._onKeyDown, onMouseDown: this._onMouseDown, onKeyDownCapture: this._onKeyDownCapture, onClick: this._onClick, role: \"presentation\", onDoubleClick: this._onDoubleClick, onContextMenu: this._onContextMenu, onMouseDownCapture: this._onMouseDownCapture, onFocusCapture: this._onFocus, \"data-selection-is-modal\": isModal ? true : undefined },\n this.props.children,\n React.createElement(FocusRects, null)));\n };\n SelectionZone.prototype.componentDidUpdate = function (previousProps) {\n var selection = this.props.selection;\n if (selection !== previousProps.selection) {\n // Whenever selection changes, update the subscripton to keep modal state updated.\n this._events.off(previousProps.selection);\n this._events.on(selection, 'change', this._onSelectionChange);\n }\n };\n SelectionZone.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n };\n SelectionZone.prototype._isSelectionDisabled = function (target) {\n if (this._getSelectionMode() === SelectionMode.none) {\n return true;\n }\n while (target !== this._root.current) {\n if (this._hasAttribute(target, SELECTION_DISABLED_ATTRIBUTE_NAME)) {\n return true;\n }\n target = getParent(target);\n }\n return false;\n };\n SelectionZone.prototype._onToggleAllClick = function (ev) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n selection.toggleAllSelected();\n ev.stopPropagation();\n ev.preventDefault();\n }\n };\n SelectionZone.prototype._onToggleClick = function (ev, index) {\n var selection = this.props.selection;\n var selectionMode = this._getSelectionMode();\n selection.setChangeEvents(false);\n if (this.props.enterModalOnTouch && this._isTouch && !selection.isIndexSelected(index) && selection.setModal) {\n selection.setModal(true);\n this._setIsTouch(false);\n }\n if (selectionMode === SelectionMode.multiple) {\n selection.toggleIndexSelected(index);\n }\n else if (selectionMode === SelectionMode.single) {\n var isSelected = selection.isIndexSelected(index);\n var isModal = selection.isModal && selection.isModal();\n selection.setAllSelected(false);\n selection.setIndexSelected(index, !isSelected, true);\n if (isModal && selection.setModal) {\n // Since the above call to setAllSelected(false) clears modal state,\n // restore it. This occurs because the SelectionMode of the Selection\n // may differ from the SelectionZone.\n selection.setModal(true);\n }\n }\n else {\n selection.setChangeEvents(true);\n return;\n }\n selection.setChangeEvents(true);\n ev.stopPropagation();\n // NOTE: ev.preventDefault is not called for toggle clicks, because this will kill the browser behavior\n // for checkboxes if you use a checkbox for the toggle.\n };\n SelectionZone.prototype._onInvokeClick = function (ev, index) {\n var _a = this.props, selection = _a.selection, onItemInvoked = _a.onItemInvoked;\n if (onItemInvoked) {\n onItemInvoked(selection.getItems()[index], index, ev.nativeEvent);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n SelectionZone.prototype._onItemSurfaceClick = function (ev, index) {\n var selection = this.props.selection;\n var isToggleModifierPressed = this._isCtrlPressed || this._isMetaPressed;\n var selectionMode = this._getSelectionMode();\n if (selectionMode === SelectionMode.multiple) {\n if (this._isShiftPressed && !this._isTabPressed) {\n selection.selectToIndex(index, !isToggleModifierPressed);\n }\n else if (isToggleModifierPressed) {\n selection.toggleIndexSelected(index);\n }\n else {\n this._clearAndSelectIndex(index);\n }\n }\n else if (selectionMode === SelectionMode.single) {\n this._clearAndSelectIndex(index);\n }\n };\n SelectionZone.prototype._onInvokeMouseDown = function (ev, index) {\n var selection = this.props.selection;\n // Only do work if item is not selected.\n if (selection.isIndexSelected(index)) {\n return;\n }\n this._clearAndSelectIndex(index);\n };\n /**\n * To avoid high startup cost of traversing the DOM on component mount,\n * defer finding the scrollable parent until a click interaction.\n *\n * The styles will probably already calculated since we're running in a click handler,\n * so this is less likely to cause layout thrashing then doing it in mount.\n */\n SelectionZone.prototype._findScrollParentAndTryClearOnEmptyClick = function (ev) {\n var scrollParent = findScrollableParent(this._root.current);\n // unbind this handler and replace binding with a binding on the actual scrollable parent\n this._events.off(document, 'click', this._findScrollParentAndTryClearOnEmptyClick);\n this._events.on(scrollParent, 'click', this._tryClearOnEmptyClick);\n // If we clicked inside the scrollable parent, call through to the handler on this click.\n if ((scrollParent && ev.target instanceof Node && scrollParent.contains(ev.target)) || scrollParent === ev.target) {\n this._tryClearOnEmptyClick(ev);\n }\n };\n SelectionZone.prototype._tryClearOnEmptyClick = function (ev) {\n if (!this.props.selectionPreservedOnEmptyClick && this._isNonHandledClick(ev.target)) {\n this.props.selection.setAllSelected(false);\n }\n };\n SelectionZone.prototype._clearAndSelectIndex = function (index) {\n var selection = this.props.selection;\n var isAlreadySingleSelected = selection.getSelectedCount() === 1 && selection.isIndexSelected(index);\n if (!isAlreadySingleSelected) {\n var isModal = selection.isModal && selection.isModal();\n selection.setChangeEvents(false);\n selection.setAllSelected(false);\n selection.setIndexSelected(index, true, true);\n if (isModal || (this.props.enterModalOnTouch && this._isTouch)) {\n if (selection.setModal) {\n selection.setModal(true);\n }\n if (this._isTouch) {\n this._setIsTouch(false);\n }\n }\n selection.setChangeEvents(true);\n }\n };\n /**\n * We need to track the modifier key states so that when focus events occur, which do not contain\n * modifier states in the Event object, we know how to behave.\n */\n SelectionZone.prototype._updateModifiers = function (ev) {\n this._isShiftPressed = ev.shiftKey;\n this._isCtrlPressed = ev.ctrlKey;\n this._isMetaPressed = ev.metaKey;\n var keyCode = ev.keyCode;\n this._isTabPressed = keyCode ? keyCode === KeyCodes.tab : false;\n };\n SelectionZone.prototype._findItemRoot = function (target) {\n var selection = this.props.selection;\n while (target !== this._root.current) {\n var indexValue = target.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME);\n var index = Number(indexValue);\n if (indexValue !== null && index >= 0 && index < selection.getItems().length) {\n break;\n }\n target = getParent(target);\n }\n if (target === this._root.current) {\n return undefined;\n }\n return target;\n };\n SelectionZone.prototype._getItemIndex = function (itemRoot) {\n return Number(itemRoot.getAttribute(SELECTION_INDEX_ATTRIBUTE_NAME));\n };\n SelectionZone.prototype._shouldAutoSelect = function (element) {\n return this._hasAttribute(element, SELECTION_SELECT_ATTRIBUTE_NAME);\n };\n SelectionZone.prototype._hasAttribute = function (element, attributeName) {\n var isToggle = false;\n while (!isToggle && element !== this._root.current) {\n isToggle = element.getAttribute(attributeName) === 'true';\n element = getParent(element);\n }\n return isToggle;\n };\n SelectionZone.prototype._isInputElement = function (element) {\n return element.tagName === 'INPUT' || element.tagName === 'TEXTAREA';\n };\n SelectionZone.prototype._isNonHandledClick = function (element) {\n var doc = getDocument();\n if (doc && element) {\n while (element && element !== doc.documentElement) {\n if (isElementTabbable(element)) {\n return false;\n }\n element = getParent(element);\n }\n }\n return true;\n };\n SelectionZone.prototype._handleNextFocus = function (handleFocus) {\n var _this = this;\n if (this._shouldHandleFocusTimeoutId) {\n this._async.clearTimeout(this._shouldHandleFocusTimeoutId);\n this._shouldHandleFocusTimeoutId = undefined;\n }\n this._shouldHandleFocus = handleFocus;\n if (handleFocus) {\n this._async.setTimeout(function () {\n _this._shouldHandleFocus = false;\n }, 100);\n }\n };\n SelectionZone.prototype._setIsTouch = function (isTouch) {\n var _this = this;\n if (this._isTouchTimeoutId) {\n this._async.clearTimeout(this._isTouchTimeoutId);\n this._isTouchTimeoutId = undefined;\n }\n this._isTouch = true;\n if (isTouch) {\n this._async.setTimeout(function () {\n _this._isTouch = false;\n }, 300);\n }\n };\n SelectionZone.prototype._getSelectionMode = function () {\n var selection = this.props.selection;\n var _a = this.props.selectionMode, selectionMode = _a === void 0 ? selection ? selection.mode : SelectionMode.none : _a;\n return selectionMode;\n };\n SelectionZone.defaultProps = {\n isSelectedOnFocus: true,\n selectionMode: SelectionMode.multiple,\n };\n return SelectionZone;\n}(React.Component));\nexport { SelectionZone };\n//# sourceMappingURL=SelectionZone.js.map","import * as React from 'react';\nexport var SPACER_WIDTH = 36;\nexport var GroupSpacer = function (props) {\n var count = props.count, _a = props.indentWidth, indentWidth = _a === void 0 ? SPACER_WIDTH : _a, _b = props.role, role = _b === void 0 ? 'presentation' : _b;\n var width = count * indentWidth;\n return count > 0 ? (React.createElement(\"span\", { className: 'ms-GroupSpacer', style: { display: 'inline-block', width: width }, role: role })) : null;\n};\n//# sourceMappingURL=GroupSpacer.js.map","import { labelProperties, audioProperties, videoProperties, olProperties, liProperties, anchorProperties, buttonProperties, inputProperties, textAreaProperties, selectProperties, optionProperties, tableProperties, trProperties, thProperties, tdProperties, colGroupProperties, colProperties, formProperties, iframeProperties, imgProperties, htmlElementProperties, getNativeProps, } from './properties';\nvar nativeElementMap = {\n label: labelProperties,\n audio: audioProperties,\n video: videoProperties,\n ol: olProperties,\n li: liProperties,\n a: anchorProperties,\n button: buttonProperties,\n input: inputProperties,\n textarea: textAreaProperties,\n select: selectProperties,\n option: optionProperties,\n table: tableProperties,\n tr: trProperties,\n th: thProperties,\n td: tdProperties,\n colGroup: colGroupProperties,\n col: colProperties,\n form: formProperties,\n iframe: iframeProperties,\n img: imgProperties,\n};\n/**\n * Given an element tagname and user props, filters the props to only allowed props for the given\n * element type.\n * @param tagName - Tag name (e.g. \"div\")\n * @param props - Props object\n * @param excludedPropNames - List of props to disallow\n */\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nexport function getNativeElementProps(tagName, props, excludedPropNames) {\n var allowedPropNames = (tagName && nativeElementMap[tagName]) || htmlElementProperties;\n return getNativeProps(props, allowedPropNames, excludedPropNames);\n}\n//# sourceMappingURL=getNativeElementProps.js.map","import { __assign } from \"tslib\";\nimport { AnimationClassNames, AnimationStyles, HighContrastSelector, getFocusStyle, getGlobalClassNames, FontWeights, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { GlobalClassNames as LinkGlobalClassNames } from '../../components/Link/Link.styles';\nexport var DetailsRowGlobalClassNames = {\n root: 'ms-DetailsRow',\n // TODO: in Fabric 7.0 lowercase the 'Compact' for consistency across other components.\n compact: 'ms-DetailsList--Compact',\n cell: 'ms-DetailsRow-cell',\n cellAnimation: 'ms-DetailsRow-cellAnimation',\n cellCheck: 'ms-DetailsRow-cellCheck',\n check: 'ms-DetailsRow-check',\n cellMeasurer: 'ms-DetailsRow-cellMeasurer',\n listCellFirstChild: 'ms-List-cell:first-child',\n isContentUnselectable: 'is-contentUnselectable',\n isSelected: 'is-selected',\n isCheckVisible: 'is-check-visible',\n isRowHeader: 'is-row-header',\n fields: 'ms-DetailsRow-fields',\n};\nvar IsFocusableSelector = \"[data-is-focusable='true']\";\nexport var DEFAULT_CELL_STYLE_PROPS = {\n cellLeftPadding: 12,\n cellRightPadding: 8,\n cellExtraRightPadding: 24,\n};\n// Source of default row heights to share.\nexport var DEFAULT_ROW_HEIGHTS = {\n rowHeight: 42,\n compactRowHeight: 32,\n};\n// Constant values\nvar values = __assign(__assign({}, DEFAULT_ROW_HEIGHTS), { rowVerticalPadding: 11, compactRowVerticalPadding: 6 });\nexport var getDetailsRowStyles = function (props) {\n var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;\n var theme = props.theme, isSelected = props.isSelected, canSelect = props.canSelect, droppingClassName = props.droppingClassName, anySelected = props.anySelected, isCheckVisible = props.isCheckVisible, checkboxCellClassName = props.checkboxCellClassName, compact = props.compact, className = props.className, _o = props.cellStyleProps, cellStyleProps = _o === void 0 ? DEFAULT_CELL_STYLE_PROPS : _o, enableUpdateAnimations = props.enableUpdateAnimations, disabled = props.disabled;\n var palette = theme.palette, fonts = theme.fonts;\n var neutralPrimary = palette.neutralPrimary, white = palette.white, neutralSecondary = palette.neutralSecondary, neutralLighter = palette.neutralLighter, neutralLight = palette.neutralLight, neutralDark = palette.neutralDark, neutralQuaternaryAlt = palette.neutralQuaternaryAlt;\n var _p = theme.semanticColors, focusBorder = _p.focusBorder, focusedLinkColor = _p.linkHovered;\n var classNames = getGlobalClassNames(DetailsRowGlobalClassNames, theme);\n var colors = {\n // Default\n defaultHeaderText: neutralPrimary,\n defaultMetaText: neutralSecondary,\n defaultBackground: white,\n // Default Hover\n defaultHoverHeaderText: neutralDark,\n defaultHoverMetaText: neutralPrimary,\n defaultHoverBackground: neutralLighter,\n // Selected\n selectedHeaderText: neutralDark,\n selectedMetaText: neutralPrimary,\n selectedBackground: neutralLight,\n // Selected Hover\n selectedHoverHeaderText: neutralDark,\n selectedHoverMetaText: neutralPrimary,\n selectedHoverBackground: neutralQuaternaryAlt,\n // Focus\n focusHeaderText: neutralDark,\n focusMetaText: neutralPrimary,\n focusBackground: neutralLight,\n focusHoverBackground: neutralQuaternaryAlt,\n };\n var rowHighContrastFocus = {\n top: 2,\n right: 2,\n bottom: 2,\n left: 2,\n };\n // Selected row styles\n var selectedStyles = [\n getFocusStyle(theme, {\n inset: -1,\n borderColor: focusBorder,\n outlineColor: white,\n highContrastStyle: rowHighContrastFocus,\n }),\n classNames.isSelected,\n {\n color: colors.selectedMetaText,\n background: colors.selectedBackground,\n borderBottom: \"1px solid \" + white,\n selectors: (_a = {\n '&:before': {\n position: 'absolute',\n display: 'block',\n top: -1,\n height: 1,\n bottom: 0,\n left: 0,\n right: 0,\n content: '',\n borderTop: \"1px solid \" + white,\n }\n },\n _a[\".\" + classNames.cell + \" > .\" + LinkGlobalClassNames.root] = {\n color: focusedLinkColor,\n },\n // Selected State hover\n _a['&:hover'] = {\n background: colors.selectedHoverBackground,\n color: colors.selectedHoverMetaText,\n selectors: (_b = {},\n // Selected State hover meta cell\n _b[\".\" + classNames.cell + \" \" + HighContrastSelector] = {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText',\n },\n },\n },\n // Selected State hover Header cell\n _b[\".\" + classNames.isRowHeader] = {\n color: colors.selectedHoverHeaderText,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _c),\n },\n // Ensure high-contrast mode overrides default hover background\n _b[HighContrastSelector] = {\n background: 'Highlight',\n },\n _b),\n },\n // Focus state\n _a['&:focus'] = {\n background: colors.focusBackground,\n selectors: (_d = {},\n // Selected State hover meta cell\n _d[\".\" + classNames.cell] = {\n color: colors.focusMetaText,\n selectors: (_e = {},\n _e[HighContrastSelector] = {\n color: 'HighlightText',\n selectors: {\n '> a': {\n color: 'HighlightText',\n },\n },\n },\n _e),\n },\n // Row header cell\n _d[\".\" + classNames.isRowHeader] = {\n color: colors.focusHeaderText,\n selectors: (_f = {},\n _f[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _f),\n },\n // Ensure high-contrast mode overrides default focus background\n _d[HighContrastSelector] = {\n background: 'Highlight',\n },\n _d),\n },\n _a[HighContrastSelector] = __assign(__assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()), { selectors: {\n a: {\n color: 'HighlightText',\n },\n } }),\n // Focus and hover state\n _a['&:focus:hover'] = {\n background: colors.focusHoverBackground,\n },\n _a),\n },\n ];\n var cannotSelectStyles = [\n classNames.isContentUnselectable,\n {\n userSelect: 'none',\n cursor: 'default',\n },\n ];\n var rootCompactStyles = {\n minHeight: values.compactRowHeight,\n border: 0,\n };\n var cellCompactStyles = {\n minHeight: values.compactRowHeight,\n paddingTop: values.compactRowVerticalPadding,\n paddingBottom: values.compactRowVerticalPadding,\n paddingLeft: cellStyleProps.cellLeftPadding + \"px\",\n };\n var defaultCellStyles = [\n getFocusStyle(theme, { inset: -1 }),\n classNames.cell,\n {\n display: 'inline-block',\n position: 'relative',\n boxSizing: 'border-box',\n minHeight: values.rowHeight,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n paddingTop: values.rowVerticalPadding,\n paddingBottom: values.rowVerticalPadding,\n paddingLeft: cellStyleProps.cellLeftPadding + \"px\",\n selectors: (_g = {\n '& > button': {\n maxWidth: '100%',\n }\n },\n _g[IsFocusableSelector] = getFocusStyle(theme, { inset: -1, borderColor: neutralSecondary, outlineColor: white }),\n _g),\n },\n isSelected && {\n selectors: (_h = {},\n _h[HighContrastSelector] = __assign(__assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()), { selectors: {\n a: {\n color: 'HighlightText',\n },\n } }),\n _h),\n },\n compact && cellCompactStyles,\n disabled && { opacity: 0.5 },\n ];\n return {\n root: [\n classNames.root,\n AnimationClassNames.fadeIn400,\n droppingClassName,\n theme.fonts.small,\n isCheckVisible && classNames.isCheckVisible,\n getFocusStyle(theme, { borderColor: focusBorder, outlineColor: white }),\n {\n borderBottom: \"1px solid \" + neutralLighter,\n background: colors.defaultBackground,\n color: colors.defaultMetaText,\n // This ensures that the row always tries to consume is minimum width and does not compress.\n display: 'inline-flex',\n minWidth: '100%',\n minHeight: values.rowHeight,\n whiteSpace: 'nowrap',\n padding: 0,\n boxSizing: 'border-box',\n verticalAlign: 'top',\n textAlign: 'left',\n selectors: (_j = {},\n _j[\".\" + classNames.listCellFirstChild + \" &:before\"] = {\n display: 'none',\n },\n _j['&:hover'] = {\n background: colors.defaultHoverBackground,\n color: colors.defaultHoverMetaText,\n selectors: (_k = {},\n _k[\".\" + classNames.isRowHeader] = {\n color: colors.defaultHoverHeaderText,\n },\n _k[\".\" + classNames.cell + \" > .\" + LinkGlobalClassNames.root] = {\n color: focusedLinkColor,\n },\n _k),\n },\n _j[\"&:hover .\" + classNames.check] = {\n opacity: 1,\n },\n _j[\".\" + IsFocusVisibleClassName + \" &:focus .\" + classNames.check] = {\n opacity: 1,\n },\n _j['.ms-GroupSpacer'] = {\n flexShrink: 0,\n flexGrow: 0,\n },\n _j),\n },\n isSelected && selectedStyles,\n !canSelect && cannotSelectStyles,\n compact && rootCompactStyles,\n className,\n ],\n cellUnpadded: {\n paddingRight: cellStyleProps.cellRightPadding + \"px\",\n },\n cellPadded: {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding + \"px\",\n selectors: (_l = {},\n _l[\"&.\" + classNames.cellCheck] = {\n paddingRight: 0,\n },\n _l),\n },\n cell: defaultCellStyles,\n cellAnimation: enableUpdateAnimations && AnimationStyles.slideLeftIn40,\n cellMeasurer: [\n classNames.cellMeasurer,\n {\n overflow: 'visible',\n whiteSpace: 'nowrap',\n },\n ],\n checkCell: [\n defaultCellStyles,\n classNames.cellCheck,\n checkboxCellClassName,\n {\n padding: 0,\n // Ensure that the check cell covers the top border of the cell.\n // This ensures the click target does not leave a spot which would\n // cause other items to be deselected.\n paddingTop: 1,\n marginTop: -1,\n flexShrink: 0,\n },\n ],\n checkCover: {\n position: 'absolute',\n top: -1,\n left: 0,\n bottom: 0,\n right: 0,\n display: anySelected ? 'block' : 'none',\n },\n fields: [\n classNames.fields,\n {\n display: 'flex',\n alignItems: 'stretch',\n },\n ],\n isRowHeader: [\n classNames.isRowHeader,\n {\n color: colors.defaultHeaderText,\n fontSize: fonts.medium.fontSize,\n },\n isSelected && {\n color: colors.selectedHeaderText,\n fontWeight: FontWeights.semibold,\n selectors: (_m = {},\n _m[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _m),\n },\n ],\n isMultiline: [\n defaultCellStyles,\n {\n whiteSpace: 'normal',\n wordBreak: 'break-word',\n textOverflow: 'clip',\n },\n ],\n check: [classNames.check],\n };\n};\n//# sourceMappingURL=DetailsRow.styles.js.map","import { __assign } from \"tslib\";\nimport { getFocusStyle, focusClear, getGlobalClassNames, HighContrastSelector, hiddenContentStyle, getHighContrastNoAdjustStyle, } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPANDER_WIDTH } from '../GroupedList/GroupSpacer';\nvar GlobalClassNames = {\n tooltipHost: 'ms-TooltipHost',\n root: 'ms-DetailsHeader',\n cell: 'ms-DetailsHeader-cell',\n cellIsCheck: 'ms-DetailsHeader-cellIsCheck',\n collapseButton: 'ms-DetailsHeader-collapseButton',\n isCollapsed: 'is-collapsed',\n isAllSelected: 'is-allSelected',\n isSelectAllHidden: 'is-selectAllHidden',\n isResizingColumn: 'is-resizingColumn',\n cellSizer: 'ms-DetailsHeader-cellSizer',\n isResizing: 'is-resizing',\n dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',\n dropHintCaretStyle: 'ms-DetailsHeader-dropHintCaretStyle',\n dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',\n cellTitle: 'ms-DetailsHeader-cellTitle',\n cellName: 'ms-DetailsHeader-cellName',\n filterChevron: 'ms-DetailsHeader-filterChevron',\n gripperBarVertical: 'ms-DetailsColumn-gripperBarVertical',\n checkTooltip: 'ms-DetailsHeader-checkTooltip',\n check: 'ms-DetailsHeader-check',\n};\nexport var HEADER_HEIGHT = 42;\nexport var getCellStyles = function (props) {\n var theme = props.theme, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n var semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return [\n classNames.cell,\n getFocusStyle(theme),\n {\n color: semanticColors.bodyText,\n position: 'relative',\n display: 'inline-block',\n boxSizing: 'border-box',\n padding: \"0 \" + cellStyleProps.cellRightPadding + \"px 0 \" + cellStyleProps.cellLeftPadding + \"px\",\n lineHeight: 'inherit',\n margin: '0',\n height: HEADER_HEIGHT,\n verticalAlign: 'top',\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n textAlign: 'left',\n },\n ];\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d;\n var theme = props.theme, className = props.className, isAllSelected = props.isAllSelected, isResizingColumn = props.isResizingColumn, isSizing = props.isSizing, isAllCollapsed = props.isAllCollapsed, _e = props.cellStyleProps, cellStyleProps = _e === void 0 ? DEFAULT_CELL_STYLE_PROPS : _e;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n resizerColor: palette.neutralTertiaryAlt,\n };\n var cellSizerFadeInStyles = {\n opacity: 1,\n transition: 'opacity 0.3s linear',\n };\n var cellStyles = getCellStyles(props);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n display: 'inline-block',\n background: colors.headerBackgroundColor,\n position: 'relative',\n minWidth: '100%',\n verticalAlign: 'top',\n height: HEADER_HEIGHT,\n lineHeight: HEADER_HEIGHT,\n whiteSpace: 'nowrap',\n boxSizing: 'content-box',\n paddingBottom: '1px',\n paddingTop: '16px',\n borderBottom: \"1px solid \" + semanticColors.bodyDivider,\n cursor: 'default',\n userSelect: 'none',\n selectors: (_a = {},\n _a[\"&:hover .\" + classNames.check] = {\n opacity: 1,\n },\n _a[\"& .\" + classNames.tooltipHost + \" .\" + classNames.checkTooltip] = {\n display: 'block',\n },\n _a),\n },\n isAllSelected && classNames.isAllSelected,\n isResizingColumn && classNames.isResizingColumn,\n className,\n ],\n check: [\n classNames.check,\n {\n height: HEADER_HEIGHT,\n },\n {\n selectors: (_b = {},\n _b[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n opacity: 1,\n },\n _b),\n },\n ],\n cellWrapperPadded: {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding,\n },\n cellIsCheck: [\n cellStyles,\n classNames.cellIsCheck,\n {\n position: 'relative',\n padding: 0,\n margin: 0,\n display: 'inline-flex',\n alignItems: 'center',\n border: 'none',\n },\n isAllSelected && {\n opacity: 1,\n },\n ],\n cellIsGroupExpander: [\n cellStyles,\n {\n display: 'inline-flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: fonts.small.fontSize,\n padding: 0,\n border: 'none',\n width: GROUP_EXPANDER_WIDTH,\n color: palette.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: palette.neutralLighter,\n },\n ':active': {\n backgroundColor: palette.neutralLight,\n },\n },\n },\n ],\n cellIsActionable: {\n selectors: {\n ':hover': {\n color: semanticColors.bodyText,\n background: semanticColors.listHeaderBackgroundHovered,\n },\n ':active': {\n background: semanticColors.listHeaderBackgroundPressed,\n },\n },\n },\n cellIsEmpty: {\n textOverflow: 'clip',\n },\n cellSizer: [\n classNames.cellSizer,\n focusClear(),\n {\n display: 'inline-block',\n position: 'relative',\n cursor: 'ew-resize',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 'inherit',\n background: 'transparent',\n zIndex: 1,\n width: 16,\n selectors: (_c = {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n bottom: 0,\n width: 1,\n background: colors.resizerColor,\n opacity: 0,\n left: '50%',\n },\n ':focus:after': cellSizerFadeInStyles,\n ':hover:after': cellSizerFadeInStyles\n },\n _c[\"&.\" + classNames.isResizing + \":after\"] = [\n cellSizerFadeInStyles,\n {\n boxShadow: '0 0 5px 0 rgba(0, 0, 0, 0.4)',\n },\n ],\n _c),\n },\n ],\n cellIsResizing: classNames.isResizing,\n cellSizerStart: {\n margin: '0 -8px',\n },\n cellSizerEnd: {\n margin: 0,\n marginLeft: -16,\n },\n collapseButton: [\n classNames.collapseButton,\n {\n transformOrigin: '50% 50%',\n transition: 'transform .1s linear',\n },\n isAllCollapsed\n ? [\n classNames.isCollapsed,\n {\n transform: 'rotate(0deg)',\n },\n ]\n : {\n transform: getRTL(theme) ? 'rotate(-90deg)' : 'rotate(90deg)',\n },\n ],\n checkTooltip: classNames.checkTooltip,\n sizingOverlay: isSizing && {\n position: 'absolute',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n cursor: 'ew-resize',\n background: 'rgba(255, 255, 255, 0)',\n selectors: (_d = {},\n _d[HighContrastSelector] = __assign({ background: 'transparent' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n accessibleLabel: hiddenContentStyle,\n dropHintCircleStyle: [\n classNames.dropHintCircleStyle,\n {\n display: 'inline-block',\n visibility: 'hidden',\n position: 'absolute',\n bottom: 0,\n height: 9,\n width: 9,\n borderRadius: '50%',\n marginLeft: -5,\n top: 34,\n overflow: 'visible',\n zIndex: 10,\n border: \"1px solid \" + palette.themePrimary,\n background: palette.white,\n },\n ],\n dropHintCaretStyle: [\n classNames.dropHintCaretStyle,\n {\n display: 'none',\n position: 'absolute',\n top: -28,\n left: -6.5,\n fontSize: fonts.medium.fontSize,\n color: palette.themePrimary,\n overflow: 'visible',\n zIndex: 10,\n },\n ],\n dropHintLineStyle: [\n classNames.dropHintLineStyle,\n {\n display: 'none',\n position: 'absolute',\n bottom: 0,\n top: 0,\n overflow: 'hidden',\n height: 42,\n width: 1,\n background: palette.themePrimary,\n zIndex: 10,\n },\n ],\n dropHintStyle: {\n display: 'inline-block',\n position: 'absolute',\n },\n };\n};\n//# sourceMappingURL=DetailsHeader.styles.js.map","import { getGlobalClassNames, getFocusStyle } from '../../Styling';\nimport { DEFAULT_ROW_HEIGHTS } from './DetailsRow.styles';\nimport { HEADER_HEIGHT } from './DetailsHeader.styles';\nimport { CheckGlobalClassNames } from '../../components/Check/Check.styles';\nvar GlobalClassNames = {\n root: 'ms-DetailsRow-check',\n isDisabled: 'ms-DetailsRow-check--isDisabled',\n isHeader: 'ms-DetailsRow-check--isHeader',\n};\nexport var CHECK_CELL_WIDTH = 48;\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, isHeader = props.isHeader, selected = props.selected, anySelected = props.anySelected, canSelect = props.canSelect, compact = props.compact, isVisible = props.isVisible;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var rowHeight = DEFAULT_ROW_HEIGHTS.rowHeight, compactRowHeight = DEFAULT_ROW_HEIGHTS.compactRowHeight;\n var height = isHeader ? HEADER_HEIGHT : compact ? compactRowHeight : rowHeight;\n var isCheckVisible = isVisible || selected || anySelected;\n return {\n root: [classNames.root, className],\n check: [\n !canSelect && classNames.isDisabled,\n isHeader && classNames.isHeader,\n getFocusStyle(theme),\n theme.fonts.small,\n CheckGlobalClassNames.checkHost,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n cursor: 'default',\n boxSizing: 'border-box',\n verticalAlign: 'top',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n opacity: isCheckVisible ? 1 : 0,\n height: height,\n width: CHECK_CELL_WIDTH,\n padding: 0,\n margin: 0,\n },\n ],\n isDisabled: [],\n };\n};\n//# sourceMappingURL=DetailsRowCheck.styles.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { css, styled, classNamesFunction, composeRenderFunction, getNativeElementProps } from '../../Utilities';\nimport { Check } from '../../Check';\nimport { getStyles } from './DetailsRowCheck.styles';\nimport { SelectionMode } from '../../Selection';\nvar getClassNames = classNamesFunction();\nvar DetailsRowCheckBase = function (props) {\n var _a = props.isVisible, isVisible = _a === void 0 ? false : _a, _b = props.canSelect, canSelect = _b === void 0 ? false : _b, _c = props.anySelected, anySelected = _c === void 0 ? false : _c, _d = props.selected, selected = _d === void 0 ? false : _d, selectionMode = props.selectionMode, _e = props.isHeader, isHeader = _e === void 0 ? false : _e, className = props.className, checkClassName = props.checkClassName, styles = props.styles, theme = props.theme, compact = props.compact, onRenderDetailsCheckbox = props.onRenderDetailsCheckbox, _f = props.useFastIcons, useFastIcons = _f === void 0 ? true : _f, // must be removed from buttonProps\n buttonProps = __rest(props, [\"isVisible\", \"canSelect\", \"anySelected\", \"selected\", \"selectionMode\", \"isHeader\", \"className\", \"checkClassName\", \"styles\", \"theme\", \"compact\", \"onRenderDetailsCheckbox\", \"useFastIcons\"]);\n var defaultCheckboxRender = useFastIcons ? _fastDefaultCheckboxRender : _defaultCheckboxRender;\n var onRenderCheckbox = onRenderDetailsCheckbox\n ? composeRenderFunction(onRenderDetailsCheckbox, defaultCheckboxRender)\n : defaultCheckboxRender;\n var classNames = getClassNames(styles, {\n theme: theme,\n canSelect: canSelect,\n selected: selected,\n anySelected: anySelected,\n className: className,\n isHeader: isHeader,\n isVisible: isVisible,\n compact: compact,\n });\n var detailsCheckboxProps = {\n checked: selected,\n theme: theme,\n };\n var divProps = getNativeElementProps('div', buttonProps, ['aria-label', 'aria-labelledby', 'aria-describedby']);\n var checkRole = selectionMode === SelectionMode.single ? 'radio' : 'checkbox';\n return canSelect ? (React.createElement(\"div\", __assign({}, buttonProps, { role: checkRole, \n // eslint-disable-next-line deprecation/deprecation\n className: css(classNames.root, classNames.check), \"aria-checked\": selected, \"data-selection-toggle\": true, \"data-automationid\": \"DetailsRowCheck\", tabIndex: -1 }), onRenderCheckbox(detailsCheckboxProps))) : (\n // eslint-disable-next-line deprecation/deprecation\n React.createElement(\"div\", __assign({}, divProps, { className: css(classNames.root, classNames.check) })));\n};\nvar FastCheck = React.memo(function (props) {\n return React.createElement(Check, { theme: props.theme, checked: props.checked, className: props.className, useFastIcons: true });\n});\nfunction _defaultCheckboxRender(checkboxProps) {\n return React.createElement(Check, { checked: checkboxProps.checked });\n}\nfunction _fastDefaultCheckboxRender(checkboxProps) {\n return React.createElement(FastCheck, { theme: checkboxProps.theme, checked: checkboxProps.checked });\n}\nexport var DetailsRowCheck = styled(DetailsRowCheckBase, getStyles, undefined, { scope: 'DetailsRowCheck' }, true);\n//# sourceMappingURL=DetailsRowCheck.js.map","/**\n * {@docCategory DetailsList}\n */\nexport var SelectAllVisibility;\n(function (SelectAllVisibility) {\n SelectAllVisibility[SelectAllVisibility[\"none\"] = 0] = \"none\";\n SelectAllVisibility[SelectAllVisibility[\"hidden\"] = 1] = \"hidden\";\n SelectAllVisibility[SelectAllVisibility[\"visible\"] = 2] = \"visible\";\n})(SelectAllVisibility || (SelectAllVisibility = {}));\n//# sourceMappingURL=DetailsHeader.types.js.map","import { EventGroup, getDocument } from '../../Utilities';\nvar MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nvar MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button\nvar DragDropHelper = /** @class */ (function () {\n function DragDropHelper(params) {\n this._selection = params.selection;\n this._dragEnterCounts = {};\n this._activeTargets = {};\n this._lastId = 0;\n // To make this class cheap to create, which allows simplifying some logic elsewhere,\n // only initialize the event group and global event handlers as needed.\n this._initialized = false;\n }\n DragDropHelper.prototype.dispose = function () {\n if (this._events) {\n this._events.dispose();\n }\n };\n DragDropHelper.prototype.subscribe = function (root, events, dragDropOptions) {\n var _this = this;\n if (!this._initialized) {\n this._events = new EventGroup(this);\n var doc = getDocument();\n // clear drag data when mouse up, use capture event to ensure it will be run\n if (doc) {\n this._events.on(doc.body, 'mouseup', this._onMouseUp.bind(this), true);\n this._events.on(doc, 'mouseup', this._onDocumentMouseUp.bind(this), true);\n }\n this._initialized = true;\n }\n var _a = dragDropOptions.key, key = _a === void 0 ? \"\" + ++this._lastId : _a;\n var handlers = [];\n var onDragStart;\n var onDragLeave;\n var onDragEnter;\n var onDragEnd;\n var onDrop;\n var onDragOver;\n var onMouseDown;\n var isDraggable;\n var isDroppable;\n var activeTarget;\n if (dragDropOptions && root) {\n var eventMap = dragDropOptions.eventMap, context = dragDropOptions.context, updateDropState_1 = dragDropOptions.updateDropState;\n var dragDropTarget = {\n root: root,\n options: dragDropOptions,\n key: key,\n };\n isDraggable = this._isDraggable(dragDropTarget);\n isDroppable = this._isDroppable(dragDropTarget);\n if (isDraggable || isDroppable) {\n if (eventMap) {\n for (var _i = 0, eventMap_1 = eventMap; _i < eventMap_1.length; _i++) {\n var event_1 = eventMap_1[_i];\n var handler = {\n callback: event_1.callback.bind(null, context),\n eventName: event_1.eventName,\n };\n handlers.push(handler);\n this._events.on(root, handler.eventName, handler.callback);\n }\n }\n }\n if (isDroppable) {\n // If the target is droppable, wire up global event listeners to track drop-related events.\n onDragLeave = function (event) {\n if (!event.isHandled) {\n event.isHandled = true;\n _this._dragEnterCounts[key]--;\n if (_this._dragEnterCounts[key] === 0) {\n updateDropState_1(false /* isDropping */, event);\n }\n }\n };\n onDragEnter = function (event) {\n event.preventDefault(); // needed for IE\n if (!event.isHandled) {\n event.isHandled = true;\n _this._dragEnterCounts[key]++;\n if (_this._dragEnterCounts[key] === 1) {\n updateDropState_1(true /* isDropping */, event);\n }\n }\n };\n onDragEnd = function (event) {\n _this._dragEnterCounts[key] = 0;\n updateDropState_1(false /* isDropping */, event);\n };\n onDrop = function (event) {\n _this._dragEnterCounts[key] = 0;\n updateDropState_1(false /* isDropping */, event);\n if (dragDropOptions.onDrop) {\n dragDropOptions.onDrop(dragDropOptions.context.data, event);\n }\n };\n onDragOver = function (event) {\n event.preventDefault();\n if (dragDropOptions.onDragOver) {\n dragDropOptions.onDragOver(dragDropOptions.context.data, event);\n }\n };\n this._dragEnterCounts[key] = 0;\n // dragenter and dragleave will be fired when hover to the child element\n // but we only want to change state when enter or leave the current element\n // use the count to ensure it.\n events.on(root, 'dragenter', onDragEnter);\n events.on(root, 'dragleave', onDragLeave);\n events.on(root, 'dragend', onDragEnd);\n events.on(root, 'drop', onDrop);\n events.on(root, 'dragover', onDragOver);\n }\n if (isDraggable) {\n // If the target is draggable, wire up local event listeners for mouse events.\n onMouseDown = this._onMouseDown.bind(this, dragDropTarget);\n onDragEnd = this._onDragEnd.bind(this, dragDropTarget);\n // We need to add in data so that on Firefox we show the ghost element when dragging\n onDragStart = function (event) {\n var options = dragDropOptions;\n if (options && options.onDragStart) {\n options.onDragStart(options.context.data, options.context.index, _this._selection.getSelection(), event);\n }\n _this._isDragging = true;\n if (event.dataTransfer) {\n event.dataTransfer.setData('id', root.id);\n }\n };\n events.on(root, 'dragstart', onDragStart);\n events.on(root, 'mousedown', onMouseDown);\n events.on(root, 'dragend', onDragEnd);\n }\n activeTarget = {\n target: dragDropTarget,\n dispose: function () {\n if (_this._activeTargets[key] === activeTarget) {\n delete _this._activeTargets[key];\n }\n if (root) {\n for (var _i = 0, handlers_1 = handlers; _i < handlers_1.length; _i++) {\n var handler = handlers_1[_i];\n _this._events.off(root, handler.eventName, handler.callback);\n }\n if (isDroppable) {\n events.off(root, 'dragenter', onDragEnter);\n events.off(root, 'dragleave', onDragLeave);\n events.off(root, 'dragend', onDragEnd);\n events.off(root, 'dragover', onDragOver);\n events.off(root, 'drop', onDrop);\n }\n if (isDraggable) {\n events.off(root, 'dragstart', onDragStart);\n events.off(root, 'mousedown', onMouseDown);\n events.off(root, 'dragend', onDragEnd);\n }\n }\n },\n };\n this._activeTargets[key] = activeTarget;\n }\n return {\n key: key,\n dispose: function () {\n if (activeTarget) {\n activeTarget.dispose();\n }\n },\n };\n };\n DragDropHelper.prototype.unsubscribe = function (root, key) {\n var activeTarget = this._activeTargets[key];\n if (activeTarget) {\n activeTarget.dispose();\n }\n };\n DragDropHelper.prototype._onDragEnd = function (target, event) {\n var options = target.options;\n if (options.onDragEnd) {\n options.onDragEnd(options.context.data, event);\n }\n };\n /**\n * clear drag data when mouse up on body\n */\n DragDropHelper.prototype._onMouseUp = function (event) {\n this._isDragging = false;\n if (this._dragData) {\n for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {\n var key = _a[_i];\n var activeTarget = this._activeTargets[key];\n if (activeTarget.target.root) {\n this._events.off(activeTarget.target.root, 'mousemove');\n this._events.off(activeTarget.target.root, 'mouseleave');\n }\n }\n if (this._dragData.dropTarget) {\n // raise dragleave event to let dropTarget know it need to remove dropping style\n EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');\n EventGroup.raise(this._dragData.dropTarget.root, 'drop');\n }\n }\n this._dragData = null;\n };\n /**\n * clear drag data when mouse up outside of the document\n */\n DragDropHelper.prototype._onDocumentMouseUp = function (event) {\n var doc = getDocument();\n if (doc && event.target === doc.documentElement) {\n this._onMouseUp(event);\n }\n };\n /**\n * when mouse move over a new drop target while dragging some items,\n * fire dragleave on the old target and fire dragenter to the new target\n * The target will handle style change on dragenter and dragleave events.\n */\n DragDropHelper.prototype._onMouseMove = function (target, event) {\n var \n // use buttons property here since ev.button in some edge case is not updating well during the move.\n // but firefox doesn't support it, so we set the default value when it is not defined.\n _a = event.buttons, \n // use buttons property here since ev.button in some edge case is not updating well during the move.\n // but firefox doesn't support it, so we set the default value when it is not defined.\n buttons = _a === void 0 ? MOUSEMOVE_PRIMARY_BUTTON : _a;\n if (this._dragData && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {\n // cancel mouse down event and return early when the primary button is not pressed\n this._onMouseUp(event);\n return;\n }\n var root = target.root, key = target.key;\n if (this._isDragging) {\n if (this._isDroppable(target)) {\n // we can have nested drop targets in the DOM, like a folder inside a group. In that case, when we drag into\n // the inner target (folder), we first set dropTarget to the inner element. But the same event is bubbled to the\n // outer target too, and we need to prevent the outer one from taking over.\n // So, check if the last dropTarget is not a child of the current.\n if (this._dragData) {\n if (this._dragData.dropTarget &&\n this._dragData.dropTarget.key !== key &&\n !this._isChild(root, this._dragData.dropTarget.root)) {\n if (this._dragEnterCounts[this._dragData.dropTarget.key] > 0) {\n EventGroup.raise(this._dragData.dropTarget.root, 'dragleave');\n EventGroup.raise(root, 'dragenter');\n this._dragData.dropTarget = target;\n }\n }\n }\n }\n }\n };\n /**\n * when mouse leave a target while dragging some items, fire dragleave to the target\n */\n DragDropHelper.prototype._onMouseLeave = function (target, event) {\n if (this._isDragging) {\n if (this._dragData && this._dragData.dropTarget && this._dragData.dropTarget.key === target.key) {\n EventGroup.raise(target.root, 'dragleave');\n this._dragData.dropTarget = undefined;\n }\n }\n };\n /**\n * when mouse down on a draggable item, we start to track dragdata.\n */\n DragDropHelper.prototype._onMouseDown = function (target, event) {\n if (event.button !== MOUSEDOWN_PRIMARY_BUTTON) {\n // Ignore anything except the primary button.\n return;\n }\n if (this._isDraggable(target)) {\n this._dragData = {\n clientX: event.clientX,\n clientY: event.clientY,\n eventTarget: event.target,\n dragTarget: target,\n };\n for (var _i = 0, _a = Object.keys(this._activeTargets); _i < _a.length; _i++) {\n var key = _a[_i];\n var activeTarget = this._activeTargets[key];\n if (activeTarget.target.root) {\n this._events.on(activeTarget.target.root, 'mousemove', this._onMouseMove.bind(this, activeTarget.target));\n this._events.on(activeTarget.target.root, 'mouseleave', this._onMouseLeave.bind(this, activeTarget.target));\n }\n }\n }\n else {\n this._dragData = null;\n }\n };\n /**\n * determine whether the child target is a descendant of the parent\n */\n DragDropHelper.prototype._isChild = function (parentElement, childElement) {\n while (childElement && childElement.parentElement) {\n if (childElement.parentElement === parentElement) {\n return true;\n }\n childElement = childElement.parentElement;\n }\n return false;\n };\n DragDropHelper.prototype._isDraggable = function (target) {\n var options = target.options;\n return !!(options.canDrag && options.canDrag(options.context.data));\n };\n DragDropHelper.prototype._isDroppable = function (target) {\n // TODO: take the drag item into consideration to prevent dragging an item into the same group\n var options = target.options;\n var dragContext = this._dragData && this._dragData.dragTarget ? this._dragData.dragTarget.options.context : undefined;\n return !!(options.canDrop && options.canDrop(options.context, dragContext));\n };\n return DragDropHelper;\n}());\nexport { DragDropHelper };\n//# sourceMappingURL=DragDropHelper.js.map","import { __assign, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { Icon, FontIcon } from '../../Icon';\nimport { initializeComponentRef, EventGroup, Async, classNamesFunction, composeRenderFunction } from '../../Utilities';\nimport { ColumnActionsMode } from './DetailsList.types';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nvar MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nvar getClassNames = classNamesFunction();\nvar TRANSITION_DURATION_DRAG = 200; // ms\nvar TRANSITION_DURATION_DROP = 1500; // ms\nvar CLASSNAME_ADD_INTERVAL = 20; // ms\nvar defaultOnRenderHeader = function (classNames) { return function (props) {\n if (!props) {\n return null;\n }\n if (props.column.isIconOnly) {\n return React.createElement(\"span\", { className: classNames.accessibleLabel }, props.column.name);\n }\n return React.createElement(React.Fragment, null, props.column.name);\n}; };\n/**\n * Component for rendering columns in a `DetailsList`.\n *\n * {@docCategory DetailsList}\n */\nvar DetailsColumnBase = /** @class */ (function (_super) {\n __extends(DetailsColumnBase, _super);\n function DetailsColumnBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._onRenderFilterIcon = function (classNames) { return function (props) {\n var columnProps = props.columnProps, iconProps = __rest(props, [\"columnProps\"]);\n var IconComponent = (columnProps === null || columnProps === void 0 ? void 0 : columnProps.useFastIcons) ? FontIcon : Icon;\n return React.createElement(IconComponent, __assign({}, iconProps));\n }; };\n _this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {\n return React.createElement(\"span\", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);\n };\n _this._onColumnClick = function (ev) {\n var _a = _this.props, onColumnClick = _a.onColumnClick, column = _a.column;\n if (column.columnActionsMode === ColumnActionsMode.disabled) {\n return;\n }\n if (column.onColumnClick) {\n column.onColumnClick(ev, column);\n }\n if (onColumnClick) {\n onColumnClick(ev, column);\n }\n };\n _this._onDragStart = function (item, itemIndex, selectedItems, event) {\n var classNames = _this._classNames;\n if (itemIndex) {\n _this._updateHeaderDragInfo(itemIndex);\n _this._root.current.classList.add(classNames.borderWhileDragging);\n _this._async.setTimeout(function () {\n if (_this._root.current) {\n _this._root.current.classList.add(classNames.noBorderWhileDragging);\n }\n }, CLASSNAME_ADD_INTERVAL);\n }\n };\n _this._onDragEnd = function (item, event) {\n var classNames = _this._classNames;\n if (event) {\n _this._updateHeaderDragInfo(-1, event);\n }\n _this._root.current.classList.remove(classNames.borderWhileDragging);\n _this._root.current.classList.remove(classNames.noBorderWhileDragging);\n };\n _this._updateHeaderDragInfo = function (itemIndex, event) {\n /* eslint-disable deprecation/deprecation */\n if (_this.props.setDraggedItemIndex) {\n _this.props.setDraggedItemIndex(itemIndex);\n }\n /* eslint-enable deprecation/deprecation */\n if (_this.props.updateDragInfo) {\n _this.props.updateDragInfo({ itemIndex: itemIndex }, event);\n }\n };\n _this._onColumnContextMenu = function (ev) {\n var _a = _this.props, onColumnContextMenu = _a.onColumnContextMenu, column = _a.column;\n if (column.onColumnContextMenu) {\n column.onColumnContextMenu(column, ev);\n ev.preventDefault();\n }\n if (onColumnContextMenu) {\n onColumnContextMenu(column, ev);\n ev.preventDefault();\n }\n };\n _this._onRootMouseDown = function (ev) {\n var isDraggable = _this.props.isDraggable;\n // Ignore anything except the primary button.\n if (isDraggable && ev.button === MOUSEDOWN_PRIMARY_BUTTON) {\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n return _this;\n }\n DetailsColumnBase.prototype.render = function () {\n var _a = this.props, column = _a.column, columnIndex = _a.columnIndex, parentId = _a.parentId, isDraggable = _a.isDraggable, styles = _a.styles, theme = _a.theme, _b = _a.cellStyleProps, cellStyleProps = _b === void 0 ? DEFAULT_CELL_STYLE_PROPS : _b, _c = _a.useFastIcons, useFastIcons = _c === void 0 ? true : _c;\n var _d = this.props.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _d === void 0 ? this._onRenderColumnHeaderTooltip : _d;\n this._classNames = getClassNames(styles, {\n theme: theme,\n headerClassName: column.headerClassName,\n iconClassName: column.iconClassName,\n isActionable: column.columnActionsMode !== ColumnActionsMode.disabled,\n isEmpty: !column.name,\n isIconVisible: column.isSorted || column.isGrouped || column.isFiltered,\n isPadded: column.isPadded,\n isIconOnly: column.isIconOnly,\n cellStyleProps: cellStyleProps,\n transitionDurationDrag: TRANSITION_DURATION_DRAG,\n transitionDurationDrop: TRANSITION_DURATION_DROP,\n });\n var classNames = this._classNames;\n var IconComponent = useFastIcons ? FontIcon : Icon;\n var onRenderFilterIcon = column.onRenderFilterIcon\n ? composeRenderFunction(column.onRenderFilterIcon, this._onRenderFilterIcon(this._classNames))\n : this._onRenderFilterIcon(this._classNames);\n var onRenderHeader = column.onRenderHeader\n ? composeRenderFunction(column.onRenderHeader, defaultOnRenderHeader(this._classNames))\n : defaultOnRenderHeader(this._classNames);\n var hasInnerButton = column.columnActionsMode !== ColumnActionsMode.disabled &&\n (column.onColumnClick !== undefined || this.props.onColumnClick !== undefined);\n var accNameDescription = {\n 'aria-label': column.isIconOnly ? column.name : undefined,\n 'aria-labelledby': column.isIconOnly ? undefined : parentId + \"-\" + column.key + \"-name\",\n 'aria-describedby': !this.props.onRenderColumnHeaderTooltip && this._hasAccessibleLabel()\n ? parentId + \"-\" + column.key + \"-tooltip\"\n : undefined,\n };\n return (React.createElement(React.Fragment, null,\n React.createElement(\"div\", __assign({ key: column.key, ref: this._root, role: 'columnheader' }, (!hasInnerButton && accNameDescription), { \"aria-sort\": column.isSorted ? (column.isSortedDescending ? 'descending' : 'ascending') : 'none', \"aria-colindex\": columnIndex, \"data-is-focusable\": !hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined, className: classNames.root, \"data-is-draggable\": isDraggable, draggable: isDraggable, style: {\n width: column.calculatedWidth +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0),\n }, \"data-automationid\": 'ColumnsHeaderColumn', \"data-item-key\": column.key }),\n isDraggable && (React.createElement(IconComponent, { iconName: \"GripperBarVertical\", className: classNames.gripperBarVerticalStyle })),\n onRenderColumnHeaderTooltip({\n hostClassName: classNames.cellTooltip,\n id: parentId + \"-\" + column.key + \"-tooltip\",\n setAriaDescribedBy: false,\n column: column,\n content: column.columnActionsMode !== ColumnActionsMode.disabled ? column.ariaLabel : '',\n children: (React.createElement(\"span\", __assign({ id: parentId + \"-\" + column.key, className: classNames.cellTitle, \"data-is-focusable\": hasInnerButton && column.columnActionsMode !== ColumnActionsMode.disabled ? 'true' : undefined, role: hasInnerButton ? 'button' : undefined }, (hasInnerButton && accNameDescription), { onContextMenu: this._onColumnContextMenu, onClick: this._onColumnClick, \"aria-haspopup\": column.columnActionsMode === ColumnActionsMode.hasDropdown ? 'menu' : undefined, \"aria-expanded\": column.columnActionsMode === ColumnActionsMode.hasDropdown ? !!column.isMenuOpen : undefined }),\n React.createElement(\"span\", { id: parentId + \"-\" + column.key + \"-name\", className: classNames.cellName },\n (column.iconName || column.iconClassName) && (React.createElement(IconComponent, { className: classNames.iconClassName, iconName: column.iconName })),\n onRenderHeader(this.props)),\n column.isFiltered && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: \"Filter\" }),\n column.isSorted && (React.createElement(IconComponent, { className: classNames.sortIcon, iconName: column.isSortedDescending ? 'SortDown' : 'SortUp' })),\n column.isGrouped && React.createElement(IconComponent, { className: classNames.nearIcon, iconName: \"GroupedDescending\" }),\n column.columnActionsMode === ColumnActionsMode.hasDropdown &&\n !column.isIconOnly &&\n onRenderFilterIcon({\n 'aria-hidden': true,\n columnProps: this.props,\n className: classNames.filterChevron,\n iconName: 'ChevronDown',\n }))),\n }, this._onRenderColumnHeaderTooltip)),\n !this.props.onRenderColumnHeaderTooltip ? this._renderAccessibleLabel() : null));\n };\n DetailsColumnBase.prototype.componentDidMount = function () {\n var _this = this;\n if (this.props.dragDropHelper && this.props.isDraggable) {\n this._addDragDropHandling();\n }\n var classNames = this._classNames;\n if (this.props.isDropped) {\n if (this._root.current) {\n this._root.current.classList.add(classNames.borderAfterDropping);\n this._async.setTimeout(function () {\n if (_this._root.current) {\n _this._root.current.classList.add(classNames.noBorderAfterDropping);\n }\n }, CLASSNAME_ADD_INTERVAL);\n }\n this._async.setTimeout(function () {\n if (_this._root.current) {\n _this._root.current.classList.remove(classNames.borderAfterDropping);\n _this._root.current.classList.remove(classNames.noBorderAfterDropping);\n }\n }, TRANSITION_DURATION_DROP + CLASSNAME_ADD_INTERVAL);\n }\n };\n DetailsColumnBase.prototype.componentWillUnmount = function () {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n this._async.dispose();\n this._events.dispose();\n };\n DetailsColumnBase.prototype.componentDidUpdate = function () {\n if (!this._dragDropSubscription && this.props.dragDropHelper && this.props.isDraggable) {\n this._addDragDropHandling();\n }\n if (this._dragDropSubscription && !this.props.isDraggable) {\n this._dragDropSubscription.dispose();\n this._events.off(this._root.current, 'mousedown');\n delete this._dragDropSubscription;\n }\n };\n DetailsColumnBase.prototype._getColumnDragDropOptions = function () {\n var _this = this;\n var columnIndex = this.props.columnIndex;\n var options = {\n selectionIndex: columnIndex,\n context: { data: columnIndex, index: columnIndex },\n canDrag: function () { return _this.props.isDraggable; },\n canDrop: function () { return false; },\n onDragStart: this._onDragStart,\n updateDropState: function () { return undefined; },\n onDrop: function () { return undefined; },\n onDragEnd: this._onDragEnd,\n };\n return options;\n };\n DetailsColumnBase.prototype._hasAccessibleLabel = function () {\n var column = this.props.column;\n return !!(column.ariaLabel ||\n column.filterAriaLabel ||\n column.sortAscendingAriaLabel ||\n column.sortDescendingAriaLabel ||\n column.groupAriaLabel);\n };\n DetailsColumnBase.prototype._renderAccessibleLabel = function () {\n var _a = this.props, column = _a.column, parentId = _a.parentId;\n var classNames = this._classNames;\n return this._hasAccessibleLabel() && !this.props.onRenderColumnHeaderTooltip ? (React.createElement(\"label\", { key: column.key + \"_label\", id: parentId + \"-\" + column.key + \"-tooltip\", className: classNames.accessibleLabel },\n column.ariaLabel,\n (column.isFiltered && column.filterAriaLabel) || null,\n (column.isSorted &&\n (column.isSortedDescending ? column.sortDescendingAriaLabel : column.sortAscendingAriaLabel)) ||\n null,\n (column.isGrouped && column.groupAriaLabel) || null)) : null;\n };\n DetailsColumnBase.prototype._addDragDropHandling = function () {\n this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getColumnDragDropOptions());\n // We need to use native on this to prevent MarqueeSelection from handling the event before us.\n this._events.on(this._root.current, 'mousedown', this._onRootMouseDown);\n };\n return DetailsColumnBase;\n}(React.Component));\nexport { DetailsColumnBase };\n//# sourceMappingURL=DetailsColumn.base.js.map","import { __assign } from \"tslib\";\nimport { getFocusStyle, getGlobalClassNames, hiddenContentStyle, FontWeights } from '../../Styling';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport { getCellStyles } from './DetailsHeader.styles';\nvar GlobalClassNames = {\n isActionable: 'is-actionable',\n cellIsCheck: 'ms-DetailsHeader-cellIsCheck',\n collapseButton: 'ms-DetailsHeader-collapseButton',\n isCollapsed: 'is-collapsed',\n isAllSelected: 'is-allSelected',\n isSelectAllHidden: 'is-selectAllHidden',\n isResizingColumn: 'is-resizingColumn',\n isEmpty: 'is-empty',\n isIconVisible: 'is-icon-visible',\n cellSizer: 'ms-DetailsHeader-cellSizer',\n isResizing: 'is-resizing',\n dropHintCircleStyle: 'ms-DetailsHeader-dropHintCircleStyle',\n dropHintLineStyle: 'ms-DetailsHeader-dropHintLineStyle',\n cellTitle: 'ms-DetailsHeader-cellTitle',\n cellName: 'ms-DetailsHeader-cellName',\n filterChevron: 'ms-DetailsHeader-filterChevron',\n gripperBarVerticalStyle: 'ms-DetailsColumn-gripperBar',\n nearIcon: 'ms-DetailsColumn-nearIcon',\n};\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, headerClassName = props.headerClassName, iconClassName = props.iconClassName, isActionable = props.isActionable, isEmpty = props.isEmpty, isIconVisible = props.isIconVisible, isPadded = props.isPadded, isIconOnly = props.isIconOnly, _b = props.cellStyleProps, cellStyleProps = _b === void 0 ? DEFAULT_CELL_STYLE_PROPS : _b, transitionDurationDrag = props.transitionDurationDrag, transitionDurationDrop = props.transitionDurationDrop;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var colors = {\n iconForegroundColor: semanticColors.bodySubtext,\n headerForegroundColor: semanticColors.bodyText,\n headerBackgroundColor: semanticColors.bodyBackground,\n dropdownChevronForegroundColor: palette.neutralSecondary,\n resizerColor: palette.neutralTertiaryAlt,\n };\n var nearIconStyle = {\n color: colors.iconForegroundColor,\n opacity: 1,\n paddingLeft: 8,\n };\n var borderWhileDragging = {\n outline: \"1px solid \" + palette.themePrimary,\n };\n var borderAfterDragOrDrop = {\n outlineColor: 'transparent',\n };\n return {\n root: [\n getCellStyles(props),\n fonts.small,\n isActionable && [\n classNames.isActionable,\n {\n selectors: {\n ':hover': {\n color: semanticColors.bodyText,\n background: semanticColors.listHeaderBackgroundHovered,\n },\n ':active': {\n background: semanticColors.listHeaderBackgroundPressed,\n },\n },\n },\n ],\n isEmpty && [\n classNames.isEmpty,\n {\n textOverflow: 'clip',\n },\n ],\n isIconVisible && classNames.isIconVisible,\n isPadded && {\n paddingRight: cellStyleProps.cellExtraRightPadding + cellStyleProps.cellRightPadding,\n },\n {\n selectors: {\n ':hover i[data-icon-name=\"GripperBarVertical\"]': {\n display: 'block',\n },\n },\n },\n headerClassName,\n ],\n gripperBarVerticalStyle: {\n display: 'none',\n position: 'absolute',\n textAlign: 'left',\n color: palette.neutralTertiary,\n left: 1,\n },\n nearIcon: [classNames.nearIcon, nearIconStyle],\n sortIcon: [\n nearIconStyle,\n {\n paddingLeft: 4,\n position: 'relative',\n top: 1,\n },\n ],\n iconClassName: [\n {\n color: colors.iconForegroundColor,\n opacity: 1,\n },\n iconClassName,\n ],\n filterChevron: [\n classNames.filterChevron,\n {\n color: colors.dropdownChevronForegroundColor,\n paddingLeft: 6,\n verticalAlign: 'middle',\n fontSize: fonts.small.fontSize,\n },\n ],\n cellTitle: [\n classNames.cellTitle,\n getFocusStyle(theme),\n __assign({ display: 'flex', flexDirection: 'row', justifyContent: 'flex-start', alignItems: 'stretch', boxSizing: 'border-box', overflow: 'hidden', padding: \"0 \" + cellStyleProps.cellRightPadding + \"px 0 \" + cellStyleProps.cellLeftPadding + \"px\" }, (isIconOnly\n ? {\n alignContent: 'flex-end',\n maxHeight: '100%',\n flexWrap: 'wrap-reverse',\n }\n : {})),\n ],\n cellName: [\n classNames.cellName,\n {\n flex: '0 1 auto',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n fontWeight: FontWeights.semibold,\n fontSize: fonts.medium.fontSize,\n },\n isIconOnly && {\n selectors: (_a = {},\n _a[\".\" + classNames.nearIcon] = {\n paddingLeft: 0,\n },\n _a),\n },\n ],\n cellTooltip: {\n display: 'block',\n position: 'absolute',\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n },\n accessibleLabel: hiddenContentStyle,\n borderWhileDragging: borderWhileDragging,\n noBorderWhileDragging: [borderAfterDragOrDrop, { transition: \"outline \" + transitionDurationDrag + \"ms ease\" }],\n borderAfterDropping: borderWhileDragging,\n noBorderAfterDropping: [borderAfterDragOrDrop, { transition: \"outline \" + transitionDurationDrop + \"ms ease\" }],\n };\n};\n//# sourceMappingURL=DetailsColumn.styles.js.map","import { styled } from '../../Utilities';\nimport { DetailsColumnBase } from './DetailsColumn.base';\nimport { getStyles } from './DetailsColumn.styles';\nexport var DetailsColumn = styled(DetailsColumnBase, getStyles, undefined, { scope: 'DetailsColumn' });\n//# sourceMappingURL=DetailsColumn.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, EventGroup, css, getRTL, getId, KeyCodes, classNamesFunction } from '../../Utilities';\nimport { ColumnDragEndLocation, CheckboxVisibility } from './DetailsList.types';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Icon, FontIcon } from '../../Icon';\nimport { Layer } from '../../Layer';\nimport { GroupSpacer } from '../GroupedList/GroupSpacer';\nimport { CollapseAllVisibility } from '../../GroupedList';\nimport { DetailsRowCheck } from './DetailsRowCheck';\nimport { SelectionMode, SELECTION_CHANGE } from '../../Selection';\nimport { DragDropHelper } from '../../DragDrop';\nimport { DetailsColumn } from '../../components/DetailsList/DetailsColumn';\nimport { SelectAllVisibility } from './DetailsHeader.types';\nvar getClassNames = classNamesFunction();\nvar MOUSEDOWN_PRIMARY_BUTTON = 0; // for mouse down event we are using ev.button property, 0 means left button\nvar MOUSEMOVE_PRIMARY_BUTTON = 1; // for mouse move event we are using ev.buttons property, 1 means left button\nvar NO_COLUMNS = [];\nvar DetailsHeaderBase = /** @class */ (function (_super) {\n __extends(DetailsHeaderBase, _super);\n function DetailsHeaderBase(props) {\n var _this = _super.call(this, props) || this;\n _this._rootElement = React.createRef();\n _this._rootComponent = React.createRef();\n _this._draggedColumnIndex = -1;\n _this._dropHintDetails = {};\n _this._updateDroppingState = function (newValue, event) {\n if (_this._draggedColumnIndex >= 0 && event.type !== 'drop' && !newValue) {\n _this._resetDropHints();\n }\n };\n _this._onDragOver = function (item, event) {\n if (_this._draggedColumnIndex >= 0) {\n event.stopPropagation();\n _this._computeDropHintToBeShown(event.clientX);\n }\n };\n _this._onDrop = function (item, event) {\n // Safe to assume this is defined since we're handling a drop event\n var columnReorderProps = _this._getColumnReorderProps();\n // Target index will not get changed if draggeditem is after target item.\n if (_this._draggedColumnIndex >= 0 && event) {\n var targetIndex = _this._draggedColumnIndex > _this._currentDropHintIndex\n ? _this._currentDropHintIndex\n : _this._currentDropHintIndex - 1;\n var isValidDrop = _this._isValidCurrentDropHintIndex();\n event.stopPropagation();\n if (isValidDrop) {\n _this._onDropIndexInfo.sourceIndex = _this._draggedColumnIndex;\n _this._onDropIndexInfo.targetIndex = targetIndex;\n if (columnReorderProps.onColumnDrop) {\n var dragDropDetails = {\n draggedIndex: _this._draggedColumnIndex,\n targetIndex: targetIndex,\n };\n columnReorderProps.onColumnDrop(dragDropDetails);\n /* eslint-disable deprecation/deprecation */\n }\n else if (columnReorderProps.handleColumnReorder) {\n columnReorderProps.handleColumnReorder(_this._draggedColumnIndex, targetIndex);\n /* eslint-enable deprecation/deprecation */\n }\n }\n }\n _this._resetDropHints();\n _this._dropHintDetails = {};\n _this._draggedColumnIndex = -1;\n };\n _this._updateDragInfo = function (props, event) {\n // Safe to assume this is defined since we're handling a drag event\n var columnReorderProps = _this._getColumnReorderProps();\n var itemIndex = props.itemIndex;\n if (itemIndex >= 0) {\n // Column index is set based on the checkbox\n _this._draggedColumnIndex = _this._isCheckboxColumnHidden() ? itemIndex - 1 : itemIndex - 2;\n _this._getDropHintPositions();\n if (columnReorderProps.onColumnDragStart) {\n columnReorderProps.onColumnDragStart(true);\n }\n }\n else if (event && _this._draggedColumnIndex >= 0) {\n _this._resetDropHints();\n _this._draggedColumnIndex = -1;\n _this._dropHintDetails = {};\n if (columnReorderProps.onColumnDragEnd) {\n var columnDragEndLocation = _this._isEventOnHeader(event);\n columnReorderProps.onColumnDragEnd({ dropLocation: columnDragEndLocation }, event);\n }\n }\n };\n _this._getDropHintPositions = function () {\n var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n // Safe to assume this is defined since we're handling a drag/drop event\n var columnReorderProps = _this._getColumnReorderProps();\n var prevX = 0;\n var prevMid = 0;\n var prevRef;\n var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;\n var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;\n for (var i = frozenColumnCountFromStart; i < columns.length - frozenColumnCountFromEnd + 1; i++) {\n if (_this._rootElement.current) {\n var dropHintElement = _this._rootElement.current.querySelectorAll('#columnDropHint_' + i)[0];\n if (dropHintElement) {\n if (i === frozenColumnCountFromStart) {\n prevX = dropHintElement.offsetLeft;\n prevMid = dropHintElement.offsetLeft;\n prevRef = dropHintElement;\n }\n else {\n var newMid = (dropHintElement.offsetLeft + prevX) / 2;\n _this._dropHintDetails[i - 1] = {\n originX: prevX,\n startX: prevMid,\n endX: newMid,\n dropHintElementRef: prevRef,\n };\n prevMid = newMid;\n prevRef = dropHintElement;\n prevX = dropHintElement.offsetLeft;\n if (i === columns.length - frozenColumnCountFromEnd) {\n _this._dropHintDetails[i] = {\n originX: prevX,\n startX: prevMid,\n endX: dropHintElement.offsetLeft,\n dropHintElementRef: prevRef,\n };\n }\n }\n }\n }\n }\n };\n /**\n * Based on the given cursor position, finds the nearest drop hint and updates the state to make it visible\n */\n _this._computeDropHintToBeShown = function (clientX) {\n var isRtl = getRTL(_this.props.theme);\n if (_this._rootElement.current) {\n var clientRect = _this._rootElement.current.getBoundingClientRect();\n var headerOriginX = clientRect.left;\n var eventXRelativePosition = clientX - headerOriginX;\n var currentDropHintIndex = _this._currentDropHintIndex;\n if (_this._isValidCurrentDropHintIndex()) {\n if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex].startX, _this._dropHintDetails[currentDropHintIndex].endX)) {\n return;\n }\n }\n var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n // Safe to assume this is defined since we're handling a drag/drop event\n var columnReorderProps = _this._getColumnReorderProps();\n var frozenColumnCountFromStart = columnReorderProps.frozenColumnCountFromStart || 0;\n var frozenColumnCountFromEnd = columnReorderProps.frozenColumnCountFromEnd || 0;\n var currentIndex = frozenColumnCountFromStart;\n var lastValidColumn = columns.length - frozenColumnCountFromEnd;\n var indexToUpdate = -1;\n if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[currentIndex].endX)) {\n indexToUpdate = currentIndex;\n }\n else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[lastValidColumn].startX)) {\n indexToUpdate = lastValidColumn;\n }\n else if (_this._isValidCurrentDropHintIndex()) {\n if (_this._dropHintDetails[currentDropHintIndex + 1] &&\n _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex + 1].startX, _this._dropHintDetails[currentDropHintIndex + 1].endX)) {\n indexToUpdate = currentDropHintIndex + 1;\n }\n else if (_this._dropHintDetails[currentDropHintIndex - 1] &&\n _liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[currentDropHintIndex - 1].startX, _this._dropHintDetails[currentDropHintIndex - 1].endX)) {\n indexToUpdate = currentDropHintIndex - 1;\n }\n }\n if (indexToUpdate === -1) {\n var startIndex = frozenColumnCountFromStart;\n var endIndex = lastValidColumn;\n while (startIndex < endIndex) {\n var middleIndex = Math.ceil((endIndex + startIndex) / 2);\n if (_liesBetween(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].startX, _this._dropHintDetails[middleIndex].endX)) {\n indexToUpdate = middleIndex;\n break;\n }\n else if (_isBefore(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {\n endIndex = middleIndex;\n }\n else if (_isAfter(isRtl, eventXRelativePosition, _this._dropHintDetails[middleIndex].originX)) {\n startIndex = middleIndex;\n }\n }\n }\n if (indexToUpdate === _this._draggedColumnIndex || indexToUpdate === _this._draggedColumnIndex + 1) {\n if (_this._isValidCurrentDropHintIndex()) {\n _this._resetDropHints();\n }\n }\n else if (currentDropHintIndex !== indexToUpdate && indexToUpdate >= 0) {\n _this._resetDropHints();\n _this._updateDropHintElement(_this._dropHintDetails[indexToUpdate].dropHintElementRef, 'inline-block');\n _this._currentDropHintIndex = indexToUpdate;\n }\n }\n };\n _this._renderColumnSizer = function (_a) {\n var _b;\n var columnIndex = _a.columnIndex;\n var _c = _this.props.columns, columns = _c === void 0 ? NO_COLUMNS : _c;\n var column = columns[columnIndex];\n var columnResizeDetails = _this.state.columnResizeDetails;\n var classNames = _this._classNames;\n return column.isResizable ? (React.createElement(\"div\", { key: column.key + \"_sizer\", \"aria-hidden\": true, role: \"button\", \"data-is-focusable\": false, onClick: _stopPropagation, \"data-sizer-index\": columnIndex, onBlur: _this._onSizerBlur, className: css(classNames.cellSizer, columnIndex < columns.length - 1 ? classNames.cellSizerStart : classNames.cellSizerEnd, (_b = {},\n _b[classNames.cellIsResizing] = columnResizeDetails && columnResizeDetails.columnIndex === columnIndex,\n _b)), onDoubleClick: _this._onSizerDoubleClick.bind(_this, columnIndex) })) : null;\n };\n _this._onRenderColumnHeaderTooltip = function (tooltipHostProps) {\n return React.createElement(\"span\", { className: tooltipHostProps.hostClassName }, tooltipHostProps.children);\n };\n /**\n * Called when the select all toggle is clicked.\n */\n _this._onSelectAllClicked = function () {\n var selection = _this.props.selection;\n if (selection) {\n selection.toggleAllSelected();\n }\n };\n _this._onRootMouseDown = function (ev) {\n var columnIndexAttr = ev.target.getAttribute('data-sizer-index');\n var columnIndex = Number(columnIndexAttr);\n var _a = _this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n if (columnIndexAttr === null || ev.button !== MOUSEDOWN_PRIMARY_BUTTON) {\n // Ignore anything except the primary button.\n return;\n }\n _this.setState({\n columnResizeDetails: {\n columnIndex: columnIndex,\n columnMinWidth: columns[columnIndex].calculatedWidth,\n originX: ev.clientX,\n },\n });\n ev.preventDefault();\n ev.stopPropagation();\n };\n _this._onRootMouseMove = function (ev) {\n var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;\n if (columnResizeDetails && !isSizing && ev.clientX !== columnResizeDetails.originX) {\n _this.setState({ isSizing: true });\n }\n };\n _this._onRootKeyDown = function (ev) {\n var _a = _this.state, columnResizeDetails = _a.columnResizeDetails, isSizing = _a.isSizing;\n var _b = _this.props, _c = _b.columns, columns = _c === void 0 ? NO_COLUMNS : _c, onColumnResized = _b.onColumnResized;\n var columnIndexAttr = ev.target.getAttribute('data-sizer-index');\n if (!columnIndexAttr || isSizing) {\n return;\n }\n var columnIndex = Number(columnIndexAttr);\n if (!columnResizeDetails) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this.setState({\n columnResizeDetails: {\n columnIndex: columnIndex,\n columnMinWidth: columns[columnIndex].calculatedWidth,\n },\n });\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n else {\n var increment = void 0;\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n _this.setState({\n columnResizeDetails: undefined,\n });\n ev.preventDefault();\n ev.stopPropagation();\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.left) {\n increment = getRTL(_this.props.theme) ? 1 : -1;\n // eslint-disable-next-line deprecation/deprecation\n }\n else if (ev.which === KeyCodes.right) {\n increment = getRTL(_this.props.theme) ? -1 : 1;\n }\n if (increment) {\n if (!ev.shiftKey) {\n increment *= 10;\n }\n _this.setState({\n columnResizeDetails: __assign(__assign({}, columnResizeDetails), { columnMinWidth: columnResizeDetails.columnMinWidth + increment }),\n });\n if (onColumnResized) {\n onColumnResized(columns[columnIndex], columnResizeDetails.columnMinWidth + increment, columnIndex);\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n /**\n * mouse move event handler in the header\n * it will set isSizing state to true when user clicked on the sizer and move the mouse.\n *\n * @param ev - mouse move event\n */\n _this._onSizerMouseMove = function (ev) {\n var \n // use buttons property here since ev.button in some edge case is not upding well during the move.\n // but firefox doesn't support it, so we set the default value when it is not defined.\n buttons = ev.buttons;\n var _a = _this.props, onColumnIsSizingChanged = _a.onColumnIsSizingChanged, onColumnResized = _a.onColumnResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;\n var columnResizeDetails = _this.state.columnResizeDetails;\n if (buttons !== undefined && buttons !== MOUSEMOVE_PRIMARY_BUTTON) {\n // cancel mouse down event and return early when the primary button is not pressed\n _this._onSizerMouseUp(ev);\n return;\n }\n if (ev.clientX !== columnResizeDetails.originX) {\n if (onColumnIsSizingChanged) {\n onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], true);\n }\n }\n if (onColumnResized) {\n var movement = ev.clientX - columnResizeDetails.originX;\n if (getRTL(_this.props.theme)) {\n movement = -movement;\n }\n onColumnResized(columns[columnResizeDetails.columnIndex], columnResizeDetails.columnMinWidth + movement, columnResizeDetails.columnIndex);\n }\n };\n _this._onSizerBlur = function (ev) {\n var columnResizeDetails = _this.state.columnResizeDetails;\n if (columnResizeDetails) {\n _this.setState({\n columnResizeDetails: undefined,\n isSizing: false,\n });\n }\n };\n /**\n * mouse up event handler in the header\n * clear the resize related state.\n * This is to ensure we can catch double click event\n *\n * @param ev - mouse up event\n */\n _this._onSizerMouseUp = function (ev) {\n var _a = _this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, onColumnIsSizingChanged = _a.onColumnIsSizingChanged;\n var columnResizeDetails = _this.state.columnResizeDetails;\n _this.setState({\n columnResizeDetails: undefined,\n isSizing: false,\n });\n if (onColumnIsSizingChanged) {\n onColumnIsSizingChanged(columns[columnResizeDetails.columnIndex], false);\n }\n };\n _this._onToggleCollapseAll = function () {\n var onToggleCollapseAll = _this.props.onToggleCollapseAll;\n var newCollapsed = !_this.state.isAllCollapsed;\n _this.setState({\n isAllCollapsed: newCollapsed,\n });\n if (onToggleCollapseAll) {\n onToggleCollapseAll(newCollapsed);\n }\n };\n initializeComponentRef(_this);\n _this._events = new EventGroup(_this);\n _this.state = {\n columnResizeDetails: undefined,\n isAllCollapsed: _this.props.isAllCollapsed,\n isAllSelected: !!_this.props.selection && _this.props.selection.isAllSelected(),\n };\n _this._onDropIndexInfo = {\n sourceIndex: -1,\n targetIndex: -1,\n };\n _this._id = getId('header');\n _this._currentDropHintIndex = -1;\n // The drag drop handler won't do any work until subscribe() is called,\n // so always set it up for convenience\n _this._dragDropHelper = new DragDropHelper({\n selection: {\n getSelection: function () {\n return;\n },\n },\n minimumPixelsForDrag: _this.props.minimumPixelsForDrag,\n });\n return _this;\n }\n DetailsHeaderBase.prototype.componentDidMount = function () {\n var selection = this.props.selection;\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);\n // this._rootElement.current will be null in tests using react-test-renderer\n if (this._rootElement.current) {\n // We need to use native on this to prevent MarqueeSelection from handling the event before us.\n this._events.on(this._rootElement.current, 'mousedown', this._onRootMouseDown);\n this._events.on(this._rootElement.current, 'keydown', this._onRootKeyDown);\n if (this._getColumnReorderProps()) {\n this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());\n }\n }\n };\n DetailsHeaderBase.prototype.componentDidUpdate = function (prevProps) {\n if (this._getColumnReorderProps()) {\n if (!this._subscriptionObject && this._rootElement.current) {\n this._subscriptionObject = this._dragDropHelper.subscribe(this._rootElement.current, this._events, this._getHeaderDragDropOptions());\n }\n }\n else if (this._subscriptionObject) {\n this._subscriptionObject.dispose();\n delete this._subscriptionObject;\n }\n if (this.props !== prevProps && this._onDropIndexInfo.sourceIndex >= 0 && this._onDropIndexInfo.targetIndex >= 0) {\n var _a = prevProps.columns, previousColumns = _a === void 0 ? NO_COLUMNS : _a;\n var _b = this.props.columns, columns = _b === void 0 ? NO_COLUMNS : _b;\n if (previousColumns[this._onDropIndexInfo.sourceIndex].key === columns[this._onDropIndexInfo.targetIndex].key) {\n this._onDropIndexInfo = {\n sourceIndex: -1,\n targetIndex: -1,\n };\n }\n }\n if (this.props.isAllCollapsed !== prevProps.isAllCollapsed) {\n this.setState({ isAllCollapsed: this.props.isAllCollapsed });\n }\n };\n DetailsHeaderBase.prototype.componentWillUnmount = function () {\n if (this._subscriptionObject) {\n this._subscriptionObject.dispose();\n delete this._subscriptionObject;\n }\n this._dragDropHelper.dispose();\n this._events.dispose();\n };\n DetailsHeaderBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, ariaLabel = _a.ariaLabel, ariaLabelForToggleAllGroupsButton = _a.ariaLabelForToggleAllGroupsButton, ariaLabelForSelectAllCheckbox = _a.ariaLabelForSelectAllCheckbox, selectAllVisibility = _a.selectAllVisibility, ariaLabelForSelectionColumn = _a.ariaLabelForSelectionColumn, indentWidth = _a.indentWidth, onColumnClick = _a.onColumnClick, onColumnContextMenu = _a.onColumnContextMenu, _c = _a.onRenderColumnHeaderTooltip, onRenderColumnHeaderTooltip = _c === void 0 ? this._onRenderColumnHeaderTooltip : _c, styles = _a.styles, selectionMode = _a.selectionMode, theme = _a.theme, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, groupNestingDepth = _a.groupNestingDepth, useFastIcons = _a.useFastIcons, checkboxVisibility = _a.checkboxVisibility, className = _a.className;\n var _d = this.state, isAllSelected = _d.isAllSelected, columnResizeDetails = _d.columnResizeDetails, isSizing = _d.isSizing, isAllCollapsed = _d.isAllCollapsed;\n var showCheckbox = selectAllVisibility !== SelectAllVisibility.none;\n var isCheckboxHidden = selectAllVisibility === SelectAllVisibility.hidden;\n var isCheckboxAlwaysVisible = checkboxVisibility === CheckboxVisibility.always;\n var columnReorderProps = this._getColumnReorderProps();\n var frozenColumnCountFromStart = columnReorderProps && columnReorderProps.frozenColumnCountFromStart\n ? columnReorderProps.frozenColumnCountFromStart\n : 0;\n var frozenColumnCountFromEnd = columnReorderProps && columnReorderProps.frozenColumnCountFromEnd\n ? columnReorderProps.frozenColumnCountFromEnd\n : 0;\n this._classNames = getClassNames(styles, {\n theme: theme,\n isAllSelected: isAllSelected,\n isSelectAllHidden: selectAllVisibility === SelectAllVisibility.hidden,\n isResizingColumn: !!columnResizeDetails && isSizing,\n isSizing: isSizing,\n isAllCollapsed: isAllCollapsed,\n isCheckboxHidden: isCheckboxHidden,\n className: className,\n });\n var classNames = this._classNames;\n var IconComponent = useFastIcons ? FontIcon : Icon;\n var isRTL = getRTL(theme);\n return (React.createElement(FocusZone, { role: \"row\", \"aria-label\": ariaLabel, className: classNames.root, componentRef: this._rootComponent, elementRef: this._rootElement, onMouseMove: this._onRootMouseMove, \"data-automationid\": \"DetailsHeader\", direction: FocusZoneDirection.horizontal },\n showCheckbox\n ? [\n React.createElement(\"div\", { key: \"__checkbox\", className: classNames.cellIsCheck, \"aria-labelledby\": this._id + \"-checkTooltip\", onClick: !isCheckboxHidden ? this._onSelectAllClicked : undefined, \"aria-colindex\": 1, role: 'columnheader' }, onRenderColumnHeaderTooltip({\n hostClassName: classNames.checkTooltip,\n id: this._id + \"-checkTooltip\",\n setAriaDescribedBy: false,\n content: ariaLabelForSelectAllCheckbox,\n children: (React.createElement(DetailsRowCheck, { id: this._id + \"-check\", \"aria-label\": selectionMode === SelectionMode.multiple\n ? ariaLabelForSelectAllCheckbox\n : ariaLabelForSelectionColumn, \"data-is-focusable\": !isCheckboxHidden || undefined, isHeader: true, selected: isAllSelected, anySelected: false, canSelect: !isCheckboxHidden, className: classNames.check, onRenderDetailsCheckbox: onRenderDetailsCheckbox, useFastIcons: useFastIcons, isVisible: isCheckboxAlwaysVisible })),\n }, this._onRenderColumnHeaderTooltip)),\n !this.props.onRenderColumnHeaderTooltip ? (ariaLabelForSelectAllCheckbox && !isCheckboxHidden ? (React.createElement(\"label\", { key: \"__checkboxLabel\", id: this._id + \"-checkTooltip\", className: classNames.accessibleLabel, \"aria-hidden\": true }, ariaLabelForSelectAllCheckbox)) : ariaLabelForSelectionColumn && isCheckboxHidden ? (React.createElement(\"label\", { key: \"__checkboxLabel\", id: this._id + \"-checkTooltip\", className: classNames.accessibleLabel, \"aria-hidden\": true }, ariaLabelForSelectionColumn)) : null) : null,\n ]\n : null,\n groupNestingDepth > 0 && this.props.collapseAllVisibility === CollapseAllVisibility.visible ? (React.createElement(\"div\", { className: classNames.cellIsGroupExpander, onClick: this._onToggleCollapseAll, \"data-is-focusable\": true, \"aria-label\": ariaLabelForToggleAllGroupsButton, \"aria-expanded\": !isAllCollapsed, role: \"columnheader\" },\n React.createElement(IconComponent, { className: classNames.collapseButton, iconName: isRTL ? 'ChevronLeftMed' : 'ChevronRightMed' }))) : null,\n React.createElement(GroupSpacer, { indentWidth: indentWidth, role: \"gridcell\", count: groupNestingDepth - 1 }),\n columns.map(function (column, columnIndex) {\n var _isDraggable = columnReorderProps\n ? columnIndex >= frozenColumnCountFromStart && columnIndex < columns.length - frozenColumnCountFromEnd\n : false;\n return [\n columnReorderProps &&\n (_isDraggable || columnIndex === columns.length - frozenColumnCountFromEnd) &&\n _this._renderDropHint(columnIndex),\n React.createElement(DetailsColumn, { column: column, styles: column.styles, key: column.key, columnIndex: (showCheckbox ? 2 : 1) + columnIndex, parentId: _this._id, isDraggable: _isDraggable, updateDragInfo: _this._updateDragInfo, dragDropHelper: _this._dragDropHelper, onColumnClick: onColumnClick, onColumnContextMenu: onColumnContextMenu, \n // Do not render tooltips by default, but allow for override via props.\n onRenderColumnHeaderTooltip: _this.props.onRenderColumnHeaderTooltip, isDropped: _this._onDropIndexInfo.targetIndex === columnIndex, cellStyleProps: _this.props.cellStyleProps, useFastIcons: useFastIcons }),\n _this._renderColumnDivider(columnIndex),\n ];\n }),\n columnReorderProps && frozenColumnCountFromEnd === 0 && this._renderDropHint(columns.length),\n isSizing && (React.createElement(Layer, null,\n React.createElement(\"div\", { className: classNames.sizingOverlay, onMouseMove: this._onSizerMouseMove, onMouseUp: this._onSizerMouseUp })))));\n };\n /** Set focus to the active thing in the focus area. */\n DetailsHeaderBase.prototype.focus = function () {\n var _a;\n return !!((_a = this._rootComponent.current) === null || _a === void 0 ? void 0 : _a.focus());\n };\n /**\n * Gets column reorder props from this.props. If the calling code is part of setting up or\n * handling drag/drop events, it's safe to assume that this method's return value is defined\n * (because drag/drop handling will only be set up if reorder props are given).\n */\n DetailsHeaderBase.prototype._getColumnReorderProps = function () {\n var _a = this.props, columnReorderOptions = _a.columnReorderOptions, columnReorderProps = _a.columnReorderProps;\n return columnReorderProps || (columnReorderOptions && __assign(__assign({}, columnReorderOptions), { onColumnDragEnd: undefined }));\n };\n DetailsHeaderBase.prototype._getHeaderDragDropOptions = function () {\n var options = {\n selectionIndex: 1,\n context: { data: this, index: 0 },\n canDrag: function () { return false; },\n canDrop: function () { return true; },\n onDragStart: function () { return undefined; },\n updateDropState: this._updateDroppingState,\n onDrop: this._onDrop,\n onDragEnd: function () { return undefined; },\n onDragOver: this._onDragOver,\n };\n return options;\n };\n DetailsHeaderBase.prototype._isValidCurrentDropHintIndex = function () {\n return this._currentDropHintIndex >= 0;\n };\n /**\n * @returns whether or not the \"Select All\" checkbox column is hidden.\n */\n DetailsHeaderBase.prototype._isCheckboxColumnHidden = function () {\n var _a = this.props, selectionMode = _a.selectionMode, checkboxVisibility = _a.checkboxVisibility;\n return selectionMode === SelectionMode.none || checkboxVisibility === CheckboxVisibility.hidden;\n };\n DetailsHeaderBase.prototype._resetDropHints = function () {\n if (this._currentDropHintIndex >= 0) {\n this._updateDropHintElement(this._dropHintDetails[this._currentDropHintIndex].dropHintElementRef, 'none');\n this._currentDropHintIndex = -1;\n }\n };\n DetailsHeaderBase.prototype._updateDropHintElement = function (element, displayProperty) {\n element.childNodes[1].style.display = displayProperty;\n element.childNodes[0].style.display = displayProperty;\n };\n DetailsHeaderBase.prototype._isEventOnHeader = function (event) {\n if (this._rootElement.current) {\n var clientRect = this._rootElement.current.getBoundingClientRect();\n if (event.clientX > clientRect.left &&\n event.clientX < clientRect.right &&\n event.clientY > clientRect.top &&\n event.clientY < clientRect.bottom) {\n return ColumnDragEndLocation.header;\n }\n }\n };\n DetailsHeaderBase.prototype._renderColumnDivider = function (columnIndex) {\n var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n var column = columns[columnIndex];\n var onRenderDivider = column.onRenderDivider;\n return onRenderDivider\n ? onRenderDivider({ column: column, columnIndex: columnIndex }, this._renderColumnSizer)\n : this._renderColumnSizer({ column: column, columnIndex: columnIndex });\n };\n DetailsHeaderBase.prototype._renderDropHint = function (dropHintIndex) {\n var classNames = this._classNames;\n var IconComponent = this.props.useFastIcons ? FontIcon : Icon;\n return (React.createElement(\"div\", { key: 'dropHintKey', className: classNames.dropHintStyle, id: \"columnDropHint_\" + dropHintIndex },\n React.createElement(\"div\", { role: \"presentation\", key: \"dropHintCircleKey\", className: classNames.dropHintCaretStyle, \"data-is-focusable\": false, \"data-sizer-index\": dropHintIndex, \"aria-hidden\": true },\n React.createElement(IconComponent, { iconName: 'CircleShapeSolid' })),\n React.createElement(\"div\", { key: \"dropHintLineKey\", \"aria-hidden\": true, \"data-is-focusable\": false, \"data-sizer-index\": dropHintIndex, className: classNames.dropHintLineStyle })));\n };\n /**\n * double click on the column sizer will auto ajust column width\n * to fit the longest content among current rendered rows.\n *\n * @param columnIndex - index of the column user double clicked\n * @param ev - mouse double click event\n */\n DetailsHeaderBase.prototype._onSizerDoubleClick = function (columnIndex, ev) {\n var _a = this.props, onColumnAutoResized = _a.onColumnAutoResized, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b;\n if (onColumnAutoResized) {\n onColumnAutoResized(columns[columnIndex], columnIndex);\n }\n };\n DetailsHeaderBase.prototype._onSelectionChanged = function () {\n var isAllSelected = !!this.props.selection && this.props.selection.isAllSelected();\n if (this.state.isAllSelected !== isAllSelected) {\n this.setState({\n isAllSelected: isAllSelected,\n });\n }\n };\n DetailsHeaderBase.defaultProps = {\n selectAllVisibility: SelectAllVisibility.visible,\n collapseAllVisibility: CollapseAllVisibility.visible,\n useFastIcons: true,\n };\n return DetailsHeaderBase;\n}(React.Component));\nexport { DetailsHeaderBase };\nfunction _liesBetween(rtl, target, left, right) {\n return rtl ? target <= left && target >= right : target >= left && target <= right;\n}\nfunction _isBefore(rtl, a, b) {\n return rtl ? a >= b : a <= b;\n}\nfunction _isAfter(rtl, a, b) {\n return rtl ? a <= b : a >= b;\n}\nfunction _stopPropagation(ev) {\n ev.stopPropagation();\n}\n//# sourceMappingURL=DetailsHeader.base.js.map","import { styled } from '../../Utilities';\nimport { DetailsHeaderBase } from './DetailsHeader.base';\nimport { getStyles } from './DetailsHeader.styles';\nexport var DetailsHeader = styled(DetailsHeaderBase, getStyles, undefined, { scope: 'DetailsHeader' });\n//# sourceMappingURL=DetailsHeader.js.map","import * as React from 'react';\nimport { css } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nvar getCellText = function (item, column) {\n var value = item && column && column.fieldName ? item[column.fieldName] : '';\n if (value === null || value === undefined) {\n value = '';\n }\n if (typeof value === 'boolean') {\n return value.toString();\n }\n return value;\n};\n/**\n * Component for rendering a row's cells in a `DetailsList`.\n *\n * {@docCategory DetailsList}\n */\nexport var DetailsRowFields = function (props) {\n var columns = props.columns, columnStartIndex = props.columnStartIndex, rowClassNames = props.rowClassNames, _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a, item = props.item, itemIndex = props.itemIndex, onRenderItemColumn = props.onRenderItemColumn, getCellValueKey = props.getCellValueKey, cellsByColumn = props.cellsByColumn, enableUpdateAnimations = props.enableUpdateAnimations, rowHeaderId = props.rowHeaderId;\n var cellValueKeysRef = React.useRef();\n var cellValueKeys = cellValueKeysRef.current || (cellValueKeysRef.current = {});\n return (React.createElement(\"div\", { className: rowClassNames.fields, \"data-automationid\": \"DetailsRowFields\", role: \"presentation\" }, columns.map(function (column, columnIndex) {\n var width = typeof column.calculatedWidth === 'undefined'\n ? 'auto'\n : column.calculatedWidth +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0);\n var _a = column.onRender, onRender = _a === void 0 ? onRenderItemColumn : _a, _b = column.getValueKey, getValueKey = _b === void 0 ? getCellValueKey : _b;\n var cellContentsRender = cellsByColumn && column.key in cellsByColumn\n ? cellsByColumn[column.key]\n : onRender\n ? onRender(item, itemIndex, column)\n : getCellText(item, column);\n var previousValueKey = cellValueKeys[column.key];\n var cellValueKey = enableUpdateAnimations && getValueKey ? getValueKey(item, itemIndex, column) : undefined;\n var showAnimation = false;\n if (cellValueKey !== undefined && previousValueKey !== undefined && cellValueKey !== previousValueKey) {\n showAnimation = true;\n }\n cellValueKeys[column.key] = cellValueKey;\n // generate a key that auto-dirties when content changes, to force the container to re-render,\n // to trigger animation\n var key = \"\" + column.key + (cellValueKey !== undefined ? \"-\" + cellValueKey : '');\n return (React.createElement(\"div\", { key: key, id: column.isRowHeader ? rowHeaderId : undefined, role: column.isRowHeader ? 'rowheader' : 'gridcell', \"aria-readonly\": true, \"aria-colindex\": columnIndex + columnStartIndex + 1, className: css(column.className, column.isMultiline && rowClassNames.isMultiline, column.isRowHeader && rowClassNames.isRowHeader, rowClassNames.cell, column.isPadded ? rowClassNames.cellPadded : rowClassNames.cellUnpadded, showAnimation && rowClassNames.cellAnimation), style: { width: width }, \"data-automationid\": \"DetailsRowCell\", \"data-automation-key\": column.key }, cellContentsRender));\n })));\n};\n//# sourceMappingURL=DetailsRowFields.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, EventGroup, css, shallowCompare, getNativeProps, divProperties, } from '../../Utilities';\nimport { CheckboxVisibility } from './DetailsList.types';\nimport { DetailsRowCheck } from './DetailsRowCheck';\nimport { GroupSpacer } from '../GroupedList/GroupSpacer';\nimport { DetailsRowFields } from './DetailsRowFields';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { SelectionMode, SELECTION_CHANGE } from '../../Selection';\nimport { CollapseAllVisibility } from '../../GroupedList';\nimport { classNamesFunction } from '../../Utilities';\nimport { getId } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';\nvar NO_COLUMNS = [];\nvar DetailsRowBase = /** @class */ (function (_super) {\n __extends(DetailsRowBase, _super);\n function DetailsRowBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._cellMeasurer = React.createRef();\n _this._focusZone = React.createRef();\n _this._onSelectionChanged = function () {\n var selectionState = getSelectionState(_this.props);\n if (!shallowCompare(selectionState, _this.state.selectionState)) {\n _this.setState({\n selectionState: selectionState,\n });\n }\n };\n /**\n * update isDropping state based on the input value, which is used to change style during drag and drop\n *\n * when change to true, that means drag enter. we will add default dropping class name\n * or the custom dropping class name (return result from onDragEnter) to the root elemet.\n *\n * when change to false, that means drag leave. we will remove the dropping class name from root element.\n *\n * @param newValue - New isDropping state value\n * @param event - The event trigger dropping state change which can be dragenter, dragleave etc\n */\n _this._updateDroppingState = function (newValue, event) {\n var isDropping = _this.state.isDropping;\n var _a = _this.props, dragDropEvents = _a.dragDropEvents, item = _a.item;\n if (!newValue) {\n if (dragDropEvents.onDragLeave) {\n dragDropEvents.onDragLeave(item, event);\n }\n }\n else if (dragDropEvents.onDragEnter) {\n _this._droppingClassNames = dragDropEvents.onDragEnter(item, event);\n }\n if (isDropping !== newValue) {\n _this.setState({ isDropping: newValue });\n }\n };\n initializeComponentRef(_this);\n _this._events = new EventGroup(_this);\n _this.state = {\n selectionState: getSelectionState(props),\n columnMeasureInfo: undefined,\n isDropping: false,\n };\n _this._droppingClassNames = '';\n return _this;\n }\n DetailsRowBase.getDerivedStateFromProps = function (nextProps, previousState) {\n return __assign(__assign({}, previousState), { selectionState: getSelectionState(nextProps) });\n };\n DetailsRowBase.prototype.componentDidMount = function () {\n var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection, item = _a.item, onDidMount = _a.onDidMount;\n if (dragDropHelper && this._root.current) {\n this._dragDropSubscription = dragDropHelper.subscribe(this._root.current, this._events, this._getRowDragDropOptions());\n }\n if (selection) {\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChanged);\n }\n if (onDidMount && item) {\n // If the item appears later, we should wait for it before calling this method.\n this._onDidMountCalled = true;\n onDidMount(this);\n }\n };\n DetailsRowBase.prototype.componentDidUpdate = function (previousProps) {\n var state = this.state;\n var _a = this.props, item = _a.item, onDidMount = _a.onDidMount;\n var columnMeasureInfo = state.columnMeasureInfo;\n if (this.props.itemIndex !== previousProps.itemIndex ||\n this.props.item !== previousProps.item ||\n this.props.dragDropHelper !== previousProps.dragDropHelper) {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n if (this.props.dragDropHelper && this._root.current) {\n this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getRowDragDropOptions());\n }\n }\n if (columnMeasureInfo && columnMeasureInfo.index >= 0 && this._cellMeasurer.current) {\n var newWidth = this._cellMeasurer.current.getBoundingClientRect().width;\n columnMeasureInfo.onMeasureDone(newWidth);\n this.setState({\n columnMeasureInfo: undefined,\n });\n }\n if (item && onDidMount && !this._onDidMountCalled) {\n this._onDidMountCalled = true;\n onDidMount(this);\n }\n };\n DetailsRowBase.prototype.componentWillUnmount = function () {\n var _a = this.props, item = _a.item, onWillUnmount = _a.onWillUnmount;\n // Only call the onWillUnmount callback if we have an item.\n if (onWillUnmount && item) {\n onWillUnmount(this);\n }\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n this._events.dispose();\n };\n DetailsRowBase.prototype.shouldComponentUpdate = function (nextProps, nextState) {\n if (this.props.useReducedRowRenderer) {\n var newSelectionState = getSelectionState(nextProps);\n if (this.state.selectionState.isSelected !== newSelectionState.isSelected) {\n return true;\n }\n return !shallowCompare(this.props, nextProps);\n }\n else {\n return true;\n }\n };\n DetailsRowBase.prototype.render = function () {\n var _a = this.props, className = _a.className, _b = _a.columns, columns = _b === void 0 ? NO_COLUMNS : _b, dragDropEvents = _a.dragDropEvents, item = _a.item, itemIndex = _a.itemIndex, id = _a.id, _c = _a.flatIndexOffset, flatIndexOffset = _c === void 0 ? 2 : _c, _d = _a.onRenderCheck, onRenderCheck = _d === void 0 ? this._onRenderCheck : _d, onRenderDetailsCheckbox = _a.onRenderDetailsCheckbox, onRenderItemColumn = _a.onRenderItemColumn, getCellValueKey = _a.getCellValueKey, selectionMode = _a.selectionMode, _e = _a.rowWidth, rowWidth = _e === void 0 ? 0 : _e, checkboxVisibility = _a.checkboxVisibility, getRowAriaLabel = _a.getRowAriaLabel, getRowAriaDescription = _a.getRowAriaDescription, getRowAriaDescribedBy = _a.getRowAriaDescribedBy, checkButtonAriaLabel = _a.checkButtonAriaLabel, checkboxCellClassName = _a.checkboxCellClassName, \n /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */\n _f = _a.rowFieldsAs, \n /** Alias rowFieldsAs as RowFields and default to DetailsRowFields if rowFieldsAs does not exist */\n RowFields = _f === void 0 ? DetailsRowFields : _f, selection = _a.selection, indentWidth = _a.indentWidth, enableUpdateAnimations = _a.enableUpdateAnimations, compact = _a.compact, theme = _a.theme, styles = _a.styles, cellsByColumn = _a.cellsByColumn, groupNestingDepth = _a.groupNestingDepth, _g = _a.useFastIcons, useFastIcons = _g === void 0 ? true : _g, cellStyleProps = _a.cellStyleProps, group = _a.group, focusZoneProps = _a.focusZoneProps, _h = _a.disabled, disabled = _h === void 0 ? false : _h;\n var _j = this.state, columnMeasureInfo = _j.columnMeasureInfo, isDropping = _j.isDropping;\n var _k = this.state.selectionState, _l = _k.isSelected, isSelected = _l === void 0 ? false : _l, _m = _k.isSelectionModal, isSelectionModal = _m === void 0 ? false : _m;\n var isDraggable = dragDropEvents ? !!(dragDropEvents.canDrag && dragDropEvents.canDrag(item)) : undefined;\n var droppingClassName = isDropping ? this._droppingClassNames || DEFAULT_DROPPING_CSS_CLASS : '';\n var ariaLabel = getRowAriaLabel ? getRowAriaLabel(item) : undefined;\n var ariaRowDescription = getRowAriaDescription ? getRowAriaDescription(item) : undefined;\n var ariaDescribedBy = getRowAriaDescribedBy ? getRowAriaDescribedBy(item) : undefined;\n var canSelect = !!selection && selection.canSelectItem(item, itemIndex) && !disabled;\n var isContentUnselectable = selectionMode === SelectionMode.multiple;\n var showCheckbox = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden;\n var ariaSelected = selectionMode === SelectionMode.none ? undefined : isSelected;\n var ariaPositionInSet = group ? itemIndex - group.startIndex + 1 : undefined;\n var ariaSetSize = group ? group.count : undefined;\n var focusZoneDirection = focusZoneProps ? focusZoneProps.direction : FocusZoneDirection.horizontal;\n this._classNames = __assign(__assign({}, this._classNames), getClassNames(styles, {\n theme: theme,\n isSelected: isSelected,\n canSelect: !isContentUnselectable,\n anySelected: isSelectionModal,\n checkboxCellClassName: checkboxCellClassName,\n droppingClassName: droppingClassName,\n className: className,\n compact: compact,\n enableUpdateAnimations: enableUpdateAnimations,\n cellStyleProps: cellStyleProps,\n disabled: disabled,\n }));\n var rowClassNames = {\n isMultiline: this._classNames.isMultiline,\n isRowHeader: this._classNames.isRowHeader,\n cell: this._classNames.cell,\n cellAnimation: this._classNames.cellAnimation,\n cellPadded: this._classNames.cellPadded,\n cellUnpadded: this._classNames.cellUnpadded,\n fields: this._classNames.fields,\n };\n // Only re-assign rowClassNames when classNames have changed.\n // Otherwise, they will cause DetailsRowFields to unnecessarily\n // re-render, see https://github.com/microsoft/fluentui/pull/8799.\n // Refactor DetailsRowFields to generate own styles to remove need for this.\n if (!shallowCompare(this._rowClassNames || {}, rowClassNames)) {\n this._rowClassNames = rowClassNames;\n }\n var rowFields = (React.createElement(RowFields, { rowClassNames: this._rowClassNames, rowHeaderId: id + \"-header\", cellsByColumn: cellsByColumn, columns: columns, item: item, itemIndex: itemIndex, columnStartIndex: (showCheckbox ? 1 : 0) + (groupNestingDepth ? 1 : 0), onRenderItemColumn: onRenderItemColumn, getCellValueKey: getCellValueKey, enableUpdateAnimations: enableUpdateAnimations, cellStyleProps: cellStyleProps }));\n var defaultRole = 'row';\n var role = this.props.role ? this.props.role : defaultRole;\n this._ariaRowDescriptionId = getId('DetailsRow-description');\n return (React.createElement(FocusZone, __assign({ \"data-is-focusable\": true }, getNativeProps(this.props, divProperties), (typeof isDraggable === 'boolean'\n ? {\n 'data-is-draggable': isDraggable,\n draggable: isDraggable,\n }\n : {}), focusZoneProps, { direction: focusZoneDirection, elementRef: this._root, componentRef: this._focusZone, role: role, \"aria-label\": ariaLabel, \"aria-disabled\": disabled || undefined, \"aria-describedby\": ariaRowDescription ? this._ariaRowDescriptionId : ariaDescribedBy, className: this._classNames.root, \"data-selection-index\": itemIndex, \"data-selection-touch-invoke\": true, \"data-selection-disabled\": disabled || undefined, \"data-item-index\": itemIndex, \"aria-rowindex\": ariaPositionInSet === undefined ? itemIndex + flatIndexOffset : undefined, \"aria-level\": (groupNestingDepth && groupNestingDepth + 1) || undefined, \"aria-posinset\": ariaPositionInSet, \"aria-setsize\": ariaSetSize, \"data-automationid\": \"DetailsRow\", style: { minWidth: rowWidth }, \"aria-selected\": ariaSelected, allowFocusRoot: true }),\n ariaRowDescription ? (React.createElement(\"span\", { key: \"description\", role: \"presentation\", hidden: true, id: this._ariaRowDescriptionId }, ariaRowDescription)) : null,\n showCheckbox && (React.createElement(\"div\", { role: \"gridcell\", \"aria-colindex\": 1, \"data-selection-toggle\": true, className: this._classNames.checkCell }, onRenderCheck({\n id: id ? id + \"-checkbox\" : undefined,\n selected: isSelected,\n selectionMode: selectionMode,\n anySelected: isSelectionModal,\n 'aria-label': checkButtonAriaLabel,\n 'aria-labelledby': id ? id + \"-checkbox \" + id + \"-header\" : undefined,\n canSelect: canSelect,\n compact: compact,\n className: this._classNames.check,\n theme: theme,\n isVisible: checkboxVisibility === CheckboxVisibility.always,\n onRenderDetailsCheckbox: onRenderDetailsCheckbox,\n useFastIcons: useFastIcons,\n }))),\n React.createElement(GroupSpacer, { indentWidth: indentWidth, role: \"gridcell\", count: groupNestingDepth - (this.props.collapseAllVisibility === CollapseAllVisibility.hidden ? 1 : 0) }),\n item && rowFields,\n columnMeasureInfo && (React.createElement(\"span\", { role: \"presentation\", className: css(this._classNames.cellMeasurer, this._classNames.cell), ref: this._cellMeasurer },\n React.createElement(RowFields, { rowClassNames: this._rowClassNames, rowHeaderId: id + \"-header\", columns: [columnMeasureInfo.column], item: item, itemIndex: itemIndex, columnStartIndex: (showCheckbox ? 1 : 0) + (groupNestingDepth ? 1 : 0) + columns.length, onRenderItemColumn: onRenderItemColumn, getCellValueKey: getCellValueKey }))),\n React.createElement(\"span\", { role: \"checkbox\", className: this._classNames.checkCover, \"aria-checked\": isSelected, \"data-selection-toggle\": true })));\n };\n /**\n * measure cell at index. and call the call back with the measured cell width when finish measure\n *\n * @param index - The cell index\n * @param onMeasureDone - The call back function when finish measure\n */\n DetailsRowBase.prototype.measureCell = function (index, onMeasureDone) {\n var _a = this.props.columns, columns = _a === void 0 ? NO_COLUMNS : _a;\n var column = __assign({}, columns[index]);\n column.minWidth = 0;\n column.maxWidth = 999999;\n delete column.calculatedWidth;\n this.setState({\n columnMeasureInfo: {\n index: index,\n column: column,\n onMeasureDone: onMeasureDone,\n },\n });\n };\n DetailsRowBase.prototype.focus = function (forceIntoFirstElement) {\n var _a;\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n return !!((_a = this._focusZone.current) === null || _a === void 0 ? void 0 : _a.focus(forceIntoFirstElement));\n };\n DetailsRowBase.prototype._onRenderCheck = function (props) {\n return React.createElement(DetailsRowCheck, __assign({}, props));\n };\n DetailsRowBase.prototype._getRowDragDropOptions = function () {\n var _a = this.props, item = _a.item, itemIndex = _a.itemIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;\n var options = {\n eventMap: eventsToRegister,\n selectionIndex: itemIndex,\n context: { data: item, index: itemIndex },\n canDrag: dragDropEvents.canDrag,\n canDrop: dragDropEvents.canDrop,\n onDragStart: dragDropEvents.onDragStart,\n updateDropState: this._updateDroppingState,\n onDrop: dragDropEvents.onDrop,\n onDragEnd: dragDropEvents.onDragEnd,\n onDragOver: dragDropEvents.onDragOver,\n };\n return options;\n };\n return DetailsRowBase;\n}(React.Component));\nexport { DetailsRowBase };\nfunction getSelectionState(props) {\n var _a;\n var itemIndex = props.itemIndex, selection = props.selection;\n return {\n isSelected: !!(selection === null || selection === void 0 ? void 0 : selection.isIndexSelected(itemIndex)),\n isSelectionModal: !!((_a = selection === null || selection === void 0 ? void 0 : selection.isModal) === null || _a === void 0 ? void 0 : _a.call(selection)),\n };\n}\n//# sourceMappingURL=DetailsRow.base.js.map","import { styled } from '../../Utilities';\nimport { DetailsRowBase } from './DetailsRow.base';\nimport { getDetailsRowStyles } from './DetailsRow.styles';\nexport var DetailsRow = styled(DetailsRowBase, getDetailsRowStyles, undefined, {\n scope: 'DetailsRow',\n});\n//# sourceMappingURL=DetailsRow.js.map","import { getGlobalClassNames, AnimationVariables } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-GroupedList',\n compact: 'ms-GroupedList--Compact',\n group: 'ms-GroupedList-group',\n link: 'ms-Link',\n listCell: 'ms-List-cell',\n};\nvar beziers = {\n easeInOutSine: 'cubic-bezier(0.445, 0.050, 0.550, 0.950)',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, compact = props.compact;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.small,\n {\n position: 'relative',\n selectors: (_a = {},\n _a[\".\" + classNames.listCell] = {\n minHeight: 38,\n },\n _a),\n },\n compact && [\n classNames.compact,\n {\n selectors: (_b = {},\n _b[\".\" + classNames.listCell] = {\n minHeight: 32,\n },\n _b),\n },\n ],\n className,\n ],\n group: [\n classNames.group,\n {\n transition: \"background-color \" + AnimationVariables.durationValue2 + \" \" + beziers.easeInOutSine,\n },\n ],\n groupIsDropping: {\n backgroundColor: palette.neutralLight,\n },\n };\n};\n//# sourceMappingURL=GroupedList.styles.js.map","import { getGlobalClassNames, getFocusStyle, AnimationVariables, FontWeights, IconFontSizes } from '../../Styling';\nimport { getRTL, IsFocusVisibleClassName } from '../../Utilities';\nimport { DEFAULT_CELL_STYLE_PROPS } from '../DetailsList/DetailsRow.styles';\nimport { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as EXPAND_BUTTON_WIDTH } from './GroupSpacer';\nvar GlobalClassNames = {\n root: 'ms-GroupHeader',\n compact: 'ms-GroupHeader--compact',\n check: 'ms-GroupHeader-check',\n dropIcon: 'ms-GroupHeader-dropIcon',\n expand: 'ms-GroupHeader-expand',\n isCollapsed: 'is-collapsed',\n title: 'ms-GroupHeader-title',\n isSelected: 'is-selected',\n iconTag: 'ms-Icon--Tag',\n group: 'ms-GroupedList-group',\n isDropping: 'is-dropping',\n};\nvar beziers = {\n easeOutCirc: 'cubic-bezier(0.075, 0.820, 0.165, 1.000)',\n easeOutSine: 'cubic-bezier(0.390, 0.575, 0.565, 1.000)',\n easeInBack: 'cubic-bezier(0.600, -0.280, 0.735, 0.045)',\n};\nvar DEFAULT_GROUP_HEADER_HEIGHT = 48;\nvar COMPACT_GROUP_HEADER_HEIGHT = 40;\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, className = props.className, selected = props.selected, isCollapsed = props.isCollapsed, compact = props.compact;\n // padding from the source to align GroupHeader title with DetailsRow's first cell.\n var cellLeftPadding = DEFAULT_CELL_STYLE_PROPS.cellLeftPadding;\n var finalRowHeight = compact ? COMPACT_GROUP_HEADER_HEIGHT : DEFAULT_GROUP_HEADER_HEIGHT;\n var semanticColors = theme.semanticColors, palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var checkExpandResetStyles = [\n getFocusStyle(theme),\n {\n cursor: 'default',\n background: 'none',\n backgroundColor: 'transparent',\n border: 'none',\n padding: 0,\n },\n ];\n return {\n root: [\n classNames.root,\n getFocusStyle(theme),\n theme.fonts.medium,\n {\n // keep the border for height but color it so it's invisible.\n borderBottom: \"1px solid \" + semanticColors.listBackground,\n cursor: 'default',\n userSelect: 'none',\n selectors: (_a = {\n ':hover': {\n background: semanticColors.listItemBackgroundHovered,\n color: semanticColors.actionLinkHovered,\n }\n },\n _a[\"&:hover .\" + classNames.check] = {\n opacity: 1,\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus .\" + classNames.check] = {\n opacity: 1,\n },\n _a[\":global(.\" + classNames.group + \".\" + classNames.isDropping + \")\"] = {\n selectors: (_b = {},\n _b[\"& > .\" + classNames.root + \" .\" + classNames.dropIcon] = {\n transition: \"transform \" + AnimationVariables.durationValue4 + \" \" + beziers.easeOutCirc + \" \" +\n (\"opacity \" + AnimationVariables.durationValue1 + \" \" + beziers.easeOutSine),\n transitionDelay: AnimationVariables.durationValue3,\n opacity: 1,\n transform: \"rotate(0.2deg) scale(1);\",\n },\n _b[\".\" + classNames.check] = {\n opacity: 0,\n },\n _b),\n },\n _a),\n },\n selected && [\n classNames.isSelected,\n {\n background: semanticColors.listItemBackgroundChecked,\n selectors: (_c = {\n ':hover': {\n background: semanticColors.listItemBackgroundCheckedHovered,\n }\n },\n _c[\"\" + classNames.check] = {\n opacity: 1,\n },\n _c),\n },\n ],\n compact && [classNames.compact, { border: 'none' }],\n className,\n ],\n groupHeaderContainer: [\n {\n display: 'flex',\n alignItems: 'center',\n height: finalRowHeight,\n },\n ],\n headerCount: [\n {\n padding: '0px 4px',\n },\n ],\n check: [\n classNames.check,\n checkExpandResetStyles,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n // paddingTop and marginTop brought from the DetailsRow.styles.ts with explanation below.\n // Ensure that the check cell covers the top border of the cell.\n // This ensures the click target does not leave a spot which would\n // cause other items to be deselected.\n paddingTop: 1,\n marginTop: -1,\n opacity: 0,\n width: CHECK_CELL_WIDTH,\n height: finalRowHeight,\n selectors: (_d = {},\n _d[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n opacity: 1,\n },\n _d),\n },\n ],\n expand: [\n classNames.expand,\n checkExpandResetStyles,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n fontSize: fonts.small.fontSize,\n width: EXPAND_BUTTON_WIDTH,\n height: finalRowHeight,\n color: selected ? palette.neutralPrimary : palette.neutralSecondary,\n selectors: {\n ':hover': {\n backgroundColor: selected ? palette.neutralQuaternary : palette.neutralLight,\n },\n ':active': {\n backgroundColor: selected ? palette.neutralTertiaryAlt : palette.neutralQuaternaryAlt,\n },\n },\n },\n ],\n expandIsCollapsed: [\n isCollapsed\n ? [\n classNames.isCollapsed,\n {\n transform: 'rotate(0deg)',\n transformOrigin: '50% 50%',\n transition: 'transform .1s linear',\n },\n ]\n : {\n transform: getRTL(theme) ? 'rotate(-90deg)' : 'rotate(90deg)',\n transformOrigin: '50% 50%',\n transition: 'transform .1s linear',\n },\n ],\n title: [\n classNames.title,\n {\n paddingLeft: cellLeftPadding,\n fontSize: compact ? fonts.medium.fontSize : fonts.mediumPlus.fontSize,\n fontWeight: isCollapsed ? FontWeights.regular : FontWeights.semibold,\n cursor: 'pointer',\n outline: 0,\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n },\n ],\n dropIcon: [\n classNames.dropIcon,\n {\n position: 'absolute',\n left: -26,\n fontSize: IconFontSizes.large,\n color: palette.neutralSecondary,\n transition: \"transform \" + AnimationVariables.durationValue2 + \" \" + beziers.easeInBack + \", \" +\n (\"opacity \" + AnimationVariables.durationValue4 + \" \" + beziers.easeOutSine),\n opacity: 0,\n transform: 'rotate(0.2deg) scale(0.65)',\n transformOrigin: '10px 10px',\n selectors: (_e = {},\n _e[\":global(.\" + classNames.iconTag + \")\"] = {\n position: 'absolute',\n },\n _e),\n },\n ],\n };\n};\n//# sourceMappingURL=GroupHeader.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { composeRenderFunction, classNamesFunction, getId, getRTL, getRTLSafeKeyCode, KeyCodes } from '../../Utilities';\nimport { SelectionMode } from '../../Selection';\nimport { Check } from '../../Check';\nimport { Icon } from '../../Icon';\nimport { GroupSpacer } from './GroupSpacer';\nimport { Spinner } from '../../Spinner';\nimport { CHECK_CELL_WIDTH } from '../DetailsList/DetailsRowCheck.styles';\nvar getClassNames = classNamesFunction();\nvar GroupHeaderBase = /** @class */ (function (_super) {\n __extends(GroupHeaderBase, _super);\n function GroupHeaderBase(props) {\n var _this = _super.call(this, props) || this;\n _this._toggleCollapse = function () {\n var _a = _this.props, group = _a.group, onToggleCollapse = _a.onToggleCollapse, isGroupLoading = _a.isGroupLoading;\n var isCollapsed = _this.state.isCollapsed;\n var newCollapsed = !isCollapsed;\n var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(group);\n _this.setState({\n isCollapsed: newCollapsed,\n isLoadingVisible: newLoadingVisible,\n });\n if (onToggleCollapse) {\n onToggleCollapse(group);\n }\n };\n _this._onKeyUp = function (ev) {\n var _a = _this.props, group = _a.group, onGroupHeaderKeyUp = _a.onGroupHeaderKeyUp;\n if (onGroupHeaderKeyUp) {\n onGroupHeaderKeyUp(ev, group);\n }\n if (!ev.defaultPrevented) {\n // eslint-disable-next-line deprecation/deprecation\n var shouldOpen = _this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.right, _this.props.theme);\n // eslint-disable-next-line deprecation/deprecation\n var shouldClose = !_this.state.isCollapsed && ev.which === getRTLSafeKeyCode(KeyCodes.left, _this.props.theme);\n if (shouldClose || shouldOpen) {\n _this._toggleCollapse();\n ev.stopPropagation();\n ev.preventDefault();\n }\n }\n };\n _this._onToggleClick = function (ev) {\n _this._toggleCollapse();\n ev.stopPropagation();\n ev.preventDefault();\n };\n _this._onToggleSelectGroupClick = function (ev) {\n var _a = _this.props, onToggleSelectGroup = _a.onToggleSelectGroup, group = _a.group;\n if (onToggleSelectGroup) {\n onToggleSelectGroup(group);\n }\n ev.preventDefault();\n ev.stopPropagation();\n };\n _this._onHeaderClick = function () {\n var _a = _this.props, group = _a.group, onGroupHeaderClick = _a.onGroupHeaderClick, onToggleSelectGroup = _a.onToggleSelectGroup;\n if (onGroupHeaderClick) {\n onGroupHeaderClick(group);\n }\n else if (onToggleSelectGroup) {\n onToggleSelectGroup(group);\n }\n };\n _this._onRenderTitle = function (props) {\n var group = props.group, ariaColSpan = props.ariaColSpan;\n if (!group) {\n return null;\n }\n return (React.createElement(\"div\", { className: _this._classNames.title, id: _this._id, role: \"gridcell\", \"aria-colspan\": ariaColSpan },\n React.createElement(\"span\", null, group.name),\n React.createElement(\"span\", { className: _this._classNames.headerCount },\n \"(\",\n group.count,\n group.hasMoreData && '+',\n \")\")));\n };\n _this._id = getId('GroupHeader');\n _this.state = {\n isCollapsed: (_this.props.group && _this.props.group.isCollapsed),\n isLoadingVisible: false,\n };\n return _this;\n }\n GroupHeaderBase.getDerivedStateFromProps = function (nextProps, previousState) {\n if (nextProps.group) {\n var newCollapsed = nextProps.group.isCollapsed;\n var isGroupLoading = nextProps.isGroupLoading;\n var newLoadingVisible = !newCollapsed && isGroupLoading && isGroupLoading(nextProps.group);\n return __assign(__assign({}, previousState), { isCollapsed: newCollapsed || false, isLoadingVisible: newLoadingVisible || false });\n }\n return previousState;\n };\n GroupHeaderBase.prototype.render = function () {\n var _a = this.props, group = _a.group, _b = _a.groupLevel, groupLevel = _b === void 0 ? 0 : _b, viewport = _a.viewport, selectionMode = _a.selectionMode, loadingText = _a.loadingText, \n // eslint-disable-next-line deprecation/deprecation\n _c = _a.isSelected, \n // eslint-disable-next-line deprecation/deprecation\n isSelected = _c === void 0 ? false : _c, _d = _a.selected, selected = _d === void 0 ? false : _d, indentWidth = _a.indentWidth, _e = _a.onRenderTitle, onRenderTitle = _e === void 0 ? this._onRenderTitle : _e, onRenderGroupHeaderCheckbox = _a.onRenderGroupHeaderCheckbox, _f = _a.isCollapsedGroupSelectVisible, isCollapsedGroupSelectVisible = _f === void 0 ? true : _f, expandButtonProps = _a.expandButtonProps, expandButtonIcon = _a.expandButtonIcon, selectAllButtonProps = _a.selectAllButtonProps, theme = _a.theme, styles = _a.styles, className = _a.className, compact = _a.compact, ariaPosInSet = _a.ariaPosInSet, ariaSetSize = _a.ariaSetSize, ariaRowIndex = _a.ariaRowIndex, useFastIcons = _a.useFastIcons;\n var defaultCheckboxRender = useFastIcons ? this._fastDefaultCheckboxRender : this._defaultCheckboxRender;\n var onRenderCheckbox = onRenderGroupHeaderCheckbox\n ? composeRenderFunction(onRenderGroupHeaderCheckbox, defaultCheckboxRender)\n : defaultCheckboxRender;\n var _g = this.state, isCollapsed = _g.isCollapsed, isLoadingVisible = _g.isLoadingVisible;\n var canSelectGroup = selectionMode === SelectionMode.multiple;\n var isSelectionCheckVisible = canSelectGroup && (isCollapsedGroupSelectVisible || !(group && group.isCollapsed));\n var currentlySelected = selected || isSelected;\n var isRTL = getRTL(theme);\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n selected: currentlySelected,\n isCollapsed: isCollapsed,\n compact: compact,\n });\n if (!group) {\n return null;\n }\n return (React.createElement(\"div\", { className: this._classNames.root, style: viewport ? { minWidth: viewport.width } : {}, onClick: this._onHeaderClick, role: \"row\", \"aria-setsize\": ariaSetSize, \"aria-posinset\": ariaPosInSet, \"aria-rowindex\": ariaRowIndex, \"data-is-focusable\": true, onKeyUp: this._onKeyUp, \"aria-label\": group.ariaLabel, \"aria-labelledby\": group.ariaLabel ? undefined : this._id, \"aria-expanded\": !this.state.isCollapsed, \"aria-selected\": canSelectGroup ? currentlySelected : undefined, \"aria-level\": groupLevel + 1 },\n React.createElement(\"div\", { className: this._classNames.groupHeaderContainer, role: \"presentation\" },\n isSelectionCheckVisible ? (React.createElement(\"div\", { role: \"gridcell\" },\n React.createElement(\"button\", __assign({ \"data-is-focusable\": false, type: \"button\", className: this._classNames.check, role: \"checkbox\", id: this._id + \"-check\", \"aria-checked\": currentlySelected, \"aria-labelledby\": this._id + \"-check \" + this._id, \"data-selection-toggle\": true, onClick: this._onToggleSelectGroupClick }, selectAllButtonProps), onRenderCheckbox({ checked: currentlySelected, theme: theme }, onRenderCheckbox)))) : (\n // To make the group header align properly with the column headers, this spacer\n // needs to be the same width as the check cell in the column header.\n selectionMode !== SelectionMode.none && React.createElement(GroupSpacer, { indentWidth: CHECK_CELL_WIDTH, count: 1 })),\n React.createElement(GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),\n React.createElement(\"div\", { className: this._classNames.dropIcon, role: \"presentation\" },\n React.createElement(Icon, { iconName: \"Tag\" })),\n React.createElement(\"div\", { role: \"gridcell\" },\n React.createElement(\"button\", __assign({ \"data-is-focusable\": false, type: \"button\", className: this._classNames.expand, onClick: this._onToggleClick, \"aria-expanded\": !this.state.isCollapsed }, expandButtonProps),\n React.createElement(Icon, { className: this._classNames.expandIsCollapsed, iconName: expandButtonIcon || (isRTL ? 'ChevronLeftMed' : 'ChevronRightMed') }))),\n onRenderTitle(this.props, this._onRenderTitle),\n isLoadingVisible && React.createElement(Spinner, { label: loadingText }))));\n };\n GroupHeaderBase.prototype._defaultCheckboxRender = function (checkboxProps) {\n return React.createElement(Check, { checked: checkboxProps.checked });\n };\n GroupHeaderBase.prototype._fastDefaultCheckboxRender = function (checkboxProps) {\n return React.createElement(FastCheck, { theme: checkboxProps.theme, checked: checkboxProps.checked });\n };\n GroupHeaderBase.defaultProps = {\n expandButtonProps: { 'aria-label': 'expand collapse group' },\n };\n return GroupHeaderBase;\n}(React.Component));\nexport { GroupHeaderBase };\nvar FastCheck = React.memo(function (props) {\n return React.createElement(Check, { theme: props.theme, checked: props.checked, className: props.className, useFastIcons: true });\n});\n//# sourceMappingURL=GroupHeader.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './GroupHeader.styles';\nimport { GroupHeaderBase } from './GroupHeader.base';\nexport var GroupHeader = styled(GroupHeaderBase, getStyles, undefined, {\n scope: 'GroupHeader',\n});\n//# sourceMappingURL=GroupHeader.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-GroupShowAll',\n link: 'ms-Link',\n};\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme;\n var fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n position: 'relative',\n padding: '10px 84px',\n cursor: 'pointer',\n selectors: (_a = {},\n _a[\".\" + classNames.link] = {\n fontSize: fonts.small.fontSize,\n },\n _a),\n },\n ],\n };\n};\n//# sourceMappingURL=GroupShowAll.styles.js.map","import * as React from 'react';\nimport { useCallback } from 'react';\nimport { classNamesFunction } from '../../Utilities';\nimport { Link } from '../../Link';\nimport { GroupSpacer } from './GroupSpacer';\nvar getClassNames = classNamesFunction();\nexport var GroupShowAllBase = function (props) {\n var group = props.group, groupLevel = props.groupLevel, _a = props.showAllLinkText, showAllLinkText = _a === void 0 ? 'Show All' : _a, styles = props.styles, theme = props.theme, onToggleSummarize = props.onToggleSummarize;\n var classNames = getClassNames(styles, { theme: theme });\n var memoizedOnClick = useCallback(function (ev) {\n onToggleSummarize(group);\n ev.stopPropagation();\n ev.preventDefault();\n }, [onToggleSummarize, group]);\n if (group) {\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(GroupSpacer, { count: groupLevel }),\n React.createElement(Link, { onClick: memoizedOnClick }, showAllLinkText)));\n }\n return null;\n};\n//# sourceMappingURL=GroupShowAll.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './GroupShowAll.styles';\nimport { GroupShowAllBase } from './GroupShowAll.base';\nexport var GroupShowAll = styled(GroupShowAllBase, getStyles, undefined, { scope: 'GroupShowAll' });\n//# sourceMappingURL=GroupShowAll.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-groupFooter',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n theme.fonts.medium,\n classNames.root,\n {\n position: 'relative',\n padding: '5px 38px',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=GroupFooter.styles.js.map","import * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\nimport { GroupSpacer } from './GroupSpacer';\nvar getClassNames = classNamesFunction();\nexport var GroupFooterBase = function (props) {\n var group = props.group, groupLevel = props.groupLevel, footerText = props.footerText, indentWidth = props.indentWidth, styles = props.styles, theme = props.theme;\n var classNames = getClassNames(styles, { theme: theme });\n if (group && footerText) {\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(GroupSpacer, { indentWidth: indentWidth, count: groupLevel }),\n footerText));\n }\n return null;\n};\n//# sourceMappingURL=GroupFooter.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './GroupFooter.styles';\nimport { GroupFooterBase } from './GroupFooter.base';\nexport var GroupFooter = styled(GroupFooterBase, getStyles, undefined, {\n scope: 'GroupFooter',\n});\n//# sourceMappingURL=GroupFooter.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, css, getId, EventGroup } from '../../Utilities';\nimport { SELECTION_CHANGE } from '../../Selection';\nimport { GroupHeader } from './GroupHeader';\nimport { GroupShowAll } from './GroupShowAll';\nimport { GroupFooter } from './GroupFooter';\nimport { List } from '../../List';\nvar DEFAULT_DROPPING_CSS_CLASS = 'is-dropping';\nvar GroupedListSection = /** @class */ (function (_super) {\n __extends(GroupedListSection, _super);\n function GroupedListSection(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._list = React.createRef();\n _this._subGroupRefs = {};\n _this._droppingClassName = '';\n _this._onRenderGroupHeader = function (props) {\n return React.createElement(GroupHeader, __assign({}, props));\n };\n _this._onRenderGroupShowAll = function (props) {\n return React.createElement(GroupShowAll, __assign({}, props));\n };\n _this._onRenderGroupFooter = function (props) {\n return React.createElement(GroupFooter, __assign({}, props));\n };\n _this._renderSubGroup = function (subGroup, subGroupIndex) {\n var _a = _this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, getGroupItemLimit = _a.getGroupItemLimit, groupNestingDepth = _a.groupNestingDepth, groupProps = _a.groupProps, items = _a.items, headerProps = _a.headerProps, showAllProps = _a.showAllProps, footerProps = _a.footerProps, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selection = _a.selection, selectionMode = _a.selectionMode, viewport = _a.viewport, onRenderGroupHeader = _a.onRenderGroupHeader, onRenderGroupShowAll = _a.onRenderGroupShowAll, onRenderGroupFooter = _a.onRenderGroupFooter, onShouldVirtualize = _a.onShouldVirtualize, group = _a.group, compact = _a.compact;\n var nestingDepth = subGroup.level ? subGroup.level + 1 : groupNestingDepth;\n return !subGroup || subGroup.count > 0 || (groupProps && groupProps.showEmptyGroups) ? (React.createElement(GroupedListSection, { ref: function (ref) { return (_this._subGroupRefs['subGroup_' + subGroupIndex] = ref); }, key: _this._getGroupKey(subGroup, subGroupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: getGroupItemLimit, group: subGroup, groupIndex: subGroupIndex, groupNestingDepth: nestingDepth, groupProps: groupProps, headerProps: headerProps, items: items, listProps: listProps, onRenderCell: onRenderCell, selection: selection, selectionMode: selectionMode, showAllProps: showAllProps, viewport: viewport, onRenderGroupHeader: onRenderGroupHeader, onRenderGroupShowAll: onRenderGroupShowAll, onRenderGroupFooter: onRenderGroupFooter, onShouldVirtualize: onShouldVirtualize, groups: group ? group.children : [], compact: compact })) : null;\n };\n /**\n * collect all the data we need to enable drag/drop for a group\n */\n _this._getGroupDragDropOptions = function () {\n var _a = _this.props, group = _a.group, groupIndex = _a.groupIndex, dragDropEvents = _a.dragDropEvents, eventsToRegister = _a.eventsToRegister;\n var options = {\n eventMap: eventsToRegister,\n selectionIndex: -1,\n context: { data: group, index: groupIndex, isGroup: true },\n updateDropState: _this._updateDroppingState,\n canDrag: dragDropEvents.canDrag,\n canDrop: dragDropEvents.canDrop,\n onDrop: dragDropEvents.onDrop,\n onDragStart: dragDropEvents.onDragStart,\n onDragEnter: dragDropEvents.onDragEnter,\n onDragLeave: dragDropEvents.onDragLeave,\n onDragEnd: dragDropEvents.onDragEnd,\n onDragOver: dragDropEvents.onDragOver,\n };\n return options;\n };\n /**\n * update groupIsDropping state based on the input value, which is used to change style during drag and drop\n *\n * @param newValue - new isDropping state value\n * @param event - the event trigger dropping state change which can be dragenter, dragleave etc\n */\n _this._updateDroppingState = function (newIsDropping, event) {\n var isDropping = _this.state.isDropping;\n var _a = _this.props, dragDropEvents = _a.dragDropEvents, group = _a.group;\n if (isDropping !== newIsDropping) {\n if (isDropping) {\n if (dragDropEvents && dragDropEvents.onDragLeave) {\n dragDropEvents.onDragLeave(group, event);\n }\n }\n else {\n if (dragDropEvents && dragDropEvents.onDragEnter) {\n _this._droppingClassName = dragDropEvents.onDragEnter(group, event);\n }\n }\n _this.setState({ isDropping: newIsDropping });\n }\n };\n var selection = props.selection, group = props.group;\n initializeComponentRef(_this);\n _this._id = getId('GroupedListSection');\n _this.state = {\n isDropping: false,\n isSelected: selection && group ? selection.isRangeSelected(group.startIndex, group.count) : false,\n };\n _this._events = new EventGroup(_this);\n return _this;\n }\n GroupedListSection.prototype.componentDidMount = function () {\n var _a = this.props, dragDropHelper = _a.dragDropHelper, selection = _a.selection;\n if (dragDropHelper && this._root.current) {\n this._dragDropSubscription = dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());\n }\n if (selection) {\n this._events.on(selection, SELECTION_CHANGE, this._onSelectionChange);\n }\n };\n GroupedListSection.prototype.componentWillUnmount = function () {\n this._events.dispose();\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n }\n };\n GroupedListSection.prototype.componentDidUpdate = function (previousProps) {\n if (this.props.group !== previousProps.group ||\n this.props.groupIndex !== previousProps.groupIndex ||\n this.props.dragDropHelper !== previousProps.dragDropHelper) {\n if (this._dragDropSubscription) {\n this._dragDropSubscription.dispose();\n delete this._dragDropSubscription;\n }\n if (this.props.dragDropHelper && this._root.current) {\n this._dragDropSubscription = this.props.dragDropHelper.subscribe(this._root.current, this._events, this._getGroupDragDropOptions());\n }\n }\n };\n GroupedListSection.prototype.render = function () {\n var _a = this.props, getGroupItemLimit = _a.getGroupItemLimit, group = _a.group, groupIndex = _a.groupIndex, headerProps = _a.headerProps, showAllProps = _a.showAllProps, footerProps = _a.footerProps, viewport = _a.viewport, selectionMode = _a.selectionMode, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? this._onRenderGroupHeader : _b, _c = _a.onRenderGroupShowAll, onRenderGroupShowAll = _c === void 0 ? this._onRenderGroupShowAll : _c, _d = _a.onRenderGroupFooter, onRenderGroupFooter = _d === void 0 ? this._onRenderGroupFooter : _d, onShouldVirtualize = _a.onShouldVirtualize, groupedListClassNames = _a.groupedListClassNames, groups = _a.groups, compact = _a.compact, _e = _a.listProps, listProps = _e === void 0 ? {} : _e;\n var isSelected = this.state.isSelected;\n var renderCount = group && getGroupItemLimit ? getGroupItemLimit(group) : Infinity;\n var isShowAllVisible = group &&\n !group.children &&\n !group.isCollapsed &&\n !group.isShowingAll &&\n (group.count > renderCount || group.hasMoreData);\n var hasNestedGroups = group && group.children && group.children.length > 0;\n var version = listProps.version;\n var dividerProps = {\n group: group,\n groupIndex: groupIndex,\n groupLevel: group ? group.level : 0,\n isSelected: isSelected,\n selected: isSelected,\n viewport: viewport,\n selectionMode: selectionMode,\n groups: groups,\n compact: compact,\n };\n var ariaControlsProps = {\n groupedListId: this._id,\n ariaSetSize: groups ? groups.length : undefined,\n ariaPosInSet: groupIndex !== undefined ? groupIndex + 1 : undefined,\n };\n var groupHeaderProps = __assign(__assign(__assign({}, headerProps), dividerProps), ariaControlsProps);\n var groupShowAllProps = __assign(__assign({}, showAllProps), dividerProps);\n var groupFooterProps = __assign(__assign({}, footerProps), dividerProps);\n var isDraggable = !!this.props.dragDropHelper &&\n this._getGroupDragDropOptions().canDrag(group) &&\n !!this.props.dragDropEvents.canDragGroups;\n return (React.createElement(\"div\", __assign({ ref: this._root }, (isDraggable && { draggable: true }), { className: css(groupedListClassNames && groupedListClassNames.group, this._getDroppingClassName()), role: \"presentation\" }),\n onRenderGroupHeader(groupHeaderProps, this._onRenderGroupHeader),\n group && group.isCollapsed ? null : hasNestedGroups ? (React.createElement(List, { role: \"presentation\", ref: this._list, items: group ? group.children : [], onRenderCell: this._renderSubGroup, getItemCountForPage: this._returnOne, onShouldVirtualize: onShouldVirtualize, version: version, id: this._id })) : (this._onRenderGroup(renderCount)),\n group && group.isCollapsed\n ? null\n : isShowAllVisible && onRenderGroupShowAll(groupShowAllProps, this._onRenderGroupShowAll),\n onRenderGroupFooter(groupFooterProps, this._onRenderGroupFooter)));\n };\n GroupedListSection.prototype.forceUpdate = function () {\n _super.prototype.forceUpdate.call(this);\n this.forceListUpdate();\n };\n GroupedListSection.prototype.forceListUpdate = function () {\n var group = this.props.group;\n if (this._list.current) {\n this._list.current.forceUpdate();\n if (group && group.children && group.children.length > 0) {\n var subGroupCount = group.children.length;\n for (var i = 0; i < subGroupCount; i++) {\n var subGroup = this._list.current.pageRefs['subGroup_' + String(i)];\n if (subGroup) {\n subGroup.forceListUpdate();\n }\n }\n }\n }\n else {\n var subGroup = this._subGroupRefs['subGroup_' + String(0)];\n if (subGroup) {\n subGroup.forceListUpdate();\n }\n }\n };\n GroupedListSection.prototype._onSelectionChange = function () {\n var _a = this.props, group = _a.group, selection = _a.selection;\n if (selection && group) {\n var isSelected = selection.isRangeSelected(group.startIndex, group.count);\n if (isSelected !== this.state.isSelected) {\n this.setState({ isSelected: isSelected });\n }\n }\n };\n GroupedListSection.prototype._onRenderGroupCell = function (onRenderCell, groupNestingDepth, group) {\n return function (item, itemIndex) {\n return onRenderCell(groupNestingDepth, item, itemIndex, group);\n };\n };\n GroupedListSection.prototype._onRenderGroup = function (renderCount) {\n var _a = this.props, group = _a.group, items = _a.items, onRenderCell = _a.onRenderCell, listProps = _a.listProps, groupNestingDepth = _a.groupNestingDepth, onShouldVirtualize = _a.onShouldVirtualize, groupProps = _a.groupProps;\n var count = group && !group.isShowingAll ? group.count : items.length;\n var startIndex = group ? group.startIndex : 0;\n return (React.createElement(List, __assign({ role: groupProps && groupProps.role ? groupProps.role : 'rowgroup', \"aria-label\": group === null || group === void 0 ? void 0 : group.name, items: items, onRenderCell: this._onRenderGroupCell(onRenderCell, groupNestingDepth, group), ref: this._list, renderCount: Math.min(count, renderCount), startIndex: startIndex, onShouldVirtualize: onShouldVirtualize, id: this._id }, listProps)));\n };\n GroupedListSection.prototype._returnOne = function () {\n return 1;\n };\n GroupedListSection.prototype._getGroupKey = function (group, index) {\n return 'group-' + (group && group.key ? group.key : String(group.level) + String(index));\n };\n /**\n * get the correct css class to reflect the dropping state for a given group\n *\n * If the group is the current drop target, return the default dropping class name\n * Otherwise, return '';\n *\n */\n GroupedListSection.prototype._getDroppingClassName = function () {\n var isDropping = this.state.isDropping;\n var _a = this.props, group = _a.group, groupedListClassNames = _a.groupedListClassNames;\n isDropping = !!(group && isDropping);\n return css(isDropping && this._droppingClassName, isDropping && DEFAULT_DROPPING_CSS_CLASS, isDropping && groupedListClassNames && groupedListClassNames.groupIsDropping);\n };\n return GroupedListSection;\n}(React.Component));\nexport { GroupedListSection };\n//# sourceMappingURL=GroupedListSection.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, classNamesFunction, KeyCodes, getRTLSafeKeyCode, css } from '../../Utilities';\nimport { GroupedListSection } from './GroupedListSection';\nimport { List } from '../../List';\nimport { SelectionMode } from '../../Selection';\nimport { DEFAULT_ROW_HEIGHTS } from '../DetailsList/DetailsRow.styles';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nvar getClassNames = classNamesFunction();\nvar ROW_HEIGHT = DEFAULT_ROW_HEIGHTS.rowHeight, COMPACT_ROW_HEIGHT = DEFAULT_ROW_HEIGHTS.compactRowHeight;\nvar GroupedListBase = /** @class */ (function (_super) {\n __extends(GroupedListBase, _super);\n function GroupedListBase(props) {\n var _this = _super.call(this, props) || this;\n _this._list = React.createRef();\n _this._renderGroup = function (group, groupIndex) {\n var _a = _this.props, dragDropEvents = _a.dragDropEvents, dragDropHelper = _a.dragDropHelper, eventsToRegister = _a.eventsToRegister, groupProps = _a.groupProps, items = _a.items, listProps = _a.listProps, onRenderCell = _a.onRenderCell, selectionMode = _a.selectionMode, selection = _a.selection, viewport = _a.viewport, onShouldVirtualize = _a.onShouldVirtualize, groups = _a.groups, compact = _a.compact;\n // override group header/footer props as needed\n var dividerProps = {\n onToggleSelectGroup: _this._onToggleSelectGroup,\n onToggleCollapse: _this._onToggleCollapse,\n onToggleSummarize: _this._onToggleSummarize,\n };\n var headerProps = __assign(__assign({}, groupProps.headerProps), dividerProps);\n var showAllProps = __assign(__assign({}, groupProps.showAllProps), dividerProps);\n var footerProps = __assign(__assign({}, groupProps.footerProps), dividerProps);\n var groupNestingDepth = _this._getGroupNestingDepth();\n if (!groupProps.showEmptyGroups && group && group.count === 0) {\n return null;\n }\n var finalListProps = __assign(__assign({}, (listProps || {})), { version: _this.state.version });\n return (React.createElement(GroupedListSection, { key: _this._getGroupKey(group, groupIndex), dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: eventsToRegister, footerProps: footerProps, getGroupItemLimit: groupProps && groupProps.getGroupItemLimit, group: group, groupIndex: groupIndex, groupNestingDepth: groupNestingDepth, groupProps: groupProps, headerProps: headerProps, listProps: finalListProps, items: items, onRenderCell: onRenderCell, onRenderGroupHeader: groupProps.onRenderHeader, onRenderGroupShowAll: groupProps.onRenderShowAll, onRenderGroupFooter: groupProps.onRenderFooter, selectionMode: selectionMode, selection: selection, showAllProps: showAllProps, viewport: viewport, onShouldVirtualize: onShouldVirtualize, groupedListClassNames: _this._classNames, groups: groups, compact: compact }));\n };\n _this._getDefaultGroupItemLimit = function (group) {\n return group.children && group.children.length > 0 ? group.children.length : group.count;\n };\n _this._getGroupItemLimit = function (group) {\n var groupProps = _this.props.groupProps;\n var getGroupItemLimit = groupProps && groupProps.getGroupItemLimit ? groupProps.getGroupItemLimit : _this._getDefaultGroupItemLimit;\n return getGroupItemLimit(group);\n };\n _this._getGroupHeight = function (group) {\n var rowHeight = _this.props.compact ? COMPACT_ROW_HEIGHT : ROW_HEIGHT;\n return rowHeight + (group.isCollapsed ? 0 : rowHeight * _this._getGroupItemLimit(group));\n };\n _this._getPageHeight = function (itemIndex) {\n var groups = _this.state.groups;\n var _a = _this.props.getGroupHeight, getGroupHeight = _a === void 0 ? _this._getGroupHeight : _a;\n var pageGroup = groups && groups[itemIndex];\n if (pageGroup) {\n return getGroupHeight(pageGroup, itemIndex);\n }\n else {\n return 0;\n }\n };\n _this._onToggleCollapse = function (group) {\n var groupProps = _this.props.groupProps;\n var onToggleCollapse = groupProps && groupProps.headerProps && groupProps.headerProps.onToggleCollapse;\n if (group) {\n if (onToggleCollapse) {\n onToggleCollapse(group);\n }\n group.isCollapsed = !group.isCollapsed;\n _this._updateIsSomeGroupExpanded();\n _this.forceUpdate();\n }\n };\n _this._onToggleSelectGroup = function (group) {\n var _a = _this.props, selection = _a.selection, selectionMode = _a.selectionMode;\n if (group && selection && selectionMode === SelectionMode.multiple) {\n selection.toggleRangeSelected(group.startIndex, group.count);\n }\n };\n _this._isInnerZoneKeystroke = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n return ev.which === getRTLSafeKeyCode(KeyCodes.right);\n };\n _this._onToggleSummarize = function (group) {\n var groupProps = _this.props.groupProps;\n var onToggleSummarize = groupProps && groupProps.showAllProps && groupProps.showAllProps.onToggleSummarize;\n if (onToggleSummarize) {\n onToggleSummarize(group);\n }\n else {\n if (group) {\n group.isShowingAll = !group.isShowingAll;\n }\n _this.forceUpdate();\n }\n };\n _this._getPageSpecification = function (itemIndex) {\n var groups = _this.state.groups;\n var pageGroup = groups && groups[itemIndex];\n return {\n key: pageGroup && pageGroup.key,\n };\n };\n initializeComponentRef(_this);\n _this._isSomeGroupExpanded = _this._computeIsSomeGroupExpanded(props.groups);\n var _a = props.listProps, _b = _a === void 0 ? {} : _a, _c = _b.version, version = _c === void 0 ? {} : _c;\n _this.state = {\n groups: props.groups,\n items: props.items,\n listProps: props.listProps,\n version: version,\n };\n return _this;\n }\n GroupedListBase.getDerivedStateFromProps = function (nextProps, previousState) {\n var groups = nextProps.groups, selectionMode = nextProps.selectionMode, compact = nextProps.compact, items = nextProps.items, listProps = nextProps.listProps;\n var listVersion = listProps && listProps.version;\n var nextState = __assign(__assign({}, previousState), { selectionMode: selectionMode,\n compact: compact,\n groups: groups,\n listProps: listProps });\n var shouldForceUpdates = false;\n var previousListVersion = previousState.listProps && previousState.listProps.version;\n if (listVersion !== previousListVersion ||\n items !== previousState.items ||\n groups !== previousState.groups ||\n selectionMode !== previousState.selectionMode ||\n compact !== previousState.compact) {\n // If there are any props not passed explicitly to `List` which have an impact on the behavior of `onRenderCell`,\n // these need to 'force-update' this component by revving the version. Otherwise, the List might render with stale\n // data.\n shouldForceUpdates = true;\n }\n if (groups !== previousState.groups) {\n nextState = __assign(__assign({}, nextState), { groups: groups });\n }\n if (selectionMode !== previousState.selectionMode || compact !== previousState.compact) {\n shouldForceUpdates = true;\n }\n if (shouldForceUpdates) {\n nextState = __assign(__assign({}, nextState), { version: {} });\n }\n return nextState;\n };\n GroupedListBase.prototype.scrollToIndex = function (index, measureItem, scrollToMode) {\n if (this._list.current) {\n this._list.current.scrollToIndex(index, measureItem, scrollToMode);\n }\n };\n GroupedListBase.prototype.getStartItemIndexInView = function () {\n return this._list.current.getStartItemIndexInView() || 0;\n };\n GroupedListBase.prototype.componentDidMount = function () {\n var _a = this.props, groupProps = _a.groupProps, _b = _a.groups, groups = _b === void 0 ? [] : _b;\n if (groupProps && groupProps.isAllGroupsCollapsed) {\n this._setGroupsCollapsedState(groups, groupProps.isAllGroupsCollapsed);\n }\n };\n GroupedListBase.prototype.render = function () {\n var _a = this.props, className = _a.className, usePageCache = _a.usePageCache, onShouldVirtualize = _a.onShouldVirtualize, theme = _a.theme, _b = _a.role, role = _b === void 0 ? 'treegrid' : _b, styles = _a.styles, compact = _a.compact, _c = _a.focusZoneProps, focusZoneProps = _c === void 0 ? {} : _c, _d = _a.rootListProps, rootListProps = _d === void 0 ? {} : _d;\n var _e = this.state, groups = _e.groups, version = _e.version;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n compact: compact,\n });\n var _f = focusZoneProps.shouldEnterInnerZone, shouldEnterInnerZone = _f === void 0 ? this._isInnerZoneKeystroke : _f;\n return (React.createElement(FocusZone, __assign({ direction: FocusZoneDirection.vertical, \"data-automationid\": \"GroupedList\", \"data-is-scrollable\": \"false\", role: \"presentation\" }, focusZoneProps, { shouldEnterInnerZone: shouldEnterInnerZone, className: css(this._classNames.root, focusZoneProps.className) }), !groups ? (this._renderGroup(undefined, 0)) : (React.createElement(List, __assign({ ref: this._list, role: role, items: groups, onRenderCell: this._renderGroup, getItemCountForPage: this._returnOne, getPageHeight: this._getPageHeight, getPageSpecification: this._getPageSpecification, usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize, version: version }, rootListProps)))));\n };\n GroupedListBase.prototype.forceUpdate = function () {\n _super.prototype.forceUpdate.call(this);\n this._forceListUpdates();\n };\n GroupedListBase.prototype.toggleCollapseAll = function (allCollapsed) {\n var _a = this.state.groups, groups = _a === void 0 ? [] : _a;\n var groupProps = this.props.groupProps;\n var onToggleCollapseAll = groupProps && groupProps.onToggleCollapseAll;\n if (groups.length > 0) {\n if (onToggleCollapseAll) {\n onToggleCollapseAll(allCollapsed);\n }\n this._setGroupsCollapsedState(groups, allCollapsed);\n this._updateIsSomeGroupExpanded();\n this.forceUpdate();\n }\n };\n GroupedListBase.prototype._setGroupsCollapsedState = function (groups, isCollapsed) {\n for (var groupIndex = 0; groupIndex < groups.length; groupIndex++) {\n groups[groupIndex].isCollapsed = isCollapsed;\n }\n };\n GroupedListBase.prototype._returnOne = function () {\n return 1;\n };\n GroupedListBase.prototype._getGroupKey = function (group, index) {\n return 'group-' + (group && group.key ? group.key : String(index));\n };\n GroupedListBase.prototype._getGroupNestingDepth = function () {\n var groups = this.state.groups;\n var level = 0;\n var groupsInLevel = groups;\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n return level;\n };\n GroupedListBase.prototype._forceListUpdates = function (groups) {\n this.setState({\n version: {},\n });\n };\n GroupedListBase.prototype._computeIsSomeGroupExpanded = function (groups) {\n var _this = this;\n return !!(groups &&\n groups.some(function (group) { return (group.children ? _this._computeIsSomeGroupExpanded(group.children) : !group.isCollapsed); }));\n };\n GroupedListBase.prototype._updateIsSomeGroupExpanded = function () {\n var groups = this.state.groups;\n var onGroupExpandStateChanged = this.props.onGroupExpandStateChanged;\n var newIsSomeGroupExpanded = this._computeIsSomeGroupExpanded(groups);\n if (this._isSomeGroupExpanded !== newIsSomeGroupExpanded) {\n if (onGroupExpandStateChanged) {\n onGroupExpandStateChanged(newIsSomeGroupExpanded);\n }\n this._isSomeGroupExpanded = newIsSomeGroupExpanded;\n }\n };\n GroupedListBase.defaultProps = {\n selectionMode: SelectionMode.multiple,\n isHeaderVisible: true,\n groupProps: {},\n compact: false,\n };\n return GroupedListBase;\n}(React.Component));\nexport { GroupedListBase };\n//# sourceMappingURL=GroupedList.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './GroupedList.styles';\nimport { GroupedListBase } from './GroupedList.base';\nexport var GroupedList = styled(GroupedListBase, getStyles, undefined, {\n scope: 'GroupedList',\n});\n//# sourceMappingURL=GroupedList.js.map","/**\n * Helper to get bounding client rect. Passing in window will get the window size.\n *\n * @public\n */\nexport function getRect(element) {\n var rect;\n if (element) {\n if (element === window) {\n rect = {\n left: 0,\n top: 0,\n width: window.innerWidth,\n height: window.innerHeight,\n right: window.innerWidth,\n bottom: window.innerHeight,\n };\n }\n else if (element.getBoundingClientRect) {\n rect = element.getBoundingClientRect();\n }\n }\n return rect;\n}\n//# sourceMappingURL=getRect.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { BaseDecorator } from './BaseDecorator';\nimport { findScrollableParent, getRect, getWindow, Async, EventGroup } from '../../Utilities';\nvar RESIZE_DELAY = 500;\nvar MAX_RESIZE_ATTEMPTS = 3;\n/**\n * A decorator to update decorated component on viewport or window resize events.\n *\n * @param ComposedComponent decorated React component reference.\n */\nexport function withViewport(ComposedComponent) {\n return /** @class */ (function (_super) {\n __extends(WithViewportComponent, _super);\n function WithViewportComponent(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._registerResizeObserver = function () {\n var win = getWindow(_this._root.current);\n _this._viewportResizeObserver = new win.ResizeObserver(_this._onAsyncResize);\n _this._viewportResizeObserver.observe(_this._root.current);\n };\n _this._unregisterResizeObserver = function () {\n if (_this._viewportResizeObserver) {\n _this._viewportResizeObserver.disconnect();\n delete _this._viewportResizeObserver;\n }\n };\n /* Note: using lambda here because decorators don't seem to work in decorators. */\n _this._updateViewport = function (withForceUpdate) {\n var viewport = _this.state.viewport;\n var viewportElement = _this._root.current;\n var scrollElement = findScrollableParent(viewportElement);\n var scrollRect = getRect(scrollElement);\n var clientRect = getRect(viewportElement);\n var updateComponent = function () {\n if (withForceUpdate && _this._composedComponentInstance) {\n _this._composedComponentInstance.forceUpdate();\n }\n };\n var isSizeChanged = (clientRect && clientRect.width) !== viewport.width || (scrollRect && scrollRect.height) !== viewport.height;\n if (isSizeChanged && _this._resizeAttempts < MAX_RESIZE_ATTEMPTS && clientRect && scrollRect) {\n _this._resizeAttempts++;\n _this.setState({\n viewport: {\n width: clientRect.width,\n height: scrollRect.height,\n },\n }, function () {\n _this._updateViewport(withForceUpdate);\n });\n }\n else {\n _this._resizeAttempts = 0;\n updateComponent();\n }\n };\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._resizeAttempts = 0;\n _this.state = {\n viewport: {\n width: 0,\n height: 0,\n },\n };\n return _this;\n }\n WithViewportComponent.prototype.componentDidMount = function () {\n var _this = this;\n var _a = this.props, delayFirstMeasure = _a.delayFirstMeasure, disableResizeObserver = _a.disableResizeObserver, skipViewportMeasures = _a.skipViewportMeasures;\n var win = getWindow(this._root.current);\n this._onAsyncResize = this._async.debounce(this._onAsyncResize, RESIZE_DELAY, {\n leading: false,\n });\n if (!skipViewportMeasures) {\n if (!disableResizeObserver && this._isResizeObserverAvailable()) {\n this._registerResizeObserver();\n }\n else {\n this._events.on(win, 'resize', this._onAsyncResize);\n }\n if (delayFirstMeasure) {\n this._async.setTimeout(function () {\n _this._updateViewport();\n }, RESIZE_DELAY);\n }\n else {\n this._updateViewport();\n }\n }\n };\n WithViewportComponent.prototype.componentDidUpdate = function (previousProps) {\n var previousSkipViewportMeasures = previousProps.skipViewportMeasures;\n var _a = this.props, disableResizeObserver = _a.disableResizeObserver, skipViewportMeasures = _a.skipViewportMeasures;\n var win = getWindow(this._root.current);\n if (skipViewportMeasures !== previousSkipViewportMeasures) {\n if (!skipViewportMeasures) {\n if (!disableResizeObserver && this._isResizeObserverAvailable()) {\n if (!this._viewportResizeObserver) {\n this._registerResizeObserver();\n }\n }\n else {\n this._events.on(win, 'resize', this._onAsyncResize);\n }\n this._updateViewport();\n }\n else {\n this._unregisterResizeObserver();\n this._events.off(win, 'resize', this._onAsyncResize);\n }\n }\n };\n WithViewportComponent.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n this._unregisterResizeObserver();\n };\n WithViewportComponent.prototype.render = function () {\n var viewport = this.state.viewport;\n var newViewport = viewport.width > 0 && viewport.height > 0 ? viewport : undefined;\n return (React.createElement(\"div\", { className: \"ms-Viewport\", ref: this._root, style: { minWidth: 1, minHeight: 1 } },\n React.createElement(ComposedComponent, __assign({ ref: this._updateComposedComponentRef, viewport: newViewport }, this.props))));\n };\n WithViewportComponent.prototype.forceUpdate = function () {\n this._updateViewport(true);\n };\n WithViewportComponent.prototype._onAsyncResize = function () {\n this._updateViewport();\n };\n WithViewportComponent.prototype._isResizeObserverAvailable = function () {\n var win = getWindow(this._root.current);\n return win && win.ResizeObserver;\n };\n return WithViewportComponent;\n }(BaseDecorator));\n}\n//# sourceMappingURL=withViewport.js.map","import { __spreadArrays } from \"tslib\";\n/**\n * Takes an array of groups and returns a count of the groups and all descendant groups.\n * @param groups - The array of groups to count.\n */\nexport var GetGroupCount = function (groups) {\n var total = 0;\n if (groups) {\n var remainingGroups = __spreadArrays(groups);\n var currentGroup = void 0;\n while (remainingGroups && remainingGroups.length > 0) {\n ++total;\n currentGroup = remainingGroups.pop();\n if (currentGroup && currentGroup.children) {\n remainingGroups.push.apply(remainingGroups, currentGroup.children);\n }\n }\n }\n return total;\n};\n//# sourceMappingURL=GroupedListUtility.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, FocusRects, Async, KeyCodes, elementContains, getRTLSafeKeyCode, classNamesFunction, memoizeFunction, } from '../../Utilities';\nimport { CheckboxVisibility, ColumnActionsMode, ConstrainMode, DetailsListLayoutMode, ColumnDragEndLocation, } from '../DetailsList/DetailsList.types';\nimport { DetailsHeader } from '../DetailsList/DetailsHeader';\nimport { SelectAllVisibility } from '../DetailsList/DetailsHeader.types';\nimport { DetailsRow } from '../DetailsList/DetailsRow';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Selection, SelectionMode, SelectionZone } from '../../Selection';\nimport { DragDropHelper } from '../../DragDrop';\nimport { GroupedList } from '../../GroupedList';\nimport { List } from '../../List';\nimport { withViewport } from '../../utilities/decorators/withViewport';\nimport { GetGroupCount } from '../../utilities/groupedList/GroupedListUtility';\nimport { DEFAULT_CELL_STYLE_PROPS } from './DetailsRow.styles';\nimport { CHECK_CELL_WIDTH as CHECKBOX_WIDTH } from './DetailsRowCheck.styles';\n// For every group level there is a GroupSpacer added. Importing this const to have the source value in one place.\nimport { SPACER_WIDTH as GROUP_EXPAND_WIDTH } from '../GroupedList/GroupSpacer';\nimport { composeRenderFunction, getId } from '@fluentui/utilities';\nimport { useConst } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\nvar MIN_COLUMN_WIDTH = 100; // this is the global min width\nvar DEFAULT_RENDERED_WINDOWS_AHEAD = 2;\nvar DEFAULT_RENDERED_WINDOWS_BEHIND = 2;\n/**\n * Hooks-based implementation of DetailsList.\n * Since many existing consumers of DetailsList expect `ref` to return a `DetailsList`,\n * this inner component handles rendering while the outer maintains compatibility.\n */\nvar DetailsListInner = function (props) {\n var selection = props.selection;\n var ariaLabelForListHeader = props.ariaLabelForListHeader, ariaLabelForSelectAllCheckbox = props.ariaLabelForSelectAllCheckbox, ariaLabelForSelectionColumn = props.ariaLabelForSelectionColumn, className = props.className, checkboxVisibility = props.checkboxVisibility, compact = props.compact, constrainMode = props.constrainMode, dragDropEvents = props.dragDropEvents, groups = props.groups, groupProps = props.groupProps, indentWidth = props.indentWidth, items = props.items, isPlaceholderData = props.isPlaceholderData, isHeaderVisible = props.isHeaderVisible, layoutMode = props.layoutMode, onItemInvoked = props.onItemInvoked, onItemContextMenu = props.onItemContextMenu, onColumnHeaderClick = props.onColumnHeaderClick, onColumnHeaderContextMenu = props.onColumnHeaderContextMenu, _a = props.selectionMode, selectionMode = _a === void 0 ? selection.mode : _a, selectionPreservedOnEmptyClick = props.selectionPreservedOnEmptyClick, selectionZoneProps = props.selectionZoneProps, ariaLabel = props.ariaLabel, ariaLabelForGrid = props.ariaLabelForGrid, rowElementEventMap = props.rowElementEventMap, _b = props.shouldApplyApplicationRole, shouldApplyApplicationRole = _b === void 0 ? false : _b, getKey = props.getKey, listProps = props.listProps, usePageCache = props.usePageCache, onShouldVirtualize = props.onShouldVirtualize, viewport = props.viewport, minimumPixelsForDrag = props.minimumPixelsForDrag, getGroupHeight = props.getGroupHeight, styles = props.styles, theme = props.theme, _c = props.cellStyleProps, cellStyleProps = _c === void 0 ? DEFAULT_CELL_STYLE_PROPS : _c, onRenderCheckbox = props.onRenderCheckbox, useFastIcons = props.useFastIcons, dragDropHelper = props.dragDropHelper, adjustedColumns = props.adjustedColumns, isCollapsed = props.isCollapsed, isSizing = props.isSizing, isSomeGroupExpanded = props.isSomeGroupExpanded, version = props.version, rootRef = props.rootRef, listRef = props.listRef, focusZoneRef = props.focusZoneRef, columnReorderOptions = props.columnReorderOptions, groupedListRef = props.groupedListRef, headerRef = props.headerRef, onGroupExpandStateChanged = props.onGroupExpandStateChanged, onColumnIsSizingChanged = props.onColumnIsSizingChanged, onRowDidMount = props.onRowDidMount, onRowWillUnmount = props.onRowWillUnmount, disableSelectionZone = props.disableSelectionZone, onColumnResized = props.onColumnResized, onColumnAutoResized = props.onColumnAutoResized, onToggleCollapse = props.onToggleCollapse, onActiveRowChanged = props.onActiveRowChanged, onBlur = props.onBlur, eventsToRegister = props.rowElementEventMap, onRenderMissingItem = props.onRenderMissingItem, onRenderItemColumn = props.onRenderItemColumn, getCellValueKey = props.getCellValueKey, getRowAriaLabel = props.getRowAriaLabel, getRowAriaDescribedBy = props.getRowAriaDescribedBy, checkButtonAriaLabel = props.checkButtonAriaLabel, checkButtonGroupAriaLabel = props.checkButtonGroupAriaLabel, checkboxCellClassName = props.checkboxCellClassName, useReducedRowRenderer = props.useReducedRowRenderer, enableUpdateAnimations = props.enableUpdateAnimations, enterModalSelectionOnTouch = props.enterModalSelectionOnTouch, onRenderDefaultRow = props.onRenderDefaultRow, selectionZoneRef = props.selectionZoneRef, focusZoneProps = props.focusZoneProps;\n var defaultRole = 'grid';\n var role = props.role ? props.role : defaultRole;\n var rowId = getId('row');\n var groupNestingDepth = getGroupNestingDepth(groups);\n var groupedDetailsListIndexMap = useGroupedDetailsListIndexMap(groups);\n var additionalListProps = React.useMemo(function () {\n return __assign({ renderedWindowsAhead: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_AHEAD, renderedWindowsBehind: isSizing ? 0 : DEFAULT_RENDERED_WINDOWS_BEHIND, getKey: getKey,\n version: version }, listProps);\n }, [isSizing, getKey, version, listProps]);\n var selectAllVisibility = SelectAllVisibility.none; // for SelectionMode.none\n if (selectionMode === SelectionMode.single) {\n selectAllVisibility = SelectAllVisibility.hidden;\n }\n if (selectionMode === SelectionMode.multiple) {\n // if isCollapsedGroupSelectVisible is false, disable select all when the list has all collapsed groups\n var isCollapsedGroupSelectVisible = groupProps && groupProps.headerProps && groupProps.headerProps.isCollapsedGroupSelectVisible;\n if (isCollapsedGroupSelectVisible === undefined) {\n isCollapsedGroupSelectVisible = true;\n }\n var isSelectAllVisible = isCollapsedGroupSelectVisible || !groups || isSomeGroupExpanded;\n selectAllVisibility = isSelectAllVisible ? SelectAllVisibility.visible : SelectAllVisibility.hidden;\n }\n if (checkboxVisibility === CheckboxVisibility.hidden) {\n selectAllVisibility = SelectAllVisibility.none;\n }\n var defaultOnRenderDetailsHeader = React.useCallback(function (detailsHeaderProps) {\n return React.createElement(DetailsHeader, __assign({}, detailsHeaderProps));\n }, []);\n var defaultOnRenderDetailsFooter = React.useCallback(function () {\n return null;\n }, []);\n var propsOnRenderDetailsHeader = props.onRenderDetailsHeader;\n var onRenderDetailsHeader = React.useMemo(function () {\n return propsOnRenderDetailsHeader\n ? composeRenderFunction(propsOnRenderDetailsHeader, defaultOnRenderDetailsHeader)\n : defaultOnRenderDetailsHeader;\n }, [propsOnRenderDetailsHeader, defaultOnRenderDetailsHeader]);\n var propsOnRenderDetailsFooter = props.onRenderDetailsFooter;\n var onRenderDetailsFooter = React.useMemo(function () {\n return propsOnRenderDetailsFooter\n ? composeRenderFunction(propsOnRenderDetailsFooter, defaultOnRenderDetailsFooter)\n : defaultOnRenderDetailsFooter;\n }, [propsOnRenderDetailsFooter, defaultOnRenderDetailsFooter]);\n var detailsFooterProps = React.useMemo(function () {\n return {\n columns: adjustedColumns,\n groupNestingDepth: groupNestingDepth,\n selection: selection,\n selectionMode: selectionMode,\n viewport: viewport,\n checkboxVisibility: checkboxVisibility,\n indentWidth: indentWidth,\n cellStyleProps: cellStyleProps,\n };\n }, [\n adjustedColumns,\n groupNestingDepth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n indentWidth,\n cellStyleProps,\n ]);\n var columnReorderOnDragEnd = columnReorderOptions && columnReorderOptions.onDragEnd;\n var onColumnDragEnd = React.useCallback(function (_a, event) {\n var dropLocation = _a.dropLocation;\n var finalDropLocation = ColumnDragEndLocation.outside;\n if (columnReorderOnDragEnd) {\n if (dropLocation && dropLocation !== ColumnDragEndLocation.header) {\n finalDropLocation = dropLocation;\n }\n else if (rootRef.current) {\n var clientRect = rootRef.current.getBoundingClientRect();\n if (event.clientX > clientRect.left &&\n event.clientX < clientRect.right &&\n event.clientY > clientRect.top &&\n event.clientY < clientRect.bottom) {\n finalDropLocation = ColumnDragEndLocation.surface;\n }\n }\n columnReorderOnDragEnd(finalDropLocation);\n }\n }, [columnReorderOnDragEnd, rootRef]);\n var columnReorderProps = React.useMemo(function () {\n if (columnReorderOptions) {\n return __assign(__assign({}, columnReorderOptions), { onColumnDragEnd: onColumnDragEnd });\n }\n }, [columnReorderOptions, onColumnDragEnd]);\n var rowCount = (isHeaderVisible ? 1 : 0) + GetGroupCount(groups) + (items ? items.length : 0);\n var colCount = (selectAllVisibility !== SelectAllVisibility.none ? 1 : 0) +\n (adjustedColumns ? adjustedColumns.length : 0) +\n (groups ? 1 : 0);\n var classNames = React.useMemo(function () {\n return getClassNames(styles, {\n theme: theme,\n compact: compact,\n isFixed: layoutMode === DetailsListLayoutMode.fixedColumns,\n isHorizontalConstrained: constrainMode === ConstrainMode.horizontalConstrained,\n className: className,\n });\n }, [styles, theme, compact, layoutMode, constrainMode, className]);\n var onRenderDetailsGroupFooter = groupProps && groupProps.onRenderFooter;\n var finalOnRenderDetailsGroupFooter = React.useMemo(function () {\n return onRenderDetailsGroupFooter\n ? function (groupFooterProps, defaultRender) {\n return onRenderDetailsGroupFooter(__assign(__assign({}, groupFooterProps), { columns: adjustedColumns, groupNestingDepth: groupNestingDepth,\n indentWidth: indentWidth,\n selection: selection,\n selectionMode: selectionMode,\n viewport: viewport,\n checkboxVisibility: checkboxVisibility,\n cellStyleProps: cellStyleProps }), defaultRender);\n }\n : undefined;\n }, [\n onRenderDetailsGroupFooter,\n adjustedColumns,\n groupNestingDepth,\n indentWidth,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n ]);\n var onRenderDetailsGroupHeader = groupProps && groupProps.onRenderHeader;\n var finalOnRenderDetailsGroupHeader = React.useMemo(function () {\n return onRenderDetailsGroupHeader\n ? function (groupHeaderProps, defaultRender) {\n var _a, _b;\n var groupIndex = groupHeaderProps.groupIndex;\n var groupKey = groupIndex !== undefined ? (_b = (_a = groupHeaderProps.groups) === null || _a === void 0 ? void 0 : _a[groupIndex]) === null || _b === void 0 ? void 0 : _b.key : undefined;\n var totalRowCount = groupKey !== undefined && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].totalRowCount\n : 0;\n return onRenderDetailsGroupHeader(__assign(__assign({}, groupHeaderProps), { columns: adjustedColumns, groupNestingDepth: groupNestingDepth,\n indentWidth: indentWidth,\n selection: selection, selectionMode: checkboxVisibility !== CheckboxVisibility.hidden ? selectionMode : SelectionMode.none, viewport: viewport,\n checkboxVisibility: checkboxVisibility,\n cellStyleProps: cellStyleProps, ariaColSpan: adjustedColumns.length, ariaPosInSet: undefined, ariaSetSize: undefined, ariaRowCount: undefined, ariaRowIndex: groupIndex !== undefined ? totalRowCount + (isHeaderVisible ? 1 : 0) : undefined }), defaultRender);\n }\n : function (groupHeaderProps, defaultRender) {\n var _a, _b;\n var groupIndex = groupHeaderProps.groupIndex;\n var groupKey = groupIndex !== undefined ? (_b = (_a = groupHeaderProps.groups) === null || _a === void 0 ? void 0 : _a[groupIndex]) === null || _b === void 0 ? void 0 : _b.key : undefined;\n var totalRowCount = groupKey !== undefined && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].totalRowCount\n : 0;\n return defaultRender(__assign(__assign({}, groupHeaderProps), { ariaColSpan: adjustedColumns.length, ariaPosInSet: undefined, ariaSetSize: undefined, ariaRowCount: undefined, ariaRowIndex: groupIndex !== undefined ? totalRowCount + (isHeaderVisible ? 1 : 0) : undefined }));\n };\n }, [\n onRenderDetailsGroupHeader,\n adjustedColumns,\n groupNestingDepth,\n indentWidth,\n isHeaderVisible,\n selection,\n selectionMode,\n viewport,\n checkboxVisibility,\n cellStyleProps,\n groupedDetailsListIndexMap,\n ]);\n var finalGroupProps = React.useMemo(function () {\n var _a;\n return __assign(__assign({}, groupProps), { role: role === defaultRole ? 'rowgroup' : 'presentation', onRenderFooter: finalOnRenderDetailsGroupFooter, onRenderHeader: finalOnRenderDetailsGroupHeader, \n // pass through custom group header checkbox label\n headerProps: __assign(__assign({}, groupProps === null || groupProps === void 0 ? void 0 : groupProps.headerProps), { selectAllButtonProps: __assign({ 'aria-label': checkButtonGroupAriaLabel }, (_a = groupProps === null || groupProps === void 0 ? void 0 : groupProps.headerProps) === null || _a === void 0 ? void 0 : _a.selectAllButtonProps) }) });\n }, [groupProps, finalOnRenderDetailsGroupFooter, finalOnRenderDetailsGroupHeader, checkButtonGroupAriaLabel, role]);\n var sumColumnWidths = useConst(function () {\n return memoizeFunction(function (columns) {\n var totalWidth = 0;\n columns.forEach(function (column) { return (totalWidth += column.calculatedWidth || column.minWidth); });\n return totalWidth;\n });\n });\n var collapseAllVisibility = groupProps && groupProps.collapseAllVisibility;\n var rowWidth = React.useMemo(function () {\n return sumColumnWidths(adjustedColumns);\n }, [adjustedColumns, sumColumnWidths]);\n var onRenderCell = React.useCallback(function (nestingDepth, item, index, group) {\n var finalOnRenderRow = props.onRenderRow\n ? composeRenderFunction(props.onRenderRow, onRenderDefaultRow)\n : onRenderDefaultRow;\n var groupKey = group ? group.key : undefined;\n var numOfGroupHeadersBeforeItem = groupKey && groupedDetailsListIndexMap[groupKey]\n ? groupedDetailsListIndexMap[groupKey].numOfGroupHeadersBeforeItem\n : 0;\n var rowRole = role === defaultRole ? undefined : 'presentation';\n var rowProps = {\n item: item,\n itemIndex: index,\n flatIndexOffset: (isHeaderVisible ? 2 : 1) + numOfGroupHeadersBeforeItem,\n compact: compact,\n columns: adjustedColumns,\n groupNestingDepth: nestingDepth,\n id: rowId + \"-\" + index,\n selectionMode: selectionMode,\n selection: selection,\n onDidMount: onRowDidMount,\n onWillUnmount: onRowWillUnmount,\n onRenderItemColumn: onRenderItemColumn,\n getCellValueKey: getCellValueKey,\n eventsToRegister: eventsToRegister,\n dragDropEvents: dragDropEvents,\n dragDropHelper: dragDropHelper,\n viewport: viewport,\n checkboxVisibility: checkboxVisibility,\n collapseAllVisibility: collapseAllVisibility,\n getRowAriaLabel: getRowAriaLabel,\n getRowAriaDescribedBy: getRowAriaDescribedBy,\n checkButtonAriaLabel: checkButtonAriaLabel,\n checkboxCellClassName: checkboxCellClassName,\n useReducedRowRenderer: useReducedRowRenderer,\n indentWidth: indentWidth,\n cellStyleProps: cellStyleProps,\n onRenderDetailsCheckbox: onRenderCheckbox,\n enableUpdateAnimations: enableUpdateAnimations,\n rowWidth: rowWidth,\n useFastIcons: useFastIcons,\n role: rowRole,\n };\n if (!item) {\n if (onRenderMissingItem) {\n return onRenderMissingItem(index, rowProps);\n }\n return null;\n }\n return finalOnRenderRow(rowProps);\n }, [\n compact,\n adjustedColumns,\n selectionMode,\n selection,\n rowId,\n onRowDidMount,\n onRowWillUnmount,\n onRenderItemColumn,\n getCellValueKey,\n eventsToRegister,\n dragDropEvents,\n dragDropHelper,\n viewport,\n checkboxVisibility,\n collapseAllVisibility,\n getRowAriaLabel,\n getRowAriaDescribedBy,\n isHeaderVisible,\n checkButtonAriaLabel,\n checkboxCellClassName,\n useReducedRowRenderer,\n indentWidth,\n cellStyleProps,\n onRenderCheckbox,\n enableUpdateAnimations,\n useFastIcons,\n onRenderDefaultRow,\n onRenderMissingItem,\n props.onRenderRow,\n rowWidth,\n role,\n groupedDetailsListIndexMap,\n ]);\n var onRenderListCell = React.useCallback(function (nestingDepth) {\n return function (item, itemIndex) {\n return onRenderCell(nestingDepth, item, itemIndex);\n };\n }, [onRenderCell]);\n var isRightArrow = React.useCallback(function (event) {\n // eslint-disable-next-line deprecation/deprecation\n return event.which === getRTLSafeKeyCode(KeyCodes.right, theme);\n }, [theme]);\n var focusZoneInnerProps = __assign(__assign({}, focusZoneProps), { componentRef: focusZoneRef, className: classNames.focusZone, direction: focusZoneProps ? focusZoneProps.direction : FocusZoneDirection.vertical, shouldEnterInnerZone: focusZoneProps && focusZoneProps.shouldEnterInnerZone ? focusZoneProps.shouldEnterInnerZone : isRightArrow, onActiveElementChanged: focusZoneProps && focusZoneProps.onActiveElementChanged\n ? focusZoneProps.onActiveElementChanged\n : onActiveRowChanged, shouldRaiseClicksOnEnter: false, onBlur: focusZoneProps && focusZoneProps.onBlur ? focusZoneProps.onBlur : onBlur });\n var list = groups ? (React.createElement(GroupedList, { focusZoneProps: focusZoneInnerProps, componentRef: groupedListRef, groups: groups, groupProps: finalGroupProps, items: items, onRenderCell: onRenderCell, role: \"presentation\", selection: selection, selectionMode: checkboxVisibility !== CheckboxVisibility.hidden ? selectionMode : SelectionMode.none, dragDropEvents: dragDropEvents, dragDropHelper: dragDropHelper, eventsToRegister: rowElementEventMap, listProps: additionalListProps, onGroupExpandStateChanged: onGroupExpandStateChanged, usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize, getGroupHeight: getGroupHeight, compact: compact })) : (React.createElement(FocusZone, __assign({}, focusZoneInnerProps),\n React.createElement(List, __assign({ ref: listRef, role: \"presentation\", items: items, onRenderCell: onRenderListCell(0), usePageCache: usePageCache, onShouldVirtualize: onShouldVirtualize }, additionalListProps))));\n var onHeaderKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.down) {\n if (focusZoneRef.current && focusZoneRef.current.focus()) {\n // select the first item in list after down arrow key event\n // only if nothing was selected; otherwise start with the already-selected item\n if (selection.getSelectedIndices().length === 0) {\n selection.setIndexSelected(0, true, false);\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [selection, focusZoneRef]);\n var onContentKeyDown = React.useCallback(function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.up && !ev.altKey) {\n if (headerRef.current && headerRef.current.focus()) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n }, [headerRef]);\n return (\n // If shouldApplyApplicationRole is true, role application will be applied to make arrow keys work\n // with JAWS.\n React.createElement(\"div\", __assign({ ref: rootRef, className: classNames.root, \"data-automationid\": \"DetailsList\", \"data-is-scrollable\": \"false\", \"aria-label\": ariaLabel }, (shouldApplyApplicationRole ? { role: 'application' } : {})),\n React.createElement(FocusRects, null),\n React.createElement(\"div\", { role: role, \"aria-label\": ariaLabelForGrid, \"aria-rowcount\": isPlaceholderData ? -1 : rowCount, \"aria-colcount\": colCount, \"aria-readonly\": \"true\", \"aria-busy\": isPlaceholderData },\n React.createElement(\"div\", { onKeyDown: onHeaderKeyDown, role: \"presentation\", className: classNames.headerWrapper }, isHeaderVisible &&\n onRenderDetailsHeader({\n componentRef: headerRef,\n selectionMode: selectionMode,\n layoutMode: layoutMode,\n selection: selection,\n columns: adjustedColumns,\n onColumnClick: onColumnHeaderClick,\n onColumnContextMenu: onColumnHeaderContextMenu,\n onColumnResized: onColumnResized,\n onColumnIsSizingChanged: onColumnIsSizingChanged,\n onColumnAutoResized: onColumnAutoResized,\n groupNestingDepth: groupNestingDepth,\n isAllCollapsed: isCollapsed,\n onToggleCollapseAll: onToggleCollapse,\n ariaLabel: ariaLabelForListHeader,\n ariaLabelForSelectAllCheckbox: ariaLabelForSelectAllCheckbox,\n ariaLabelForSelectionColumn: ariaLabelForSelectionColumn,\n selectAllVisibility: selectAllVisibility,\n collapseAllVisibility: groupProps && groupProps.collapseAllVisibility,\n viewport: viewport,\n columnReorderProps: columnReorderProps,\n minimumPixelsForDrag: minimumPixelsForDrag,\n cellStyleProps: cellStyleProps,\n checkboxVisibility: checkboxVisibility,\n indentWidth: indentWidth,\n onRenderDetailsCheckbox: onRenderCheckbox,\n rowWidth: sumColumnWidths(adjustedColumns),\n useFastIcons: useFastIcons,\n }, onRenderDetailsHeader)),\n React.createElement(\"div\", { onKeyDown: onContentKeyDown, role: \"presentation\", className: classNames.contentWrapper }, !disableSelectionZone ? (React.createElement(SelectionZone, __assign({ ref: selectionZoneRef, selection: selection, selectionPreservedOnEmptyClick: selectionPreservedOnEmptyClick, selectionMode: selectionMode, onItemInvoked: onItemInvoked, onItemContextMenu: onItemContextMenu, enterModalOnTouch: enterModalSelectionOnTouch }, (selectionZoneProps || {})), list)) : (list)),\n onRenderDetailsFooter(__assign({}, detailsFooterProps)))));\n};\nvar DetailsListBase = /** @class */ (function (_super) {\n __extends(DetailsListBase, _super);\n function DetailsListBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._header = React.createRef();\n _this._groupedList = React.createRef();\n _this._list = React.createRef();\n _this._focusZone = React.createRef();\n _this._selectionZone = React.createRef();\n _this._onRenderRow = function (props, defaultRender) {\n return React.createElement(DetailsRow, __assign({}, props));\n };\n _this._getDerivedStateFromProps = function (nextProps, previousState) {\n var _a = _this.props, checkboxVisibility = _a.checkboxVisibility, items = _a.items, setKey = _a.setKey, _b = _a.selectionMode, selectionMode = _b === void 0 ? _this._selection.mode : _b, columns = _a.columns, viewport = _a.viewport, compact = _a.compact, dragDropEvents = _a.dragDropEvents;\n var _c = (_this.props.groupProps || {}).isAllGroupsCollapsed, isAllGroupsCollapsed = _c === void 0 ? undefined : _c;\n var newViewportWidth = (nextProps.viewport && nextProps.viewport.width) || 0;\n var oldViewportWidth = (viewport && viewport.width) || 0;\n var shouldResetSelection = nextProps.setKey !== setKey || nextProps.setKey === undefined;\n var shouldForceUpdates = false;\n if (nextProps.layoutMode !== _this.props.layoutMode) {\n shouldForceUpdates = true;\n }\n var nextState = previousState;\n if (shouldResetSelection) {\n _this._initialFocusedIndex = nextProps.initialFocusedIndex;\n // reset focusedItemIndex when setKey changes\n nextState = __assign(__assign({}, nextState), { focusedItemIndex: _this._initialFocusedIndex !== undefined ? _this._initialFocusedIndex : -1 });\n }\n if (!_this.props.disableSelectionZone && nextProps.items !== items) {\n _this._selection.setItems(nextProps.items, shouldResetSelection);\n }\n if (nextProps.checkboxVisibility !== checkboxVisibility ||\n nextProps.columns !== columns ||\n newViewportWidth !== oldViewportWidth ||\n nextProps.compact !== compact) {\n shouldForceUpdates = true;\n }\n nextState = __assign(__assign({}, nextState), _this._adjustColumns(nextProps, nextState, true));\n if (nextProps.selectionMode !== selectionMode) {\n shouldForceUpdates = true;\n }\n if (isAllGroupsCollapsed === undefined &&\n nextProps.groupProps &&\n nextProps.groupProps.isAllGroupsCollapsed !== undefined) {\n nextState = __assign(__assign({}, nextState), { isCollapsed: nextProps.groupProps.isAllGroupsCollapsed, isSomeGroupExpanded: !nextProps.groupProps.isAllGroupsCollapsed });\n }\n if (nextProps.dragDropEvents !== dragDropEvents) {\n _this._dragDropHelper && _this._dragDropHelper.dispose();\n _this._dragDropHelper = nextProps.dragDropEvents\n ? new DragDropHelper({\n selection: _this._selection,\n minimumPixelsForDrag: nextProps.minimumPixelsForDrag,\n })\n : undefined;\n shouldForceUpdates = true;\n }\n if (shouldForceUpdates) {\n nextState = __assign(__assign({}, nextState), { version: {} });\n }\n return nextState;\n };\n _this._onGroupExpandStateChanged = function (isSomeGroupExpanded) {\n _this.setState({ isSomeGroupExpanded: isSomeGroupExpanded });\n };\n _this._onColumnIsSizingChanged = function (column, isSizing) {\n _this.setState({ isSizing: isSizing });\n };\n _this._onRowDidMount = function (row) {\n var _a = row.props, item = _a.item, itemIndex = _a.itemIndex;\n var itemKey = _this._getItemKey(item, itemIndex);\n _this._activeRows[itemKey] = row; // this is used for column auto resize\n _this._setFocusToRowIfPending(row);\n var onRowDidMount = _this.props.onRowDidMount;\n if (onRowDidMount) {\n onRowDidMount(item, itemIndex);\n }\n };\n _this._onRowWillUnmount = function (row) {\n var onRowWillUnmount = _this.props.onRowWillUnmount;\n var _a = row.props, item = _a.item, itemIndex = _a.itemIndex;\n var itemKey = _this._getItemKey(item, itemIndex);\n delete _this._activeRows[itemKey];\n if (onRowWillUnmount) {\n onRowWillUnmount(item, itemIndex);\n }\n };\n _this._onToggleCollapse = function (collapsed) {\n _this.setState({\n isCollapsed: collapsed,\n });\n if (_this._groupedList.current) {\n _this._groupedList.current.toggleCollapseAll(collapsed);\n }\n };\n _this._onColumnResized = function (resizingColumn, newWidth, resizingColumnIndex) {\n var newCalculatedWidth = Math.max(resizingColumn.minWidth || MIN_COLUMN_WIDTH, newWidth);\n if (_this.props.onColumnResize) {\n _this.props.onColumnResize(resizingColumn, newCalculatedWidth, resizingColumnIndex);\n }\n _this._rememberCalculatedWidth(resizingColumn, newCalculatedWidth);\n _this.setState(__assign(__assign({}, _this._adjustColumns(_this.props, _this.state, true, resizingColumnIndex)), { version: {} }));\n };\n /**\n * Callback function when double clicked on the details header column resizer\n * which will measure the column cells of all the active rows and resize the\n * column to the max cell width.\n *\n * @param column - double clicked column definition\n * @param columnIndex - double clicked column index\n * TODO: min width 100 should be changed to const value and should be consistent with the\n * value used on _onSizerMove method in DetailsHeader\n */\n _this._onColumnAutoResized = function (column, columnIndex) {\n var max = 0;\n var count = 0;\n var totalCount = Object.keys(_this._activeRows).length;\n for (var key in _this._activeRows) {\n if (_this._activeRows.hasOwnProperty(key)) {\n var currentRow = _this._activeRows[key];\n currentRow.measureCell(columnIndex, function (width) {\n max = Math.max(max, width);\n count++;\n if (count === totalCount) {\n _this._onColumnResized(column, max, columnIndex);\n }\n });\n }\n }\n };\n /**\n * Call back function when an element in FocusZone becomes active. It will translate it into item\n * and call onActiveItemChanged callback if specified.\n *\n * @param row - element that became active in Focus Zone\n * @param focus - event from Focus Zone\n */\n _this._onActiveRowChanged = function (el, ev) {\n var _a = _this.props, items = _a.items, onActiveItemChanged = _a.onActiveItemChanged;\n if (!el) {\n return;\n }\n // Check and assign index only if the event was raised from any DetailsRow element\n if (el.getAttribute('data-item-index')) {\n var index = Number(el.getAttribute('data-item-index'));\n if (index >= 0) {\n if (onActiveItemChanged) {\n onActiveItemChanged(items[index], index, ev);\n }\n _this.setState({\n focusedItemIndex: index,\n });\n }\n }\n };\n _this._onBlur = function (event) {\n _this.setState({\n focusedItemIndex: -1,\n });\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._activeRows = {};\n _this._columnOverrides = {};\n _this.state = {\n focusedItemIndex: -1,\n lastWidth: 0,\n adjustedColumns: _this._getAdjustedColumns(props, undefined),\n isSizing: false,\n isCollapsed: props.groupProps && props.groupProps.isAllGroupsCollapsed,\n isSomeGroupExpanded: props.groupProps && !props.groupProps.isAllGroupsCollapsed,\n version: {},\n getDerivedStateFromProps: _this._getDerivedStateFromProps,\n };\n _this._selection =\n props.selection ||\n new Selection({\n onSelectionChanged: undefined,\n getKey: props.getKey,\n selectionMode: props.selectionMode,\n });\n if (!_this.props.disableSelectionZone) {\n _this._selection.setItems(props.items, false);\n }\n _this._dragDropHelper = props.dragDropEvents\n ? new DragDropHelper({\n selection: _this._selection,\n minimumPixelsForDrag: props.minimumPixelsForDrag,\n })\n : undefined;\n _this._initialFocusedIndex = props.initialFocusedIndex;\n return _this;\n }\n DetailsListBase.getDerivedStateFromProps = function (nextProps, previousState) {\n return previousState.getDerivedStateFromProps(nextProps, previousState);\n };\n DetailsListBase.prototype.scrollToIndex = function (index, measureItem, scrollToMode) {\n this._list.current && this._list.current.scrollToIndex(index, measureItem, scrollToMode);\n this._groupedList.current && this._groupedList.current.scrollToIndex(index, measureItem, scrollToMode);\n };\n DetailsListBase.prototype.focusIndex = function (index, forceIntoFirstElement, measureItem, scrollToMode) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n var item = this.props.items[index];\n if (item) {\n this.scrollToIndex(index, measureItem, scrollToMode);\n var itemKey = this._getItemKey(item, index);\n var row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRow(row, forceIntoFirstElement);\n }\n }\n };\n DetailsListBase.prototype.getStartItemIndexInView = function () {\n if (this._list && this._list.current) {\n return this._list.current.getStartItemIndexInView();\n }\n else if (this._groupedList && this._groupedList.current) {\n return this._groupedList.current.getStartItemIndexInView();\n }\n return 0;\n };\n DetailsListBase.prototype.componentWillUnmount = function () {\n if (this._dragDropHelper) {\n // TODO If the DragDropHelper was passed via props, this will dispose it, which is incorrect behavior.\n this._dragDropHelper.dispose();\n }\n this._async.dispose();\n };\n DetailsListBase.prototype.componentDidUpdate = function (prevProps, prevState) {\n this._notifyColumnsResized();\n if (this._initialFocusedIndex !== undefined) {\n var item = this.props.items[this._initialFocusedIndex];\n if (item) {\n var itemKey = this._getItemKey(item, this._initialFocusedIndex);\n var row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRowIfPending(row);\n }\n }\n }\n if (this.props.items !== prevProps.items &&\n this.props.items.length > 0 &&\n this.state.focusedItemIndex !== -1 &&\n !elementContains(this._root.current, document.activeElement, false)) {\n // Item set has changed and previously-focused item is gone.\n // Set focus to item at index of previously-focused item if it is in range,\n // else set focus to the last item.\n var index = this.state.focusedItemIndex < this.props.items.length\n ? this.state.focusedItemIndex\n : this.props.items.length - 1;\n var item = this.props.items[index];\n var itemKey = this._getItemKey(item, this.state.focusedItemIndex);\n var row = this._activeRows[itemKey];\n if (row) {\n this._setFocusToRow(row);\n }\n else {\n this._initialFocusedIndex = index;\n }\n }\n if (this.props.onDidUpdate) {\n this.props.onDidUpdate(this);\n }\n };\n DetailsListBase.prototype.render = function () {\n return (React.createElement(DetailsListInner, __assign({}, this.props, this.state, { selection: this._selection, dragDropHelper: this._dragDropHelper, rootRef: this._root, listRef: this._list, groupedListRef: this._groupedList, focusZoneRef: this._focusZone, headerRef: this._header, selectionZoneRef: this._selectionZone, onGroupExpandStateChanged: this._onGroupExpandStateChanged, onColumnIsSizingChanged: this._onColumnIsSizingChanged, onRowDidMount: this._onRowDidMount, onRowWillUnmount: this._onRowWillUnmount, onColumnResized: this._onColumnResized, onColumnAutoResized: this._onColumnAutoResized, onToggleCollapse: this._onToggleCollapse, onActiveRowChanged: this._onActiveRowChanged, onBlur: this._onBlur, onRenderDefaultRow: this._onRenderRow })));\n };\n DetailsListBase.prototype.forceUpdate = function () {\n _super.prototype.forceUpdate.call(this);\n this._forceListUpdates();\n };\n DetailsListBase.prototype._getGroupNestingDepth = function () {\n var groups = this.props.groups;\n var level = 0;\n var groupsInLevel = groups;\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n return level;\n };\n DetailsListBase.prototype._setFocusToRowIfPending = function (row) {\n var itemIndex = row.props.itemIndex;\n if (this._initialFocusedIndex !== undefined && itemIndex === this._initialFocusedIndex) {\n this._setFocusToRow(row);\n delete this._initialFocusedIndex;\n }\n };\n DetailsListBase.prototype._setFocusToRow = function (row, forceIntoFirstElement) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n if (this._selectionZone.current) {\n this._selectionZone.current.ignoreNextFocus();\n }\n this._async.setTimeout(function () {\n row.focus(forceIntoFirstElement);\n }, 0);\n };\n DetailsListBase.prototype._forceListUpdates = function () {\n if (this._groupedList.current) {\n this._groupedList.current.forceUpdate();\n }\n if (this._list.current) {\n this._list.current.forceUpdate();\n }\n };\n DetailsListBase.prototype._notifyColumnsResized = function () {\n this.state.adjustedColumns.forEach(function (column) {\n if (column.onColumnResize) {\n column.onColumnResize(column.currentWidth);\n }\n });\n };\n DetailsListBase.prototype._adjustColumns = function (newProps, previousState, forceUpdate, resizingColumnIndex) {\n var adjustedColumns = this._getAdjustedColumns(newProps, previousState, forceUpdate, resizingColumnIndex);\n var viewport = this.props.viewport;\n var viewportWidth = viewport && viewport.width ? viewport.width : 0;\n return __assign(__assign({}, previousState), { adjustedColumns: adjustedColumns, lastWidth: viewportWidth });\n };\n /** Returns adjusted columns, given the viewport size and layout mode. */\n DetailsListBase.prototype._getAdjustedColumns = function (newProps, previousState, forceUpdate, resizingColumnIndex) {\n var _this = this;\n var newItems = newProps.items, layoutMode = newProps.layoutMode, selectionMode = newProps.selectionMode, viewport = newProps.viewport;\n var viewportWidth = viewport && viewport.width ? viewport.width : 0;\n var newColumns = newProps.columns;\n var columns = this.props ? this.props.columns : [];\n var lastWidth = previousState ? previousState.lastWidth : -1;\n var lastSelectionMode = previousState ? previousState.lastSelectionMode : undefined;\n if (!forceUpdate &&\n lastWidth === viewportWidth &&\n lastSelectionMode === selectionMode &&\n (!columns || newColumns === columns)) {\n return newColumns || [];\n }\n newColumns = newColumns || buildColumns(newItems, true);\n var adjustedColumns;\n if (layoutMode === DetailsListLayoutMode.fixedColumns) {\n adjustedColumns = this._getFixedColumns(newColumns, viewportWidth, newProps);\n // Preserve adjusted column calculated widths.\n adjustedColumns.forEach(function (column) {\n _this._rememberCalculatedWidth(column, column.calculatedWidth);\n });\n }\n else {\n adjustedColumns = this._getJustifiedColumns(newColumns, viewportWidth, newProps);\n adjustedColumns.forEach(function (column) {\n _this._getColumnOverride(column.key).currentWidth = column.calculatedWidth;\n });\n }\n return adjustedColumns;\n };\n /** Builds a set of columns based on the given columns mixed with the current overrides. */\n DetailsListBase.prototype._getFixedColumns = function (newColumns, viewportWidth, props) {\n var _this = this;\n var _a = this.props, _b = _a.selectionMode, selectionMode = _b === void 0 ? this._selection.mode : _b, checkboxVisibility = _a.checkboxVisibility, flexMargin = _a.flexMargin, skipViewportMeasures = _a.skipViewportMeasures;\n var remainingWidth = viewportWidth - (flexMargin || 0);\n var sumProportionalWidth = 0;\n newColumns.forEach(function (col) {\n if (skipViewportMeasures || !col.flexGrow) {\n remainingWidth -= col.maxWidth || col.minWidth || MIN_COLUMN_WIDTH;\n }\n else {\n remainingWidth -= col.minWidth || MIN_COLUMN_WIDTH;\n sumProportionalWidth += col.flexGrow;\n }\n remainingWidth -= getPaddedWidth(col, props, true);\n });\n var rowCheckWidth = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;\n var groupExpandWidth = this._getGroupNestingDepth() * GROUP_EXPAND_WIDTH;\n remainingWidth -= rowCheckWidth + groupExpandWidth;\n var widthFraction = remainingWidth / sumProportionalWidth;\n // Shrinks proportional columns to their max width and adds the remaining width to distribute to other columns.\n if (!skipViewportMeasures) {\n newColumns.forEach(function (column) {\n var newColumn = __assign(__assign({}, column), _this._columnOverrides[column.key]);\n if (newColumn.flexGrow && newColumn.maxWidth) {\n var fullWidth = newColumn.flexGrow * widthFraction + newColumn.minWidth;\n var shrinkWidth = fullWidth - newColumn.maxWidth;\n if (shrinkWidth > 0) {\n remainingWidth += shrinkWidth;\n sumProportionalWidth -= (shrinkWidth / (fullWidth - newColumn.minWidth)) * newColumn.flexGrow;\n }\n }\n });\n }\n widthFraction = remainingWidth > 0 ? remainingWidth / sumProportionalWidth : 0;\n return newColumns.map(function (column) {\n var newColumn = __assign(__assign({}, column), _this._columnOverrides[column.key]);\n // Delay computation until viewport width is available.\n if (!skipViewportMeasures && newColumn.flexGrow && remainingWidth <= 0) {\n return newColumn;\n }\n if (!newColumn.calculatedWidth) {\n if (!skipViewportMeasures && newColumn.flexGrow) {\n // Assigns the proportion of the remaining extra width after all columns have met minimum widths.\n newColumn.calculatedWidth = newColumn.minWidth + newColumn.flexGrow * widthFraction;\n newColumn.calculatedWidth = Math.min(newColumn.calculatedWidth, newColumn.maxWidth || Number.MAX_VALUE);\n }\n else {\n newColumn.calculatedWidth = newColumn.maxWidth || newColumn.minWidth || MIN_COLUMN_WIDTH;\n }\n }\n return newColumn;\n });\n };\n /** Builds a set of columns to fix within the viewport width. */\n DetailsListBase.prototype._getJustifiedColumns = function (newColumns, viewportWidth, props) {\n var _this = this;\n var _a = props.selectionMode, selectionMode = _a === void 0 ? this._selection.mode : _a, checkboxVisibility = props.checkboxVisibility;\n var rowCheckWidth = selectionMode !== SelectionMode.none && checkboxVisibility !== CheckboxVisibility.hidden ? CHECKBOX_WIDTH : 0;\n var groupExpandWidth = this._getGroupNestingDepth() * GROUP_EXPAND_WIDTH;\n var totalWidth = 0; // offset because we have one less inner padding.\n var minimumWidth = 0;\n var availableWidth = viewportWidth - (rowCheckWidth + groupExpandWidth);\n var adjustedColumns = newColumns.map(function (column, i) {\n var baseColumn = __assign(__assign({}, column), { calculatedWidth: column.minWidth || MIN_COLUMN_WIDTH });\n var newColumn = __assign(__assign({}, baseColumn), _this._columnOverrides[column.key]);\n // eslint-disable-next-line deprecation/deprecation\n if (!(baseColumn.isCollapsible || baseColumn.isCollapsable)) {\n minimumWidth += getPaddedWidth(baseColumn, props);\n }\n totalWidth += getPaddedWidth(newColumn, props);\n return newColumn;\n });\n if (minimumWidth > availableWidth) {\n return adjustedColumns;\n }\n var lastIndex = adjustedColumns.length - 1;\n // Shrink or remove collapsable columns.\n while (lastIndex >= 0 && totalWidth > availableWidth) {\n var column = adjustedColumns[lastIndex];\n var minWidth = column.minWidth || MIN_COLUMN_WIDTH;\n var overflowWidth = totalWidth - availableWidth;\n // eslint-disable-next-line deprecation/deprecation\n if (column.calculatedWidth - minWidth >= overflowWidth || !(column.isCollapsible || column.isCollapsable)) {\n var originalWidth = column.calculatedWidth;\n column.calculatedWidth = Math.max(column.calculatedWidth - overflowWidth, minWidth);\n totalWidth -= originalWidth - column.calculatedWidth;\n }\n else {\n totalWidth -= getPaddedWidth(column, props);\n adjustedColumns.splice(lastIndex, 1);\n }\n lastIndex--;\n }\n // Then expand columns starting at the beginning, until we've filled the width.\n for (var i = 0; i < adjustedColumns.length && totalWidth < availableWidth; i++) {\n var column = adjustedColumns[i];\n var isLast = i === adjustedColumns.length - 1;\n var overrides = this._columnOverrides[column.key];\n if (overrides && overrides.calculatedWidth && !isLast) {\n continue;\n }\n var spaceLeft = availableWidth - totalWidth;\n var increment = void 0;\n if (isLast) {\n increment = spaceLeft;\n }\n else {\n var maxWidth = column.maxWidth;\n var minWidth = column.minWidth || maxWidth || MIN_COLUMN_WIDTH;\n increment = maxWidth ? Math.min(spaceLeft, maxWidth - minWidth) : spaceLeft;\n }\n column.calculatedWidth = column.calculatedWidth + increment;\n totalWidth += increment;\n }\n return adjustedColumns;\n };\n DetailsListBase.prototype._rememberCalculatedWidth = function (column, newCalculatedWidth) {\n var overrides = this._getColumnOverride(column.key);\n overrides.calculatedWidth = newCalculatedWidth;\n overrides.currentWidth = newCalculatedWidth;\n };\n DetailsListBase.prototype._getColumnOverride = function (key) {\n return (this._columnOverrides[key] = this._columnOverrides[key] || {});\n };\n DetailsListBase.prototype._getItemKey = function (item, itemIndex) {\n var getKey = this.props.getKey;\n var itemKey = undefined;\n if (item) {\n itemKey = item.key;\n }\n if (getKey) {\n itemKey = getKey(item, itemIndex);\n }\n if (!itemKey) {\n itemKey = itemIndex;\n }\n return itemKey;\n };\n DetailsListBase.defaultProps = {\n layoutMode: DetailsListLayoutMode.justified,\n selectionMode: SelectionMode.multiple,\n constrainMode: ConstrainMode.horizontalConstrained,\n checkboxVisibility: CheckboxVisibility.onHover,\n isHeaderVisible: true,\n compact: false,\n useFastIcons: true,\n };\n DetailsListBase = __decorate([\n withViewport\n ], DetailsListBase);\n return DetailsListBase;\n}(React.Component));\nexport { DetailsListBase };\nexport function buildColumns(items, canResizeColumns, onColumnClick, sortedColumnKey, isSortedDescending, groupedColumnKey, isMultiline) {\n var columns = [];\n if (items && items.length) {\n var firstItem = items[0];\n for (var propName in firstItem) {\n if (firstItem.hasOwnProperty(propName)) {\n columns.push({\n key: propName,\n name: propName,\n fieldName: propName,\n minWidth: MIN_COLUMN_WIDTH,\n maxWidth: 300,\n isCollapsable: !!columns.length,\n isCollapsible: !!columns.length,\n isMultiline: isMultiline === undefined ? false : isMultiline,\n isSorted: sortedColumnKey === propName,\n isSortedDescending: !!isSortedDescending,\n isRowHeader: false,\n columnActionsMode: ColumnActionsMode.clickable,\n isResizable: canResizeColumns,\n onColumnClick: onColumnClick,\n isGrouped: groupedColumnKey === propName,\n });\n }\n }\n }\n return columns;\n}\nfunction getPaddedWidth(column, props, paddingOnly) {\n var _a = props.cellStyleProps, cellStyleProps = _a === void 0 ? DEFAULT_CELL_STYLE_PROPS : _a;\n return ((paddingOnly ? 0 : column.calculatedWidth) +\n cellStyleProps.cellLeftPadding +\n cellStyleProps.cellRightPadding +\n (column.isPadded ? cellStyleProps.cellExtraRightPadding : 0));\n}\nfunction getGroupNestingDepth(groups) {\n var level = 0;\n var groupsInLevel = groups;\n while (groupsInLevel && groupsInLevel.length > 0) {\n level++;\n groupsInLevel = groupsInLevel[0].children;\n }\n return level;\n}\nfunction useGroupedDetailsListIndexMap(groups) {\n return React.useMemo(function () {\n var indexMap = {};\n if (groups) {\n var rowCount = 1;\n var numGroupHeaders = 1;\n for (var _i = 0, groups_1 = groups; _i < groups_1.length; _i++) {\n var group = groups_1[_i];\n var key = group.key;\n indexMap[key] = { numOfGroupHeadersBeforeItem: numGroupHeaders, totalRowCount: rowCount };\n numGroupHeaders++;\n rowCount += group.count + 1;\n }\n }\n return indexMap;\n }, [groups]);\n}\n//# sourceMappingURL=DetailsList.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DetailsList',\n compact: 'ms-DetailsList--Compact',\n contentWrapper: 'ms-DetailsList-contentWrapper',\n headerWrapper: 'ms-DetailsList-headerWrapper',\n isFixed: 'is-fixed',\n isHorizontalConstrained: 'is-horizontalConstrained',\n listCell: 'ms-List-cell',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, isHorizontalConstrained = props.isHorizontalConstrained, compact = props.compact, isFixed = props.isFixed;\n var semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n theme.fonts.small,\n {\n position: 'relative',\n color: semanticColors.listText,\n selectors: (_a = {},\n _a[\"& .\" + classNames.listCell] = {\n minHeight: 38,\n wordBreak: 'break-word',\n },\n _a),\n },\n isFixed && classNames.isFixed,\n compact && [\n classNames.compact,\n {\n selectors: (_b = {},\n _b[\".\" + classNames.listCell] = {\n minHeight: 32,\n },\n _b),\n },\n ],\n isHorizontalConstrained && [\n classNames.isHorizontalConstrained,\n {\n overflowX: 'auto',\n overflowY: 'visible',\n WebkitOverflowScrolling: 'touch',\n },\n ],\n className,\n ],\n focusZone: [\n {\n display: 'inline-block',\n minWidth: '100%',\n minHeight: 1,\n },\n ],\n headerWrapper: classNames.headerWrapper,\n contentWrapper: classNames.contentWrapper,\n };\n};\n//# sourceMappingURL=DetailsList.styles.js.map","/**\n * {@docCategory Dialog}\n */\nexport var DialogType;\n(function (DialogType) {\n /** Standard dialog */\n DialogType[DialogType[\"normal\"] = 0] = \"normal\";\n /** Dialog with large header banner */\n DialogType[DialogType[\"largeHeader\"] = 1] = \"largeHeader\";\n /** Dialog with an 'x' close button in the upper-right corner */\n DialogType[DialogType[\"close\"] = 2] = \"close\";\n})(DialogType || (DialogType = {}));\n//# sourceMappingURL=DialogContent.types.js.map","import { styled } from '../../Utilities';\nimport { DetailsListBase } from './DetailsList.base';\nimport { getStyles } from './DetailsList.styles';\nexport var DetailsList = styled(DetailsListBase, getStyles, undefined, {\n scope: 'DetailsList',\n});\n//# sourceMappingURL=DetailsList.js.map","import { AnimationVariables, getGlobalClassNames, ZIndexes } from '../../Styling';\nexport var animationDuration = AnimationVariables.durationValue2;\nvar globalClassNames = {\n root: 'ms-Modal',\n main: 'ms-Dialog-main',\n scrollableContent: 'ms-Modal-scrollableContent',\n isOpen: 'is-open',\n layer: 'ms-Modal-Layer',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, containerClassName = props.containerClassName, scrollableContentClassName = props.scrollableContentClassName, isOpen = props.isOpen, isVisible = props.isVisible, hasBeenOpened = props.hasBeenOpened, modalRectangleTop = props.modalRectangleTop, theme = props.theme, topOffsetFixed = props.topOffsetFixed, isModeless = props.isModeless, layerClassName = props.layerClassName, isDefaultDragHandle = props.isDefaultDragHandle, windowInnerHeight = props.windowInnerHeight;\n var palette = theme.palette, effects = theme.effects, fonts = theme.fonts;\n var classNames = getGlobalClassNames(globalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n backgroundColor: 'transparent',\n position: isModeless ? 'absolute' : 'fixed',\n height: '100%',\n width: '100%',\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n opacity: 0,\n pointerEvents: 'none',\n transition: \"opacity \" + animationDuration,\n },\n topOffsetFixed &&\n typeof modalRectangleTop === 'number' &&\n hasBeenOpened && {\n alignItems: 'flex-start',\n },\n isOpen && classNames.isOpen,\n isVisible && {\n opacity: 1,\n pointerEvents: 'auto',\n },\n className,\n ],\n main: [\n classNames.main,\n {\n boxShadow: effects.elevation64,\n borderRadius: effects.roundedCorner2,\n backgroundColor: palette.white,\n boxSizing: 'border-box',\n position: 'relative',\n textAlign: 'left',\n outline: '3px solid transparent',\n maxHeight: 'calc(100% - 32px)',\n maxWidth: 'calc(100% - 32px)',\n minHeight: '176px',\n minWidth: '288px',\n overflowY: 'auto',\n zIndex: isModeless ? ZIndexes.Layer : undefined,\n },\n topOffsetFixed &&\n typeof modalRectangleTop === 'number' &&\n hasBeenOpened && {\n top: modalRectangleTop,\n },\n isDefaultDragHandle && {\n cursor: 'move',\n },\n containerClassName,\n ],\n scrollableContent: [\n classNames.scrollableContent,\n {\n overflowY: 'auto',\n flexGrow: 1,\n maxHeight: '100vh',\n selectors: (_a = {},\n _a['@supports (-webkit-overflow-scrolling: touch)'] = {\n maxHeight: windowInnerHeight,\n },\n _a),\n },\n scrollableContentClassName,\n ],\n layer: isModeless && [\n layerClassName,\n classNames.layer,\n {\n position: 'static',\n width: 'unset',\n height: 'unset',\n },\n ],\n keyboardMoveIconContainer: {\n position: 'absolute',\n display: 'flex',\n justifyContent: 'center',\n width: '100%',\n padding: '3px 0px',\n },\n keyboardMoveIcon: {\n // eslint-disable-next-line deprecation/deprecation\n fontSize: fonts.xLargePlus.fontSize,\n width: '24px',\n },\n };\n};\n//# sourceMappingURL=Modal.styles.js.map","import { memoizeFunction } from '../../Utilities';\nimport { mergeStyles } from '../../Styling';\nexport var getClassNames = memoizeFunction(function (className, isDragging) {\n return {\n root: mergeStyles(className, isDragging && {\n touchAction: 'none',\n selectors: {\n '& *': {\n userSelect: 'none',\n },\n },\n }),\n };\n});\n//# sourceMappingURL=DraggableZone.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getClassNames } from './DraggableZone.styles';\nimport { on } from '../../Utilities';\nvar eventMapping = {\n touch: {\n start: 'touchstart',\n move: 'touchmove',\n stop: 'touchend',\n },\n mouse: {\n start: 'mousedown',\n move: 'mousemove',\n stop: 'mouseup',\n },\n};\nvar DraggableZone = /** @class */ (function (_super) {\n __extends(DraggableZone, _super);\n function DraggableZone(props) {\n var _this = _super.call(this, props) || this;\n _this._currentEventType = eventMapping.mouse;\n _this._events = [];\n _this._onMouseDown = function (event) {\n var onMouseDown = React.Children.only(_this.props.children).props.onMouseDown;\n if (onMouseDown) {\n onMouseDown(event);\n }\n _this._currentEventType = eventMapping.mouse;\n return _this._onDragStart(event);\n };\n _this._onMouseUp = function (event) {\n var onMouseUp = React.Children.only(_this.props.children).props.onMouseUp;\n if (onMouseUp) {\n onMouseUp(event);\n }\n _this._currentEventType = eventMapping.mouse;\n return _this._onDragStop(event);\n };\n _this._onTouchStart = function (event) {\n var onTouchStart = React.Children.only(_this.props.children).props.onTouchStart;\n if (onTouchStart) {\n onTouchStart(event);\n }\n _this._currentEventType = eventMapping.touch;\n return _this._onDragStart(event);\n };\n _this._onTouchEnd = function (event) {\n var onTouchEnd = React.Children.only(_this.props.children).props.onTouchEnd;\n if (onTouchEnd) {\n onTouchEnd(event);\n }\n _this._currentEventType = eventMapping.touch;\n _this._onDragStop(event);\n };\n _this._onDragStart = function (event) {\n // Only handle left click for dragging\n if (typeof event.button === 'number' && event.button !== 0) {\n return false;\n }\n // If the target doesn't match the handleSelector OR\n // if the target does match the preventDragSelector, bail out\n if ((_this.props.handleSelector && !_this._matchesSelector(event.target, _this.props.handleSelector)) ||\n (_this.props.preventDragSelector &&\n _this._matchesSelector(event.target, _this.props.preventDragSelector))) {\n return;\n }\n // Remember the touch identifier if this is a touch event so we can\n // distinguish between individual touches in multitouch scenarios\n // by remembering which touch point we were given\n _this._touchId = _this._getTouchId(event);\n var position = _this._getControlPosition(event);\n if (position === undefined) {\n return;\n }\n var dragData = _this._createDragDataFromPosition(position);\n _this.props.onStart && _this.props.onStart(event, dragData);\n _this.setState({\n isDragging: true,\n lastPosition: position,\n });\n // hook up the appropriate mouse/touch events to the body to ensure\n // smooth dragging\n _this._events = [\n on(document.body, _this._currentEventType.move, _this._onDrag, true /* use capture phase */),\n on(document.body, _this._currentEventType.stop, _this._onDragStop, true /* use capture phase */),\n ];\n };\n _this._onDrag = function (event) {\n // Prevent scrolling on mobile devices\n if (event.type === 'touchmove') {\n event.preventDefault();\n }\n var position = _this._getControlPosition(event);\n if (!position) {\n return;\n }\n // create the updated drag data from the position data\n var updatedData = _this._createUpdatedDragData(_this._createDragDataFromPosition(position));\n var updatedPosition = updatedData.position;\n _this.props.onDragChange && _this.props.onDragChange(event, updatedData);\n _this.setState({\n position: updatedPosition,\n lastPosition: position,\n });\n };\n _this._onDragStop = function (event) {\n if (!_this.state.isDragging) {\n return;\n }\n var position = _this._getControlPosition(event);\n if (!position) {\n return;\n }\n var baseDragData = _this._createDragDataFromPosition(position);\n // Set dragging to false and reset the lastPosition\n _this.setState({\n isDragging: false,\n lastPosition: undefined,\n });\n _this.props.onStop && _this.props.onStop(event, baseDragData);\n if (_this.props.position) {\n _this.setState({\n position: _this.props.position,\n });\n }\n // Remove event handlers\n _this._events.forEach(function (dispose) { return dispose(); });\n };\n _this.state = {\n isDragging: false,\n position: _this.props.position || { x: 0, y: 0 },\n lastPosition: undefined,\n };\n return _this;\n }\n DraggableZone.prototype.componentDidUpdate = function (prevProps) {\n if (this.props.position && (!prevProps.position || this.props.position !== prevProps.position)) {\n this.setState({ position: this.props.position });\n }\n };\n DraggableZone.prototype.componentWillUnmount = function () {\n this._events.forEach(function (dispose) { return dispose(); });\n };\n DraggableZone.prototype.render = function () {\n var child = React.Children.only(this.props.children);\n var props = child.props;\n var position = this.props.position;\n var _a = this.state, statePosition = _a.position, isDragging = _a.isDragging;\n var x = statePosition.x;\n var y = statePosition.y;\n if (position && !isDragging) {\n x = position.x;\n y = position.y;\n }\n return React.cloneElement(child, {\n style: __assign(__assign({}, props.style), { transform: \"translate(\" + x + \"px, \" + y + \"px)\" }),\n className: getClassNames(props.className, this.state.isDragging).root,\n onMouseDown: this._onMouseDown,\n onMouseUp: this._onMouseUp,\n onTouchStart: this._onTouchStart,\n onTouchEnd: this._onTouchEnd,\n });\n };\n /**\n * Get the control position based off the event that fired\n * @param event - The event to get offsets from\n */\n DraggableZone.prototype._getControlPosition = function (event) {\n var touchObj = this._getActiveTouch(event);\n // did we get the right touch?\n if (this._touchId !== undefined && !touchObj) {\n return undefined;\n }\n var eventToGetOffset = touchObj || event;\n return {\n x: eventToGetOffset.clientX,\n y: eventToGetOffset.clientY,\n };\n };\n /**\n * Get the active touch point that we have saved from the event's TouchList\n * @param event - The event used to get the TouchList for the active touch point\n */\n DraggableZone.prototype._getActiveTouch = function (event) {\n return ((event.targetTouches && this._findTouchInTouchList(event.targetTouches)) ||\n (event.changedTouches && this._findTouchInTouchList(event.changedTouches)));\n };\n /**\n * Get the initial touch identifier associated with the given event\n * @param event - The event that contains the TouchList\n */\n DraggableZone.prototype._getTouchId = function (event) {\n var touch = (event.targetTouches && event.targetTouches[0]) || (event.changedTouches && event.changedTouches[0]);\n if (touch) {\n return touch.identifier;\n }\n };\n /**\n * Returns if an element (or any of the element's parents) match the given selector\n */\n DraggableZone.prototype._matchesSelector = function (element, selector) {\n if (!element || element === document.body) {\n return false;\n }\n var matchesSelectorFn = element.matches || element.webkitMatchesSelector || element.msMatchesSelector; /* for IE */\n if (!matchesSelectorFn) {\n return false;\n }\n return matchesSelectorFn.call(element, selector) || this._matchesSelector(element.parentElement, selector);\n };\n /**\n * Attempts to find the Touch that matches the identifier we stored in dragStart\n * @param touchList The TouchList to look for the stored identifier from dragStart\n */\n DraggableZone.prototype._findTouchInTouchList = function (touchList) {\n if (this._touchId === undefined) {\n return;\n }\n for (var i = 0; i < touchList.length; i++) {\n if (touchList[i].identifier === this._touchId) {\n return touchList[i];\n }\n }\n return undefined;\n };\n /**\n * Create DragData based off of the last known position and the new position passed in\n * @param position The new position as part of the drag\n */\n DraggableZone.prototype._createDragDataFromPosition = function (position) {\n var lastPosition = this.state.lastPosition;\n // If we have no lastPosition, use the given position\n // for last position\n if (lastPosition === undefined) {\n return {\n delta: { x: 0, y: 0 },\n lastPosition: position,\n position: position,\n };\n }\n return {\n delta: {\n x: position.x - lastPosition.x,\n y: position.y - lastPosition.y,\n },\n lastPosition: lastPosition,\n position: position,\n };\n };\n /**\n * Creates an updated DragData based off the current position and given baseDragData\n * @param baseDragData The base DragData (from _createDragDataFromPosition) used to calculate the updated positions\n */\n DraggableZone.prototype._createUpdatedDragData = function (baseDragData) {\n var position = this.state.position;\n return {\n position: {\n x: position.x + baseDragData.delta.x,\n y: position.y + baseDragData.delta.y,\n },\n delta: baseDragData.delta,\n lastPosition: position,\n };\n };\n return DraggableZone;\n}(React.Component));\nexport { DraggableZone };\n//# sourceMappingURL=DraggableZone.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, allowScrollOnElement, allowOverscrollOnElement, getPropsWithDefaults, KeyCodes, elementContains, EventGroup, } from '../../Utilities';\nimport { FocusTrapZone } from '../../FocusTrapZone';\nimport { animationDuration } from './Modal.styles';\nimport { Overlay } from '../../Overlay';\nimport { Layer } from '../../Layer';\nimport { Popup } from '../../Popup';\nimport { ResponsiveMode, useResponsiveMode } from '../../ResponsiveMode';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { Icon } from '../../Icon';\nimport { DraggableZone } from '../../utilities/DraggableZone/index';\nimport { useWindow } from '@fluentui/react-window-provider';\nimport { useBoolean, useMergedRefs, useWarnings, useConst, useSetTimeout, useId, useUnmount, } from '@fluentui/react-hooks';\nvar ZERO = { x: 0, y: 0 };\nvar DEFAULT_PROPS = {\n isOpen: false,\n isDarkOverlay: true,\n className: '',\n containerClassName: '',\n};\nvar getClassNames = classNamesFunction();\nvar getMoveDelta = function (ev) {\n var delta = 10;\n if (ev.shiftKey) {\n if (!ev.ctrlKey) {\n delta = 50;\n }\n }\n else if (ev.ctrlKey) {\n delta = 1;\n }\n return delta;\n};\nvar useComponentRef = function (props, focusTrapZone) {\n React.useImperativeHandle(props.componentRef, function () { return ({\n focus: function () {\n if (focusTrapZone.current) {\n focusTrapZone.current.focus();\n }\n },\n }); }, [focusTrapZone]);\n};\nexport var ModalBase = React.forwardRef(function (propsWithoutDefaults, ref) {\n var props = getPropsWithDefaults(DEFAULT_PROPS, propsWithoutDefaults);\n var allowTouchBodyScroll = props.allowTouchBodyScroll, className = props.className, children = props.children, containerClassName = props.containerClassName, scrollableContentClassName = props.scrollableContentClassName, elementToFocusOnDismiss = props.elementToFocusOnDismiss, firstFocusableSelector = props.firstFocusableSelector, forceFocusInsideTrap = props.forceFocusInsideTrap, ignoreExternalFocusing = props.ignoreExternalFocusing, isBlocking = props.isBlocking, isAlert = props.isAlert, isClickableOutsideFocusTrap = props.isClickableOutsideFocusTrap, isDarkOverlay = props.isDarkOverlay, onDismiss = props.onDismiss, layerProps = props.layerProps, overlay = props.overlay, isOpen = props.isOpen, titleAriaId = props.titleAriaId, styles = props.styles, subtitleAriaId = props.subtitleAriaId, theme = props.theme, topOffsetFixed = props.topOffsetFixed, responsiveMode = props.responsiveMode, \n // eslint-disable-next-line deprecation/deprecation\n onLayerDidMount = props.onLayerDidMount, isModeless = props.isModeless, dragOptions = props.dragOptions, onDismissed = props.onDismissed, enableAriaHiddenSiblings = props.enableAriaHiddenSiblings;\n var rootRef = React.useRef(null);\n var focusTrapZone = React.useRef(null);\n var focusTrapZoneElm = React.useRef(null);\n var mergedRef = useMergedRefs(rootRef, ref);\n var modalResponsiveMode = useResponsiveMode(mergedRef);\n var focusTrapZoneId = useId('ModalFocusTrapZone');\n var win = useWindow();\n var _a = useSetTimeout(), setTimeout = _a.setTimeout, clearTimeout = _a.clearTimeout;\n var _b = React.useState(isOpen), isModalOpen = _b[0], setIsModalOpen = _b[1];\n var _c = React.useState(isOpen), isVisible = _c[0], setIsVisible = _c[1];\n var _d = React.useState(ZERO), coordinates = _d[0], setCoordinates = _d[1];\n var _e = React.useState(), modalRectangleTop = _e[0], setModalRectangleTop = _e[1];\n var _f = useBoolean(false), isModalMenuOpen = _f[0], _g = _f[1], toggleModalMenuOpen = _g.toggle, setModalMenuClose = _g.setFalse;\n var internalState = useConst(function () { return ({\n onModalCloseTimer: 0,\n allowTouchBodyScroll: allowTouchBodyScroll,\n scrollableContent: null,\n lastSetCoordinates: ZERO,\n events: new EventGroup({}),\n }); });\n var keepInBounds = (dragOptions || {}).keepInBounds;\n var isAlertRole = isAlert !== null && isAlert !== void 0 ? isAlert : (isBlocking && !isModeless);\n var layerClassName = layerProps === undefined ? '' : layerProps.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n containerClassName: containerClassName,\n scrollableContentClassName: scrollableContentClassName,\n isOpen: isOpen,\n isVisible: isVisible,\n hasBeenOpened: internalState.hasBeenOpened,\n modalRectangleTop: modalRectangleTop,\n topOffsetFixed: topOffsetFixed,\n isModeless: isModeless,\n layerClassName: layerClassName,\n windowInnerHeight: win === null || win === void 0 ? void 0 : win.innerHeight,\n isDefaultDragHandle: dragOptions && !dragOptions.dragHandleSelector,\n });\n var mergedLayerProps = __assign(__assign({ eventBubblingEnabled: false }, layerProps), { onLayerDidMount: layerProps && layerProps.onLayerDidMount ? layerProps.onLayerDidMount : onLayerDidMount, insertFirst: isModeless, className: classNames.layer });\n // Allow the user to scroll within the modal but not on the body\n var allowScrollOnModal = React.useCallback(function (elt) {\n if (elt) {\n if (internalState.allowTouchBodyScroll) {\n allowOverscrollOnElement(elt, internalState.events);\n }\n else {\n allowScrollOnElement(elt, internalState.events);\n }\n }\n else {\n internalState.events.off(internalState.scrollableContent);\n }\n internalState.scrollableContent = elt;\n }, [internalState]);\n var registerInitialModalPosition = function () {\n var dialogMain = focusTrapZoneElm.current;\n var modalRectangle = dialogMain === null || dialogMain === void 0 ? void 0 : dialogMain.getBoundingClientRect();\n if (modalRectangle) {\n if (topOffsetFixed) {\n setModalRectangleTop(modalRectangle.top);\n }\n if (keepInBounds) {\n // x/y are unavailable in IE, so use the equivalent left/top\n internalState.minPosition = { x: -modalRectangle.left, y: -modalRectangle.top };\n internalState.maxPosition = { x: modalRectangle.left, y: modalRectangle.top };\n }\n }\n };\n /**\n * Clamps an axis to a specified min and max position.\n *\n * @param axis A string that represents the axis (x/y).\n * @param position The position on the axis.\n */\n var getClampedAxis = React.useCallback(function (axis, position) {\n var minPosition = internalState.minPosition, maxPosition = internalState.maxPosition;\n if (keepInBounds && minPosition && maxPosition) {\n position = Math.max(minPosition[axis], position);\n position = Math.min(maxPosition[axis], position);\n }\n return position;\n }, [keepInBounds, internalState]);\n var handleModalClose = function () {\n var _a;\n internalState.lastSetCoordinates = ZERO;\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = false;\n setIsModalOpen(false);\n setCoordinates(ZERO);\n (_a = internalState.disposeOnKeyUp) === null || _a === void 0 ? void 0 : _a.call(internalState);\n onDismissed === null || onDismissed === void 0 ? void 0 : onDismissed();\n };\n var handleDragStart = React.useCallback(function () {\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = false;\n }, [internalState, setModalMenuClose]);\n var handleDrag = React.useCallback(function (ev, dragData) {\n setCoordinates(function (prevValue) { return ({\n x: getClampedAxis('x', prevValue.x + dragData.delta.x),\n y: getClampedAxis('y', prevValue.y + dragData.delta.y),\n }); });\n }, [getClampedAxis]);\n var handleDragStop = React.useCallback(function () {\n if (focusTrapZone.current) {\n focusTrapZone.current.focus();\n }\n }, []);\n var handleEnterKeyboardMoveMode = function () {\n // We need a global handleKeyDown event when we are in the move mode so that we can\n // handle the key presses and the components inside the modal do not get the events\n var handleKeyDown = function (ev) {\n if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n // CTRL + ALT + SPACE is handled during keyUp\n ev.preventDefault();\n ev.stopPropagation();\n return;\n }\n if (isModalMenuOpen && (ev.altKey || ev.keyCode === KeyCodes.escape)) {\n setModalMenuClose();\n }\n if (internalState.isInKeyboardMoveMode && (ev.keyCode === KeyCodes.escape || ev.keyCode === KeyCodes.enter)) {\n internalState.isInKeyboardMoveMode = false;\n ev.preventDefault();\n ev.stopPropagation();\n }\n if (internalState.isInKeyboardMoveMode) {\n var handledEvent = true;\n var delta_1 = getMoveDelta(ev);\n switch (ev.keyCode) {\n /* eslint-disable no-fallthrough */\n case KeyCodes.escape:\n setCoordinates(internalState.lastSetCoordinates);\n case KeyCodes.enter: {\n // TODO: determine if fallthrough was intentional\n /* eslint-enable no-fallthrough */\n internalState.lastSetCoordinates = ZERO;\n // setIsInKeyboardMoveMode(false);\n break;\n }\n case KeyCodes.up: {\n setCoordinates(function (prevValue) { return ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y - delta_1) }); });\n break;\n }\n case KeyCodes.down: {\n setCoordinates(function (prevValue) { return ({ x: prevValue.x, y: getClampedAxis('y', prevValue.y + delta_1) }); });\n break;\n }\n case KeyCodes.left: {\n setCoordinates(function (prevValue) { return ({ x: getClampedAxis('x', prevValue.x - delta_1), y: prevValue.y }); });\n break;\n }\n case KeyCodes.right: {\n setCoordinates(function (prevValue) { return ({ x: getClampedAxis('x', prevValue.x + delta_1), y: prevValue.y }); });\n break;\n }\n default: {\n handledEvent = false;\n }\n }\n if (handledEvent) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n internalState.lastSetCoordinates = coordinates;\n setModalMenuClose();\n internalState.isInKeyboardMoveMode = true;\n internalState.events.on(win, 'keydown', handleKeyDown, true /* useCapture */);\n internalState.disposeOnKeyDown = function () {\n internalState.events.off(win, 'keydown', handleKeyDown, true /* useCapture */);\n internalState.disposeOnKeyDown = undefined;\n };\n };\n var handleExitKeyboardMoveMode = function () {\n var _a;\n internalState.lastSetCoordinates = ZERO;\n internalState.isInKeyboardMoveMode = false;\n (_a = internalState.disposeOnKeyDown) === null || _a === void 0 ? void 0 : _a.call(internalState);\n };\n var registerForKeyUp = function () {\n var handleKeyUp = function (ev) {\n // Needs to handle the CTRL + ALT + SPACE key during keyup due to FireFox bug:\n // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143\n if (ev.altKey && ev.ctrlKey && ev.keyCode === KeyCodes.space) {\n if (elementContains(internalState.scrollableContent, ev.target)) {\n toggleModalMenuOpen();\n ev.preventDefault();\n ev.stopPropagation();\n }\n }\n };\n if (!internalState.disposeOnKeyUp) {\n internalState.events.on(win, 'keyup', handleKeyUp, true /* useCapture */);\n internalState.disposeOnKeyUp = function () {\n internalState.events.off(win, 'keyup', handleKeyUp, true /* useCapture */);\n internalState.disposeOnKeyUp = undefined;\n };\n }\n };\n React.useEffect(function () {\n clearTimeout(internalState.onModalCloseTimer);\n // Opening the dialog\n if (isOpen) {\n // This must be done after the modal content has rendered\n requestAnimationFrame(function () { return setTimeout(registerInitialModalPosition, 0); });\n setIsModalOpen(true);\n // Add a keyUp handler for all key up events once the dialog is open.\n if (dragOptions) {\n registerForKeyUp();\n }\n internalState.hasBeenOpened = true;\n setIsVisible(true);\n }\n // Closing the dialog\n if (!isOpen && isModalOpen) {\n internalState.onModalCloseTimer = setTimeout(handleModalClose, parseFloat(animationDuration) * 1000);\n setIsVisible(false);\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run if isModalOpen or isOpen mutates.\n }, [isModalOpen, isOpen]);\n useUnmount(function () {\n internalState.events.dispose();\n });\n useComponentRef(props, focusTrapZone);\n useDebugWarnings(props);\n var modalContent = (React.createElement(FocusTrapZone, { id: focusTrapZoneId, ref: focusTrapZoneElm, componentRef: focusTrapZone, className: classNames.main, elementToFocusOnDismiss: elementToFocusOnDismiss, isClickableOutsideFocusTrap: isModeless || isClickableOutsideFocusTrap || !isBlocking, ignoreExternalFocusing: ignoreExternalFocusing, forceFocusInsideTrap: isModeless ? !isModeless : forceFocusInsideTrap, firstFocusableSelector: firstFocusableSelector, focusPreviouslyFocusedInnerElement: true, onBlur: internalState.isInKeyboardMoveMode ? handleExitKeyboardMoveMode : undefined, enableAriaHiddenSiblings: enableAriaHiddenSiblings },\n dragOptions && internalState.isInKeyboardMoveMode && (React.createElement(\"div\", { className: classNames.keyboardMoveIconContainer }, dragOptions.keyboardMoveIconProps ? (React.createElement(Icon, __assign({}, dragOptions.keyboardMoveIconProps))) : (React.createElement(Icon, { iconName: \"move\", className: classNames.keyboardMoveIcon })))),\n React.createElement(\"div\", { ref: allowScrollOnModal, className: classNames.scrollableContent, \"data-is-scrollable\": true },\n dragOptions && isModalMenuOpen && (React.createElement(dragOptions.menu, { items: [\n { key: 'move', text: dragOptions.moveMenuItemText, onClick: handleEnterKeyboardMoveMode },\n { key: 'close', text: dragOptions.closeMenuItemText, onClick: handleModalClose },\n ], onDismiss: setModalMenuClose, alignTargetEdge: true, coverTarget: true, directionalHint: DirectionalHint.topLeftEdge, directionalHintFixed: true, shouldFocusOnMount: true, target: internalState.scrollableContent })),\n children)));\n return ((isModalOpen && modalResponsiveMode >= (responsiveMode || ResponsiveMode.small) && (React.createElement(Layer, __assign({ ref: mergedRef }, mergedLayerProps),\n React.createElement(Popup, { role: isAlertRole ? 'alertdialog' : 'dialog', \"aria-modal\": !isModeless, ariaLabelledBy: titleAriaId, ariaDescribedBy: subtitleAriaId, onDismiss: onDismiss, shouldRestoreFocus: !ignoreExternalFocusing },\n React.createElement(\"div\", { className: classNames.root, role: !isModeless ? 'document' : undefined },\n !isModeless && (React.createElement(Overlay, __assign({ \"aria-hidden\": true, isDarkThemed: isDarkOverlay, onClick: isBlocking ? undefined : onDismiss, allowTouchBodyScroll: allowTouchBodyScroll }, overlay))),\n dragOptions ? (React.createElement(DraggableZone, { handleSelector: dragOptions.dragHandleSelector || \"#\" + focusTrapZoneId, preventDragSelector: \"button\", onStart: handleDragStart, onDragChange: handleDrag, onStop: handleDragStop, position: coordinates }, modalContent)) : (modalContent)))))) ||\n null);\n});\nModalBase.displayName = 'Modal';\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: 'Modal',\n props: props,\n deprecations: { onLayerDidMount: 'layerProps.onLayerDidMount' },\n });\n }\n}\n//# sourceMappingURL=Modal.base.js.map","import * as React from 'react';\n/**\n * Hook which synchronously executes a callback when the component is about to unmount.\n *\n * @param callback - Function to call during unmount.\n */\nexport var useUnmount = function (callback) {\n var unmountRef = React.useRef(callback);\n unmountRef.current = callback;\n React.useEffect(function () { return function () {\n var _a;\n (_a = unmountRef.current) === null || _a === void 0 ? void 0 : _a.call(unmountRef);\n }; }, []);\n};\n//# sourceMappingURL=useUnmount.js.map","import { styled } from '../../Utilities';\nimport { ModalBase } from './Modal.base';\nimport { getStyles } from './Modal.styles';\nexport var Modal = styled(ModalBase, getStyles, undefined, {\n scope: 'Modal',\n fields: ['theme', 'styles', 'enableAriaHiddenSiblings'],\n});\nModal.displayName = 'Modal';\n//# sourceMappingURL=Modal.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\nvar DialogFooterBase = /** @class */ (function (_super) {\n __extends(DialogFooterBase, _super);\n function DialogFooterBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DialogFooterBase.prototype.render = function () {\n var _a = this.props, className = _a.className, styles = _a.styles, theme = _a.theme;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.actions },\n React.createElement(\"div\", { className: this._classNames.actionsRight }, this._renderChildrenAsActions())));\n };\n DialogFooterBase.prototype._renderChildrenAsActions = function () {\n var _this = this;\n return React.Children.map(this.props.children, function (child) {\n return child ? React.createElement(\"span\", { className: _this._classNames.action }, child) : null;\n });\n };\n return DialogFooterBase;\n}(React.Component));\nexport { DialogFooterBase };\n//# sourceMappingURL=DialogFooter.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n actions: 'ms-Dialog-actions',\n action: 'ms-Dialog-action',\n actionsRight: 'ms-Dialog-actionsRight',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n actions: [\n classNames.actions,\n {\n position: 'relative',\n width: '100%',\n minHeight: '24px',\n lineHeight: '24px',\n margin: '16px 0 0',\n fontSize: '0',\n selectors: {\n '.ms-Button': {\n lineHeight: 'normal',\n },\n },\n },\n className,\n ],\n action: [\n classNames.action,\n {\n margin: '0 4px',\n },\n ],\n actionsRight: [\n classNames.actionsRight,\n {\n textAlign: 'right',\n marginRight: '-4px',\n fontSize: '0',\n },\n ],\n };\n};\n//# sourceMappingURL=DialogFooter.styles.js.map","import { styled } from '../../Utilities';\nimport { DialogFooterBase } from './DialogFooter.base';\nimport { getStyles } from './DialogFooter.styles';\nexport var DialogFooter = styled(DialogFooterBase, getStyles, undefined, { scope: 'DialogFooter' });\n//# sourceMappingURL=DialogFooter.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, warnDeprecations, initializeComponentRef } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { IconButton } from '../../Button';\nimport { DialogFooter } from './DialogFooter';\nimport { withResponsiveMode } from '../../ResponsiveMode';\nvar getClassNames = classNamesFunction();\nvar DialogFooterType = (React.createElement(DialogFooter, null)).type;\nvar COMPONENT_NAME = 'DialogContent';\n// eslint-disable-next-line deprecation/deprecation\nvar DialogContentBase = /** @class */ (function (_super) {\n __extends(DialogContentBase, _super);\n function DialogContentBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n titleId: 'titleProps.id',\n });\n return _this;\n }\n DialogContentBase.prototype.render = function () {\n var _a = this.props, showCloseButton = _a.showCloseButton, className = _a.className, closeButtonAriaLabel = _a.closeButtonAriaLabel, onDismiss = _a.onDismiss, subTextId = _a.subTextId, subText = _a.subText, _b = _a.titleProps, titleProps = _b === void 0 ? {} : _b, \n // eslint-disable-next-line deprecation/deprecation\n titleId = _a.titleId, title = _a.title, type = _a.type, styles = _a.styles, theme = _a.theme, draggableHeaderClassName = _a.draggableHeaderClassName;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isLargeHeader: type === DialogType.largeHeader,\n isClose: type === DialogType.close,\n draggableHeaderClassName: draggableHeaderClassName,\n });\n var groupings = this._groupChildren();\n var subTextContent;\n if (subText) {\n subTextContent = (React.createElement(\"p\", { className: classNames.subText, id: subTextId }, subText));\n }\n return (React.createElement(\"div\", { className: classNames.content },\n React.createElement(\"div\", { className: classNames.header },\n React.createElement(\"div\", __assign({ id: titleId, role: \"heading\", \"aria-level\": 1 }, titleProps, { className: css(classNames.title, titleProps.className) }), title),\n React.createElement(\"div\", { className: classNames.topButton },\n this.props.topButtonsProps.map(function (props, index) { return (React.createElement(IconButton, __assign({ key: props.uniqueId || index }, props))); }),\n (type === DialogType.close || (showCloseButton && type !== DialogType.largeHeader)) && (React.createElement(IconButton, { className: classNames.button, iconProps: { iconName: 'Cancel' }, ariaLabel: closeButtonAriaLabel, onClick: onDismiss })))),\n React.createElement(\"div\", { className: classNames.inner },\n React.createElement(\"div\", { className: classNames.innerContent },\n subTextContent,\n groupings.contents),\n groupings.footers)));\n };\n // @TODO - typing the footers as an array of DialogFooter is difficult because\n // casing \"child as DialogFooter\" causes a problem because\n // \"Neither type 'ReactElement' nor type 'DialogFooter' is assignable to the other.\"\n DialogContentBase.prototype._groupChildren = function () {\n var groupings = {\n footers: [],\n contents: [],\n };\n React.Children.map(this.props.children, function (child) {\n if (typeof child === 'object' && child !== null && child.type === DialogFooterType) {\n groupings.footers.push(child);\n }\n else {\n groupings.contents.push(child);\n }\n });\n return groupings;\n };\n DialogContentBase.defaultProps = {\n showCloseButton: false,\n className: '',\n topButtonsProps: [],\n closeButtonAriaLabel: 'Close',\n };\n DialogContentBase = __decorate([\n withResponsiveMode\n ], DialogContentBase);\n return DialogContentBase;\n}(React.Component));\nexport { DialogContentBase };\n//# sourceMappingURL=DialogContent.base.js.map","import { FontWeights, getGlobalClassNames, IconFontSizes, ScreenWidthMinSmall, ScreenWidthMaxSmall, } from '../../Styling';\nvar GlobalClassNames = {\n contentLgHeader: 'ms-Dialog-lgHeader',\n close: 'ms-Dialog--close',\n subText: 'ms-Dialog-subText',\n header: 'ms-Dialog-header',\n headerLg: 'ms-Dialog--lgHeader',\n button: 'ms-Dialog-button ms-Dialog-button--close',\n inner: 'ms-Dialog-inner',\n content: 'ms-Dialog-content',\n title: 'ms-Dialog-title',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c;\n var className = props.className, theme = props.theme, isLargeHeader = props.isLargeHeader, isClose = props.isClose, hidden = props.hidden, isMultiline = props.isMultiline, draggableHeaderClassName = props.draggableHeaderClassName;\n var palette = theme.palette, fonts = theme.fonts, effects = theme.effects, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n content: [\n isLargeHeader && [\n classNames.contentLgHeader,\n {\n borderTop: \"4px solid \" + palette.themePrimary,\n },\n ],\n isClose && classNames.close,\n {\n flexGrow: 1,\n overflowY: 'hidden',\n },\n className,\n ],\n subText: [\n classNames.subText,\n fonts.medium,\n {\n margin: '0 0 24px 0',\n color: semanticColors.bodySubtext,\n lineHeight: '1.5',\n wordWrap: 'break-word',\n fontWeight: FontWeights.regular,\n },\n ],\n header: [\n classNames.header,\n {\n position: 'relative',\n width: '100%',\n boxSizing: 'border-box',\n },\n isClose && classNames.close,\n draggableHeaderClassName && [\n draggableHeaderClassName,\n {\n cursor: 'move',\n },\n ],\n ],\n button: [\n classNames.button,\n hidden && {\n selectors: {\n '.ms-Icon.ms-Icon--Cancel': {\n color: semanticColors.buttonText,\n fontSize: IconFontSizes.medium,\n },\n },\n },\n ],\n inner: [\n classNames.inner,\n {\n padding: '0 24px 24px',\n selectors: (_a = {},\n _a[\"@media (min-width: \" + ScreenWidthMinSmall + \"px) and (max-width: \" + ScreenWidthMaxSmall + \"px)\"] = {\n padding: '0 16px 16px',\n },\n _a),\n },\n ],\n innerContent: [\n classNames.content,\n {\n position: 'relative',\n width: '100%',\n },\n ],\n title: [\n classNames.title,\n fonts.xLarge,\n {\n color: semanticColors.bodyText,\n margin: '0',\n minHeight: fonts.xLarge.fontSize,\n padding: '16px 46px 20px 24px',\n lineHeight: 'normal',\n selectors: (_b = {},\n _b[\"@media (min-width: \" + ScreenWidthMinSmall + \"px) and (max-width: \" + ScreenWidthMaxSmall + \"px)\"] = {\n padding: '16px 46px 16px 16px',\n },\n _b),\n },\n isLargeHeader && {\n color: semanticColors.menuHeader,\n },\n isMultiline && { fontSize: fonts.xxLarge.fontSize },\n ],\n topButton: [\n {\n display: 'flex',\n flexDirection: 'row',\n flexWrap: 'nowrap',\n position: 'absolute',\n top: '0',\n right: '0',\n padding: '15px 15px 0 0',\n selectors: (_c = {\n '> *': {\n flex: '0 0 auto',\n },\n '.ms-Dialog-button': {\n color: semanticColors.buttonText,\n },\n '.ms-Dialog-button:hover': {\n color: semanticColors.buttonTextHovered,\n borderRadius: effects.roundedCorner2,\n }\n },\n _c[\"@media (min-width: \" + ScreenWidthMinSmall + \"px) and (max-width: \" + ScreenWidthMaxSmall + \"px)\"] = {\n padding: '15px 8px 0 0',\n },\n _c),\n },\n ],\n };\n};\n//# sourceMappingURL=DialogContent.styles.js.map","import { styled } from '../../Utilities';\nimport { DialogContentBase } from './DialogContent.base';\nimport { getStyles } from './DialogContent.styles';\nexport var DialogContent = styled(DialogContentBase, getStyles, undefined, { scope: 'DialogContent' });\n//# sourceMappingURL=DialogContent.js.map","import { __assign, __decorate, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { warnDeprecations, classNamesFunction, getId } from '../../Utilities';\nimport { DialogType } from './DialogContent.types';\nimport { Modal } from '../../Modal';\nimport { withResponsiveMode } from '../../ResponsiveMode';\nvar getClassNames = classNamesFunction();\nimport { DialogContent } from './DialogContent';\nvar DefaultModalProps = {\n isDarkOverlay: false,\n isBlocking: false,\n className: '',\n containerClassName: '',\n topOffsetFixed: false,\n};\nvar DefaultDialogContentProps = {\n type: DialogType.normal,\n className: '',\n topButtonsProps: [],\n};\n// eslint-disable-next-line deprecation/deprecation\nvar DialogBase = /** @class */ (function (_super) {\n __extends(DialogBase, _super);\n function DialogBase(props) {\n var _this = _super.call(this, props) || this;\n _this._getSubTextId = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, ariaDescribedById = _a.ariaDescribedById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, subText = _a.subText;\n var id = (modalProps && modalProps.subtitleAriaId) || ariaDescribedById;\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.subText) || subText) && _this._defaultSubTextId;\n }\n return id;\n };\n _this._getTitleTextId = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, ariaLabelledById = _a.ariaLabelledById, modalProps = _a.modalProps, dialogContentProps = _a.dialogContentProps, title = _a.title;\n var id = (modalProps && modalProps.titleAriaId) || ariaLabelledById;\n if (!id) {\n id = ((dialogContentProps && dialogContentProps.title) || title) && _this._defaultTitleTextId;\n }\n return id;\n };\n _this._id = getId('Dialog');\n _this._defaultTitleTextId = _this._id + '-title';\n _this._defaultSubTextId = _this._id + '-subText';\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations('Dialog', props, {\n isOpen: 'hidden',\n type: 'dialogContentProps.type',\n subText: 'dialogContentProps.subText',\n contentClassName: 'dialogContentProps.className',\n topButtonsProps: 'dialogContentProps.topButtonsProps',\n className: 'modalProps.className',\n isDarkOverlay: 'modalProps.isDarkOverlay',\n isBlocking: 'modalProps.isBlocking',\n containerClassName: 'modalProps.containerClassName',\n onDismissed: 'modalProps.onDismissed',\n onLayerDidMount: 'modalProps.layerProps.onLayerDidMount',\n ariaDescribedById: 'modalProps.subtitleAriaId',\n ariaLabelledById: 'modalProps.titleAriaId',\n });\n }\n return _this;\n }\n DialogBase.prototype.render = function () {\n var _a, _b;\n var _c = this.props, \n /* eslint-disable deprecation/deprecation */\n className = _c.className, containerClassName = _c.containerClassName, contentClassName = _c.contentClassName, elementToFocusOnDismiss = _c.elementToFocusOnDismiss, firstFocusableSelector = _c.firstFocusableSelector, forceFocusInsideTrap = _c.forceFocusInsideTrap, styles = _c.styles, hidden = _c.hidden, ignoreExternalFocusing = _c.ignoreExternalFocusing, isBlocking = _c.isBlocking, isClickableOutsideFocusTrap = _c.isClickableOutsideFocusTrap, isDarkOverlay = _c.isDarkOverlay, isOpen = _c.isOpen, onDismiss = _c.onDismiss, onDismissed = _c.onDismissed, onLayerDidMount = _c.onLayerDidMount, responsiveMode = _c.responsiveMode, subText = _c.subText, theme = _c.theme, title = _c.title, topButtonsProps = _c.topButtonsProps, type = _c.type, \n /* eslint-enable deprecation/deprecation */\n minWidth = _c.minWidth, maxWidth = _c.maxWidth, modalProps = _c.modalProps;\n var mergedLayerProps = __assign({}, (modalProps ? modalProps.layerProps : { onLayerDidMount: onLayerDidMount }));\n if (onLayerDidMount && !mergedLayerProps.onLayerDidMount) {\n mergedLayerProps.onLayerDidMount = onLayerDidMount;\n }\n var dialogDraggableClassName;\n var dragOptions;\n // if we are draggable, make sure we are using the correct\n // draggable classname and selectors\n if (modalProps && modalProps.dragOptions && !modalProps.dragOptions.dragHandleSelector) {\n dialogDraggableClassName = 'ms-Dialog-draggable-header';\n dragOptions = __assign(__assign({}, modalProps.dragOptions), { dragHandleSelector: \".\" + dialogDraggableClassName });\n }\n else {\n dragOptions = modalProps && modalProps.dragOptions;\n }\n var mergedModalProps = __assign(__assign(__assign(__assign({}, DefaultModalProps), { className: className,\n containerClassName: containerClassName,\n isBlocking: isBlocking,\n isDarkOverlay: isDarkOverlay,\n onDismissed: onDismissed }), modalProps), { layerProps: mergedLayerProps, dragOptions: dragOptions });\n var dialogContentProps = __assign(__assign(__assign({ className: contentClassName, subText: subText,\n title: title,\n topButtonsProps: topButtonsProps,\n type: type }, DefaultDialogContentProps), this.props.dialogContentProps), { draggableHeaderClassName: dialogDraggableClassName, titleProps: __assign({ \n // eslint-disable-next-line deprecation/deprecation\n id: ((_a = this.props.dialogContentProps) === null || _a === void 0 ? void 0 : _a.titleId) || this._defaultTitleTextId }, (_b = this.props.dialogContentProps) === null || _b === void 0 ? void 0 : _b.titleProps) });\n var classNames = getClassNames(styles, {\n theme: theme,\n className: mergedModalProps.className,\n containerClassName: mergedModalProps.containerClassName,\n hidden: hidden,\n dialogDefaultMinWidth: minWidth,\n dialogDefaultMaxWidth: maxWidth,\n });\n return (React.createElement(Modal, __assign({ elementToFocusOnDismiss: elementToFocusOnDismiss, firstFocusableSelector: firstFocusableSelector, forceFocusInsideTrap: forceFocusInsideTrap, ignoreExternalFocusing: ignoreExternalFocusing, isClickableOutsideFocusTrap: isClickableOutsideFocusTrap, responsiveMode: responsiveMode }, mergedModalProps, { isOpen: isOpen !== undefined ? isOpen : !hidden, className: classNames.root, containerClassName: classNames.main, onDismiss: onDismiss ? onDismiss : mergedModalProps.onDismiss, subtitleAriaId: this._getSubTextId(), titleAriaId: this._getTitleTextId() }),\n React.createElement(DialogContent, __assign({ subTextId: this._defaultSubTextId, showCloseButton: mergedModalProps.isBlocking, onDismiss: onDismiss }, dialogContentProps), this.props.children)));\n };\n DialogBase.defaultProps = {\n hidden: true,\n };\n DialogBase = __decorate([\n withResponsiveMode\n ], DialogBase);\n return DialogBase;\n}(React.Component));\nexport { DialogBase };\n//# sourceMappingURL=Dialog.base.js.map","import { ScreenWidthMinMedium, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Dialog',\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, containerClassName = props.containerClassName, // eslint-disable-line deprecation/deprecation\n _b = props.dialogDefaultMinWidth, // eslint-disable-line deprecation/deprecation\n dialogDefaultMinWidth = _b === void 0 ? '288px' : _b, _c = props.dialogDefaultMaxWidth, dialogDefaultMaxWidth = _c === void 0 ? '340px' : _c, hidden = props.hidden, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [classNames.root, theme.fonts.medium, className],\n main: [\n {\n width: dialogDefaultMinWidth,\n outline: '3px solid transparent',\n selectors: (_a = {},\n _a[\"@media (min-width: \" + ScreenWidthMinMedium + \"px)\"] = {\n width: 'auto',\n maxWidth: dialogDefaultMaxWidth,\n minWidth: dialogDefaultMinWidth,\n },\n _a),\n },\n !hidden && { display: 'flex' },\n containerClassName,\n ],\n };\n};\n//# sourceMappingURL=Dialog.styles.js.map","import { styled } from '../../Utilities';\nimport { DialogBase } from './Dialog.base';\nimport { getStyles } from './Dialog.styles';\nexport var Dialog = styled(DialogBase, getStyles, undefined, { scope: 'Dialog' });\nDialog.displayName = 'Dialog';\n//# sourceMappingURL=Dialog.js.map","/**\n * {@docCategory DocumentCard}\n */\nexport var DocumentCardType;\n(function (DocumentCardType) {\n /**\n * Standard DocumentCard.\n */\n DocumentCardType[DocumentCardType[\"normal\"] = 0] = \"normal\";\n /**\n * Compact layout. Displays the preview beside the details, rather than above.\n */\n DocumentCardType[DocumentCardType[\"compact\"] = 1] = \"compact\";\n})(DocumentCardType || (DocumentCardType = {}));\n//# sourceMappingURL=DocumentCard.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, KeyCodes, getNativeProps, divProperties, warnDeprecations, initializeComponentRef, } from '../../Utilities';\nimport { DocumentCardType } from './DocumentCard.types';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'DocumentCard';\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardBase = /** @class */ (function (_super) {\n __extends(DocumentCardBase, _super);\n function DocumentCardBase(props) {\n var _this = _super.call(this, props) || this;\n _this._rootElement = React.createRef();\n _this._onClick = function (ev) {\n _this._onAction(ev);\n };\n _this._onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter || ev.which === KeyCodes.space) {\n _this._onAction(ev);\n }\n };\n _this._onAction = function (ev) {\n var _a = _this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, onClickTarget = _a.onClickTarget;\n if (onClick) {\n onClick(ev);\n }\n else if (!onClick && onClickHref) {\n // If no onClick Function was provided and we do have an onClickHref, redirect to the onClickHref\n if (onClickTarget) {\n window.open(onClickHref, onClickTarget, 'noreferrer noopener nofollow');\n }\n else {\n window.location.href = onClickHref;\n }\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n accentColor: undefined,\n });\n return _this;\n }\n DocumentCardBase.prototype.render = function () {\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, onClick = _a.onClick, onClickHref = _a.onClickHref, children = _a.children, type = _a.type, accentColor = _a.accentColor, styles = _a.styles, theme = _a.theme, className = _a.className;\n var nativeProps = getNativeProps(this.props, divProperties, [\n 'className',\n 'onClick',\n 'type',\n 'role',\n ]);\n var actionable = onClick || onClickHref ? true : false;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n actionable: actionable,\n compact: type === DocumentCardType.compact ? true : false,\n });\n // Override the border color if an accent color was provided (compact card only)\n var style;\n if (type === DocumentCardType.compact && accentColor) {\n style = {\n borderBottomColor: accentColor,\n };\n }\n // if this element is actionable it should have an aria role\n var role = this.props.role || (actionable ? (onClick ? 'button' : 'link') : undefined);\n var tabIndex = actionable ? 0 : undefined;\n return (React.createElement(\"div\", __assign({ ref: this._rootElement, tabIndex: tabIndex, \"data-is-focusable\": actionable, role: role, className: this._classNames.root, onKeyDown: actionable ? this._onKeyDown : undefined, onClick: actionable ? this._onClick : undefined, style: style }, nativeProps), children));\n };\n DocumentCardBase.prototype.focus = function () {\n if (this._rootElement.current) {\n this._rootElement.current.focus();\n }\n };\n DocumentCardBase.defaultProps = {\n type: DocumentCardType.normal,\n };\n return DocumentCardBase;\n}(React.Component));\nexport { DocumentCardBase };\n//# sourceMappingURL=DocumentCard.base.js.map","import { getFocusStyle, getGlobalClassNames, HighContrastSelector } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nexport var DocumentCardPreviewGlobalClassNames = {\n root: 'ms-DocumentCardPreview',\n icon: 'ms-DocumentCardPreview-icon',\n iconContainer: 'ms-DocumentCardPreview-iconContainer',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var theme = props.theme, className = props.className, isFileList = props.isFileList;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardPreviewGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n backgroundColor: isFileList ? palette.white : palette.neutralLighterAlt,\n borderBottom: \"1px solid \" + palette.neutralLight,\n overflow: \"hidden\",\n position: 'relative',\n },\n className,\n ],\n previewIcon: [\n classNames.iconContainer,\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n },\n ],\n icon: [\n classNames.icon,\n {\n left: '10px',\n bottom: '10px',\n position: 'absolute',\n },\n ],\n fileList: {\n padding: '16px 16px 0 16px',\n listStyleType: 'none',\n margin: 0,\n selectors: {\n li: {\n height: '16px',\n lineHeight: '16px',\n display: 'flex',\n flexWrap: 'nowrap',\n alignItems: 'center',\n marginBottom: '8px',\n overflow: 'hidden',\n },\n },\n },\n fileListIcon: {\n display: 'inline-block',\n flexShrink: 0,\n marginRight: '8px',\n },\n fileListLink: [\n getFocusStyle(theme, {\n highContrastStyle: {\n border: '1px solid WindowText',\n outline: 'none',\n },\n }),\n {\n boxSizing: 'border-box',\n color: palette.neutralDark,\n flexGrow: 1,\n overflow: 'hidden',\n display: 'inline-block',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n selectors: (_a = {\n ':hover': {\n color: palette.themePrimary,\n }\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = {\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n outline: 'none',\n },\n _b),\n },\n _a),\n },\n ],\n fileListOverflowText: {\n padding: '0px 16px 8px 16px',\n display: 'block',\n },\n };\n};\n//# sourceMappingURL=DocumentCardPreview.styles.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nvar VERTICAL_PADDING = 8;\nvar HORIZONTAL_PADDING = 16;\nvar IMAGE_SIZE = 32;\nvar PERSONA_TEXT_GUTTER = 8;\nexport var DocumentCardActivityGlobalClassNames = {\n root: 'ms-DocumentCardActivity',\n multiplePeople: 'ms-DocumentCardActivity--multiplePeople',\n details: 'ms-DocumentCardActivity-details',\n name: 'ms-DocumentCardActivity-name',\n activity: 'ms-DocumentCardActivity-activity',\n avatars: 'ms-DocumentCardActivity-avatars',\n avatar: 'ms-DocumentCardActivity-avatar',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, multiplePeople = props.multiplePeople;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardActivityGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n multiplePeople && classNames.multiplePeople,\n {\n padding: VERTICAL_PADDING + \"px \" + HORIZONTAL_PADDING + \"px\",\n position: 'relative',\n },\n className,\n ],\n avatars: [\n classNames.avatars,\n {\n marginLeft: '-2px',\n height: '32px',\n },\n ],\n avatar: [\n classNames.avatar,\n {\n display: 'inline-block',\n verticalAlign: 'top',\n position: 'relative',\n textAlign: 'center',\n width: IMAGE_SIZE,\n height: IMAGE_SIZE,\n selectors: {\n '&:after': {\n content: '\" \"',\n position: 'absolute',\n left: '-1px',\n top: '-1px',\n right: '-1px',\n bottom: '-1px',\n border: \"2px solid \" + palette.white,\n borderRadius: '50%',\n },\n ':nth-of-type(2)': multiplePeople && {\n marginLeft: '-16px',\n },\n },\n },\n ],\n details: [\n classNames.details,\n {\n left: multiplePeople\n ? HORIZONTAL_PADDING + IMAGE_SIZE * 1.5 + PERSONA_TEXT_GUTTER + \"px\"\n : HORIZONTAL_PADDING + IMAGE_SIZE + PERSONA_TEXT_GUTTER + \"px\",\n height: IMAGE_SIZE,\n position: 'absolute',\n top: VERTICAL_PADDING,\n width: \"calc(100% - \" + (HORIZONTAL_PADDING + IMAGE_SIZE + PERSONA_TEXT_GUTTER + HORIZONTAL_PADDING) + \"px)\",\n },\n ],\n name: [\n classNames.name,\n {\n display: 'block',\n fontSize: fonts.small.fontSize,\n lineHeight: '15px',\n height: '15px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n color: palette.neutralPrimary,\n fontWeight: FontWeights.semibold,\n },\n ],\n activity: [\n classNames.activity,\n {\n display: 'block',\n fontSize: fonts.small.fontSize,\n lineHeight: '15px',\n height: '15px',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n color: palette.neutralSecondary,\n },\n ],\n };\n};\n//# sourceMappingURL=DocumentCardActivity.styles.js.map","import { getGlobalClassNames } from '../../Styling';\nexport var DocumentCardTitleGlobalClassNames = {\n root: 'ms-DocumentCardTitle',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, showAsSecondaryTitle = props.showAsSecondaryTitle;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardTitleGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n showAsSecondaryTitle ? fonts.medium : fonts.large,\n {\n padding: '8px 16px',\n display: 'block',\n overflow: 'hidden',\n wordWrap: 'break-word',\n height: showAsSecondaryTitle ? '45px' : '38px',\n lineHeight: showAsSecondaryTitle ? '18px' : '21px',\n color: showAsSecondaryTitle ? palette.neutralSecondary : palette.neutralPrimary,\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardTitle.styles.js.map","import { getGlobalClassNames, FontWeights } from '../../Styling';\nexport var DocumentCardLocationGlobalClassNames = {\n root: 'ms-DocumentCardLocation',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(DocumentCardLocationGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.small,\n {\n color: palette.themePrimary,\n display: 'block',\n fontWeight: FontWeights.semibold,\n overflow: 'hidden',\n padding: '8px 16px',\n position: 'relative',\n textDecoration: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n selectors: {\n ':hover': {\n color: palette.themePrimary,\n cursor: 'pointer',\n },\n },\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardLocation.styles.js.map","import { getGlobalClassNames, getInputFocusStyle } from '../../Styling';\nimport { IsFocusVisibleClassName } from '../../Utilities';\nimport { DocumentCardPreviewGlobalClassNames as previewClassNames } from './DocumentCardPreview.styles';\nimport { DocumentCardActivityGlobalClassNames as activityClassNames } from './DocumentCardActivity.styles';\nimport { DocumentCardTitleGlobalClassNames as titleClassNames } from './DocumentCardTitle.styles';\nimport { DocumentCardLocationGlobalClassNames as locationClassNames } from './DocumentCardLocation.styles';\nvar GlobalClassNames = {\n root: 'ms-DocumentCard',\n rootActionable: 'ms-DocumentCard--actionable',\n rootCompact: 'ms-DocumentCard--compact',\n};\nexport var getStyles = function (props) {\n var _a, _b;\n var className = props.className, theme = props.theme, actionable = props.actionable, compact = props.compact;\n var palette = theme.palette, fonts = theme.fonts, effects = theme.effects;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n WebkitFontSmoothing: 'antialiased',\n backgroundColor: palette.white,\n border: \"1px solid \" + palette.neutralLight,\n maxWidth: '320px',\n minWidth: '206px',\n userSelect: 'none',\n position: 'relative',\n selectors: (_a = {\n ':focus': {\n outline: '0px solid',\n }\n },\n _a[\".\" + IsFocusVisibleClassName + \" &:focus\"] = getInputFocusStyle(palette.neutralSecondary, effects.roundedCorner2),\n _a[\".\" + locationClassNames.root + \" + .\" + titleClassNames.root] = {\n paddingTop: '4px',\n },\n _a),\n },\n actionable && [\n classNames.rootActionable,\n {\n selectors: {\n ':hover': {\n cursor: 'pointer',\n borderColor: palette.neutralTertiaryAlt,\n },\n ':hover:after': {\n content: '\" \"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n border: \"1px solid \" + palette.neutralTertiaryAlt,\n pointerEvents: 'none',\n },\n },\n },\n ],\n compact && [\n classNames.rootCompact,\n {\n display: 'flex',\n maxWidth: '480px',\n height: '108px',\n selectors: (_b = {},\n _b[\".\" + previewClassNames.root] = {\n borderRight: \"1px solid \" + palette.neutralLight,\n borderBottom: 0,\n maxHeight: '106px',\n maxWidth: '144px',\n },\n _b[\".\" + previewClassNames.icon] = {\n maxHeight: '32px',\n maxWidth: '32px',\n },\n _b[\".\" + activityClassNames.root] = {\n paddingBottom: '12px',\n },\n _b[\".\" + titleClassNames.root] = {\n paddingBottom: '12px 16px 8px 16px',\n fontSize: fonts.mediumPlus.fontSize,\n lineHeight: '16px',\n },\n _b),\n },\n ],\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCard.styles.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardBase } from './DocumentCard.base';\nimport { getStyles } from './DocumentCard.styles';\nexport var DocumentCard = styled(DocumentCardBase, getStyles, undefined, { scope: 'DocumentCard' });\n//# sourceMappingURL=DocumentCard.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nimport { IconButton } from '../../Button';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardActionsBase = /** @class */ (function (_super) {\n __extends(DocumentCardActionsBase, _super);\n function DocumentCardActionsBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardActionsBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, actions = _a.actions, views = _a.views, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.root },\n actions &&\n actions.map(function (action, index) {\n return (React.createElement(\"div\", { className: _this._classNames.action, key: index },\n React.createElement(IconButton, __assign({}, action))));\n }),\n views > 0 && (React.createElement(\"div\", { className: this._classNames.views },\n React.createElement(Icon, { iconName: \"View\", className: this._classNames.viewsIcon }),\n views))));\n };\n return DocumentCardActionsBase;\n}(React.Component));\nexport { DocumentCardActionsBase };\n//# sourceMappingURL=DocumentCardActions.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar ACTION_SIZE = 34;\nvar HORIZONTAL_PADDING = 12;\nvar VERTICAL_PADDING = 4;\nvar GlobalClassNames = {\n root: 'ms-DocumentCardActions',\n action: 'ms-DocumentCardActions-action',\n views: 'ms-DocumentCardActions-views',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n height: ACTION_SIZE + \"px\",\n padding: VERTICAL_PADDING + \"px \" + HORIZONTAL_PADDING + \"px\",\n position: 'relative',\n },\n className,\n ],\n action: [\n classNames.action,\n {\n float: 'left',\n marginRight: '4px',\n color: palette.neutralSecondary,\n cursor: 'pointer',\n selectors: {\n '.ms-Button': {\n fontSize: fonts.mediumPlus.fontSize,\n height: ACTION_SIZE,\n width: ACTION_SIZE,\n },\n '.ms-Button:hover .ms-Button-icon': {\n color: theme.semanticColors.buttonText,\n cursor: 'pointer',\n },\n },\n },\n ],\n views: [\n classNames.views,\n {\n textAlign: 'right',\n lineHeight: ACTION_SIZE,\n },\n ],\n viewsIcon: {\n marginRight: '8px',\n fontSize: fonts.medium.fontSize,\n verticalAlign: 'top',\n },\n };\n};\n//# sourceMappingURL=DocumentCardActions.styles.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardActionsBase } from './DocumentCardActions.base';\nimport { getStyles } from './DocumentCardActions.styles';\nexport var DocumentCardActions = styled(DocumentCardActionsBase, getStyles, undefined, { scope: 'DocumentCardActions' });\n//# sourceMappingURL=DocumentCardActions.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport { PersonaSize } from '../../Persona';\nimport { PersonaCoin } from '../../PersonaCoin';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardActivityBase = /** @class */ (function (_super) {\n __extends(DocumentCardActivityBase, _super);\n function DocumentCardActivityBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardActivityBase.prototype.render = function () {\n var _a = this.props, activity = _a.activity, people = _a.people, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n multiplePeople: people.length > 1,\n });\n if (!people || people.length === 0) {\n return null;\n }\n return (React.createElement(\"div\", { className: this._classNames.root },\n this._renderAvatars(people),\n React.createElement(\"div\", { className: this._classNames.details },\n React.createElement(\"span\", { className: this._classNames.name }, this._getNameString(people)),\n React.createElement(\"span\", { className: this._classNames.activity }, activity))));\n };\n DocumentCardActivityBase.prototype._renderAvatars = function (people) {\n return (React.createElement(\"div\", { className: this._classNames.avatars },\n people.length > 1 ? this._renderAvatar(people[1]) : null,\n this._renderAvatar(people[0])));\n };\n DocumentCardActivityBase.prototype._renderAvatar = function (person) {\n return (React.createElement(\"div\", { className: this._classNames.avatar },\n React.createElement(PersonaCoin, { imageInitials: person.initials, text: person.name, imageUrl: person.profileImageSrc, initialsColor: person.initialsColor, allowPhoneInitials: person.allowPhoneInitials, role: \"presentation\", size: PersonaSize.size32 })));\n };\n DocumentCardActivityBase.prototype._getNameString = function (people) {\n var nameString = people[0].name;\n if (people.length >= 2) {\n nameString += ' +' + (people.length - 1);\n }\n return nameString;\n };\n return DocumentCardActivityBase;\n}(React.Component));\nexport { DocumentCardActivityBase };\n//# sourceMappingURL=DocumentCardActivity.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardActivityBase } from './DocumentCardActivity.base';\nimport { getStyles } from './DocumentCardActivity.styles';\nexport var DocumentCardActivity = styled(DocumentCardActivityBase, getStyles, undefined, { scope: 'DocumentCardActivity' });\n//# sourceMappingURL=DocumentCardActivity.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardDetailsBase = /** @class */ (function (_super) {\n __extends(DocumentCardDetailsBase, _super);\n function DocumentCardDetailsBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardDetailsBase.prototype.render = function () {\n var _a = this.props, children = _a.children, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return React.createElement(\"div\", { className: this._classNames.root }, children);\n };\n return DocumentCardDetailsBase;\n}(React.Component));\nexport { DocumentCardDetailsBase };\n//# sourceMappingURL=DocumentCardDetails.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DocumentCardDetails',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n display: 'flex',\n flexDirection: 'column',\n flex: 1,\n justifyContent: 'space-between',\n overflow: 'hidden',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardDetails.styles.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardDetailsBase } from './DocumentCardDetails.base';\nimport { getStyles } from './DocumentCardDetails.styles';\nexport var DocumentCardDetails = styled(DocumentCardDetailsBase, getStyles, undefined, { scope: 'DocumentCardDetails' });\n//# sourceMappingURL=DocumentCardDetails.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardLocationBase = /** @class */ (function (_super) {\n __extends(DocumentCardLocationBase, _super);\n function DocumentCardLocationBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardLocationBase.prototype.render = function () {\n var _a = this.props, location = _a.location, locationHref = _a.locationHref, ariaLabel = _a.ariaLabel, onClick = _a.onClick, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"a\", { className: this._classNames.root, href: locationHref, onClick: onClick, \"aria-label\": ariaLabel }, location));\n };\n return DocumentCardLocationBase;\n}(React.Component));\nexport { DocumentCardLocationBase };\n//# sourceMappingURL=DocumentCardLocation.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardLocationBase } from './DocumentCardLocation.base';\nimport { getStyles } from './DocumentCardLocation.styles';\nexport var DocumentCardLocation = styled(DocumentCardLocationBase, getStyles, undefined, { scope: 'DocumentCardLocation' });\n//# sourceMappingURL=DocumentCardLocation.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { Image } from '../../Image';\nimport { Link } from '../../Link';\nimport { classNamesFunction, css, initializeComponentRef } from '../../Utilities';\nvar DEFAULT_DISPLAY_COUNT = 3;\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardPreviewBase = /** @class */ (function (_super) {\n __extends(DocumentCardPreviewBase, _super);\n function DocumentCardPreviewBase(props) {\n var _this = _super.call(this, props) || this;\n _this._renderPreviewList = function (previewImages) {\n var _a = _this.props, getOverflowDocumentCountText = _a.getOverflowDocumentCountText, _b = _a.maxDisplayCount, maxDisplayCount = _b === void 0 ? DEFAULT_DISPLAY_COUNT : _b;\n // Determine how many documents we won't be showing\n var overflowDocumentCount = previewImages.length - maxDisplayCount;\n // Determine the overflow text that will be rendered after the preview list.\n var overflowText = overflowDocumentCount\n ? getOverflowDocumentCountText\n ? getOverflowDocumentCountText(overflowDocumentCount)\n : '+' + overflowDocumentCount\n : null;\n // Create list items for the documents to be shown\n var fileListItems = previewImages.slice(0, maxDisplayCount).map(function (file, fileIndex) { return (React.createElement(\"li\", { key: fileIndex },\n React.createElement(Image, { className: _this._classNames.fileListIcon, src: file.iconSrc, role: \"presentation\", alt: \"\", width: \"16px\", height: \"16px\" }),\n React.createElement(Link, __assign({ className: _this._classNames.fileListLink, \n // eslint-disable-next-line deprecation/deprecation\n href: file.url }, file.linkProps), file.name))); });\n return (React.createElement(\"div\", null,\n React.createElement(\"ul\", { className: _this._classNames.fileList }, fileListItems),\n overflowText && React.createElement(\"span\", { className: _this._classNames.fileListOverflowText }, overflowText)));\n };\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardPreviewBase.prototype.render = function () {\n var _a = this.props, previewImages = _a.previewImages, styles = _a.styles, theme = _a.theme, className = _a.className;\n var style;\n var preview;\n var isFileList = previewImages.length > 1;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n isFileList: isFileList,\n });\n if (previewImages.length > 1) {\n // Render a list of files\n preview = this._renderPreviewList(previewImages);\n }\n else if (previewImages.length === 1) {\n // Render a single preview\n preview = this._renderPreviewImage(previewImages[0]);\n // Override the border color if an accent color was provided\n /* eslint-disable deprecation/deprecation */\n if (previewImages[0].accentColor) {\n style = {\n borderBottomColor: previewImages[0].accentColor,\n };\n }\n /* eslint-enable deprecation/deprecation */\n }\n return (React.createElement(\"div\", { className: this._classNames.root, style: style }, preview));\n };\n DocumentCardPreviewBase.prototype._renderPreviewImage = function (previewImage) {\n var width = previewImage.width, height = previewImage.height, imageFit = previewImage.imageFit, previewIconProps = previewImage.previewIconProps, previewIconContainerClass = previewImage.previewIconContainerClass;\n if (previewIconProps) {\n return (React.createElement(\"div\", { className: css(this._classNames.previewIcon, previewIconContainerClass), style: { width: width, height: height } },\n React.createElement(Icon, __assign({}, previewIconProps))));\n }\n var image = (React.createElement(Image, { width: width, height: height, imageFit: imageFit, src: previewImage.previewImageSrc, role: \"presentation\", alt: \"\" }));\n var icon;\n if (previewImage.iconSrc) {\n icon = React.createElement(Image, { className: this._classNames.icon, src: previewImage.iconSrc, role: \"presentation\", alt: \"\" });\n }\n return (React.createElement(\"div\", null,\n image,\n icon));\n };\n return DocumentCardPreviewBase;\n}(React.Component));\nexport { DocumentCardPreviewBase };\n//# sourceMappingURL=DocumentCardPreview.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardPreviewBase } from './DocumentCardPreview.base';\nimport { getStyles } from './DocumentCardPreview.styles';\nexport var DocumentCardPreview = styled(DocumentCardPreviewBase, getStyles, undefined, { scope: 'DocumentCardPreview' });\n//# sourceMappingURL=DocumentCardPreview.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { Image } from '../../Image';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardImageBase = /** @class */ (function (_super) {\n __extends(DocumentCardImageBase, _super);\n function DocumentCardImageBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onImageLoad = function () {\n _this.setState({ imageHasLoaded: true });\n };\n initializeComponentRef(_this);\n _this.state = { imageHasLoaded: false };\n return _this;\n }\n DocumentCardImageBase.prototype.render = function () {\n var _a = this.props, styles = _a.styles, width = _a.width, height = _a.height, imageFit = _a.imageFit, imageSrc = _a.imageSrc;\n this._classNames = getClassNames(styles, this.props);\n return (React.createElement(\"div\", { className: this._classNames.root },\n imageSrc && (React.createElement(Image, { width: width, height: height, imageFit: imageFit, src: imageSrc, role: \"presentation\", alt: \"\", onLoad: this._onImageLoad })),\n this.state.imageHasLoaded ? this._renderCornerIcon() : this._renderCenterIcon()));\n };\n DocumentCardImageBase.prototype._renderCenterIcon = function () {\n var iconProps = this.props.iconProps;\n return (React.createElement(\"div\", { className: this._classNames.centeredIconWrapper },\n React.createElement(Icon, __assign({ className: this._classNames.centeredIcon }, iconProps))));\n };\n DocumentCardImageBase.prototype._renderCornerIcon = function () {\n var iconProps = this.props.iconProps;\n return React.createElement(Icon, __assign({ className: this._classNames.cornerIcon }, iconProps));\n };\n return DocumentCardImageBase;\n}(React.Component));\nexport { DocumentCardImageBase };\n//# sourceMappingURL=DocumentCardImage.base.js.map","var centeredIconSize = '42px';\nvar cornerIconSize = '32px';\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className, height = props.height, width = props.width;\n var palette = theme.palette;\n return {\n root: [\n {\n borderBottom: \"1px solid \" + palette.neutralLight,\n position: 'relative',\n backgroundColor: palette.neutralLighterAlt,\n overflow: \"hidden\",\n height: height && height + \"px\",\n width: width && width + \"px\",\n },\n className,\n ],\n centeredIcon: [\n {\n height: centeredIconSize,\n width: centeredIconSize,\n fontSize: centeredIconSize,\n },\n ],\n centeredIconWrapper: [\n {\n display: 'flex',\n alignItems: 'center',\n justifyContent: 'center',\n height: '100%',\n width: '100%',\n position: 'absolute',\n top: 0,\n left: 0,\n },\n ],\n cornerIcon: [\n {\n left: '10px',\n bottom: '10px',\n height: cornerIconSize,\n width: cornerIconSize,\n fontSize: cornerIconSize,\n position: 'absolute',\n overflow: 'visible',\n },\n ],\n };\n};\n//# sourceMappingURL=DocumentCardImage.styles.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardImageBase } from './DocumentCardImage.base';\nimport { getStyles } from './DocumentCardImage.styles';\nexport var DocumentCardImage = styled(DocumentCardImageBase, getStyles, undefined, { scope: 'DocumentCardImage' });\n//# sourceMappingURL=DocumentCardImage.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, classNamesFunction } from '../../Utilities';\nimport { initializeComponentRef } from '@fluentui/utilities';\nvar getClassNames = classNamesFunction();\nvar TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardTitleBase = /** @class */ (function (_super) {\n __extends(DocumentCardTitleBase, _super);\n function DocumentCardTitleBase(props) {\n var _this = _super.call(this, props) || this;\n _this._titleElement = React.createRef();\n // Truncate logic here way can't handle the case that chars with different widths are mixed very well.\n // Let _shrinkTitle take care of that.\n _this._truncateTitle = function () {\n if (!_this._needMeasurement) {\n return;\n }\n _this._async.requestAnimationFrame(_this._truncateWhenInAnimation);\n };\n _this._truncateWhenInAnimation = function () {\n var originalTitle = _this.props.title;\n var element = _this._titleElement.current;\n if (element) {\n var style = getComputedStyle(element);\n if (style.width && style.lineHeight && style.height) {\n var clientWidth = element.clientWidth, scrollWidth = element.scrollWidth;\n _this._clientWidth = clientWidth;\n var lines = Math.floor((parseInt(style.height, 10) + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD) / parseInt(style.lineHeight, 10));\n element.style.whiteSpace = '';\n // Use overflow to predict truncated length.\n // Take an example.The text is: A text with A very long text that need to be truncated.ppt\n // if container is like\n // |A text with A very| long text that need to be truncated.ppt\n // The scroll width is 58, (take two | out of length)\n // The client width is 18\n // the overflow rate is scrollWidth/clientWidth which should be close to length(overflowText)/length(visualText)\n // And the length of remaining text should be truncated is (original Length)/(58/18) -3 = 15.\n // So that the logic can predict truncated text well.\n // first piece will be `A text `, * second piece will be `ated.ppt`\n // |A text ...ated.ppt|\n var overFlowRate = scrollWidth / (parseInt(style.width, 10) * lines);\n if (overFlowRate > 1) {\n var truncatedLength = originalTitle.length / overFlowRate - 3; /** Saved for separator */\n return _this.setState({\n truncatedTitleFirstPiece: originalTitle.slice(0, truncatedLength / 2),\n truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - truncatedLength / 2),\n });\n }\n }\n }\n };\n _this._shrinkTitle = function () {\n var _a = _this.state, truncatedTitleFirstPiece = _a.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _a.truncatedTitleSecondPiece;\n if (truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n var titleElement = _this._titleElement.current;\n if (!titleElement) {\n return;\n }\n if (titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD ||\n titleElement.scrollWidth > titleElement.clientWidth) {\n _this.setState({\n truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),\n truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1),\n });\n }\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._clientWidth = undefined;\n _this.state = {\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n };\n return _this;\n }\n DocumentCardTitleBase.prototype.componentDidUpdate = function (prevProps) {\n var _this = this;\n if (this.props.title !== prevProps.title) {\n this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n });\n }\n if (prevProps.shouldTruncate !== this.props.shouldTruncate) {\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n this._async.requestAnimationFrame(this._shrinkTitle);\n this._events.on(window, 'resize', this._updateTruncation);\n }\n else {\n this._events.off(window, 'resize', this._updateTruncation);\n }\n }\n else if (this._needMeasurement) {\n this._async.requestAnimationFrame(function () {\n _this._truncateWhenInAnimation();\n _this._shrinkTitle();\n });\n }\n };\n DocumentCardTitleBase.prototype.componentDidMount = function () {\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n this._events.on(window, 'resize', this._updateTruncation);\n }\n };\n DocumentCardTitleBase.prototype.componentWillUnmount = function () {\n this._events.dispose();\n this._async.dispose();\n };\n DocumentCardTitleBase.prototype.render = function () {\n var _a = this.props, title = _a.title, shouldTruncate = _a.shouldTruncate, showAsSecondaryTitle = _a.showAsSecondaryTitle, styles = _a.styles, theme = _a.theme, className = _a.className;\n var _b = this.state, truncatedTitleFirstPiece = _b.truncatedTitleFirstPiece, truncatedTitleSecondPiece = _b.truncatedTitleSecondPiece;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n showAsSecondaryTitle: showAsSecondaryTitle,\n });\n if (shouldTruncate && truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n return (React.createElement(\"div\", { className: this._classNames.root, ref: this._titleElement, title: title },\n truncatedTitleFirstPiece,\n \"\\u2026\",\n truncatedTitleSecondPiece));\n }\n else {\n return (React.createElement(\"div\", { className: this._classNames.root, ref: this._titleElement, title: title, style: this._needMeasurement ? { whiteSpace: 'nowrap' } : undefined }, title));\n }\n };\n Object.defineProperty(DocumentCardTitleBase.prototype, \"_needMeasurement\", {\n /**\n * In measuring, it will render a same style text with whiteSpace: 'nowrap', to get overflow rate.\n * So that the logic can predict truncated text well.\n */\n get: function () {\n return !!this.props.shouldTruncate && this._clientWidth === undefined;\n },\n enumerable: false,\n configurable: true\n });\n DocumentCardTitleBase.prototype._updateTruncation = function () {\n var _this = this;\n if (this._timerId) {\n return;\n }\n this._timerId = this._async.setTimeout(function () {\n delete _this._timerId;\n _this._clientWidth = undefined;\n _this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n });\n }, 250);\n };\n return DocumentCardTitleBase;\n}(React.Component));\nexport { DocumentCardTitleBase };\n//# sourceMappingURL=DocumentCardTitle.base.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardTitleBase } from './DocumentCardTitle.base';\nimport { getStyles } from './DocumentCardTitle.styles';\nexport var DocumentCardTitle = styled(DocumentCardTitleBase, getStyles, undefined, { scope: 'DocumentCardTitle' });\n//# sourceMappingURL=DocumentCardTitle.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Icon } from '../../Icon';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardLogoBase = /** @class */ (function (_super) {\n __extends(DocumentCardLogoBase, _super);\n function DocumentCardLogoBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardLogoBase.prototype.render = function () {\n var _a = this.props, logoIcon = _a.logoIcon, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.root },\n React.createElement(Icon, { iconName: logoIcon })));\n };\n return DocumentCardLogoBase;\n}(React.Component));\nexport { DocumentCardLogoBase };\n//# sourceMappingURL=DocumentCardLogo.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DocumentCardLogo',\n};\nexport var getStyles = function (props) {\n var theme = props.theme, className = props.className;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n // eslint-disable-next-line deprecation/deprecation\n fontSize: fonts.xxLargePlus.fontSize,\n color: palette.themePrimary,\n display: 'block',\n padding: '16px 16px 0 16px',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardLogo.styles.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardLogoBase } from './DocumentCardLogo.base';\nimport { getStyles } from './DocumentCardLogo.styles';\nexport var DocumentCardLogo = styled(DocumentCardLogoBase, getStyles, undefined, { scope: 'DocumentCardLogo' });\n//# sourceMappingURL=DocumentCardLogo.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef } from '../../Utilities';\nimport { Icon } from '../../Icon';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory DocumentCard}\n */\nvar DocumentCardStatusBase = /** @class */ (function (_super) {\n __extends(DocumentCardStatusBase, _super);\n function DocumentCardStatusBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n DocumentCardStatusBase.prototype.render = function () {\n var _a = this.props, statusIcon = _a.statusIcon, status = _a.status, styles = _a.styles, theme = _a.theme, className = _a.className;\n var iconProps = {\n iconName: statusIcon,\n styles: {\n root: { padding: '8px' },\n },\n };\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", { className: this._classNames.root },\n statusIcon && React.createElement(Icon, __assign({}, iconProps)),\n status));\n };\n return DocumentCardStatusBase;\n}(React.Component));\nexport { DocumentCardStatusBase };\n//# sourceMappingURL=DocumentCardStatus.base.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-DocumentCardStatus',\n};\nexport var getStyles = function (props) {\n var className = props.className, theme = props.theme;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.medium,\n {\n margin: '8px 16px',\n color: palette.neutralPrimary,\n backgroundColor: palette.neutralLighter,\n height: '32px',\n },\n className,\n ],\n };\n};\n//# sourceMappingURL=DocumentCardStatus.styles.js.map","import { styled } from '../../Utilities';\nimport { DocumentCardStatusBase } from './DocumentCardStatus.base';\nimport { getStyles } from './DocumentCardStatus.styles';\nexport var DocumentCardStatus = styled(DocumentCardStatusBase, getStyles, undefined, { scope: 'DocumentCardStatus' });\n//# sourceMappingURL=DocumentCardStatus.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".pickerText_cc9894a7{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid \" }, { \"theme\": \"neutralTertiary\", \"defaultValue\": \"#a19f9d\" }, { \"rawString\": \";min-width:180px;padding:1px;min-height:32px}.pickerText_cc9894a7:hover{border-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \"}.pickerInput_cc9894a7{height:34px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;margin:1px}.pickerInput_cc9894a7::-ms-clear{display:none}\" }]);\nexport var pickerText = \"pickerText_cc9894a7\";\nexport var pickerInput = \"pickerInput_cc9894a7\";\n//# sourceMappingURL=BaseExtendedPicker.scss.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { KeyCodes, css, initializeComponentRef } from '../../Utilities';\nimport { Autofill } from '../../Autofill';\nimport * as stylesImport from './BaseExtendedPicker.scss';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Selection, SelectionMode, SelectionZone } from '../../Selection';\nvar styles = stylesImport;\nvar BaseExtendedPicker = /** @class */ (function (_super) {\n __extends(BaseExtendedPicker, _super);\n function BaseExtendedPicker(basePickerProps) {\n var _this = _super.call(this, basePickerProps) || this;\n _this.floatingPicker = React.createRef();\n _this.selectedItemsList = React.createRef();\n _this.root = React.createRef();\n _this.input = React.createRef();\n _this.onSelectionChange = function () {\n _this.forceUpdate();\n };\n _this.onInputChange = function (value, composing) {\n // We don't want to update the picker's suggestions when the input is still being composed\n if (!composing) {\n _this.setState({ queryString: value });\n if (_this.floatingPicker.current) {\n _this.floatingPicker.current.onQueryStringChanged(value);\n }\n }\n };\n _this.onInputFocus = function (ev) {\n if (_this.selectedItemsList.current) {\n _this.selectedItemsList.current.unselectAll();\n }\n if (_this.props.inputProps && _this.props.inputProps.onFocus) {\n _this.props.inputProps.onFocus(ev);\n }\n };\n _this.onInputClick = function (ev) {\n if (_this.selectedItemsList.current) {\n _this.selectedItemsList.current.unselectAll();\n }\n if (_this.floatingPicker.current && _this.inputElement) {\n // Update the value if the input value is empty or is different than the current inputText from the floatingPicker\n var shoudUpdateValue = _this.inputElement.value === '' || _this.inputElement.value !== _this.floatingPicker.current.inputText;\n _this.floatingPicker.current.showPicker(shoudUpdateValue);\n }\n };\n // This is protected because we may expect the backspace key to work differently in a different kind of picker.\n // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow\n _this.onBackspace = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which !== KeyCodes.backspace) {\n return;\n }\n if (_this.selectedItemsList.current && _this.items.length) {\n if (_this.input.current &&\n !_this.input.current.isValueSelected &&\n _this.input.current.inputElement === ev.currentTarget.ownerDocument.activeElement &&\n _this.input.current.cursorLocation === 0) {\n if (_this.floatingPicker.current) {\n _this.floatingPicker.current.hidePicker();\n }\n ev.preventDefault();\n _this.selectedItemsList.current.removeItemAt(_this.items.length - 1);\n _this._onSelectedItemsChanged();\n }\n else if (_this.selectedItemsList.current.hasSelectedItems()) {\n if (_this.floatingPicker.current) {\n _this.floatingPicker.current.hidePicker();\n }\n ev.preventDefault();\n _this.selectedItemsList.current.removeSelectedItems();\n _this._onSelectedItemsChanged();\n }\n }\n };\n _this.onCopy = function (ev) {\n if (_this.selectedItemsList.current) {\n // Pass it down into the selected items list\n _this.selectedItemsList.current.onCopy(ev);\n }\n };\n _this.onPaste = function (ev) {\n if (_this.props.onPaste) {\n var inputText = ev.clipboardData.getData('Text');\n ev.preventDefault();\n _this.props.onPaste(inputText);\n }\n };\n _this._onSuggestionSelected = function (item) {\n var currentRenderedQueryString = _this.props.currentRenderedQueryString;\n var queryString = _this.state.queryString;\n if (currentRenderedQueryString === undefined || currentRenderedQueryString === queryString) {\n var processedItem = _this.props.onItemSelected\n ? _this.props.onItemSelected(item)\n : item;\n if (processedItem === null) {\n return;\n }\n var processedItemObject = processedItem;\n var processedItemPromiseLike = processedItem;\n var newItem_1;\n if (processedItemPromiseLike && processedItemPromiseLike.then) {\n processedItemPromiseLike.then(function (resolvedProcessedItem) {\n newItem_1 = resolvedProcessedItem;\n _this._addProcessedItem(newItem_1);\n });\n }\n else {\n newItem_1 = processedItemObject;\n _this._addProcessedItem(newItem_1);\n }\n }\n };\n _this._onSelectedItemsChanged = function () {\n _this.focus();\n };\n /**\n * The floating picker is the source of truth for if the menu has been opened or not.\n *\n * Because this isn't tracked inside the state of this component, we need to\n * force an update here to keep the rendered output that depends on the picker being open\n * in sync with the state\n *\n * Called when the suggestions is shown or closed\n */\n _this._onSuggestionsShownOrHidden = function () {\n _this.forceUpdate();\n };\n initializeComponentRef(_this);\n _this.selection = new Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });\n _this.state = {\n queryString: '',\n };\n return _this;\n }\n Object.defineProperty(BaseExtendedPicker.prototype, \"items\", {\n get: function () {\n var _a, _b, _c, _d;\n return (_d = (_c = (_a = this.props.selectedItems) !== null && _a !== void 0 ? _a : (_b = this.selectedItemsList.current) === null || _b === void 0 ? void 0 : _b.items) !== null && _c !== void 0 ? _c : this.props.defaultSelectedItems) !== null && _d !== void 0 ? _d : null;\n },\n enumerable: false,\n configurable: true\n });\n BaseExtendedPicker.prototype.componentDidMount = function () {\n this.forceUpdate();\n };\n BaseExtendedPicker.prototype.focus = function () {\n if (this.input.current) {\n this.input.current.focus();\n }\n };\n BaseExtendedPicker.prototype.clearInput = function () {\n if (this.input.current) {\n this.input.current.clear();\n }\n };\n Object.defineProperty(BaseExtendedPicker.prototype, \"inputElement\", {\n get: function () {\n return this.input.current && this.input.current.inputElement;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseExtendedPicker.prototype, \"highlightedItems\", {\n get: function () {\n return this.selectedItemsList.current ? this.selectedItemsList.current.highlightedItems() : [];\n },\n enumerable: false,\n configurable: true\n });\n BaseExtendedPicker.prototype.render = function () {\n var _a = this.props, className = _a.className, inputProps = _a.inputProps, disabled = _a.disabled, focusZoneProps = _a.focusZoneProps;\n var activeDescendant = this.floatingPicker.current && this.floatingPicker.current.currentSelectedSuggestionIndex !== -1\n ? 'sug-' + this.floatingPicker.current.currentSelectedSuggestionIndex\n : undefined;\n var isExpanded = this.floatingPicker.current ? this.floatingPicker.current.isSuggestionsShown : false;\n return (React.createElement(\"div\", { ref: this.root, className: css('ms-BasePicker ms-BaseExtendedPicker', className ? className : ''), onKeyDown: this.onBackspace, onCopy: this.onCopy },\n React.createElement(FocusZone, __assign({ direction: FocusZoneDirection.bidirectional }, focusZoneProps),\n React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.multiple },\n React.createElement(\"div\", { className: css('ms-BasePicker-text', styles.pickerText), role: 'list' },\n this.props.headerComponent,\n this.renderSelectedItemsList(),\n this.canAddItems() && (React.createElement(Autofill, __assign({}, inputProps, { className: css('ms-BasePicker-input', styles.pickerInput), ref: this.input, onFocus: this.onInputFocus, onClick: this.onInputClick, onInputValueChange: this.onInputChange, \"aria-activedescendant\": activeDescendant, \"aria-owns\": isExpanded ? 'suggestion-list' : undefined, \"aria-expanded\": isExpanded, \"aria-haspopup\": \"true\", role: \"combobox\", disabled: disabled, onPaste: this.onPaste })))))),\n this.renderFloatingPicker()));\n };\n Object.defineProperty(BaseExtendedPicker.prototype, \"floatingPickerProps\", {\n get: function () {\n return this.props.floatingPickerProps;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseExtendedPicker.prototype, \"selectedItemsListProps\", {\n get: function () {\n return this.props.selectedItemsListProps;\n },\n enumerable: false,\n configurable: true\n });\n BaseExtendedPicker.prototype.canAddItems = function () {\n var itemLimit = this.props.itemLimit;\n return itemLimit === undefined || this.items.length < itemLimit;\n };\n BaseExtendedPicker.prototype.renderFloatingPicker = function () {\n var FloatingPicker = this.props.onRenderFloatingPicker;\n return (React.createElement(FloatingPicker, __assign({ componentRef: this.floatingPicker, onChange: this._onSuggestionSelected, onSuggestionsHidden: this._onSuggestionsShownOrHidden, onSuggestionsShown: this._onSuggestionsShownOrHidden, inputElement: this.input.current ? this.input.current.inputElement : undefined, selectedItems: this.items, suggestionItems: this.props.suggestionItems ? this.props.suggestionItems : undefined }, this.floatingPickerProps)));\n };\n BaseExtendedPicker.prototype.renderSelectedItemsList = function () {\n var SelectedItems = this.props.onRenderSelectedItems;\n return (React.createElement(SelectedItems, __assign({ componentRef: this.selectedItemsList, selection: this.selection, selectedItems: this.props.selectedItems ? this.props.selectedItems : undefined, onItemsDeleted: this.props.selectedItems ? this.props.onItemsRemoved : undefined }, this.selectedItemsListProps)));\n };\n BaseExtendedPicker.prototype._addProcessedItem = function (newItem) {\n // If this is a controlled component, call the on item selected callback\n // Otherwise add it to the selectedItemsList\n if (this.props.onItemAdded) {\n this.props.onItemAdded(newItem);\n }\n if (this.selectedItemsList.current) {\n this.selectedItemsList.current.addItems([newItem]);\n }\n if (this.input.current) {\n this.input.current.clear();\n }\n if (this.floatingPicker.current) {\n this.floatingPicker.current.hidePicker();\n }\n this.focus();\n };\n return BaseExtendedPicker;\n}(React.Component));\nexport { BaseExtendedPicker };\n//# sourceMappingURL=BaseExtendedPicker.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".resultContent_ae2a2ef5{display:table-row}.resultContent_ae2a2ef5 .resultItem_ae2a2ef5{display:table-cell;vertical-align:bottom}.peoplePickerPersona_ae2a2ef5{width:180px}.peoplePickerPersona_ae2a2ef5 .ms-Persona-details{width:100%}.peoplePicker_ae2a2ef5 .ms-BasePicker-text{min-height:40px}.peoplePickerPersonaContent_ae2a2ef5{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}\" }]);\nexport var resultContent = \"resultContent_ae2a2ef5\";\nexport var resultItem = \"resultItem_ae2a2ef5\";\nexport var peoplePickerPersona = \"peoplePickerPersona_ae2a2ef5\";\nexport var peoplePicker = \"peoplePicker_ae2a2ef5\";\nexport var peoplePickerPersonaContent = \"peoplePickerPersonaContent_ae2a2ef5\";\n//# sourceMappingURL=ExtendedPeoplePicker.scss.js.map","/**\n * {@docCategory Facepile}\n */\nexport var OverflowButtonType;\n(function (OverflowButtonType) {\n /** No overflow */\n OverflowButtonType[OverflowButtonType[\"none\"] = 0] = \"none\";\n /** +1 overflow icon */\n OverflowButtonType[OverflowButtonType[\"descriptive\"] = 1] = \"descriptive\";\n /** More overflow icon */\n OverflowButtonType[OverflowButtonType[\"more\"] = 2] = \"more\";\n /** Chevron overflow icon */\n OverflowButtonType[OverflowButtonType[\"downArrow\"] = 3] = \"downArrow\";\n})(OverflowButtonType || (OverflowButtonType = {}));\n//# sourceMappingURL=Facepile.types.js.map","import { __extends } from \"tslib\";\nimport './ExtendedPeoplePicker.scss';\nimport { BaseExtendedPicker } from '../BaseExtendedPicker';\n/**\n * {@docCategory ExtendedPeoplePicker}\n */\nvar BaseExtendedPeoplePicker = /** @class */ (function (_super) {\n __extends(BaseExtendedPeoplePicker, _super);\n function BaseExtendedPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return BaseExtendedPeoplePicker;\n}(BaseExtendedPicker));\nexport { BaseExtendedPeoplePicker };\n/**\n * {@docCategory ExtendedPeoplePicker}\n */\nvar ExtendedPeoplePicker = /** @class */ (function (_super) {\n __extends(ExtendedPeoplePicker, _super);\n function ExtendedPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return ExtendedPeoplePicker;\n}(BaseExtendedPeoplePicker));\nexport { ExtendedPeoplePicker };\n//# sourceMappingURL=ExtendedPeoplePicker.js.map","import { __assign } from \"tslib\";\nimport { concatStyleSets } from '../../Styling';\nimport { memoizeFunction } from '../../Utilities';\nimport { getStyles as getBaseButtonStyles } from '../Button/BaseButton.styles';\nexport var getStyles = memoizeFunction(function (theme, className, customStyles) {\n var baseButtonStyles = getBaseButtonStyles(theme);\n var customButtonStyles = concatStyleSets(baseButtonStyles, customStyles);\n return __assign(__assign({}, customButtonStyles), { root: [baseButtonStyles.root, className, theme.fonts.medium, customStyles && customStyles.root] });\n});\n//# sourceMappingURL=FacepileButton.styles.js.map","import { __assign, __decorate, __extends, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { BaseButton } from '../../Button';\nimport { customizable, nullRender } from '../../Utilities';\nimport { getStyles } from './FacepileButton.styles';\nvar FacepileButton = /** @class */ (function (_super) {\n __extends(FacepileButton, _super);\n function FacepileButton() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n FacepileButton.prototype.render = function () {\n var _a = this.props, className = _a.className, styles = _a.styles, rest = __rest(_a, [\"className\", \"styles\"]);\n var customStyles = getStyles(this.props.theme, className, styles);\n return (React.createElement(BaseButton, __assign({}, rest, { variantClassName: \"ms-Button--facepile\", styles: customStyles, onRenderDescription: nullRender })));\n };\n FacepileButton = __decorate([\n customizable('FacepileButton', ['theme', 'styles'], true)\n ], FacepileButton);\n return FacepileButton;\n}(React.Component));\nexport { FacepileButton };\n//# sourceMappingURL=FacepileButton.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { buttonProperties, classNamesFunction, getId, getNativeProps, initializeComponentRef } from '../../Utilities';\nimport { OverflowButtonType } from './Facepile.types';\nimport { FacepileButton } from './FacepileButton';\nimport { Icon } from '../../Icon';\nimport { Persona } from '../../Persona';\nimport { PersonaCoin, PersonaSize, PersonaInitialsColor } from '../../PersonaCoin';\nvar getClassNames = classNamesFunction();\n/**\n * FacePile with no default styles.\n * [Use the `styles` API to add your own styles.](https://github.com/microsoft/fluentui/wiki/Component-Styling)\n */\nvar FacepileBase = /** @class */ (function (_super) {\n __extends(FacepileBase, _super);\n function FacepileBase(props) {\n var _this = _super.call(this, props) || this;\n _this._classNames = getClassNames(_this.props.styles, {\n theme: _this.props.theme,\n className: _this.props.className,\n });\n _this._getPersonaControl = function (persona) {\n var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;\n var personaStyles = {\n details: {\n flex: '1 0 auto',\n },\n };\n return (React.createElement(Persona, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null), { styles: personaStyles })));\n };\n _this._getPersonaCoinControl = function (persona) {\n var _a = _this.props, getPersonaProps = _a.getPersonaProps, personaSize = _a.personaSize;\n return (React.createElement(PersonaCoin, __assign({ imageInitials: persona.imageInitials, imageUrl: persona.imageUrl, initialsColor: persona.initialsColor, allowPhoneInitials: persona.allowPhoneInitials, text: persona.personaName, size: personaSize }, (getPersonaProps ? getPersonaProps(persona) : null))));\n };\n initializeComponentRef(_this);\n _this._ariaDescriptionId = getId();\n return _this;\n }\n FacepileBase.prototype.render = function () {\n var overflowButtonProps = this.props.overflowButtonProps;\n var _a = this.props, chevronButtonProps = _a.chevronButtonProps, // eslint-disable-line deprecation/deprecation\n maxDisplayablePersonas = _a.maxDisplayablePersonas, personas = _a.personas, overflowPersonas = _a.overflowPersonas, showAddButton = _a.showAddButton, ariaLabel = _a.ariaLabel, _b = _a.showTooltip, showTooltip = _b === void 0 ? true : _b;\n var _classNames = this._classNames;\n // Add a check to make sure maxDisplayalePersonas is defined to cover the edge case of it being 0.\n var numPersonasToShow = typeof maxDisplayablePersonas === 'number' ? Math.min(personas.length, maxDisplayablePersonas) : personas.length;\n // Added for deprecating chevronButtonProps. Can remove after v1.0\n if (chevronButtonProps && !overflowButtonProps) {\n overflowButtonProps = chevronButtonProps;\n }\n var hasOverflowPersonas = overflowPersonas && overflowPersonas.length > 0;\n var personasPrimary = hasOverflowPersonas ? personas : personas.slice(0, numPersonasToShow);\n var personasOverflow = (hasOverflowPersonas ? overflowPersonas : personas.slice(numPersonasToShow)) || [];\n return (React.createElement(\"div\", { className: _classNames.root },\n this.onRenderAriaDescription(),\n React.createElement(\"div\", { className: _classNames.itemContainer },\n showAddButton ? this._getAddNewElement() : null,\n React.createElement(\"ul\", { className: _classNames.members, \"aria-label\": ariaLabel }, this._onRenderVisiblePersonas(personasPrimary, personasOverflow.length === 0 && personas.length === 1, showTooltip)),\n overflowButtonProps ? this._getOverflowElement(personasOverflow) : null)));\n };\n FacepileBase.prototype.onRenderAriaDescription = function () {\n var ariaDescription = this.props.ariaDescription;\n var _classNames = this._classNames;\n // If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan,\n // otherwise it will be assigned to descriptionSpan.\n return (ariaDescription && (React.createElement(\"span\", { className: _classNames.screenReaderOnly, id: this._ariaDescriptionId }, ariaDescription)));\n };\n FacepileBase.prototype._onRenderVisiblePersonas = function (personas, singlePersona, showTooltip) {\n var _this = this;\n var _a = this.props, _b = _a.onRenderPersona, onRenderPersona = _b === void 0 ? this._getPersonaControl : _b, _c = _a.onRenderPersonaCoin, onRenderPersonaCoin = _c === void 0 ? this._getPersonaCoinControl : _c;\n return personas.map(function (persona, index) {\n var personaControl = singlePersona\n ? onRenderPersona(persona, _this._getPersonaControl)\n : onRenderPersonaCoin(persona, _this._getPersonaCoinControl);\n return (React.createElement(\"li\", { key: (singlePersona ? 'persona' : 'personaCoin') + \"-\" + index, className: _this._classNames.member }, persona.onClick\n ? _this._getElementWithOnClickEvent(personaControl, persona, showTooltip, index)\n : _this._getElementWithoutOnClickEvent(personaControl, persona, showTooltip, index)));\n });\n };\n FacepileBase.prototype._getElementWithOnClickEvent = function (personaControl, persona, showTooltip, index) {\n var keytipProps = persona.keytipProps;\n return (React.createElement(FacepileButton, __assign({}, getNativeProps(persona, buttonProperties), this._getElementProps(persona, showTooltip, index), { keytipProps: keytipProps, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: this._onPersonaClick.bind(this, persona) }), personaControl));\n };\n FacepileBase.prototype._getElementWithoutOnClickEvent = function (personaControl, persona, showTooltip, index) {\n return (React.createElement(\"div\", __assign({}, getNativeProps(persona, buttonProperties), this._getElementProps(persona, showTooltip, index)), personaControl));\n };\n FacepileBase.prototype._getElementProps = function (persona, showTooltip, index) {\n var _classNames = this._classNames;\n return {\n key: (persona.imageUrl ? 'i' : '') + index,\n 'data-is-focusable': true,\n className: _classNames.itemButton,\n title: showTooltip ? persona.personaName : undefined,\n onMouseMove: this._onPersonaMouseMove.bind(this, persona),\n onMouseOut: this._onPersonaMouseOut.bind(this, persona),\n };\n };\n FacepileBase.prototype._getOverflowElement = function (personasOverflow) {\n switch (this.props.overflowButtonType) {\n case OverflowButtonType.descriptive:\n return this._getDescriptiveOverflowElement(personasOverflow);\n case OverflowButtonType.downArrow:\n return this._getIconElement('ChevronDown');\n case OverflowButtonType.more:\n return this._getIconElement('More');\n default:\n return null;\n }\n };\n FacepileBase.prototype._getDescriptiveOverflowElement = function (personasOverflow) {\n var personaSize = this.props.personaSize;\n if (!personasOverflow || personasOverflow.length < 1) {\n return null;\n }\n var personaNames = personasOverflow.map(function (p) { return p.personaName; }).join(', ');\n var overflowButtonProps = __assign({ title: personaNames }, this.props.overflowButtonProps);\n var numPersonasNotPictured = Math.max(personasOverflow.length, 0);\n var _classNames = this._classNames;\n return (React.createElement(FacepileButton, __assign({}, overflowButtonProps, { ariaDescription: overflowButtonProps.title, className: _classNames.descriptiveOverflowButton }),\n React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitialsNotPictured(numPersonasNotPictured), initialsColor: PersonaInitialsColor.transparent })));\n };\n FacepileBase.prototype._getIconElement = function (icon) {\n var _a = this.props, overflowButtonProps = _a.overflowButtonProps, personaSize = _a.personaSize;\n var overflowInitialsIcon = true;\n var _classNames = this._classNames;\n return (React.createElement(FacepileButton, __assign({}, overflowButtonProps, { className: _classNames.overflowButton }),\n React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials(icon, overflowInitialsIcon), initialsColor: PersonaInitialsColor.transparent })));\n };\n FacepileBase.prototype._getAddNewElement = function () {\n var _a = this.props, addButtonProps = _a.addButtonProps, personaSize = _a.personaSize;\n var _classNames = this._classNames;\n return (React.createElement(FacepileButton, __assign({}, addButtonProps, { className: _classNames.addButton }),\n React.createElement(PersonaCoin, { size: personaSize, onRenderInitials: this._renderInitials('AddFriend') })));\n };\n FacepileBase.prototype._onPersonaClick = function (persona, ev) {\n persona.onClick(ev, persona);\n ev.preventDefault();\n ev.stopPropagation();\n };\n FacepileBase.prototype._onPersonaMouseMove = function (persona, ev) {\n if (persona.onMouseMove) {\n persona.onMouseMove(ev, persona);\n }\n };\n FacepileBase.prototype._onPersonaMouseOut = function (persona, ev) {\n if (persona.onMouseOut) {\n persona.onMouseOut(ev, persona);\n }\n };\n FacepileBase.prototype._renderInitials = function (iconName, overflowButton) {\n var _classNames = this._classNames;\n return function () {\n return React.createElement(Icon, { iconName: iconName, className: overflowButton ? _classNames.overflowInitialsIcon : '' });\n };\n };\n FacepileBase.prototype._renderInitialsNotPictured = function (numPersonasNotPictured) {\n var _classNames = this._classNames;\n return function () {\n return (React.createElement(\"span\", { className: _classNames.overflowInitialsIcon }, numPersonasNotPictured < 100 ? '+' + numPersonasNotPictured : '99+'));\n };\n };\n FacepileBase.defaultProps = {\n maxDisplayablePersonas: 5,\n personas: [],\n overflowPersonas: [],\n personaSize: PersonaSize.size32,\n };\n return FacepileBase;\n}(React.Component));\nexport { FacepileBase };\n//# sourceMappingURL=Facepile.base.js.map","import { hiddenContentStyle, HighContrastSelector, getFocusStyle, getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Facepile',\n addButton: 'ms-Facepile-addButton ms-Facepile-itemButton',\n descriptiveOverflowButton: 'ms-Facepile-descriptiveOverflowButton ms-Facepile-itemButton',\n itemButton: 'ms-Facepile-itemButton ms-Facepile-person',\n itemContainer: 'ms-Facepile-itemContainer',\n members: 'ms-Facepile-members',\n member: 'ms-Facepile-member',\n overflowButton: 'ms-Facepile-overflowButton ms-Facepile-itemButton',\n};\nexport var styles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, _b = props.spacingAroundItemButton, spacingAroundItemButton = _b === void 0 ? 2 : _b;\n var palette = theme.palette, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var ItemButtonStyles = {\n textAlign: 'center',\n padding: 0,\n borderRadius: '50%',\n verticalAlign: 'top',\n display: 'inline',\n backgroundColor: 'transparent',\n border: 'none',\n selectors: {\n '&::-moz-focus-inner': {\n padding: 0,\n border: 0,\n },\n },\n };\n return {\n root: [\n classNames.root,\n theme.fonts.medium,\n {\n width: 'auto',\n },\n className,\n ],\n addButton: [\n classNames.addButton,\n getFocusStyle(theme, { inset: -1 }),\n ItemButtonStyles,\n {\n fontSize: fonts.medium.fontSize,\n color: palette.white,\n backgroundColor: palette.themePrimary,\n marginRight: spacingAroundItemButton * 2 + 'px',\n selectors: {\n '&:hover': {\n backgroundColor: palette.themeDark,\n },\n '&:focus': {\n backgroundColor: palette.themeDark,\n },\n '&:active': {\n backgroundColor: palette.themeDarker,\n },\n '&:disabled': {\n backgroundColor: palette.neutralTertiaryAlt,\n },\n },\n },\n ],\n descriptiveOverflowButton: [\n classNames.descriptiveOverflowButton,\n getFocusStyle(theme, { inset: -1 }),\n ItemButtonStyles,\n {\n fontSize: fonts.small.fontSize,\n color: palette.neutralSecondary,\n backgroundColor: palette.neutralLighter,\n marginLeft: spacingAroundItemButton * 2 + \"px\",\n },\n ],\n itemButton: [classNames.itemButton, ItemButtonStyles],\n itemContainer: [\n classNames.itemContainer,\n {\n display: 'flex',\n },\n ],\n members: [\n classNames.members,\n {\n display: 'flex',\n overflow: 'hidden',\n listStyleType: 'none',\n padding: 0,\n margin: \"-\" + spacingAroundItemButton + \"px\",\n },\n ],\n member: [\n classNames.member,\n {\n display: 'inline-flex',\n flex: '0 0 auto',\n margin: spacingAroundItemButton + \"px\",\n },\n ],\n overflowButton: [\n classNames.overflowButton,\n getFocusStyle(theme, { inset: -1 }),\n ItemButtonStyles,\n {\n fontSize: fonts.medium.fontSize,\n color: palette.neutralSecondary,\n backgroundColor: palette.neutralLighter,\n marginLeft: spacingAroundItemButton * 2 + \"px\",\n },\n ],\n overflowInitialsIcon: [\n {\n color: palette.neutralPrimary,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'WindowText',\n },\n _a),\n },\n ],\n screenReaderOnly: hiddenContentStyle,\n };\n};\n//# sourceMappingURL=Facepile.styles.js.map","import { styled } from '../../Utilities';\nimport { FacepileBase } from './Facepile.base';\nimport { styles } from './Facepile.styles';\n/**\n * The Facepile shows a list of faces or initials in a horizontal lockup. Each circle represents a person.\n */\nexport var Facepile = styled(FacepileBase, styles, undefined, {\n scope: 'Facepile',\n});\n//# sourceMappingURL=Facepile.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".callout_0508e60b .ms-Suggestions-itemButton{padding:0;border:none}.callout_0508e60b .ms-Suggestions{min-width:300px}\" }]);\nexport var callout = \"callout_0508e60b\";\n//# sourceMappingURL=BaseFloatingPicker.scss.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".root_2f55324e{min-width:260px}.suggestionsItem_2f55324e{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-sizing:border-box;box-sizing:border-box;width:100%;position:relative;overflow:hidden}.suggestionsItem_2f55324e:hover{background:\" }, { \"theme\": \"neutralLighter\", \"defaultValue\": \"#f3f2f1\" }, { \"rawString\": \"}.suggestionsItem_2f55324e:hover .closeButton_2f55324e{display:block}.suggestionsItem_2f55324e.suggestionsItemIsSuggested_2f55324e{background:\" }, { \"theme\": \"neutralLight\", \"defaultValue\": \"#edebe9\" }, { \"rawString\": \"}.suggestionsItem_2f55324e.suggestionsItemIsSuggested_2f55324e:hover{background:\" }, { \"theme\": \"neutralTertiaryAlt\", \"defaultValue\": \"#c8c6c4\" }, { \"rawString\": \"}@media screen and (-ms-high-contrast:active){.suggestionsItem_2f55324e.suggestionsItemIsSuggested_2f55324e:hover{background:Highlight;color:HighlightText}}@media screen and (-ms-high-contrast:active){.suggestionsItem_2f55324e.suggestionsItemIsSuggested_2f55324e{background:Highlight;color:HighlightText;-ms-high-contrast-adjust:none}}.suggestionsItem_2f55324e.suggestionsItemIsSuggested_2f55324e .closeButton_2f55324e:hover{background:\" }, { \"theme\": \"neutralTertiary\", \"defaultValue\": \"#a19f9d\" }, { \"rawString\": \";color:\" }, { \"theme\": \"neutralPrimary\", \"defaultValue\": \"#323130\" }, { \"rawString\": \"}@media screen and (-ms-high-contrast:active){.suggestionsItem_2f55324e.suggestionsItemIsSuggested_2f55324e .itemButton_2f55324e{color:HighlightText}}.suggestionsItem_2f55324e .closeButton_2f55324e{display:none;color:\" }, { \"theme\": \"neutralSecondary\", \"defaultValue\": \"#605e5c\" }, { \"rawString\": \"}.suggestionsItem_2f55324e .closeButton_2f55324e:hover{background:\" }, { \"theme\": \"neutralLight\", \"defaultValue\": \"#edebe9\" }, { \"rawString\": \"}.actionButton_2f55324e{background-color:transparent;border:0;cursor:pointer;margin:0;position:relative;border-top:1px solid \" }, { \"theme\": \"neutralLight\", \"defaultValue\": \"#edebe9\" }, { \"rawString\": \";height:40px;width:100%;font-size:12px}[dir=ltr] .actionButton_2f55324e{padding-left:8px}[dir=rtl] .actionButton_2f55324e{padding-right:8px}html[dir=ltr] .actionButton_2f55324e{text-align:left}html[dir=rtl] .actionButton_2f55324e{text-align:right}.actionButton_2f55324e:hover{background-color:\" }, { \"theme\": \"neutralLight\", \"defaultValue\": \"#edebe9\" }, { \"rawString\": \";cursor:pointer}.actionButton_2f55324e:active,.actionButton_2f55324e:focus{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \"}.actionButton_2f55324e .ms-Button-icon{font-size:16px;width:25px}.actionButton_2f55324e .ms-Button-label{margin:0 4px 0 9px}html[dir=rtl] .actionButton_2f55324e .ms-Button-label{margin:0 9px 0 4px}.buttonSelected_2f55324e{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \"}.suggestionsTitle_2f55324e{padding:0 12px;color:\" }, { \"theme\": \"themePrimary\", \"defaultValue\": \"#0078d4\" }, { \"rawString\": \";font-size:12px;line-height:40px;border-bottom:1px solid \" }, { \"theme\": \"neutralLight\", \"defaultValue\": \"#edebe9\" }, { \"rawString\": \"}.suggestionsContainer_2f55324e{overflow-y:auto;overflow-x:hidden;max-height:300px;border-bottom:1px solid \" }, { \"theme\": \"neutralLight\", \"defaultValue\": \"#edebe9\" }, { \"rawString\": \"}.suggestionsNone_2f55324e{text-align:center;color:#797775;font-size:12px;line-height:30px}.suggestionsSpinner_2f55324e{margin:5px 0;white-space:nowrap;line-height:20px;font-size:12px}html[dir=ltr] .suggestionsSpinner_2f55324e{padding-left:14px}html[dir=rtl] .suggestionsSpinner_2f55324e{padding-right:14px}html[dir=ltr] .suggestionsSpinner_2f55324e{text-align:left}html[dir=rtl] .suggestionsSpinner_2f55324e{text-align:right}.suggestionsSpinner_2f55324e .ms-Spinner-circle{display:inline-block;vertical-align:middle}.suggestionsSpinner_2f55324e .ms-Spinner-label{display:inline-block;margin:0 10px 0 16px;vertical-align:middle}html[dir=rtl] .suggestionsSpinner_2f55324e .ms-Spinner-label{margin:0 16px 0 10px}.itemButton_2f55324e.itemButton_2f55324e{width:100%;padding:0;min-width:0;height:100%}@media screen and (-ms-high-contrast:active){.itemButton_2f55324e.itemButton_2f55324e{color:WindowText}}.itemButton_2f55324e.itemButton_2f55324e:hover{color:\" }, { \"theme\": \"neutralDark\", \"defaultValue\": \"#201f1e\" }, { \"rawString\": \"}.closeButton_2f55324e.closeButton_2f55324e{padding:0 4px;height:auto;width:32px}@media screen and (-ms-high-contrast:active){.closeButton_2f55324e.closeButton_2f55324e{color:WindowText}}.closeButton_2f55324e.closeButton_2f55324e:hover{background:\" }, { \"theme\": \"neutralTertiaryAlt\", \"defaultValue\": \"#c8c6c4\" }, { \"rawString\": \";color:\" }, { \"theme\": \"neutralDark\", \"defaultValue\": \"#201f1e\" }, { \"rawString\": \"}.suggestionsAvailable_2f55324e{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\" }]);\nexport var root = \"root_2f55324e\";\nexport var suggestionsItem = \"suggestionsItem_2f55324e\";\nexport var closeButton = \"closeButton_2f55324e\";\nexport var suggestionsItemIsSuggested = \"suggestionsItemIsSuggested_2f55324e\";\nexport var itemButton = \"itemButton_2f55324e\";\nexport var actionButton = \"actionButton_2f55324e\";\nexport var buttonSelected = \"buttonSelected_2f55324e\";\nexport var suggestionsTitle = \"suggestionsTitle_2f55324e\";\nexport var suggestionsContainer = \"suggestionsContainer_2f55324e\";\nexport var suggestionsNone = \"suggestionsNone_2f55324e\";\nexport var suggestionsSpinner = \"suggestionsSpinner_2f55324e\";\nexport var suggestionsAvailable = \"suggestionsAvailable_2f55324e\";\n//# sourceMappingURL=Suggestions.scss.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, css, initializeComponentRef } from '../../../Utilities';\nimport { CommandButton, IconButton } from '../../../Button';\nimport * as stylesImport from './Suggestions.scss';\nvar legacyStyles = stylesImport;\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory Pickers}\n */\nvar SuggestionsItem = /** @class */ (function (_super) {\n __extends(SuggestionsItem, _super);\n function SuggestionsItem(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n SuggestionsItem.prototype.render = function () {\n var _a;\n var _b = this.props, suggestionModel = _b.suggestionModel, RenderSuggestion = _b.RenderSuggestion, onClick = _b.onClick, className = _b.className, id = _b.id, onRemoveItem = _b.onRemoveItem, isSelectedOverride = _b.isSelectedOverride, removeButtonAriaLabel = _b.removeButtonAriaLabel, styles = _b.styles, theme = _b.theme, removeButtonIconProps = _b.removeButtonIconProps;\n // TODO\n // Clean this up by leaving only the first part after removing support for SASS.\n // Currently we can not remove the SASS styles from SuggestionsItem class because it\n // might be used by consumers separately from pickers extending from BasePicker\n // and have not used the new 'styles' prop. Because it's expecting a type parameter,\n // we can not use the 'styled' function without adding some helpers which can break\n // downstream consumers who did not use the new helpers.\n // We check for 'styles' prop which is going to be injected by the 'styled' HOC\n // in Suggestions when the typed SuggestionsItem class is ready to be rendered. If the\n // check passes we can use the CSS-in-JS styles. If the check fails (ex: custom picker),\n // then we just use the old SASS styles instead.\n var classNames = styles\n ? getClassNames(styles, {\n theme: theme,\n className: className,\n suggested: suggestionModel.selected || isSelectedOverride,\n })\n : {\n root: css('ms-Suggestions-item', legacyStyles.suggestionsItem, (_a = {},\n _a['is-suggested ' + legacyStyles.suggestionsItemIsSuggested] = suggestionModel.selected || isSelectedOverride,\n _a), className),\n itemButton: css('ms-Suggestions-itemButton', legacyStyles.itemButton),\n closeButton: css('ms-Suggestions-closeButton', legacyStyles.closeButton),\n };\n return (React.createElement(\"div\", { className: classNames.root, role: \"presentation\" },\n React.createElement(CommandButton, { onClick: onClick, className: classNames.itemButton, id: id, \"aria-selected\": suggestionModel.selected, role: \"option\", \"aria-label\": suggestionModel.ariaLabel }, RenderSuggestion(suggestionModel.item, this.props)),\n this.props.showRemoveButton ? (React.createElement(IconButton, { iconProps: removeButtonIconProps !== null && removeButtonIconProps !== void 0 ? removeButtonIconProps : { iconName: 'Cancel' }, styles: { icon: { fontSize: '12px' } }, title: removeButtonAriaLabel, ariaLabel: removeButtonAriaLabel, onClick: onRemoveItem, className: classNames.closeButton })) : null));\n };\n return SuggestionsItem;\n}(React.Component));\nexport { SuggestionsItem };\n//# sourceMappingURL=SuggestionsItem.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".suggestionsContainer_a151d363{overflow-y:auto;overflow-x:hidden;max-height:300px}.suggestionsContainer_a151d363 .ms-Suggestion-item:hover{background-color:\" }, { \"theme\": \"neutralLighter\", \"defaultValue\": \"#f3f2f1\" }, { \"rawString\": \";cursor:pointer}.suggestionsContainer_a151d363 .is-suggested{background-color:\" }, { \"theme\": \"themeLighter\", \"defaultValue\": \"#deecf9\" }, { \"rawString\": \"}.suggestionsContainer_a151d363 .is-suggested:hover{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \";cursor:pointer}\" }]);\nexport var suggestionsContainer = \"suggestionsContainer_a151d363\";\n//# sourceMappingURL=SuggestionsCore.scss.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, css } from '../../../Utilities';\nimport { SuggestionsItem } from '../../../Pickers';\nimport * as stylesImport from './SuggestionsCore.scss';\nvar styles = stylesImport;\n/**\n * Class when used with SuggestionsStore, renders a basic suggestions control\n */\nvar SuggestionsCore = /** @class */ (function (_super) {\n __extends(SuggestionsCore, _super);\n function SuggestionsCore(suggestionsProps) {\n var _this = _super.call(this, suggestionsProps) || this;\n _this._selectedElement = React.createRef();\n _this.SuggestionsItemOfProperType = SuggestionsItem;\n _this._onClickTypedSuggestionsItem = function (item, index) {\n return function (ev) {\n _this.props.onSuggestionClick(ev, item, index);\n };\n };\n _this._onRemoveTypedSuggestionsItem = function (item, index) {\n return function (ev) {\n var onSuggestionRemove = _this.props.onSuggestionRemove;\n onSuggestionRemove(ev, item, index);\n ev.stopPropagation();\n };\n };\n initializeComponentRef(_this);\n _this.currentIndex = -1;\n return _this;\n }\n /**\n * Increments the selected suggestion index\n */\n SuggestionsCore.prototype.nextSuggestion = function () {\n var suggestions = this.props.suggestions;\n if (suggestions && suggestions.length > 0) {\n if (this.currentIndex === -1) {\n this.setSelectedSuggestion(0);\n return true;\n }\n else if (this.currentIndex < suggestions.length - 1) {\n this.setSelectedSuggestion(this.currentIndex + 1);\n return true;\n }\n else if (this.props.shouldLoopSelection && this.currentIndex === suggestions.length - 1) {\n this.setSelectedSuggestion(0);\n return true;\n }\n }\n return false;\n };\n /**\n * Decrements the selected suggestion index\n */\n SuggestionsCore.prototype.previousSuggestion = function () {\n var suggestions = this.props.suggestions;\n if (suggestions && suggestions.length > 0) {\n if (this.currentIndex === -1) {\n this.setSelectedSuggestion(suggestions.length - 1);\n return true;\n }\n else if (this.currentIndex > 0) {\n this.setSelectedSuggestion(this.currentIndex - 1);\n return true;\n }\n else if (this.props.shouldLoopSelection && this.currentIndex === 0) {\n this.setSelectedSuggestion(suggestions.length - 1);\n return true;\n }\n }\n return false;\n };\n Object.defineProperty(SuggestionsCore.prototype, \"selectedElement\", {\n get: function () {\n return this._selectedElement.current || undefined;\n },\n enumerable: false,\n configurable: true\n });\n SuggestionsCore.prototype.getCurrentItem = function () {\n return this.props.suggestions[this.currentIndex];\n };\n SuggestionsCore.prototype.getSuggestionAtIndex = function (index) {\n return this.props.suggestions[index];\n };\n SuggestionsCore.prototype.hasSuggestionSelected = function () {\n return this.currentIndex !== -1 && this.currentIndex < this.props.suggestions.length;\n };\n SuggestionsCore.prototype.removeSuggestion = function (index) {\n this.props.suggestions.splice(index, 1);\n };\n SuggestionsCore.prototype.deselectAllSuggestions = function () {\n if (this.currentIndex > -1 && this.props.suggestions[this.currentIndex]) {\n this.props.suggestions[this.currentIndex].selected = false;\n this.currentIndex = -1;\n this.forceUpdate();\n }\n };\n SuggestionsCore.prototype.setSelectedSuggestion = function (index) {\n var suggestions = this.props.suggestions;\n if (index > suggestions.length - 1 || index < 0) {\n this.currentIndex = 0;\n this.currentSuggestion.selected = false;\n this.currentSuggestion = suggestions[0];\n this.currentSuggestion.selected = true;\n }\n else {\n if (this.currentIndex > -1 && suggestions[this.currentIndex]) {\n suggestions[this.currentIndex].selected = false;\n }\n suggestions[index].selected = true;\n this.currentIndex = index;\n this.currentSuggestion = suggestions[index];\n }\n this.forceUpdate();\n };\n SuggestionsCore.prototype.componentDidUpdate = function () {\n this.scrollSelected();\n };\n SuggestionsCore.prototype.render = function () {\n var _this = this;\n var _a = this.props, onRenderSuggestion = _a.onRenderSuggestion, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons, suggestionsContainerAriaLabel = _a.suggestionsContainerAriaLabel;\n var TypedSuggestionsItem = this.SuggestionsItemOfProperType;\n var suggestions = this.props.suggestions;\n if (resultsMaximumNumber) {\n suggestions = suggestions.slice(0, resultsMaximumNumber);\n }\n return (React.createElement(\"div\", { className: css('ms-Suggestions-container', styles.suggestionsContainer), id: \"suggestion-list\", role: \"list\", \"aria-label\": suggestionsContainerAriaLabel }, suggestions.map(function (suggestion, index) { return (React.createElement(\"div\", { ref: suggestion.selected || index === _this.currentIndex ? _this._selectedElement : undefined, key: suggestion.item.key ? suggestion.item.key : index, id: 'sug-' + index, role: \"listitem\", \"aria-label\": suggestion.ariaLabel },\n React.createElement(TypedSuggestionsItem, { id: 'sug-item' + index, suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: _this._onClickTypedSuggestionsItem(suggestion.item, index), className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, onRemoveItem: _this._onRemoveTypedSuggestionsItem(suggestion.item, index), isSelectedOverride: index === _this.currentIndex }))); })));\n };\n // TODO get the element to scroll into view properly regardless of direction.\n SuggestionsCore.prototype.scrollSelected = function () {\n var _a;\n if (((_a = this._selectedElement.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView) !== undefined) {\n this._selectedElement.current.scrollIntoView(false);\n }\n };\n return SuggestionsCore;\n}(React.Component));\nexport { SuggestionsCore };\n//# sourceMappingURL=SuggestionsCore.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".root_e4eecb3d{min-width:260px}.actionButton_e4eecb3d{background:0 0;background-color:transparent;border:0;cursor:pointer;margin:0;padding:0;position:relative;width:100%;font-size:12px}html[dir=ltr] .actionButton_e4eecb3d{text-align:left}html[dir=rtl] .actionButton_e4eecb3d{text-align:right}.actionButton_e4eecb3d:hover{background-color:\" }, { \"theme\": \"neutralLighter\", \"defaultValue\": \"#f3f2f1\" }, { \"rawString\": \";cursor:pointer}.actionButton_e4eecb3d:active,.actionButton_e4eecb3d:focus{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \"}.actionButton_e4eecb3d .ms-Button-icon{font-size:16px;width:25px}.actionButton_e4eecb3d .ms-Button-label{margin:0 4px 0 9px}html[dir=rtl] .actionButton_e4eecb3d .ms-Button-label{margin:0 9px 0 4px}.buttonSelected_e4eecb3d{background-color:\" }, { \"theme\": \"themeLighter\", \"defaultValue\": \"#deecf9\" }, { \"rawString\": \"}.buttonSelected_e4eecb3d:hover{background-color:\" }, { \"theme\": \"themeLight\", \"defaultValue\": \"#c7e0f4\" }, { \"rawString\": \";cursor:pointer}@media screen and (-ms-high-contrast:active){.buttonSelected_e4eecb3d:hover{background-color:Highlight;color:HighlightText}}@media screen and (-ms-high-contrast:active){.buttonSelected_e4eecb3d{background-color:Highlight;color:HighlightText;-ms-high-contrast-adjust:none}}.suggestionsTitle_e4eecb3d{font-size:12px}.suggestionsSpinner_e4eecb3d{margin:5px 0;white-space:nowrap;line-height:20px;font-size:12px}html[dir=ltr] .suggestionsSpinner_e4eecb3d{padding-left:14px}html[dir=rtl] .suggestionsSpinner_e4eecb3d{padding-right:14px}html[dir=ltr] .suggestionsSpinner_e4eecb3d{text-align:left}html[dir=rtl] .suggestionsSpinner_e4eecb3d{text-align:right}.suggestionsSpinner_e4eecb3d .ms-Spinner-circle{display:inline-block;vertical-align:middle}.suggestionsSpinner_e4eecb3d .ms-Spinner-label{display:inline-block;margin:0 10px 0 16px;vertical-align:middle}html[dir=rtl] .suggestionsSpinner_e4eecb3d .ms-Spinner-label{margin:0 16px 0 10px}.itemButton_e4eecb3d{height:100%;width:100%;padding:7px 12px}@media screen and (-ms-high-contrast:active){.itemButton_e4eecb3d{color:WindowText}}.screenReaderOnly_e4eecb3d{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\" }]);\nexport var root = \"root_e4eecb3d\";\nexport var actionButton = \"actionButton_e4eecb3d\";\nexport var buttonSelected = \"buttonSelected_e4eecb3d\";\nexport var suggestionsTitle = \"suggestionsTitle_e4eecb3d\";\nexport var suggestionsSpinner = \"suggestionsSpinner_e4eecb3d\";\nexport var itemButton = \"itemButton_e4eecb3d\";\nexport var screenReaderOnly = \"screenReaderOnly_e4eecb3d\";\n//# sourceMappingURL=SuggestionsControl.scss.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { css, KeyCodes, initializeComponentRef } from '../../../Utilities';\nimport { SuggestionsCore } from './SuggestionsCore';\nimport * as stylesImport from './SuggestionsControl.scss';\nimport { hiddenContentStyle, mergeStyles } from '../../../Styling';\nvar styles = stylesImport;\nexport var SuggestionItemType;\n(function (SuggestionItemType) {\n SuggestionItemType[SuggestionItemType[\"header\"] = 0] = \"header\";\n SuggestionItemType[SuggestionItemType[\"suggestion\"] = 1] = \"suggestion\";\n SuggestionItemType[SuggestionItemType[\"footer\"] = 2] = \"footer\";\n})(SuggestionItemType || (SuggestionItemType = {}));\nvar SuggestionsHeaderFooterItem = /** @class */ (function (_super) {\n __extends(SuggestionsHeaderFooterItem, _super);\n function SuggestionsHeaderFooterItem(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n SuggestionsHeaderFooterItem.prototype.render = function () {\n var _a;\n var _b = this.props, renderItem = _b.renderItem, onExecute = _b.onExecute, isSelected = _b.isSelected, id = _b.id, className = _b.className;\n return onExecute ? (React.createElement(\"div\", { id: id, onClick: onExecute, className: css('ms-Suggestions-sectionButton', className, styles.actionButton, (_a = {},\n _a['is-selected ' + styles.buttonSelected] = isSelected,\n _a)) }, renderItem())) : (React.createElement(\"div\", { id: id, className: css('ms-Suggestions-section', className, styles.suggestionsTitle) }, renderItem()));\n };\n return SuggestionsHeaderFooterItem;\n}(React.Component));\nexport { SuggestionsHeaderFooterItem };\n/**\n * Class when used with SuggestionsStore, renders a suggestions control with customizable headers and footers\n */\nvar SuggestionsControl = /** @class */ (function (_super) {\n __extends(SuggestionsControl, _super);\n function SuggestionsControl(suggestionsProps) {\n var _this = _super.call(this, suggestionsProps) || this;\n _this._selectedElement = React.createRef();\n _this._suggestions = React.createRef();\n _this.SuggestionsOfProperType = SuggestionsCore;\n initializeComponentRef(_this);\n _this.state = {\n selectedHeaderIndex: -1,\n selectedFooterIndex: -1,\n suggestions: suggestionsProps.suggestions,\n };\n return _this;\n }\n SuggestionsControl.prototype.componentDidMount = function () {\n this.resetSelectedItem();\n };\n SuggestionsControl.prototype.componentDidUpdate = function (oldProps) {\n var _this = this;\n this.scrollSelected();\n if (oldProps.suggestions && oldProps.suggestions !== this.props.suggestions) {\n this.setState({ suggestions: this.props.suggestions }, function () {\n _this.resetSelectedItem();\n });\n }\n };\n SuggestionsControl.prototype.componentWillUnmount = function () {\n var _a;\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.deselectAllSuggestions();\n };\n SuggestionsControl.prototype.render = function () {\n var _a = this.props, className = _a.className, headerItemsProps = _a.headerItemsProps, footerItemsProps = _a.footerItemsProps, suggestionsAvailableAlertText = _a.suggestionsAvailableAlertText;\n var screenReaderTextStyles = mergeStyles(hiddenContentStyle);\n var shouldAlertSuggestionsAvailableText = this.state.suggestions && this.state.suggestions.length > 0 && suggestionsAvailableAlertText;\n return (React.createElement(\"div\", { className: css('ms-Suggestions', className ? className : '', styles.root) },\n headerItemsProps && this.renderHeaderItems(),\n this._renderSuggestions(),\n footerItemsProps && this.renderFooterItems(),\n shouldAlertSuggestionsAvailableText ? (React.createElement(\"span\", { role: \"alert\", \"aria-live\": \"polite\", className: screenReaderTextStyles }, suggestionsAvailableAlertText)) : null));\n };\n Object.defineProperty(SuggestionsControl.prototype, \"currentSuggestion\", {\n get: function () {\n var _a;\n return ((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.getCurrentItem()) || undefined;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(SuggestionsControl.prototype, \"currentSuggestionIndex\", {\n get: function () {\n return this._suggestions.current ? this._suggestions.current.currentIndex : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(SuggestionsControl.prototype, \"selectedElement\", {\n get: function () {\n var _a;\n return this._selectedElement.current ? this._selectedElement.current : (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.selectedElement;\n },\n enumerable: false,\n configurable: true\n });\n SuggestionsControl.prototype.hasSuggestionSelected = function () {\n var _a;\n return ((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.hasSuggestionSelected()) || false;\n };\n SuggestionsControl.prototype.hasSelection = function () {\n var _a = this.state, selectedHeaderIndex = _a.selectedHeaderIndex, selectedFooterIndex = _a.selectedFooterIndex;\n return selectedHeaderIndex !== -1 || this.hasSuggestionSelected() || selectedFooterIndex !== -1;\n };\n SuggestionsControl.prototype.executeSelectedAction = function () {\n var _a;\n var _b = this.props, headerItemsProps = _b.headerItemsProps, footerItemsProps = _b.footerItemsProps;\n var _c = this.state, selectedHeaderIndex = _c.selectedHeaderIndex, selectedFooterIndex = _c.selectedFooterIndex;\n if (headerItemsProps && selectedHeaderIndex !== -1 && selectedHeaderIndex < headerItemsProps.length) {\n var selectedHeaderItem = headerItemsProps[selectedHeaderIndex];\n if (selectedHeaderItem.onExecute) {\n selectedHeaderItem.onExecute();\n }\n }\n else if ((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.hasSuggestionSelected()) {\n this.props.completeSuggestion();\n }\n else if (footerItemsProps && selectedFooterIndex !== -1 && selectedFooterIndex < footerItemsProps.length) {\n var selectedFooterItem = footerItemsProps[selectedFooterIndex];\n if (selectedFooterItem.onExecute) {\n selectedFooterItem.onExecute();\n }\n }\n };\n SuggestionsControl.prototype.removeSuggestion = function (index) {\n var _a, _b;\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.removeSuggestion(index ? index : (_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.currentIndex);\n };\n /**\n * Handles the key down, returns true, if the event was handled, false otherwise\n * @param keyCode - The keyCode to handle\n */\n SuggestionsControl.prototype.handleKeyDown = function (keyCode) {\n var _a, _b, _c, _d;\n var _e = this.state, selectedHeaderIndex = _e.selectedHeaderIndex, selectedFooterIndex = _e.selectedFooterIndex;\n var isKeyDownHandled = false;\n if (keyCode === KeyCodes.down) {\n if (selectedHeaderIndex === -1 &&\n !((_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.hasSuggestionSelected()) &&\n selectedFooterIndex === -1) {\n this.selectFirstItem();\n }\n else if (selectedHeaderIndex !== -1) {\n this.selectNextItem(SuggestionItemType.header);\n isKeyDownHandled = true;\n }\n else if ((_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.hasSuggestionSelected()) {\n this.selectNextItem(SuggestionItemType.suggestion);\n isKeyDownHandled = true;\n }\n else if (selectedFooterIndex !== -1) {\n this.selectNextItem(SuggestionItemType.footer);\n isKeyDownHandled = true;\n }\n }\n else if (keyCode === KeyCodes.up) {\n if (selectedHeaderIndex === -1 &&\n !((_c = this._suggestions.current) === null || _c === void 0 ? void 0 : _c.hasSuggestionSelected()) &&\n selectedFooterIndex === -1) {\n this.selectLastItem();\n }\n else if (selectedHeaderIndex !== -1) {\n this.selectPreviousItem(SuggestionItemType.header);\n isKeyDownHandled = true;\n }\n else if ((_d = this._suggestions.current) === null || _d === void 0 ? void 0 : _d.hasSuggestionSelected()) {\n this.selectPreviousItem(SuggestionItemType.suggestion);\n isKeyDownHandled = true;\n }\n else if (selectedFooterIndex !== -1) {\n this.selectPreviousItem(SuggestionItemType.footer);\n isKeyDownHandled = true;\n }\n }\n else if (keyCode === KeyCodes.enter || keyCode === KeyCodes.tab) {\n if (this.hasSelection()) {\n this.executeSelectedAction();\n isKeyDownHandled = true;\n }\n }\n return isKeyDownHandled;\n };\n // TODO get the element to scroll into view properly regardless of direction.\n SuggestionsControl.prototype.scrollSelected = function () {\n if (this._selectedElement.current) {\n this._selectedElement.current.scrollIntoView(false);\n }\n };\n SuggestionsControl.prototype.renderHeaderItems = function () {\n var _this = this;\n var _a = this.props, headerItemsProps = _a.headerItemsProps, suggestionsHeaderContainerAriaLabel = _a.suggestionsHeaderContainerAriaLabel;\n var selectedHeaderIndex = this.state.selectedHeaderIndex;\n return headerItemsProps ? (React.createElement(\"div\", { className: css('ms-Suggestions-headerContainer', styles.suggestionsContainer), id: \"suggestionHeader-list\", role: \"list\", \"aria-label\": suggestionsHeaderContainerAriaLabel }, headerItemsProps.map(function (headerItemProps, index) {\n var isSelected = selectedHeaderIndex !== -1 && selectedHeaderIndex === index;\n return headerItemProps.shouldShow() ? (React.createElement(\"div\", { ref: isSelected ? _this._selectedElement : undefined, id: 'sug-header' + index, key: 'sug-header' + index, role: \"listitem\", \"aria-label\": headerItemProps.ariaLabel },\n React.createElement(SuggestionsHeaderFooterItem, { id: 'sug-header-item' + index, isSelected: isSelected, renderItem: headerItemProps.renderItem, onExecute: headerItemProps.onExecute, className: headerItemProps.className }))) : null;\n }))) : null;\n };\n SuggestionsControl.prototype.renderFooterItems = function () {\n var _this = this;\n var _a = this.props, footerItemsProps = _a.footerItemsProps, suggestionsFooterContainerAriaLabel = _a.suggestionsFooterContainerAriaLabel;\n var selectedFooterIndex = this.state.selectedFooterIndex;\n return footerItemsProps ? (React.createElement(\"div\", { className: css('ms-Suggestions-footerContainer', styles.suggestionsContainer), id: \"suggestionFooter-list\", role: \"list\", \"aria-label\": suggestionsFooterContainerAriaLabel }, footerItemsProps.map(function (footerItemProps, index) {\n var isSelected = selectedFooterIndex !== -1 && selectedFooterIndex === index;\n return footerItemProps.shouldShow() ? (React.createElement(\"div\", { ref: isSelected ? _this._selectedElement : undefined, id: 'sug-footer' + index, key: 'sug-footer' + index, role: \"listitem\", \"aria-label\": footerItemProps.ariaLabel },\n React.createElement(SuggestionsHeaderFooterItem, { id: 'sug-footer-item' + index, isSelected: isSelected, renderItem: footerItemProps.renderItem, onExecute: footerItemProps.onExecute, className: footerItemProps.className }))) : null;\n }))) : null;\n };\n SuggestionsControl.prototype._renderSuggestions = function () {\n var TypedSuggestions = this.SuggestionsOfProperType;\n return React.createElement(TypedSuggestions, __assign({ ref: this._suggestions }, this.props, { suggestions: this.state.suggestions }));\n };\n /**\n * Selects the next selectable item\n */\n SuggestionsControl.prototype.selectNextItem = function (itemType, originalItemType) {\n // If the recursive calling has not found a selectable item in the other suggestion item type groups\n // And the method is being called again with the original item type,\n // Select the first selectable item of this suggestion item type group (could be the currently selected item)\n if (itemType === originalItemType) {\n this._selectNextItemOfItemType(itemType);\n return;\n }\n var startedItemType = originalItemType !== undefined ? originalItemType : itemType;\n // Try to set the selection to the next selectable item, of the same suggestion item type group\n // If this is the original item type, use the current index\n var selectionChanged = this._selectNextItemOfItemType(itemType, startedItemType === itemType ? this._getCurrentIndexForType(itemType) : undefined);\n // If the selection did not change, try to select from the next suggestion type group\n if (!selectionChanged) {\n this.selectNextItem(this._getNextItemSectionType(itemType), startedItemType);\n }\n };\n /**\n * Selects the previous selectable item\n */\n SuggestionsControl.prototype.selectPreviousItem = function (itemType, originalItemType) {\n // If the recursive calling has not found a selectable item in the other suggestion item type groups\n // And the method is being called again with the original item type,\n // Select the last selectable item of this suggestion item type group (could be the currently selected item)\n if (itemType === originalItemType) {\n this._selectPreviousItemOfItemType(itemType);\n return;\n }\n var startedItemType = originalItemType !== undefined ? originalItemType : itemType;\n // Try to set the selection to the previous selectable item, of the same suggestion item type group\n var selectionChanged = this._selectPreviousItemOfItemType(itemType, startedItemType === itemType ? this._getCurrentIndexForType(itemType) : undefined);\n // If the selection did not change, try to select from the previous suggestion type group\n if (!selectionChanged) {\n this.selectPreviousItem(this._getPreviousItemSectionType(itemType), startedItemType);\n }\n };\n /**\n * Resets the selected state and selects the first selectable item\n */\n SuggestionsControl.prototype.resetSelectedItem = function () {\n var _a;\n this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.deselectAllSuggestions();\n // Select the first item if the shouldSelectFirstItem prop is not set or it is set and it returns true\n if (this.props.shouldSelectFirstItem === undefined || this.props.shouldSelectFirstItem()) {\n this.selectFirstItem();\n }\n };\n /**\n * Selects the first item\n */\n SuggestionsControl.prototype.selectFirstItem = function () {\n if (this._selectNextItemOfItemType(SuggestionItemType.header)) {\n return;\n }\n if (this._selectNextItemOfItemType(SuggestionItemType.suggestion)) {\n return;\n }\n this._selectNextItemOfItemType(SuggestionItemType.footer);\n };\n /**\n * Selects the last item\n */\n SuggestionsControl.prototype.selectLastItem = function () {\n if (this._selectPreviousItemOfItemType(SuggestionItemType.footer)) {\n return;\n }\n if (this._selectPreviousItemOfItemType(SuggestionItemType.suggestion)) {\n return;\n }\n this._selectPreviousItemOfItemType(SuggestionItemType.header);\n };\n /**\n * Selects the next item in the suggestion item type group, given the current index\n * If none is able to be selected, returns false, otherwise returns true\n * @param itemType - The suggestion item type\n * @param currentIndex - The current index, default is -1\n */\n SuggestionsControl.prototype._selectNextItemOfItemType = function (itemType, currentIndex) {\n var _a, _b;\n if (currentIndex === void 0) { currentIndex = -1; }\n if (itemType === SuggestionItemType.suggestion) {\n if (this.state.suggestions.length > currentIndex + 1) {\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.setSelectedSuggestion(currentIndex + 1);\n this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });\n return true;\n }\n }\n else {\n var isHeader = itemType === SuggestionItemType.header;\n var itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;\n if (itemProps && itemProps.length > currentIndex + 1) {\n for (var i = currentIndex + 1; i < itemProps.length; i++) {\n var item = itemProps[i];\n if (item.onExecute && item.shouldShow()) {\n this.setState({ selectedHeaderIndex: isHeader ? i : -1 });\n this.setState({ selectedFooterIndex: isHeader ? -1 : i });\n (_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.deselectAllSuggestions();\n return true;\n }\n }\n }\n }\n return false;\n };\n /**\n * Selects the previous item in the suggestion item type group, given the current index\n * If none is able to be selected, returns false, otherwise returns true\n * @param itemType - The suggestion item type\n * @param currentIndex - The current index. If none is provided, the default is the items length of specified type\n */\n SuggestionsControl.prototype._selectPreviousItemOfItemType = function (itemType, currentIndex) {\n var _a, _b;\n if (itemType === SuggestionItemType.suggestion) {\n var index = currentIndex !== undefined ? currentIndex : this.state.suggestions.length;\n if (index > 0) {\n (_a = this._suggestions.current) === null || _a === void 0 ? void 0 : _a.setSelectedSuggestion(index - 1);\n this.setState({ selectedHeaderIndex: -1, selectedFooterIndex: -1 });\n return true;\n }\n }\n else {\n var isHeader = itemType === SuggestionItemType.header;\n var itemProps = isHeader ? this.props.headerItemsProps : this.props.footerItemsProps;\n if (itemProps) {\n var index = currentIndex !== undefined ? currentIndex : itemProps.length;\n if (index > 0) {\n for (var i = index - 1; i >= 0; i--) {\n var item = itemProps[i];\n if (item.onExecute && item.shouldShow()) {\n this.setState({ selectedHeaderIndex: isHeader ? i : -1 });\n this.setState({ selectedFooterIndex: isHeader ? -1 : i });\n (_b = this._suggestions.current) === null || _b === void 0 ? void 0 : _b.deselectAllSuggestions();\n return true;\n }\n }\n }\n }\n }\n return false;\n };\n SuggestionsControl.prototype._getCurrentIndexForType = function (itemType) {\n switch (itemType) {\n case SuggestionItemType.header:\n return this.state.selectedHeaderIndex;\n case SuggestionItemType.suggestion:\n return this._suggestions.current.currentIndex;\n case SuggestionItemType.footer:\n return this.state.selectedFooterIndex;\n }\n };\n SuggestionsControl.prototype._getNextItemSectionType = function (itemType) {\n switch (itemType) {\n case SuggestionItemType.header:\n return SuggestionItemType.suggestion;\n case SuggestionItemType.suggestion:\n return SuggestionItemType.footer;\n case SuggestionItemType.footer:\n return SuggestionItemType.header;\n }\n };\n SuggestionsControl.prototype._getPreviousItemSectionType = function (itemType) {\n switch (itemType) {\n case SuggestionItemType.header:\n return SuggestionItemType.footer;\n case SuggestionItemType.suggestion:\n return SuggestionItemType.header;\n case SuggestionItemType.footer:\n return SuggestionItemType.suggestion;\n }\n };\n return SuggestionsControl;\n}(React.Component));\nexport { SuggestionsControl };\n//# sourceMappingURL=SuggestionsControl.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport * as stylesImport from './BaseFloatingPicker.scss';\nimport { Async, initializeComponentRef, css, KeyCodes } from '../../Utilities';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { Callout } from '../../Callout';\nimport { SuggestionsControl } from './Suggestions/SuggestionsControl';\nvar styles = stylesImport;\nvar BaseFloatingPicker = /** @class */ (function (_super) {\n __extends(BaseFloatingPicker, _super);\n function BaseFloatingPicker(basePickerProps) {\n var _this = _super.call(this, basePickerProps) || this;\n _this.root = React.createRef();\n _this.suggestionsControl = React.createRef();\n _this.SuggestionsControlOfProperType = SuggestionsControl;\n _this.isComponentMounted = false;\n _this.onQueryStringChanged = function (queryString) {\n if (queryString !== _this.state.queryString) {\n _this.setState({\n queryString: queryString,\n });\n if (_this.props.onInputChanged) {\n _this.props.onInputChanged(queryString);\n }\n _this.updateValue(queryString);\n }\n };\n _this.hidePicker = function () {\n var wasShownBeforeUpdate = _this.isSuggestionsShown;\n _this.setState({\n suggestionsVisible: false,\n });\n if (_this.props.onSuggestionsHidden && wasShownBeforeUpdate) {\n _this.props.onSuggestionsHidden();\n }\n };\n _this.showPicker = function (updateValue) {\n if (updateValue === void 0) { updateValue = false; }\n var wasShownBeforeUpdate = _this.isSuggestionsShown;\n _this.setState({\n suggestionsVisible: true,\n });\n // Update the suggestions if updateValue == true\n var value = _this.props.inputElement ? _this.props.inputElement.value : '';\n if (updateValue) {\n _this.updateValue(value);\n }\n if (_this.props.onSuggestionsShown && !wasShownBeforeUpdate) {\n _this.props.onSuggestionsShown();\n }\n };\n _this.completeSuggestion = function () {\n if (_this.suggestionsControl.current && _this.suggestionsControl.current.hasSuggestionSelected()) {\n _this.onChange(_this.suggestionsControl.current.currentSuggestion.item);\n }\n };\n _this.onSuggestionClick = function (ev, item, index) {\n _this.onChange(item);\n _this._updateSuggestionsVisible(false /*shouldShow*/);\n };\n _this.onSuggestionRemove = function (ev, item, index) {\n if (_this.props.onRemoveSuggestion) {\n _this.props.onRemoveSuggestion(item);\n }\n if (_this.suggestionsControl.current) {\n _this.suggestionsControl.current.removeSuggestion(index);\n }\n };\n _this.onKeyDown = function (ev) {\n if (!_this.state.suggestionsVisible ||\n (_this.props.inputElement && !_this.props.inputElement.contains(ev.target))) {\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n var keyCode = ev.which;\n switch (keyCode) {\n case KeyCodes.escape:\n _this.hidePicker();\n ev.preventDefault();\n ev.stopPropagation();\n break;\n case KeyCodes.tab:\n case KeyCodes.enter:\n if (!ev.shiftKey &&\n !ev.ctrlKey &&\n _this.suggestionsControl.current &&\n _this.suggestionsControl.current.handleKeyDown(keyCode)) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n else {\n _this._onValidateInput();\n }\n break;\n case KeyCodes.del:\n if (_this.props.onRemoveSuggestion &&\n _this.suggestionsControl.current &&\n _this.suggestionsControl.current.hasSuggestionSelected &&\n _this.suggestionsControl.current.currentSuggestion &&\n ev.shiftKey) {\n _this.props.onRemoveSuggestion(_this.suggestionsControl.current.currentSuggestion.item);\n _this.suggestionsControl.current.removeSuggestion();\n _this.forceUpdate();\n ev.stopPropagation();\n }\n break;\n case KeyCodes.up:\n if (_this.suggestionsControl.current && _this.suggestionsControl.current.handleKeyDown(keyCode)) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._updateActiveDescendant();\n }\n break;\n case KeyCodes.down:\n if (_this.suggestionsControl.current && _this.suggestionsControl.current.handleKeyDown(keyCode)) {\n ev.preventDefault();\n ev.stopPropagation();\n _this._updateActiveDescendant();\n }\n break;\n }\n };\n _this._onValidateInput = function () {\n if (_this.state.queryString && _this.props.onValidateInput && _this.props.createGenericItem) {\n var itemToConvert = _this.props.createGenericItem(_this.state.queryString, _this.props.onValidateInput(_this.state.queryString));\n var convertedItems = _this.suggestionStore.convertSuggestionsToSuggestionItems([itemToConvert]);\n _this.onChange(convertedItems[0].item);\n }\n };\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n _this.suggestionStore = basePickerProps.suggestionsStore;\n _this.state = {\n queryString: '',\n didBind: false,\n };\n return _this;\n }\n Object.defineProperty(BaseFloatingPicker.prototype, \"inputText\", {\n get: function () {\n return this.state.queryString;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseFloatingPicker.prototype, \"suggestions\", {\n get: function () {\n return this.suggestionStore.suggestions;\n },\n enumerable: false,\n configurable: true\n });\n BaseFloatingPicker.prototype.forceResolveSuggestion = function () {\n if (this.suggestionsControl.current && this.suggestionsControl.current.hasSuggestionSelected()) {\n this.completeSuggestion();\n }\n else {\n this._onValidateInput();\n }\n };\n Object.defineProperty(BaseFloatingPicker.prototype, \"currentSelectedSuggestionIndex\", {\n get: function () {\n return this.suggestionsControl.current ? this.suggestionsControl.current.currentSuggestionIndex : -1;\n },\n enumerable: false,\n configurable: true\n });\n Object.defineProperty(BaseFloatingPicker.prototype, \"isSuggestionsShown\", {\n get: function () {\n return this.state.suggestionsVisible === undefined ? false : this.state.suggestionsVisible;\n },\n enumerable: false,\n configurable: true\n });\n BaseFloatingPicker.prototype.componentDidMount = function () {\n this._bindToInputElement();\n this.isComponentMounted = true;\n this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);\n };\n BaseFloatingPicker.prototype.componentDidUpdate = function () {\n this._bindToInputElement();\n };\n BaseFloatingPicker.prototype.componentWillUnmount = function () {\n this._unbindFromInputElement();\n this.isComponentMounted = false;\n };\n BaseFloatingPicker.prototype.updateSuggestions = function (suggestions, forceUpdate) {\n if (forceUpdate === void 0) { forceUpdate = false; }\n this.suggestionStore.updateSuggestions(suggestions);\n if (forceUpdate) {\n this.forceUpdate();\n }\n };\n BaseFloatingPicker.prototype.render = function () {\n var className = this.props.className;\n return (React.createElement(\"div\", { ref: this.root, className: css('ms-BasePicker ms-BaseFloatingPicker', className ? className : '') }, this.renderSuggestions()));\n };\n BaseFloatingPicker.prototype.renderSuggestions = function () {\n var TypedSuggestionsControl = this.SuggestionsControlOfProperType;\n if (this.props.suggestionItems) {\n this.suggestionStore.updateSuggestions(this.props.suggestionItems);\n }\n return this.state.suggestionsVisible ? (React.createElement(Callout, __assign({ className: styles.callout, isBeakVisible: false, gapSpace: 5, target: this.props.inputElement, onDismiss: this.hidePicker, directionalHint: DirectionalHint.bottomLeftEdge, directionalHintForRTL: DirectionalHint.bottomRightEdge, calloutWidth: this.props.calloutWidth ? this.props.calloutWidth : 0 }, this.props.pickerCalloutProps),\n React.createElement(TypedSuggestionsControl, __assign({ onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), componentRef: this.suggestionsControl, completeSuggestion: this.completeSuggestion, shouldLoopSelection: false }, this.props.pickerSuggestionsProps)))) : null;\n };\n BaseFloatingPicker.prototype.onSelectionChange = function () {\n this.forceUpdate();\n };\n BaseFloatingPicker.prototype.updateValue = function (updatedValue) {\n if (updatedValue === '') {\n this.updateSuggestionWithZeroState();\n }\n else {\n this._onResolveSuggestions(updatedValue);\n }\n };\n BaseFloatingPicker.prototype.updateSuggestionWithZeroState = function () {\n if (this.props.onZeroQuerySuggestion) {\n var onEmptyInputFocus = this.props.onZeroQuerySuggestion;\n var suggestions = onEmptyInputFocus(this.props.selectedItems);\n this.updateSuggestionsList(suggestions);\n }\n else {\n this.hidePicker();\n }\n };\n BaseFloatingPicker.prototype.updateSuggestionsList = function (suggestions) {\n var _this = this;\n var suggestionsArray = suggestions;\n var suggestionsPromiseLike = suggestions;\n // Check to see if the returned value is an array, if it is then just pass it into the next function.\n // If the returned value is not an array then check to see if it's a promise or PromiseLike.\n // If it is then resolve it asynchronously.\n if (Array.isArray(suggestionsArray)) {\n this.updateSuggestions(suggestionsArray, true /*forceUpdate*/);\n }\n else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {\n // Ensure that the promise will only use the callback if it was the most recent one.\n var promise_1 = (this.currentPromise = suggestionsPromiseLike);\n promise_1.then(function (newSuggestions) {\n // Only update if the next promise has not yet resolved and\n // the floating picker is still mounted.\n if (promise_1 === _this.currentPromise && _this.isComponentMounted) {\n _this.updateSuggestions(newSuggestions, true /*forceUpdate*/);\n }\n });\n }\n };\n BaseFloatingPicker.prototype.onChange = function (item) {\n if (this.props.onChange) {\n this.props.onChange(item);\n }\n };\n BaseFloatingPicker.prototype._updateActiveDescendant = function () {\n if (this.props.inputElement && this.suggestionsControl.current && this.suggestionsControl.current.selectedElement) {\n var selectedElId = this.suggestionsControl.current.selectedElement.getAttribute('id');\n if (selectedElId) {\n this.props.inputElement.setAttribute('aria-activedescendant', selectedElId);\n }\n }\n };\n BaseFloatingPicker.prototype._onResolveSuggestions = function (updatedValue) {\n var suggestions = this.props.onResolveSuggestions(updatedValue, this.props.selectedItems);\n this._updateSuggestionsVisible(true /*shouldShow*/);\n if (suggestions !== null) {\n this.updateSuggestionsList(suggestions);\n }\n };\n BaseFloatingPicker.prototype._updateSuggestionsVisible = function (shouldShow) {\n if (shouldShow) {\n this.showPicker();\n }\n else {\n this.hidePicker();\n }\n };\n BaseFloatingPicker.prototype._bindToInputElement = function () {\n if (this.props.inputElement && !this.state.didBind) {\n this.props.inputElement.addEventListener('keydown', this.onKeyDown);\n this.setState({ didBind: true });\n }\n };\n BaseFloatingPicker.prototype._unbindFromInputElement = function () {\n if (this.props.inputElement && this.state.didBind) {\n this.props.inputElement.removeEventListener('keydown', this.onKeyDown);\n this.setState({ didBind: false });\n }\n };\n return BaseFloatingPicker;\n}(React.Component));\nexport { BaseFloatingPicker };\n//# sourceMappingURL=BaseFloatingPicker.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".resultContent_a17eb2a2{display:table-row}.resultContent_a17eb2a2 .resultItem_a17eb2a2{display:table-cell;vertical-align:bottom}.peoplePickerPersona_a17eb2a2{width:180px}.peoplePickerPersona_a17eb2a2 .ms-Persona-details{width:100%}.peoplePicker_a17eb2a2 .ms-BasePicker-text{min-height:40px}.peoplePickerPersonaContent_a17eb2a2{display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:7px 12px}\" }]);\nexport var resultContent = \"resultContent_a17eb2a2\";\nexport var resultItem = \"resultItem_a17eb2a2\";\nexport var peoplePickerPersona = \"peoplePickerPersona_a17eb2a2\";\nexport var peoplePicker = \"peoplePicker_a17eb2a2\";\nexport var peoplePickerPersonaContent = \"peoplePickerPersonaContent_a17eb2a2\";\n//# sourceMappingURL=PeoplePicker.scss.js.map","import { __assign, __extends } from \"tslib\";\nimport { getRTL, getInitials } from '../../../Utilities';\nimport { BaseFloatingPicker } from '../BaseFloatingPicker';\nimport { SuggestionItemNormal } from './PeoplePickerItems/SuggestionItemDefault';\nimport './PeoplePicker.scss';\n/**\n * {@docCategory FloatingPeoplePicker}\n */\nvar BaseFloatingPeoplePicker = /** @class */ (function (_super) {\n __extends(BaseFloatingPeoplePicker, _super);\n function BaseFloatingPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return BaseFloatingPeoplePicker;\n}(BaseFloatingPicker));\nexport { BaseFloatingPeoplePicker };\nvar FloatingPeoplePicker = /** @class */ (function (_super) {\n __extends(FloatingPeoplePicker, _super);\n function FloatingPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n FloatingPeoplePicker.defaultProps = {\n onRenderSuggestionsItem: function (props, itemProps) {\n return SuggestionItemNormal(__assign({}, props), __assign({}, itemProps));\n },\n createGenericItem: createItem,\n };\n return FloatingPeoplePicker;\n}(BaseFloatingPeoplePicker));\nexport { FloatingPeoplePicker };\nexport function createItem(name, isValid) {\n var personaToConvert = {\n key: name,\n primaryText: name,\n imageInitials: '!',\n isValid: isValid,\n };\n if (!isValid) {\n personaToConvert.imageInitials = getInitials(name, getRTL());\n }\n return personaToConvert;\n}\n//# sourceMappingURL=FloatingPeoplePicker.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { css } from '../../../../Utilities';\nimport { Persona, PersonaSize, PersonaPresence } from '../../../../Persona';\nimport * as stylesImport from '../PeoplePicker.scss';\nexport var SuggestionItemNormal = function (personaProps, suggestionItemProps) {\n return (React.createElement(\"div\", { className: css('ms-PeoplePicker-personaContent', stylesImport.peoplePickerPersonaContent) },\n React.createElement(Persona, __assign({ presence: personaProps.presence !== undefined ? personaProps.presence : PersonaPresence.none, size: PersonaSize.size40, className: css('ms-PeoplePicker-Persona', stylesImport.peoplePickerPersona), showSecondaryText: true }, personaProps))));\n};\n//# sourceMappingURL=SuggestionItemDefault.js.map","var SuggestionsStore = /** @class */ (function () {\n function SuggestionsStore(options) {\n var _this = this;\n this._isSuggestionModel = function (value) {\n return value.item !== undefined;\n };\n this._ensureSuggestionModel = function (suggestion) {\n if (_this._isSuggestionModel(suggestion)) {\n return suggestion;\n }\n else {\n return {\n item: suggestion,\n selected: false,\n ariaLabel: _this.getAriaLabel !== undefined\n ? _this.getAriaLabel(suggestion)\n : suggestion.name ||\n suggestion.text ||\n // eslint-disable-next-line deprecation/deprecation\n suggestion.primaryText,\n };\n }\n };\n this.suggestions = [];\n this.getAriaLabel = options && options.getAriaLabel;\n }\n SuggestionsStore.prototype.updateSuggestions = function (newSuggestions) {\n if (newSuggestions && newSuggestions.length > 0) {\n this.suggestions = this.convertSuggestionsToSuggestionItems(newSuggestions);\n }\n else {\n this.suggestions = [];\n }\n };\n SuggestionsStore.prototype.getSuggestions = function () {\n return this.suggestions;\n };\n SuggestionsStore.prototype.getSuggestionAtIndex = function (index) {\n return this.suggestions[index];\n };\n SuggestionsStore.prototype.removeSuggestion = function (index) {\n this.suggestions.splice(index, 1);\n };\n SuggestionsStore.prototype.convertSuggestionsToSuggestionItems = function (suggestions) {\n return Array.isArray(suggestions) ? suggestions.map(this._ensureSuggestionModel) : [];\n };\n return SuggestionsStore;\n}());\nexport { SuggestionsStore };\n//# sourceMappingURL=SuggestionsStore.js.map","/**\n * {@docCategory HoverCard}\n */\nexport var OpenCardMode;\n(function (OpenCardMode) {\n /**\n * Open card by hover\n */\n OpenCardMode[OpenCardMode[\"hover\"] = 0] = \"hover\";\n /**\n * Open card by hot key\n */\n OpenCardMode[OpenCardMode[\"hotKey\"] = 1] = \"hotKey\";\n})(OpenCardMode || (OpenCardMode = {}));\n/**\n * {@docCategory HoverCard}\n */\nexport var HoverCardType;\n(function (HoverCardType) {\n /**\n * Plain card consisting of one part responsive to the size of content.\n */\n HoverCardType[\"plain\"] = \"PlainCard\";\n /**\n * File card consisting of two parts: compact and expanded. Has some default sizes if not specified.\n */\n HoverCardType[\"expanding\"] = \"ExpandingCard\";\n})(HoverCardType || (HoverCardType = {}));\n//# sourceMappingURL=HoverCard.types.js.map","import { getGlobalClassNames } from '../../Styling';\nvar GlobalClassNames = {\n host: 'ms-HoverCard-host',\n};\nexport function getStyles(props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n host: [classNames.host, className],\n };\n}\n//# sourceMappingURL=HoverCard.styles.js.map","import { getGlobalClassNames, HighContrastSelector } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-ExpandingCard-root',\n compactCard: 'ms-ExpandingCard-compactCard',\n expandedCard: 'ms-ExpandingCard-expandedCard',\n expandedCardScroll: 'ms-ExpandingCard-expandedCardScrollRegion',\n};\nexport function getStyles(props) {\n var _a;\n var theme = props.theme, needsScroll = props.needsScroll, expandedCardFirstFrameRendered = props.expandedCardFirstFrameRendered, compactCardHeight = props.compactCardHeight, expandedCardHeight = props.expandedCardHeight, className = props.className;\n var palette = theme.palette;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n width: 320,\n pointerEvents: 'none',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: '1px solid WindowText',\n },\n _a),\n },\n className,\n ],\n compactCard: [\n classNames.compactCard,\n {\n pointerEvents: 'auto',\n position: 'relative',\n height: compactCardHeight,\n },\n ],\n expandedCard: [\n classNames.expandedCard,\n {\n height: 1,\n overflowY: 'hidden',\n pointerEvents: 'auto',\n transition: 'height 0.467s cubic-bezier(0.5, 0, 0, 1)',\n selectors: {\n ':before': {\n content: '\"\"',\n position: 'relative',\n display: 'block',\n top: 0,\n left: 24,\n width: 272,\n height: 1,\n backgroundColor: palette.neutralLighter,\n },\n },\n },\n expandedCardFirstFrameRendered && {\n height: expandedCardHeight,\n },\n ],\n expandedCardScroll: [\n classNames.expandedCardScroll,\n needsScroll && {\n height: '100%',\n boxSizing: 'border-box',\n overflowY: 'auto',\n },\n ],\n };\n}\n//# sourceMappingURL=ExpandingCard.styles.js.map","/**\n * {@docCategory HoverCard}\n */\nexport var ExpandingCardMode;\n(function (ExpandingCardMode) {\n /**\n * To have top compact card only\n */\n ExpandingCardMode[ExpandingCardMode[\"compact\"] = 0] = \"compact\";\n /**\n * To have both top compact and bottom expanded card\n */\n ExpandingCardMode[ExpandingCardMode[\"expanded\"] = 1] = \"expanded\";\n})(ExpandingCardMode || (ExpandingCardMode = {}));\n//# sourceMappingURL=ExpandingCard.types.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps } from '../../../Utilities';\nimport { DirectionalHint } from '../../../common/DirectionalHint';\nimport { Callout, FocusTrapCallout } from '../../../Callout';\nexport var CardCallout = function (props) {\n var _a = props.gapSpace, gapSpace = _a === void 0 ? 0 : _a, _b = props.directionalHint, directionalHint = _b === void 0 ? DirectionalHint.bottomLeftEdge : _b, directionalHintFixed = props.directionalHintFixed, targetElement = props.targetElement, firstFocus = props.firstFocus, trapFocus = props.trapFocus, onLeave = props.onLeave, className = props.className, finalHeight = props.finalHeight, content = props.content, calloutProps = props.calloutProps;\n var mergedCalloutProps = __assign(__assign(__assign({}, getNativeProps(props, divProperties)), { className: className, target: targetElement, isBeakVisible: false, directionalHint: directionalHint, directionalHintFixed: directionalHintFixed, finalHeight: finalHeight, minPagePadding: 24, onDismiss: onLeave, gapSpace: gapSpace }), calloutProps);\n return (React.createElement(React.Fragment, null, trapFocus ? (React.createElement(FocusTrapCallout, __assign({}, mergedCalloutProps, { focusTrapProps: {\n forceFocusInsideTrap: false,\n isClickableOutsideFocusTrap: true,\n disableFirstFocus: !firstFocus,\n } }), content)) : (React.createElement(Callout, __assign({}, mergedCalloutProps), content))));\n};\n//# sourceMappingURL=CardCallout.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, KeyCodes, Async, initializeComponentRef } from '../../Utilities';\nimport { ExpandingCardMode } from './ExpandingCard.types';\nimport { CardCallout } from './CardCallout/CardCallout';\nvar getClassNames = classNamesFunction();\nvar ExpandingCardBase = /** @class */ (function (_super) {\n __extends(ExpandingCardBase, _super);\n function ExpandingCardBase(props) {\n var _this = _super.call(this, props) || this;\n _this._expandedElem = React.createRef();\n _this._onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.escape) {\n _this.props.onLeave && _this.props.onLeave(ev);\n }\n };\n _this._onRenderCompactCard = function () {\n return React.createElement(\"div\", { className: _this._classNames.compactCard }, _this.props.onRenderCompactCard(_this.props.renderData));\n };\n _this._onRenderExpandedCard = function () {\n // firstFrameRendered helps in initially setting height of expanded card to 1px, even if mode prop is set to\n // ExpandingCardMode.expanded on first render. This is to make sure transition animation takes place.\n !_this.state.firstFrameRendered &&\n _this._async.requestAnimationFrame(function () {\n _this.setState({\n firstFrameRendered: true,\n });\n });\n return (React.createElement(\"div\", { className: _this._classNames.expandedCard, ref: _this._expandedElem },\n React.createElement(\"div\", { className: _this._classNames.expandedCardScroll }, _this.props.onRenderExpandedCard && _this.props.onRenderExpandedCard(_this.props.renderData))));\n };\n _this._checkNeedsScroll = function () {\n var expandedCardHeight = _this.props.expandedCardHeight;\n _this._async.requestAnimationFrame(function () {\n if (_this._expandedElem.current && _this._expandedElem.current.scrollHeight >= expandedCardHeight) {\n _this.setState({\n needsScroll: true,\n });\n }\n });\n };\n _this._async = new Async(_this);\n initializeComponentRef(_this);\n _this.state = {\n firstFrameRendered: false,\n needsScroll: false,\n };\n return _this;\n }\n ExpandingCardBase.prototype.componentDidMount = function () {\n this._checkNeedsScroll();\n };\n ExpandingCardBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n };\n ExpandingCardBase.prototype.render = function () {\n var _a = this.props, styles = _a.styles, compactCardHeight = _a.compactCardHeight, expandedCardHeight = _a.expandedCardHeight, theme = _a.theme, mode = _a.mode, className = _a.className;\n var _b = this.state, needsScroll = _b.needsScroll, firstFrameRendered = _b.firstFrameRendered;\n var finalHeight = compactCardHeight + expandedCardHeight;\n this._classNames = getClassNames(styles, {\n theme: theme,\n compactCardHeight: compactCardHeight,\n className: className,\n expandedCardHeight: expandedCardHeight,\n needsScroll: needsScroll,\n expandedCardFirstFrameRendered: mode === ExpandingCardMode.expanded && firstFrameRendered,\n });\n var content = (React.createElement(\"div\", { onMouseEnter: this.props.onEnter, onMouseLeave: this.props.onLeave, onKeyDown: this._onKeyDown },\n this._onRenderCompactCard(),\n this._onRenderExpandedCard()));\n return (React.createElement(CardCallout, __assign({}, this.props, { content: content, finalHeight: finalHeight, className: this._classNames.root })));\n };\n ExpandingCardBase.defaultProps = {\n compactCardHeight: 156,\n expandedCardHeight: 384,\n directionalHintFixed: true,\n };\n return ExpandingCardBase;\n}(React.Component));\nexport { ExpandingCardBase };\n//# sourceMappingURL=ExpandingCard.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './ExpandingCard.styles';\nimport { ExpandingCardBase } from './ExpandingCard.base';\nexport var ExpandingCard = styled(ExpandingCardBase, getStyles, undefined, {\n scope: 'ExpandingCard',\n});\n//# sourceMappingURL=ExpandingCard.js.map","import { getGlobalClassNames, HighContrastSelector } from '../../../Styling';\nvar GlobalClassNames = {\n root: 'ms-PlainCard-root',\n};\nexport function getStyles(props) {\n var _a;\n var theme = props.theme, className = props.className;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n pointerEvents: 'auto',\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: '1px solid WindowText',\n },\n _a),\n },\n className,\n ],\n };\n}\n//# sourceMappingURL=PlainCard.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, initializeComponentRef, KeyCodes } from '../../../Utilities';\nimport { CardCallout } from '../CardCallout/CardCallout';\nvar getClassNames = classNamesFunction();\nvar PlainCardBase = /** @class */ (function (_super) {\n __extends(PlainCardBase, _super);\n function PlainCardBase(props) {\n var _this = _super.call(this, props) || this;\n _this._onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.escape) {\n _this.props.onLeave && _this.props.onLeave(ev);\n }\n };\n initializeComponentRef(_this);\n return _this;\n }\n PlainCardBase.prototype.render = function () {\n var _a = this.props, styles = _a.styles, theme = _a.theme, className = _a.className;\n this._classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n var content = (React.createElement(\"div\", { onMouseEnter: this.props.onEnter, onMouseLeave: this.props.onLeave, onKeyDown: this._onKeyDown }, this.props.onRenderPlainCard(this.props.renderData)));\n return React.createElement(CardCallout, __assign({}, this.props, { content: content, className: this._classNames.root }));\n };\n return PlainCardBase;\n}(React.Component));\nexport { PlainCardBase };\n//# sourceMappingURL=PlainCard.base.js.map","import { styled } from '../../../Utilities';\nimport { getStyles } from './PlainCard.styles';\nimport { PlainCardBase } from './PlainCard.base';\nexport var PlainCard = styled(PlainCardBase, getStyles, undefined, {\n scope: 'PlainCard',\n});\n//# sourceMappingURL=PlainCard.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { divProperties, getNativeProps, getId, KeyCodes, getDocument, classNamesFunction, initializeComponentRef, EventGroup, Async, } from '../../Utilities';\nimport { OpenCardMode, HoverCardType } from './HoverCard.types';\nimport { ExpandingCard } from './ExpandingCard';\nimport { ExpandingCardMode } from './ExpandingCard.types';\nimport { PlainCard } from './PlainCard/PlainCard';\nvar getClassNames = classNamesFunction();\nvar HoverCardBase = /** @class */ (function (_super) {\n __extends(HoverCardBase, _super);\n // Constructor\n function HoverCardBase(props) {\n var _this = _super.call(this, props) || this;\n // The wrapping div that gets the hover events\n _this._hoverCard = React.createRef();\n _this.dismiss = function (withTimeOut) {\n _this._async.clearTimeout(_this._openTimerId);\n _this._async.clearTimeout(_this._dismissTimerId);\n if (!withTimeOut) {\n _this._setDismissedState();\n }\n else {\n _this._dismissTimerId = _this._async.setTimeout(function () {\n _this._setDismissedState();\n }, _this.props.cardDismissDelay);\n }\n };\n // Show HoverCard\n _this._cardOpen = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (_this._shouldBlockHoverCard() || (ev.type === 'keydown' && !(ev.which === _this.props.openHotKey))) {\n return;\n }\n _this._async.clearTimeout(_this._dismissTimerId);\n if (ev.type === 'mouseenter') {\n _this._currentMouseTarget = ev.currentTarget;\n }\n _this._executeCardOpen(ev);\n };\n _this._executeCardOpen = function (ev) {\n _this._async.clearTimeout(_this._openTimerId);\n _this._openTimerId = _this._async.setTimeout(function () {\n _this.setState(function (prevState) {\n if (!prevState.isHoverCardVisible) {\n return {\n isHoverCardVisible: true,\n mode: ExpandingCardMode.compact,\n openMode: ev.type === 'keydown' ? OpenCardMode.hotKey : OpenCardMode.hover,\n };\n }\n return prevState;\n });\n }, _this.props.cardOpenDelay);\n };\n /**\n * Hide HoverCard\n * How we dismiss the card depends on where the callback is coming from.\n * This is provided by the `isNativeEvent` argument.\n * true: Event is coming from event listeners set up in componentDidMount.\n * false: Event is coming from the `onLeave` prop from the HoverCard component.\n */\n _this._cardDismiss = function (isNativeEvent, ev) {\n if (isNativeEvent) {\n // We expect these to be MouseEvents, If not, return.\n if (!(ev instanceof MouseEvent)) {\n return;\n }\n // eslint-disable-next-line deprecation/deprecation\n if (ev.type === 'keydown' && ev.which !== KeyCodes.escape) {\n return;\n }\n // Dismiss if not sticky and currentTarget is the same element that mouse last entered\n // eslint-disable-next-line deprecation/deprecation\n if (!_this.props.sticky && (_this._currentMouseTarget === ev.currentTarget || ev.which === KeyCodes.escape)) {\n _this.dismiss(true);\n }\n }\n else {\n // If this is a mouseleave event and the component is sticky, do not dismiss.\n if (_this.props.sticky &&\n !(ev instanceof MouseEvent) &&\n ev.nativeEvent instanceof MouseEvent &&\n ev.type === 'mouseleave') {\n return;\n }\n _this.dismiss(true);\n }\n };\n _this._setDismissedState = function () {\n _this.setState({\n isHoverCardVisible: false,\n mode: ExpandingCardMode.compact,\n openMode: OpenCardMode.hover,\n });\n };\n _this._instantOpenAsExpanded = function (ev) {\n _this._async.clearTimeout(_this._dismissTimerId);\n _this.setState(function (prevState) {\n if (!prevState.isHoverCardVisible) {\n return {\n isHoverCardVisible: true,\n mode: ExpandingCardMode.expanded,\n };\n }\n return prevState;\n });\n };\n _this._setEventListeners = function () {\n var _a = _this.props, trapFocus = _a.trapFocus, instantOpenOnClick = _a.instantOpenOnClick, eventListenerTarget = _a.eventListenerTarget;\n var target = eventListenerTarget\n ? _this._getTargetElement(eventListenerTarget)\n : _this._getTargetElement(_this.props.target);\n var nativeEventDismiss = _this._nativeDismissEvent;\n // target can be undefined if ref isn't available, only assign\n // events when defined to avoid throwing exception.\n if (target) {\n _this._events.on(target, 'mouseenter', _this._cardOpen);\n _this._events.on(target, 'mouseleave', nativeEventDismiss);\n if (trapFocus) {\n _this._events.on(target, 'keydown', _this._cardOpen);\n }\n else {\n _this._events.on(target, 'focus', _this._cardOpen);\n _this._events.on(target, 'blur', nativeEventDismiss);\n }\n if (instantOpenOnClick) {\n _this._events.on(target, 'click', _this._instantOpenAsExpanded);\n }\n else {\n _this._events.on(target, 'mousedown', nativeEventDismiss);\n _this._events.on(target, 'keydown', nativeEventDismiss);\n }\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this._nativeDismissEvent = _this._cardDismiss.bind(_this, true);\n _this._childDismissEvent = _this._cardDismiss.bind(_this, false);\n _this.state = {\n isHoverCardVisible: false,\n mode: ExpandingCardMode.compact,\n openMode: OpenCardMode.hover,\n };\n return _this;\n }\n HoverCardBase.prototype.componentDidMount = function () {\n this._setEventListeners();\n };\n HoverCardBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n HoverCardBase.prototype.componentDidUpdate = function (prevProps, prevState) {\n var _this = this;\n if (prevProps.target !== this.props.target) {\n this._events.off();\n this._setEventListeners();\n }\n if (prevState.isHoverCardVisible !== this.state.isHoverCardVisible) {\n if (this.state.isHoverCardVisible) {\n this._async.setTimeout(function () {\n _this.setState({\n mode: ExpandingCardMode.expanded,\n }, function () {\n _this.props.onCardExpand && _this.props.onCardExpand();\n });\n }, this.props.expandedCardOpenDelay);\n this.props.onCardVisible && this.props.onCardVisible();\n }\n else {\n this.setState({\n mode: ExpandingCardMode.compact,\n });\n this.props.onCardHide && this.props.onCardHide();\n }\n }\n };\n // Render\n HoverCardBase.prototype.render = function () {\n var _a = this.props, expandingCardProps = _a.expandingCardProps, children = _a.children, id = _a.id, _b = _a.setAriaDescribedBy, setAriaDescribedBy = _b === void 0 ? true : _b, customStyles = _a.styles, theme = _a.theme, className = _a.className, type = _a.type, plainCardProps = _a.plainCardProps, trapFocus = _a.trapFocus, setInitialFocus = _a.setInitialFocus;\n var _c = this.state, isHoverCardVisible = _c.isHoverCardVisible, mode = _c.mode, openMode = _c.openMode;\n var hoverCardId = id || getId('hoverCard');\n this._classNames = getClassNames(customStyles, {\n theme: theme,\n className: className,\n });\n // Common props for both card types.\n var commonCardProps = __assign(__assign({}, getNativeProps(this.props, divProperties)), { id: hoverCardId, trapFocus: !!trapFocus, firstFocus: setInitialFocus || openMode === OpenCardMode.hotKey, targetElement: this._getTargetElement(this.props.target), onEnter: this._cardOpen, onLeave: this._childDismissEvent });\n var finalExpandedCardProps = __assign(__assign(__assign({}, expandingCardProps), commonCardProps), { mode: mode });\n var finalPlainCardProps = __assign(__assign({}, plainCardProps), commonCardProps);\n return (React.createElement(\"div\", { className: this._classNames.host, ref: this._hoverCard, \"aria-describedby\": setAriaDescribedBy && isHoverCardVisible ? hoverCardId : undefined, \"data-is-focusable\": !this.props.target },\n children,\n isHoverCardVisible &&\n (type === HoverCardType.expanding ? (React.createElement(ExpandingCard, __assign({}, finalExpandedCardProps))) : (React.createElement(PlainCard, __assign({}, finalPlainCardProps))))));\n };\n HoverCardBase.prototype._getTargetElement = function (target) {\n switch (typeof target) {\n case 'string':\n return getDocument().querySelector(target);\n case 'object':\n return target;\n default:\n return this._hoverCard.current || undefined;\n }\n };\n HoverCardBase.prototype._shouldBlockHoverCard = function () {\n return !!(this.props.shouldBlockHoverCard && this.props.shouldBlockHoverCard());\n };\n HoverCardBase.defaultProps = {\n cardOpenDelay: 500,\n cardDismissDelay: 100,\n expandedCardOpenDelay: 1500,\n instantOpenOnClick: false,\n setInitialFocus: false,\n openHotKey: KeyCodes.c,\n type: HoverCardType.expanding,\n };\n return HoverCardBase;\n}(React.Component));\nexport { HoverCardBase };\n//# sourceMappingURL=HoverCard.base.js.map","import { styled } from '../../Utilities';\nimport { getStyles } from './HoverCard.styles';\nimport { HoverCardBase } from './HoverCard.base';\nexport var HoverCard = styled(HoverCardBase, getStyles, undefined, {\n scope: 'HoverCard',\n});\n//# sourceMappingURL=HoverCard.js.map","import { isElementVisibleAndNotHidden } from '../focus';\nimport { getDocument } from './getDocument';\n/**\n * Gets the first visible element that matches the given selector\n * @param selector - The selector to use to find potential visible elements\n * @returns The first visible element that matches the selector, otherwise undefined\n *\n * @public\n */\nexport function getFirstVisibleElementFromSelector(selector) {\n var elements = getDocument().querySelectorAll(selector);\n // Iterate across the elements that match the selector and return the first visible/non-hidden element\n return Array.from(elements).find(function (element) { return isElementVisibleAndNotHidden(element); });\n}\n//# sourceMappingURL=getFirstVisibleElementFromSelector.js.map","import { __extends } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction } from '../../Utilities';\n/**\n * A component corresponding the content rendered inside the callout of the keytip component.\n * {@docCategory Keytips}\n */\nvar KeytipContentBase = /** @class */ (function (_super) {\n __extends(KeytipContentBase, _super);\n function KeytipContentBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n KeytipContentBase.prototype.render = function () {\n var _a = this.props, content = _a.content, styles = _a.styles, theme = _a.theme, disabled = _a.disabled, visible = _a.visible;\n var getClassNames = classNamesFunction();\n var classNames = getClassNames(styles, {\n theme: theme,\n disabled: disabled,\n visible: visible,\n });\n return (React.createElement(\"div\", { className: classNames.container },\n React.createElement(\"span\", { className: classNames.root }, content)));\n };\n return KeytipContentBase;\n}(React.Component));\nexport { KeytipContentBase };\n//# sourceMappingURL=KeytipContent.base.js.map","import { mergeStyleSets, HighContrastSelector } from '../../Styling';\nexport var getStyles = function (props) {\n var _a;\n var theme = props.theme, disabled = props.disabled, visible = props.visible;\n return {\n container: [\n {\n backgroundColor: theme.palette.neutralDark,\n },\n disabled && {\n opacity: 0.5,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n opacity: 1,\n },\n _a),\n },\n !visible && {\n visibility: 'hidden',\n },\n ],\n root: [\n theme.fonts.medium,\n {\n textAlign: 'center',\n paddingLeft: '3px',\n paddingRight: '3px',\n backgroundColor: theme.palette.neutralDark,\n color: theme.palette.neutralLight,\n minWidth: '11px',\n lineHeight: '17px',\n height: '17px',\n display: 'inline-block',\n },\n disabled && {\n color: theme.palette.neutralTertiaryAlt,\n },\n ],\n };\n};\nexport var getCalloutStyles = function (props) {\n return {\n container: [],\n root: [\n {\n border: 'none',\n boxShadow: 'none',\n },\n ],\n beak: [],\n beakCurtain: [],\n calloutMain: [\n {\n backgroundColor: 'transparent',\n },\n ],\n };\n};\nexport var getCalloutOffsetStyles = function (offset) {\n return function (props) {\n return mergeStyleSets(getCalloutStyles(props), {\n root: [\n {\n // eslint-disable-next-line deprecation/deprecation\n marginLeft: offset.left || offset.x,\n // eslint-disable-next-line deprecation/deprecation\n marginTop: offset.top || offset.y,\n },\n ],\n });\n };\n};\n//# sourceMappingURL=Keytip.styles.js.map","import { styled } from '../../Utilities';\nimport { KeytipContentBase } from './KeytipContent.base';\nimport { getStyles } from './Keytip.styles';\nexport var KeytipContent = styled(KeytipContentBase, getStyles, undefined, {\n scope: 'KeytipContent',\n});\n//# sourceMappingURL=KeytipContent.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getFirstVisibleElementFromSelector } from '../../Utilities';\nimport { mergeOverflows, ktpTargetFromSequences } from '../../utilities/keytips/KeytipUtils';\nimport { Callout } from '../../Callout';\nimport { DirectionalHint } from '../../ContextualMenu';\nimport { KeytipContent } from './KeytipContent';\nimport { getCalloutStyles, getCalloutOffsetStyles } from './Keytip.styles';\n/**\n * A callout corresponding to another Fabric component to describe a key sequence that will activate that component\n */\nvar Keytip = /** @class */ (function (_super) {\n __extends(Keytip, _super);\n function Keytip() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n Keytip.prototype.render = function () {\n var _a = this.props, keySequences = _a.keySequences, offset = _a.offset, overflowSetSequence = _a.overflowSetSequence;\n var calloutProps = this.props.calloutProps;\n var keytipTarget;\n // Take into consideration the overflow sequence\n if (overflowSetSequence) {\n keytipTarget = ktpTargetFromSequences(mergeOverflows(keySequences, overflowSetSequence));\n }\n else {\n keytipTarget = ktpTargetFromSequences(keySequences);\n }\n var element = getFirstVisibleElementFromSelector(keytipTarget);\n if (!element) {\n return React.createElement(React.Fragment, null);\n }\n keytipTarget = element;\n if (offset) {\n // Set callout to top-left corner, will be further positioned in\n // getCalloutOffsetStyles\n calloutProps = __assign(__assign({}, calloutProps), { coverTarget: true, directionalHint: DirectionalHint.topLeftEdge });\n }\n if (!calloutProps || calloutProps.directionalHint === undefined) {\n // Default callout directional hint to BottomCenter\n calloutProps = __assign(__assign({}, calloutProps), { directionalHint: DirectionalHint.bottomCenter });\n }\n return (React.createElement(Callout, __assign({}, calloutProps, { isBeakVisible: false, doNotLayer: true, minPagePadding: 0, styles: offset ? getCalloutOffsetStyles(offset) : getCalloutStyles, preventDismissOnScroll: true, target: keytipTarget }),\n React.createElement(KeytipContent, __assign({}, this.props))));\n };\n return Keytip;\n}(React.Component));\nexport { Keytip };\n//# sourceMappingURL=Keytip.js.map","import * as React from 'react';\nimport { DATAKTP_TARGET, DATAKTP_EXECUTE_TARGET, DATAKTP_ARIA_TARGET } from '../../utilities/keytips/index';\nimport { useKeytipData } from './useKeytipData';\n/**\n * Hook that creates a ref which is used for passing to Keytip target element.\n * The ref will handle setting the attributes needed for Keytip to work.\n */\nexport function useKeytipRef(options) {\n var _a = useKeytipData(options), keytipId = _a.keytipId, ariaDescribedBy = _a.ariaDescribedBy;\n var contentRef = React.useCallback(function (contentElement) {\n if (!contentElement) {\n return;\n }\n var targetElement = findFirstElement(contentElement, DATAKTP_TARGET) || contentElement;\n var executeElement = findFirstElement(contentElement, DATAKTP_EXECUTE_TARGET) || targetElement;\n var ariaElement = findFirstElement(contentElement, DATAKTP_ARIA_TARGET) || executeElement;\n setAttribute(targetElement, DATAKTP_TARGET, keytipId);\n setAttribute(executeElement, DATAKTP_EXECUTE_TARGET, keytipId);\n setAttribute(ariaElement, 'aria-describedby', ariaDescribedBy, true);\n }, [keytipId, ariaDescribedBy]);\n return contentRef;\n}\nexport function setAttribute(element, attributeName, attributeValue, append) {\n if (append === void 0) { append = false; }\n if (element && attributeValue) {\n var value = attributeValue;\n if (append) {\n var currentValue = element.getAttribute(attributeName);\n if (currentValue && currentValue.indexOf(attributeValue) === -1) {\n value = currentValue + \" \" + attributeValue;\n }\n }\n element.setAttribute(attributeName, value);\n }\n}\nfunction findFirstElement(rootElement, dataAttribute) {\n return rootElement.querySelector(\"[\" + dataAttribute + \"]\");\n}\n//# sourceMappingURL=useKeytipRef.js.map","import { ZIndexes } from '../../Styling';\nexport var getLayerStyles = function (props) {\n return {\n root: [\n {\n // Prioritize the Keytips above all other Layers\n zIndex: ZIndexes.KeytipLayer,\n },\n ],\n };\n};\nexport var getStyles = function (props) {\n return {\n innerContent: [\n {\n position: 'absolute',\n width: 0,\n height: 0,\n margin: 0,\n padding: 0,\n border: 0,\n overflow: 'hidden',\n visibility: 'hidden',\n },\n ],\n };\n};\n//# sourceMappingURL=KeytipLayer.styles.js.map","import { __spreadArrays } from \"tslib\";\nimport { find, isElementVisibleAndNotHidden, values } from '../../Utilities';\nimport { ktpTargetFromSequences, mergeOverflows, sequencesToID } from '../../utilities/keytips/KeytipUtils';\nimport { KTP_LAYER_ID } from '../../utilities/keytips/KeytipConstants';\n/**\n * This class is responsible for handling the parent/child relationships between keytips\n */\nvar KeytipTree = /** @class */ (function () {\n /**\n * KeytipTree constructor\n */\n function KeytipTree() {\n this.nodeMap = {};\n // Root has no keytipSequence\n this.root = {\n id: KTP_LAYER_ID,\n children: [],\n parent: '',\n keySequences: [],\n };\n this.nodeMap[this.root.id] = this.root;\n }\n /**\n * Add a keytip node to this KeytipTree\n *\n * @param keytipProps - Keytip to add to the Tree\n * @param uniqueID - Unique ID for this keytip\n * @param persisted - T/F if this keytip should be marked as persisted\n */\n KeytipTree.prototype.addNode = function (keytipProps, uniqueID, persisted) {\n var fullSequence = this._getFullSequence(keytipProps);\n var nodeID = sequencesToID(fullSequence);\n // Take off the last item to calculate the parent sequence\n fullSequence.pop();\n // Parent ID is the root if there aren't any more sequences\n var parentID = this._getParentID(fullSequence);\n // Create node and add to map\n var node = this._createNode(nodeID, parentID, [], keytipProps, persisted);\n this.nodeMap[uniqueID] = node;\n // Try to add self to parents children\n var parents = this.getNodes([parentID]);\n parents.forEach(function (parent) { return parent.children.push(nodeID); });\n };\n /**\n * Updates a node in the tree\n *\n * @param keytipProps - Keytip props to update\n * @param uniqueID - Unique ID for this keytip\n */\n KeytipTree.prototype.updateNode = function (keytipProps, uniqueID) {\n var fullSequence = this._getFullSequence(keytipProps);\n var nodeID = sequencesToID(fullSequence);\n // Take off the last item to calculate the parent sequence\n fullSequence.pop();\n // Parent ID is the root if there aren't any more sequences\n var parentID = this._getParentID(fullSequence);\n var node = this.nodeMap[uniqueID];\n var prevParent = node.parent;\n if (node) {\n // Fix parent nodes if needed\n if (prevParent !== parentID) {\n // If parent has changed, remove child from old parent\n this._removeChildFromParents(prevParent, node.id);\n }\n if (node.id !== nodeID) {\n // If the ID of the node has changed, update node's parent's array of children with new ID\n var parents = this.getNodes([parentID]);\n parents.forEach(function (parent) {\n var index = parent.children.indexOf(node.id);\n index >= 0 ? (parent.children[index] = nodeID) : parent.children.push(nodeID);\n });\n }\n // Update values\n node.id = nodeID;\n node.keySequences = keytipProps.keySequences;\n node.overflowSetSequence = keytipProps.overflowSetSequence;\n node.onExecute = keytipProps.onExecute;\n node.onReturn = keytipProps.onReturn;\n node.hasDynamicChildren = keytipProps.hasDynamicChildren;\n node.hasMenu = keytipProps.hasMenu;\n node.parent = parentID;\n node.disabled = keytipProps.disabled;\n }\n };\n /**\n * Removes a node from the KeytipTree\n *\n * @param sequence - full string of the node to remove\n */\n KeytipTree.prototype.removeNode = function (keytipProps, uniqueID) {\n var fullSequence = this._getFullSequence(keytipProps);\n var nodeID = sequencesToID(fullSequence);\n // Take off the last sequence to calculate the parent ID\n fullSequence.pop();\n // Parent ID is the root if there aren't any more sequences\n this._removeChildFromParents(this._getParentID(fullSequence), nodeID);\n if (this.nodeMap[uniqueID]) {\n // Remove the node from the nodeMap\n delete this.nodeMap[uniqueID];\n }\n };\n /**\n * Searches the currentKeytip's children to exactly match a sequence. Will not match disabled nodes but\n * will match persisted nodes\n *\n * @param keySequence - string to match\n * @param currentKeytip - The keytip whose children will try to match\n * @returns The node that exactly matched the keySequence, or undefined if none matched\n */\n KeytipTree.prototype.getExactMatchedNode = function (keySequence, currentKeytip) {\n var _this = this;\n var possibleNodes = this.getNodes(currentKeytip.children);\n var matchingNodes = possibleNodes.filter(function (node) {\n return _this._getNodeSequence(node) === keySequence && !node.disabled;\n });\n // If we found no nodes, we are done\n if (matchingNodes.length === 0) {\n return undefined;\n }\n // Since the matching nodes all have the same key sequence,\n // Grab the first one build the correct selector\n var node = matchingNodes[0];\n // If we have exactly one node, return it\n if (matchingNodes.length === 1) {\n return node;\n }\n // Get the potential target elements based on a selector from the sequences\n var keySequences = node.keySequences;\n var overflowSetSequence = node.overflowSetSequence;\n var fullKeySequences = overflowSetSequence ? mergeOverflows(keySequences, overflowSetSequence) : keySequences;\n var keytipTargetSelector = ktpTargetFromSequences(fullKeySequences);\n var potentialTargetElements = document.querySelectorAll(keytipTargetSelector);\n // If we have less nodes than the potential target elements,\n // we won't be able to map element to node, return the first node.\n // Note, the number of nodes could be more than the number of potential\n // target elements, if an OverflowSet is involved\n if (matchingNodes.length < potentialTargetElements.length) {\n return node;\n }\n // Attempt to find the node that corresponds to the first visible/non-hidden element\n var matchingIndex = Array.from(potentialTargetElements).findIndex(function (element) {\n return isElementVisibleAndNotHidden(element);\n });\n if (matchingIndex !== -1) {\n return matchingNodes[matchingIndex];\n }\n // We did not find any visible elements associated with any of the nodes.\n // We may be dealing with a keytip that is a submenu in an OverflowSet.\n // Worst case, fall back to the first node returned\n var overflowNode = matchingNodes.find(function (matchingNode) { return matchingNode.hasOverflowSubMenu; });\n return overflowNode || node;\n };\n /**\n * Searches the currentKeytip's children to find nodes that start with the given sequence. Will not match\n * disabled nodes but will match persisted nodes\n *\n * @param keySequence - string to partially match\n * @param currentKeytip - The keytip whose children will try to partially match\n * @returns List of tree nodes that partially match the given sequence\n */\n KeytipTree.prototype.getPartiallyMatchedNodes = function (keySequence, currentKeytip) {\n var _this = this;\n // Get children that are persisted\n var possibleNodes = this.getNodes(currentKeytip.children);\n return possibleNodes.filter(function (node) {\n return _this._getNodeSequence(node).indexOf(keySequence) === 0 && !node.disabled;\n });\n };\n /**\n * Get the non-persisted children of the give node\n * If no node is given, will use the 'currentKeytip'\n *\n * @param node - Node to get the children for\n * @returns List of node IDs that are the children of the node\n */\n KeytipTree.prototype.getChildren = function (node) {\n var _this = this;\n if (!node) {\n node = this.currentKeytip;\n if (!node) {\n return [];\n }\n }\n var children = node.children;\n return Object.keys(this.nodeMap).reduce(function (nodes, key) {\n if (children.indexOf(_this.nodeMap[key].id) >= 0 && !_this.nodeMap[key].persisted) {\n nodes.push(_this.nodeMap[key].id);\n }\n return nodes;\n }, []);\n };\n /**\n * Gets all nodes from their IDs\n *\n * @param ids - List of keytip IDs\n * @returns Array of nodes that match the given IDs, can be empty\n */\n KeytipTree.prototype.getNodes = function (ids) {\n var _this = this;\n return Object.keys(this.nodeMap).reduce(function (nodes, key) {\n if (ids.indexOf(_this.nodeMap[key].id) >= 0) {\n nodes.push(_this.nodeMap[key]);\n }\n return nodes;\n }, []);\n };\n /**\n * Gets a single node from its ID\n *\n * @param id - ID of the node to get\n * @returns Node with the given ID, if found\n */\n KeytipTree.prototype.getNode = function (id) {\n var nodeMapValues = values(this.nodeMap);\n return find(nodeMapValues, function (node) {\n return node.id === id;\n });\n };\n /**\n * Tests if the currentKeytip in this.keytipTree is the parent of 'keytipProps'\n *\n * @param keytipProps - Keytip to test the parent for\n * @returns T/F if the currentKeytip is this keytipProps' parent\n */\n KeytipTree.prototype.isCurrentKeytipParent = function (keytipProps) {\n if (this.currentKeytip) {\n var fullSequence = __spreadArrays(keytipProps.keySequences);\n if (keytipProps.overflowSetSequence) {\n fullSequence = mergeOverflows(fullSequence, keytipProps.overflowSetSequence);\n }\n // Take off the last sequence to calculate the parent ID\n fullSequence.pop();\n // Parent ID is the root if there aren't any more sequences\n var parentID = fullSequence.length === 0 ? this.root.id : sequencesToID(fullSequence);\n var matchesCurrWithoutOverflow = false;\n if (this.currentKeytip.overflowSetSequence) {\n var currKeytipIdWithoutOverflow = sequencesToID(this.currentKeytip.keySequences);\n matchesCurrWithoutOverflow = currKeytipIdWithoutOverflow === parentID;\n }\n return matchesCurrWithoutOverflow || this.currentKeytip.id === parentID;\n }\n return false;\n };\n KeytipTree.prototype._getParentID = function (fullSequence) {\n return fullSequence.length === 0 ? this.root.id : sequencesToID(fullSequence);\n };\n KeytipTree.prototype._getFullSequence = function (keytipProps) {\n var fullSequence = __spreadArrays(keytipProps.keySequences);\n if (keytipProps.overflowSetSequence) {\n fullSequence = mergeOverflows(fullSequence, keytipProps.overflowSetSequence);\n }\n return fullSequence;\n };\n KeytipTree.prototype._getNodeSequence = function (node) {\n var fullSequence = __spreadArrays(node.keySequences);\n if (node.overflowSetSequence) {\n fullSequence = mergeOverflows(fullSequence, node.overflowSetSequence);\n }\n return fullSequence[fullSequence.length - 1];\n };\n KeytipTree.prototype._createNode = function (id, parentId, children, keytipProps, persisted) {\n var _this = this;\n var keySequences = keytipProps.keySequences, hasDynamicChildren = keytipProps.hasDynamicChildren, overflowSetSequence = keytipProps.overflowSetSequence, hasMenu = keytipProps.hasMenu, onExecute = keytipProps.onExecute, onReturn = keytipProps.onReturn, disabled = keytipProps.disabled, hasOverflowSubMenu = keytipProps.hasOverflowSubMenu;\n var node = {\n id: id,\n keySequences: keySequences,\n overflowSetSequence: overflowSetSequence,\n parent: parentId,\n children: children,\n onExecute: onExecute,\n onReturn: onReturn,\n hasDynamicChildren: hasDynamicChildren,\n hasMenu: hasMenu,\n disabled: disabled,\n persisted: persisted,\n hasOverflowSubMenu: hasOverflowSubMenu,\n };\n node.children = Object.keys(this.nodeMap).reduce(function (array, nodeMapKey) {\n if (_this.nodeMap[nodeMapKey].parent === id) {\n array.push(_this.nodeMap[nodeMapKey].id);\n }\n return array;\n }, []);\n return node;\n };\n KeytipTree.prototype._removeChildFromParents = function (parentID, childID) {\n var parents = this.getNodes([parentID]);\n parents.forEach(function (parent) {\n var childIndex = parent.children.indexOf(childID);\n if (childIndex >= 0) {\n parent.children.splice(childIndex, 1);\n }\n });\n };\n return KeytipTree;\n}());\nexport { KeytipTree };\n//# sourceMappingURL=KeytipTree.js.map","import { find } from '../../Utilities';\n/**\n * Tests for equality between two IKeytipTransitionKeys.\n *\n * @param key1 - First IKeytipTransitionKey.\n * @param key2 - Second IKeytipTransitionKey.\n * @returns T/F if the transition keys are equal.\n */\nexport function transitionKeysAreEqual(key1, key2) {\n if (key1.key !== key2.key) {\n return false;\n }\n var mod1 = key1.modifierKeys;\n var mod2 = key2.modifierKeys;\n if ((!mod1 && mod2) || (mod1 && !mod2)) {\n // Not equal if one modifier is defined and the other isn't\n return false;\n }\n if (mod1 && mod2) {\n if (mod1.length !== mod2.length) {\n return false;\n }\n // Sort both arrays\n mod1 = mod1.sort();\n mod2 = mod2.sort();\n for (var i = 0; i < mod1.length; i++) {\n if (mod1[i] !== mod2[i]) {\n return false;\n }\n }\n }\n return true;\n}\n/**\n * Tests if 'key' is present in 'keys'.\n *\n * @param keys - Array of IKeytipTransitionKey.\n * @param key - IKeytipTransitionKey to find in 'keys'.\n * @returns T/F if 'keys' contains 'key'.\n */\nexport function transitionKeysContain(keys, key) {\n return !!find(keys, function (transitionKey) {\n return transitionKeysAreEqual(transitionKey, key);\n });\n}\n//# sourceMappingURL=IKeytipTransitionKey.js.map","import { __assign, __extends, __spreadArrays } from \"tslib\";\nimport * as React from 'react';\nimport { getLayerStyles } from './KeytipLayer.styles';\nimport { Keytip } from '../../Keytip';\nimport { Layer } from '../../Layer';\nimport { classNamesFunction, getDocument, arraysEqual, warn, isMac, EventGroup, Async, initializeComponentRef, KeyCodes, } from '../../Utilities';\nimport { KeytipManager } from '../../utilities/keytips/KeytipManager';\nimport { KeytipTree } from './KeytipTree';\nimport { ktpTargetFromId, ktpTargetFromSequences, sequencesToID, mergeOverflows, } from '../../utilities/keytips/KeytipUtils';\nimport { transitionKeysContain } from '../../utilities/keytips/IKeytipTransitionKey';\nimport { KeytipEvents, KTP_LAYER_ID, KTP_ARIA_SEPARATOR } from '../../utilities/keytips/KeytipConstants';\n// Default sequence is Alt-Windows (Alt-Meta) in Windows, Option-Control (Alt-Control) in Mac\nvar defaultStartSequence = {\n key: isMac() ? 'Control' : 'Meta',\n modifierKeys: [KeyCodes.alt],\n};\n// Default exit sequence is the same as the start sequence\nvar defaultExitSequence = defaultStartSequence;\n// Default return sequence is Escape\nvar defaultReturnSequence = {\n key: 'Escape',\n};\nvar getClassNames = classNamesFunction();\n/**\n * A layer that holds all keytip items\n * {@docCategory Keytips}\n */\nvar KeytipLayerBase = /** @class */ (function (_super) {\n __extends(KeytipLayerBase, _super);\n function KeytipLayerBase(props, context) {\n var _this = _super.call(this, props, context) || this;\n _this._keytipManager = KeytipManager.getInstance();\n _this._delayedKeytipQueue = [];\n _this._keyHandled = false;\n _this._onDismiss = function (ev) {\n // if we are in keytip mode, then exit keytip mode\n if (_this.state.inKeytipMode) {\n _this._exitKeytipMode(ev);\n }\n };\n _this._onKeyDown = function (ev) {\n _this._keyHandled = false;\n // using key since which has been deprecated and key is now widely suporrted.\n // See: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/which\n var key = ev.key;\n switch (key) {\n case 'Tab':\n case 'Enter':\n case 'Spacebar':\n case ' ':\n case 'ArrowUp':\n case 'Up':\n case 'ArrowDown':\n case 'Down':\n case 'ArrowLeft':\n case 'Left':\n case 'ArrowRight':\n case 'Right':\n if (_this.state.inKeytipMode) {\n _this._keyHandled = true;\n _this._exitKeytipMode(ev);\n }\n break;\n default:\n // Special cases for browser-specific keys that are not at standard\n // (according to http://www.w3.org/TR/uievents-key/#keys-navigation)\n if (key === 'Esc') {\n // Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/5290772/\n key = 'Escape';\n }\n else if (key === 'OS' || key === 'Win') {\n // Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1232918\n // Edge: https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/8860571/\n // and https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/16424492/\n key = 'Meta';\n }\n var transitionKey = { key: key };\n transitionKey.modifierKeys = _this._getModifierKey(key, ev);\n _this.processTransitionInput(transitionKey, ev);\n break;\n }\n };\n _this._onKeyPress = function (ev) {\n if (_this.state.inKeytipMode && !_this._keyHandled) {\n // Call processInput\n _this.processInput(ev.key.toLocaleLowerCase(), ev);\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n _this._onKeytipAdded = function (eventArgs) {\n var _a;\n var keytipProps = eventArgs.keytip;\n var uniqueID = eventArgs.uniqueID;\n _this._keytipTree.addNode(keytipProps, uniqueID);\n _this._setKeytips();\n // Add the keytip to the queue to show later\n if (_this._keytipTree.isCurrentKeytipParent(keytipProps)) {\n // Ensure existing children are still shown.\n _this._delayedKeytipQueue = _this._delayedKeytipQueue.concat(((_a = _this._keytipTree.currentKeytip) === null || _a === void 0 ? void 0 : _a.children) || []);\n _this._addKeytipToQueue(sequencesToID(keytipProps.keySequences));\n // Ensure the child of currentKeytip is successfully added to currentKeytip's children and update it if not.\n // Note: Added this condition because KeytipTree.addNode was not always reflecting updates made to a parent node\n // in currentKeytip when that parent is the currentKeytip.\n if (_this._keytipTree.currentKeytip &&\n _this._keytipTree.currentKeytip.hasDynamicChildren &&\n _this._keytipTree.currentKeytip.children.indexOf(keytipProps.id) < 0) {\n var currNode = _this._keytipTree.getNode(_this._keytipTree.currentKeytip.id);\n if (currNode) {\n _this._keytipTree.currentKeytip = currNode;\n }\n }\n }\n _this._persistedKeytipChecks(keytipProps);\n };\n _this._onKeytipUpdated = function (eventArgs) {\n var _a;\n var keytipProps = eventArgs.keytip;\n var uniqueID = eventArgs.uniqueID;\n _this._keytipTree.updateNode(keytipProps, uniqueID);\n _this._setKeytips();\n if (_this._keytipTree.isCurrentKeytipParent(keytipProps)) {\n // Ensure existing children are still shown.\n _this._delayedKeytipQueue = _this._delayedKeytipQueue.concat(((_a = _this._keytipTree.currentKeytip) === null || _a === void 0 ? void 0 : _a.children) || []);\n _this._addKeytipToQueue(sequencesToID(keytipProps.keySequences));\n }\n _this._persistedKeytipChecks(keytipProps);\n };\n /**\n * Helper function to do checks related to persisted/overflow keytips\n * Done on keytip added and keytip updated\n *\n * @param keytipProps - Keytip props\n */\n _this._persistedKeytipChecks = function (keytipProps) {\n if (_this._newCurrentKeytipSequences && arraysEqual(keytipProps.keySequences, _this._newCurrentKeytipSequences)) {\n _this._triggerKeytipImmediately(keytipProps);\n }\n if (_this._isCurrentKeytipAnAlias(keytipProps)) {\n var keytipSequence = keytipProps.keySequences;\n if (keytipProps.overflowSetSequence) {\n keytipSequence = mergeOverflows(keytipSequence, keytipProps.overflowSetSequence);\n }\n _this._keytipTree.currentKeytip = _this._keytipTree.getNode(sequencesToID(keytipSequence));\n }\n };\n _this._onKeytipRemoved = function (eventArgs) {\n var keytipProps = eventArgs.keytip;\n var uniqueID = eventArgs.uniqueID;\n // Remove keytip from the delayed queue\n _this._removeKeytipFromQueue(sequencesToID(keytipProps.keySequences));\n // Remove the node from the Tree\n _this._keytipTree.removeNode(keytipProps, uniqueID);\n _this._setKeytips();\n };\n _this._onPersistedKeytipAdded = function (eventArgs) {\n var keytipProps = eventArgs.keytip;\n var uniqueID = eventArgs.uniqueID;\n _this._keytipTree.addNode(keytipProps, uniqueID, true);\n };\n _this._onPersistedKeytipRemoved = function (eventArgs) {\n var keytipProps = eventArgs.keytip;\n var uniqueID = eventArgs.uniqueID;\n _this._keytipTree.removeNode(keytipProps, uniqueID);\n };\n _this._onPersistedKeytipExecute = function (eventArgs) {\n _this._persistedKeytipExecute(eventArgs.overflowButtonSequences, eventArgs.keytipSequences);\n };\n /**\n * Sets if we are in keytip mode.\n * Note, this sets both the state for the layer as well as\n * the value that the manager will expose externally.\n * @param inKeytipMode - Boolean so set whether we are in keytip mode or not\n */\n _this._setInKeytipMode = function (inKeytipMode) {\n _this.setState({ inKeytipMode: inKeytipMode });\n _this._keytipManager.inKeytipMode = inKeytipMode;\n };\n /**\n * Emits a warning if duplicate keytips are found for the children of the current keytip\n */\n _this._warnIfDuplicateKeytips = function () {\n var duplicateKeytips = _this._getDuplicateIds(_this._keytipTree.getChildren());\n if (duplicateKeytips.length) {\n warn('Duplicate keytips found for ' + duplicateKeytips.join(', '));\n }\n };\n /**\n * Returns duplicates among keytip IDs.\n * If the returned array is empty, no duplicates were found.\n *\n * @param keytipIds - Array of keytip IDs to find duplicates for\n * @returns - Array of duplicates that were found. Each duplicate will only be added once to this array.\n */\n _this._getDuplicateIds = function (keytipIds) {\n var seenIds = {};\n return keytipIds.filter(function (keytipId) {\n seenIds[keytipId] = seenIds[keytipId] ? seenIds[keytipId] + 1 : 1;\n // Only add the first duplicate keytip seen\n return seenIds[keytipId] === 2;\n });\n };\n initializeComponentRef(_this);\n _this._events = new EventGroup(_this);\n _this._async = new Async(_this);\n var keytips = _this._keytipManager.getKeytips();\n _this.state = {\n inKeytipMode: false,\n keytips: keytips,\n visibleKeytips: _this._getVisibleKeytips(keytips),\n };\n _this._buildTree();\n _this._currentSequence = '';\n // Add keytip listeners\n _this._events.on(_this._keytipManager, KeytipEvents.KEYTIP_ADDED, _this._onKeytipAdded);\n _this._events.on(_this._keytipManager, KeytipEvents.KEYTIP_UPDATED, _this._onKeytipUpdated);\n _this._events.on(_this._keytipManager, KeytipEvents.KEYTIP_REMOVED, _this._onKeytipRemoved);\n _this._events.on(_this._keytipManager, KeytipEvents.PERSISTED_KEYTIP_ADDED, _this._onPersistedKeytipAdded);\n _this._events.on(_this._keytipManager, KeytipEvents.PERSISTED_KEYTIP_REMOVED, _this._onPersistedKeytipRemoved);\n _this._events.on(_this._keytipManager, KeytipEvents.PERSISTED_KEYTIP_EXECUTE, _this._onPersistedKeytipExecute);\n return _this;\n }\n KeytipLayerBase.prototype.render = function () {\n var _this = this;\n var _a = this.props, content = _a.content, styles = _a.styles;\n var _b = this.state, keytips = _b.keytips, visibleKeytips = _b.visibleKeytips;\n this._classNames = getClassNames(styles, {});\n return (React.createElement(Layer, { styles: getLayerStyles },\n React.createElement(\"span\", { id: KTP_LAYER_ID, className: this._classNames.innerContent }, \"\" + content + KTP_ARIA_SEPARATOR),\n keytips &&\n keytips.map(function (keytipProps, index) {\n return (React.createElement(\"span\", { key: index, id: sequencesToID(keytipProps.keySequences), className: _this._classNames.innerContent }, keytipProps.keySequences.join(KTP_ARIA_SEPARATOR)));\n }),\n visibleKeytips &&\n visibleKeytips.map(function (visibleKeytipProps) {\n return React.createElement(Keytip, __assign({ key: sequencesToID(visibleKeytipProps.keySequences) }, visibleKeytipProps));\n })));\n };\n KeytipLayerBase.prototype.componentDidMount = function () {\n // Add window listeners\n this._events.on(window, 'mouseup', this._onDismiss, true /* useCapture */);\n this._events.on(window, 'pointerup', this._onDismiss, true /* useCapture */);\n this._events.on(window, 'resize', this._onDismiss);\n this._events.on(window, 'keydown', this._onKeyDown, true /* useCapture */);\n this._events.on(window, 'keypress', this._onKeyPress, true /* useCapture */);\n this._events.on(window, 'scroll', this._onDismiss, true /* useCapture */);\n // Add keytip listeners\n this._events.on(this._keytipManager, KeytipEvents.ENTER_KEYTIP_MODE, this._enterKeytipMode);\n this._events.on(this._keytipManager, KeytipEvents.EXIT_KEYTIP_MODE, this._exitKeytipMode);\n };\n KeytipLayerBase.prototype.componentWillUnmount = function () {\n this._async.dispose();\n this._events.dispose();\n };\n // The below public functions are only public for testing purposes\n // They are not intended to be used in app code by using a KeytipLayer reference\n KeytipLayerBase.prototype.getCurrentSequence = function () {\n return this._currentSequence;\n };\n KeytipLayerBase.prototype.getKeytipTree = function () {\n return this._keytipTree;\n };\n /**\n * Processes an IKeytipTransitionKey entered by the user\n *\n * @param transitionKey - IKeytipTransitionKey received by the layer to process\n */\n KeytipLayerBase.prototype.processTransitionInput = function (transitionKey, ev) {\n var currKtp = this._keytipTree.currentKeytip;\n if (transitionKeysContain(this.props.keytipExitSequences, transitionKey) && currKtp) {\n // If key sequence is in 'exit sequences', exit keytip mode\n this._keyHandled = true;\n this._exitKeytipMode(ev);\n }\n else if (transitionKeysContain(this.props.keytipReturnSequences, transitionKey)) {\n // If key sequence is in return sequences, move currentKeytip to parent (or if currentKeytip is the root, exit)\n if (currKtp) {\n this._keyHandled = true;\n if (currKtp.id === this._keytipTree.root.id) {\n // We are at the root, exit keytip mode\n this._exitKeytipMode(ev);\n }\n else {\n // If this keytip has a onReturn prop, we execute the func.\n if (currKtp.onReturn) {\n currKtp.onReturn(this._getKtpExecuteTarget(currKtp), this._getKtpTarget(currKtp));\n }\n // Reset currentSequence\n this._currentSequence = '';\n // Return pointer to its parent\n this._keytipTree.currentKeytip = this._keytipTree.getNode(currKtp.parent);\n // Show children keytips of the new currentKeytip\n this.showKeytips(this._keytipTree.getChildren());\n this._warnIfDuplicateKeytips();\n }\n }\n }\n else if (transitionKeysContain(this.props.keytipStartSequences, transitionKey) && !currKtp) {\n // If key sequence is in 'entry sequences' and currentKeytip is null, we enter keytip mode\n this._keyHandled = true;\n this._enterKeytipMode(transitionKey);\n this._warnIfDuplicateKeytips();\n }\n };\n /**\n * Processes inputs from the document listener and traverse the keytip tree\n *\n * @param key - Key pressed by the user\n */\n KeytipLayerBase.prototype.processInput = function (key, ev) {\n // Concat the input key with the current sequence\n var currSequence = this._currentSequence + key;\n var currKtp = this._keytipTree.currentKeytip;\n // currentKeytip must be defined, otherwise we haven't entered keytip mode yet\n if (currKtp) {\n var node = this._keytipTree.getExactMatchedNode(currSequence, currKtp);\n if (node) {\n this._keytipTree.currentKeytip = currKtp = node;\n var currKtpChildren = this._keytipTree.getChildren();\n // Execute this node's onExecute if defined\n if (currKtp.onExecute) {\n currKtp.onExecute(this._getKtpExecuteTarget(currKtp), this._getKtpTarget(currKtp));\n // Reset currKtp, this might have changed from the onExecute\n currKtp = this._keytipTree.currentKeytip;\n }\n // To exit keytipMode after executing the keytip it must not have a menu or have dynamic children\n if (currKtpChildren.length === 0 && !(currKtp.hasDynamicChildren || currKtp.hasMenu)) {\n this._exitKeytipMode(ev);\n }\n else {\n // Show all children keytips\n this.showKeytips(currKtpChildren);\n this._warnIfDuplicateKeytips();\n }\n // Clear currentSequence\n this._currentSequence = '';\n return;\n }\n var partialNodes = this._keytipTree.getPartiallyMatchedNodes(currSequence, currKtp);\n if (partialNodes.length > 0) {\n // We found nodes that partially match the sequence, so we show only those\n // Omit showing persisted nodes here\n var ids = partialNodes\n .filter(function (partialNode) {\n return !partialNode.persisted;\n })\n .map(function (partialNode) {\n return partialNode.id;\n });\n this.showKeytips(ids);\n // Save currentSequence\n this._currentSequence = currSequence;\n }\n }\n };\n /**\n * Show the given keytips and hide all others\n *\n * @param ids - Keytip IDs to show\n */\n KeytipLayerBase.prototype.showKeytips = function (ids) {\n // Update the visible prop in the manager\n for (var _i = 0, _a = this._keytipManager.getKeytips(); _i < _a.length; _i++) {\n var keytip = _a[_i];\n var keytipId = sequencesToID(keytip.keySequences);\n if (keytip.overflowSetSequence) {\n // Check if the ID with the overflow is the keytip we're looking for\n keytipId = sequencesToID(mergeOverflows(keytip.keySequences, keytip.overflowSetSequence));\n }\n if (ids.indexOf(keytipId) >= 0) {\n keytip.visible = true;\n }\n else {\n keytip.visible = false;\n }\n }\n // Apply the manager changes to the Layer state\n this._setKeytips();\n };\n /**\n * Enters keytip mode for this layer\n */\n KeytipLayerBase.prototype._enterKeytipMode = function (transitionKey) {\n if (this._keytipManager.shouldEnterKeytipMode) {\n if (this._keytipManager.delayUpdatingKeytipChange) {\n this._buildTree();\n this._setKeytips();\n }\n this._keytipTree.currentKeytip = this._keytipTree.root;\n // Show children of root\n this.showKeytips(this._keytipTree.getChildren());\n this._setInKeytipMode(true /* inKeytipMode */);\n if (this.props.onEnterKeytipMode) {\n this.props.onEnterKeytipMode(transitionKey);\n }\n }\n };\n KeytipLayerBase.prototype._buildTree = function () {\n this._keytipTree = new KeytipTree();\n // Add regular and persisted keytips to the tree\n for (var _i = 0, _a = Object.keys(this._keytipManager.keytips); _i < _a.length; _i++) {\n var id = _a[_i];\n var uniqueKeytip = this._keytipManager.keytips[id];\n this._keytipTree.addNode(uniqueKeytip.keytip, uniqueKeytip.uniqueID);\n }\n for (var _b = 0, _c = Object.keys(this._keytipManager.persistedKeytips); _b < _c.length; _b++) {\n var id = _c[_b];\n var uniqueKeytip = this._keytipManager.persistedKeytips[id];\n this._keytipTree.addNode(uniqueKeytip.keytip, uniqueKeytip.uniqueID);\n }\n };\n /**\n * Exits keytip mode for this layer\n */\n KeytipLayerBase.prototype._exitKeytipMode = function (ev) {\n this._keytipTree.currentKeytip = undefined;\n this._currentSequence = '';\n // Hide all keytips\n this.showKeytips([]);\n // Reset the delayed keytips if any\n this._delayedQueueTimeout && this._async.clearTimeout(this._delayedQueueTimeout);\n this._delayedKeytipQueue = [];\n this._setInKeytipMode(false /* inKeytipMode */);\n if (this.props.onExitKeytipMode) {\n this.props.onExitKeytipMode(ev);\n }\n };\n /**\n * Sets the keytips state property\n *\n * @param keytipProps - Keytips to set in this layer\n */\n KeytipLayerBase.prototype._setKeytips = function (keytipProps) {\n if (keytipProps === void 0) { keytipProps = this._keytipManager.getKeytips(); }\n this.setState({ keytips: keytipProps, visibleKeytips: this._getVisibleKeytips(keytipProps) });\n };\n /**\n * Callback function to use for persisted keytips\n *\n * @param overflowButtonSequences - The overflow button sequence to execute\n * @param keytipSequences - The keytip that should become the 'currentKeytip' when it is registered\n */\n KeytipLayerBase.prototype._persistedKeytipExecute = function (overflowButtonSequences, keytipSequences) {\n // Save newCurrentKeytip for later\n this._newCurrentKeytipSequences = keytipSequences;\n // Execute the overflow button's onExecute\n var overflowKeytipNode = this._keytipTree.getNode(sequencesToID(overflowButtonSequences));\n if (overflowKeytipNode && overflowKeytipNode.onExecute) {\n overflowKeytipNode.onExecute(this._getKtpExecuteTarget(overflowKeytipNode), this._getKtpTarget(overflowKeytipNode));\n }\n };\n KeytipLayerBase.prototype._getVisibleKeytips = function (keytips) {\n // Filter out non-visible keytips and duplicates\n var seenIds = {};\n return keytips.filter(function (keytip) {\n var keytipId = sequencesToID(keytip.keySequences);\n if (keytip.overflowSetSequence) {\n // Account for overflow set sequences when checking for duplicates\n keytipId = sequencesToID(mergeOverflows(keytip.keySequences, keytip.overflowSetSequence));\n }\n seenIds[keytipId] = seenIds[keytipId] ? seenIds[keytipId] + 1 : 1;\n return keytip.visible && seenIds[keytipId] === 1;\n });\n };\n /**\n * Gets the ModifierKeyCodes based on the keyboard event\n *\n * @param ev - React.KeyboardEvent\n * @returns List of ModifierKeyCodes that were pressed\n */\n KeytipLayerBase.prototype._getModifierKey = function (key, ev) {\n var modifierKeys = [];\n if (ev.altKey && key !== 'Alt') {\n modifierKeys.push(KeyCodes.alt);\n }\n if (ev.ctrlKey && key !== 'Control') {\n modifierKeys.push(KeyCodes.ctrl);\n }\n if (ev.shiftKey && key !== 'Shift') {\n modifierKeys.push(KeyCodes.shift);\n }\n if (ev.metaKey && key !== 'Meta') {\n modifierKeys.push(KeyCodes.leftWindow);\n }\n return modifierKeys.length ? modifierKeys : undefined;\n };\n /**\n * Trigger a keytip immediately and set it as the current keytip\n *\n * @param keytipProps - Keytip to trigger immediately\n */\n KeytipLayerBase.prototype._triggerKeytipImmediately = function (keytipProps) {\n // This keytip should become the currentKeytip and should execute right away\n var keytipSequence = __spreadArrays(keytipProps.keySequences);\n if (keytipProps.overflowSetSequence) {\n keytipSequence = mergeOverflows(keytipSequence, keytipProps.overflowSetSequence);\n }\n // Set currentKeytip\n this._keytipTree.currentKeytip = this._keytipTree.getNode(sequencesToID(keytipSequence));\n if (this._keytipTree.currentKeytip) {\n // Show all children keytips if any\n var children = this._keytipTree.getChildren();\n if (children.length) {\n this.showKeytips(children);\n }\n if (this._keytipTree.currentKeytip.onExecute) {\n this._keytipTree.currentKeytip.onExecute(this._getKtpExecuteTarget(this._keytipTree.currentKeytip), this._getKtpTarget(this._keytipTree.currentKeytip));\n }\n }\n // Unset _newCurrKtpSequences\n this._newCurrentKeytipSequences = undefined;\n };\n KeytipLayerBase.prototype._addKeytipToQueue = function (keytipID) {\n var _this = this;\n // Add keytip\n this._delayedKeytipQueue.push(keytipID);\n // Clear timeout\n this._delayedQueueTimeout && this._async.clearTimeout(this._delayedQueueTimeout);\n // Reset timeout\n this._delayedQueueTimeout = this._async.setTimeout(function () {\n if (_this._delayedKeytipQueue.length) {\n _this.showKeytips(_this._delayedKeytipQueue);\n _this._delayedKeytipQueue = [];\n }\n }, 300);\n };\n KeytipLayerBase.prototype._removeKeytipFromQueue = function (keytipID) {\n var _this = this;\n var index = this._delayedKeytipQueue.indexOf(keytipID);\n if (index >= 0) {\n // Remove keytip\n this._delayedKeytipQueue.splice(index, 1);\n // Clear timeout\n this._delayedQueueTimeout && this._async.clearTimeout(this._delayedQueueTimeout);\n // Reset timeout\n this._delayedQueueTimeout = this._async.setTimeout(function () {\n if (_this._delayedKeytipQueue.length) {\n _this.showKeytips(_this._delayedKeytipQueue);\n _this._delayedKeytipQueue = [];\n }\n }, 300);\n }\n };\n KeytipLayerBase.prototype._getKtpExecuteTarget = function (currKtp) {\n return getDocument().querySelector(ktpTargetFromId(currKtp.id));\n };\n KeytipLayerBase.prototype._getKtpTarget = function (currKtp) {\n return getDocument().querySelector(ktpTargetFromSequences(currKtp.keySequences));\n };\n /**\n * Returns T/F if the keytipProps keySequences match the currentKeytip, and the currentKeytip is in an overflow well\n * This will make 'keytipProps' the new currentKeytip\n *\n * @param keytipProps - Keytip props to check\n * @returns - T/F if this keytip should become the currentKeytip\n */\n KeytipLayerBase.prototype._isCurrentKeytipAnAlias = function (keytipProps) {\n var currKtp = this._keytipTree.currentKeytip;\n if (currKtp &&\n (currKtp.overflowSetSequence || currKtp.persisted) &&\n arraysEqual(keytipProps.keySequences, currKtp.keySequences)) {\n return true;\n }\n return false;\n };\n KeytipLayerBase.defaultProps = {\n keytipStartSequences: [defaultStartSequence],\n keytipExitSequences: [defaultExitSequence],\n keytipReturnSequences: [defaultReturnSequence],\n content: '',\n };\n return KeytipLayerBase;\n}(React.Component));\nexport { KeytipLayerBase };\n//# sourceMappingURL=KeytipLayer.base.js.map","import { styled } from '../../Utilities';\nimport { KeytipLayerBase } from './KeytipLayer.base';\nimport { getStyles } from './KeytipLayer.styles';\nexport var KeytipLayer = styled(KeytipLayerBase, getStyles, undefined, {\n scope: 'KeytipLayer',\n});\n//# sourceMappingURL=KeytipLayer.js.map","import { __assign } from \"tslib\";\n/**\n * Builds a map of ID to IKeytipProps\n *\n * @param config - IKeytipConfig object\n * @returns Config map\n */\nexport function buildKeytipConfigMap(config) {\n var configMap = {};\n for (var _i = 0, _a = config.keytips; _i < _a.length; _i++) {\n var keytip = _a[_i];\n constructKeytip(configMap, [], keytip);\n }\n return configMap;\n}\n/**\n * Constructs a keytip from an IKeytipConfigItem and puts it in the configMap\n *\n * @param configMap - IKeytipConfigMap to store the keytip in\n * @param parentSequence - string of the parent keytip\n * @param keytip - IKeytipConfigItem data\n */\nexport function constructKeytip(configMap, parentSequence, keytip) {\n // Compute full key sequence\n var sequence = keytip.sequence ? keytip.sequence : keytip.content.toLocaleLowerCase();\n var keytipSequence = parentSequence.concat(sequence);\n // Save props in configMap\n var keytipProps = __assign(__assign({}, keytip.optionalProps), { keySequences: keytipSequence, content: keytip.content });\n configMap[keytip.id] = keytipProps;\n if (keytip.children) {\n for (var _i = 0, _a = keytip.children; _i < _a.length; _i++) {\n var child = _a[_i];\n // Create keytips for all children\n constructKeytip(configMap, keytipSequence, child);\n }\n }\n}\n//# sourceMappingURL=KeytipConfig.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { css } from '../../Utilities';\nimport { notifyHostChanged } from './Layer.notification';\nexport var LayerHost = function (props) {\n var id = props.id, className = props.className;\n React.useEffect(function () {\n notifyHostChanged(id);\n // eslint-disable-next-line react-hooks/exhaustive-deps -- should only run on first render\n }, []);\n useUnmount(function () {\n notifyHostChanged(id);\n });\n return React.createElement(\"div\", __assign({}, props, { className: css('ms-LayerHost', className) }));\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 }; }, []);\n};\n//# sourceMappingURL=LayerHost.js.map","import { EventGroup } from './EventGroup';\nimport { findScrollableParent } from './scroll';\nimport { getRect } from './dom/getRect';\nvar SCROLL_ITERATION_DELAY = 16;\nvar SCROLL_GUTTER = 100;\nvar MAX_SCROLL_VELOCITY = 15;\n/**\n * AutoScroll simply hooks up mouse events given a parent element, and scrolls the container\n * up/down depending on how close the mouse is to the top/bottom of the container.\n *\n * Once you don't want autoscroll any more, just dispose the helper and it will unhook events.\n *\n * @public\n * {@docCategory AutoScroll}\n */\nvar AutoScroll = /** @class */ (function () {\n function AutoScroll(element) {\n this._events = new EventGroup(this);\n this._scrollableParent = findScrollableParent(element);\n this._incrementScroll = this._incrementScroll.bind(this);\n this._scrollRect = getRect(this._scrollableParent);\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n if (this._scrollableParent === window) {\n this._scrollableParent = document.body;\n }\n if (this._scrollableParent) {\n this._events.on(window, 'mousemove', this._onMouseMove, true);\n this._events.on(window, 'touchmove', this._onTouchMove, true);\n }\n }\n AutoScroll.prototype.dispose = function () {\n this._events.dispose();\n this._stopScroll();\n };\n AutoScroll.prototype._onMouseMove = function (ev) {\n this._computeScrollVelocity(ev);\n };\n AutoScroll.prototype._onTouchMove = function (ev) {\n if (ev.touches.length > 0) {\n this._computeScrollVelocity(ev);\n }\n };\n AutoScroll.prototype._computeScrollVelocity = function (ev) {\n if (!this._scrollRect) {\n return;\n }\n var clientX;\n var clientY;\n if ('clientX' in ev) {\n clientX = ev.clientX;\n clientY = ev.clientY;\n }\n else {\n clientX = ev.touches[0].clientX;\n clientY = ev.touches[0].clientY;\n }\n var scrollRectTop = this._scrollRect.top;\n var scrollRectLeft = this._scrollRect.left;\n var scrollClientBottom = scrollRectTop + this._scrollRect.height - SCROLL_GUTTER;\n var scrollClientRight = scrollRectLeft + this._scrollRect.width - SCROLL_GUTTER;\n // variables to use for alternating scroll direction\n var scrollRect;\n var clientDirection;\n var scrollClient;\n // if either of these conditions are met we are scrolling vertically else horizontally\n if (clientY < scrollRectTop + SCROLL_GUTTER || clientY > scrollClientBottom) {\n clientDirection = clientY;\n scrollRect = scrollRectTop;\n scrollClient = scrollClientBottom;\n this._isVerticalScroll = true;\n }\n else {\n clientDirection = clientX;\n scrollRect = scrollRectLeft;\n scrollClient = scrollClientRight;\n this._isVerticalScroll = false;\n }\n // calculate scroll velocity and direction\n if (clientDirection < scrollRect + SCROLL_GUTTER) {\n this._scrollVelocity = Math.max(-MAX_SCROLL_VELOCITY, -MAX_SCROLL_VELOCITY * ((SCROLL_GUTTER - (clientDirection - scrollRect)) / SCROLL_GUTTER));\n }\n else if (clientDirection > scrollClient) {\n this._scrollVelocity = Math.min(MAX_SCROLL_VELOCITY, MAX_SCROLL_VELOCITY * ((clientDirection - scrollClient) / SCROLL_GUTTER));\n }\n else {\n this._scrollVelocity = 0;\n }\n if (this._scrollVelocity) {\n this._startScroll();\n }\n else {\n this._stopScroll();\n }\n };\n AutoScroll.prototype._startScroll = function () {\n if (!this._timeoutId) {\n this._incrementScroll();\n }\n };\n AutoScroll.prototype._incrementScroll = function () {\n if (this._scrollableParent) {\n if (this._isVerticalScroll) {\n this._scrollableParent.scrollTop += Math.round(this._scrollVelocity);\n }\n else {\n this._scrollableParent.scrollLeft += Math.round(this._scrollVelocity);\n }\n }\n this._timeoutId = setTimeout(this._incrementScroll, SCROLL_ITERATION_DELAY);\n };\n AutoScroll.prototype._stopScroll = function () {\n if (this._timeoutId) {\n clearTimeout(this._timeoutId);\n delete this._timeoutId;\n }\n };\n return AutoScroll;\n}());\nexport { AutoScroll };\n//# sourceMappingURL=AutoScroll.js.map","/**\n * Determines the distance between two points.\n *\n * @public\n */\n/* eslint-disable deprecation/deprecation */\nexport function getDistanceBetweenPoints(point1, point2) {\n var left1 = point1.left || point1.x || 0;\n var top1 = point1.top || point1.y || 0;\n var left2 = point2.left || point2.x || 0;\n var top2 = point2.top || point2.y || 0;\n /* eslint-enable deprecation/deprecation */\n var distance = Math.sqrt(Math.pow(left1 - left2, 2) + Math.pow(top1 - top2, 2));\n return distance;\n}\n/**\n * Produces a proportionally-scaled version of an input content size when fit to a bounding size.\n * Given a `contentSize` and a `boundsSize`, this function scales `contentSize` proportionally\n * using either `contain` or `cover` fit behaviors.\n * Use this function to pre-calculate the layout for the CSS `object-fit` and `background-fit` behaviors.\n * With `contain`, the output size must be the largest it can be while completely within the `boundsSize`.\n * With `cover`, the output size must be the smallest it can be while completely around the `boundsSize`.\n * By default, there is a `maxScale` value of 1, which prevents the `contentSize` from being scaled larger.\n *\n * @param options - the options for the bounds fit operation\n */\nexport function fitContentToBounds(options) {\n var contentSize = options.contentSize, boundsSize = options.boundsSize, _a = options.mode, mode = _a === void 0 ? 'contain' : _a, _b = options.maxScale, maxScale = _b === void 0 ? 1 : _b;\n var contentAspectRatio = contentSize.width / contentSize.height;\n var boundsAspectRatio = boundsSize.width / boundsSize.height;\n var scale;\n if (mode === 'contain' ? contentAspectRatio > boundsAspectRatio : contentAspectRatio < boundsAspectRatio) {\n scale = boundsSize.width / contentSize.width;\n }\n else {\n scale = boundsSize.height / contentSize.height;\n }\n var finalScale = Math.min(maxScale, scale);\n return {\n width: contentSize.width * finalScale,\n height: contentSize.height * finalScale,\n };\n}\n/**\n * Calculates a number's precision based on the number of trailing\n * zeros if the number does not have a decimal indicated by a negative\n * precision. Otherwise, it calculates the number of digits after\n * the decimal point indicated by a positive precision.\n * @param value - the value to determine the precision of\n */\nexport function calculatePrecision(value) {\n /**\n * Group 1:\n * [1-9]([0]+$) matches trailing zeros\n * Group 2:\n * \\.([0-9]*) matches all digits after a decimal point.\n */\n var groups = /[1-9]([0]+$)|\\.([0-9]*)/.exec(String(value));\n if (!groups) {\n return 0;\n }\n if (groups[1]) {\n return -groups[1].length;\n }\n if (groups[2]) {\n return groups[2].length;\n }\n return 0;\n}\n/**\n * Rounds a number to a certain level of precision. Accepts negative precision.\n * @param value - The value that is being rounded.\n * @param precision - The number of decimal places to round the number to\n */\nexport function precisionRound(value, precision, base) {\n if (base === void 0) { base = 10; }\n var exp = Math.pow(base, precision);\n return Math.round(value * exp) / exp;\n}\n//# sourceMappingURL=math.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, EventGroup, AutoScroll, classNamesFunction, findScrollableParent, getDistanceBetweenPoints, getRTL, initializeComponentRef, } from '../../Utilities';\nvar getClassNames = classNamesFunction();\n// We want to make the marquee selection start when the user drags a minimum distance. Otherwise we'd start\n// the drag even if they just click an item without moving.\nvar MIN_DRAG_DISTANCE = 5;\n/**\n * MarqueeSelection component abstracts managing a draggable rectangle which sets items selected/not selected.\n * Elements which have data-selectable-index attributes are queried and measured once to determine if they\n * fall within the bounds of the rectangle. The measure is memoized during the drag as a performance optimization\n * so if the items change sizes while dragging, that could cause incorrect results.\n */\nvar MarqueeSelectionBase = /** @class */ (function (_super) {\n __extends(MarqueeSelectionBase, _super);\n function MarqueeSelectionBase(props) {\n var _this = _super.call(this, props) || this;\n _this._root = React.createRef();\n _this._onMouseDown = function (ev) {\n var _a = _this.props, isEnabled = _a.isEnabled, onShouldStartSelection = _a.onShouldStartSelection;\n // Ensure the mousedown is within the boundaries of the target. If not, it may have been a click on a scrollbar.\n if (_this._isMouseEventOnScrollbar(ev)) {\n return;\n }\n if (_this._isInSelectionToggle(ev)) {\n return;\n }\n if (!_this._isTouch &&\n isEnabled &&\n !_this._isDragStartInSelection(ev) &&\n (!onShouldStartSelection || onShouldStartSelection(ev))) {\n if (_this._scrollableSurface && ev.button === 0 && _this._root.current) {\n _this._selectedIndicies = {};\n _this._preservedIndicies = undefined;\n _this._events.on(window, 'mousemove', _this._onAsyncMouseMove, true);\n _this._events.on(_this._scrollableParent, 'scroll', _this._onAsyncMouseMove);\n _this._events.on(window, 'click', _this._onMouseUp, true);\n _this._autoScroll = new AutoScroll(_this._root.current);\n _this._scrollTop = _this._scrollableSurface.scrollTop;\n _this._scrollLeft = _this._scrollableSurface.scrollLeft;\n _this._rootRect = _this._root.current.getBoundingClientRect();\n _this._onMouseMove(ev);\n }\n }\n };\n _this._onTouchStart = function (ev) {\n _this._isTouch = true;\n _this._async.setTimeout(function () {\n _this._isTouch = false;\n }, 0);\n };\n _this._onPointerDown = function (ev) {\n if (ev.pointerType === 'touch') {\n _this._isTouch = true;\n _this._async.setTimeout(function () {\n _this._isTouch = false;\n }, 0);\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n _this._events = new EventGroup(_this);\n _this.state = {\n dragRect: undefined,\n };\n return _this;\n }\n MarqueeSelectionBase.prototype.componentDidMount = function () {\n this._scrollableParent = findScrollableParent(this._root.current);\n this._scrollableSurface = this._scrollableParent === window ? document.body : this._scrollableParent;\n // When scroll events come from window, we need to read scrollTop values from the body.\n var hitTarget = this.props.isDraggingConstrainedToRoot ? this._root.current : this._scrollableSurface;\n this._events.on(hitTarget, 'mousedown', this._onMouseDown);\n this._events.on(hitTarget, 'touchstart', this._onTouchStart, true);\n this._events.on(hitTarget, 'pointerdown', this._onPointerDown, true);\n };\n MarqueeSelectionBase.prototype.componentWillUnmount = function () {\n if (this._autoScroll) {\n this._autoScroll.dispose();\n }\n delete this._scrollableParent;\n delete this._scrollableSurface;\n this._events.dispose();\n this._async.dispose();\n };\n MarqueeSelectionBase.prototype.render = function () {\n var _a = this.props, rootProps = _a.rootProps, children = _a.children, theme = _a.theme, className = _a.className, styles = _a.styles;\n var dragRect = this.state.dragRect;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n });\n return (React.createElement(\"div\", __assign({}, rootProps, { className: classNames.root, ref: this._root }),\n children,\n dragRect && React.createElement(\"div\", { className: classNames.dragMask }),\n dragRect && (React.createElement(\"div\", { className: classNames.box, style: dragRect },\n React.createElement(\"div\", { className: classNames.boxFill })))));\n };\n /** Determine if the mouse event occured on a scrollbar of the target element. */\n MarqueeSelectionBase.prototype._isMouseEventOnScrollbar = function (ev) {\n var targetElement = ev.target;\n var targetScrollbarWidth = targetElement.offsetWidth - targetElement.clientWidth;\n var targetScrollbarHeight = targetElement.offsetHeight - targetElement.clientHeight;\n if (targetScrollbarWidth || targetScrollbarHeight) {\n var targetRect = targetElement.getBoundingClientRect();\n // Check vertical scroll\n if (getRTL(this.props.theme)) {\n if (ev.clientX < targetRect.left + targetScrollbarWidth) {\n return true;\n }\n }\n else {\n if (ev.clientX > targetRect.left + targetElement.clientWidth) {\n return true;\n }\n }\n // Check horizontal scroll\n if (ev.clientY > targetRect.top + targetElement.clientHeight) {\n return true;\n }\n }\n return false;\n };\n MarqueeSelectionBase.prototype._getRootRect = function () {\n return {\n left: this._rootRect.left +\n (this._scrollableSurface ? this._scrollLeft - this._scrollableSurface.scrollLeft : this._scrollLeft),\n top: this._rootRect.top +\n (this._scrollableSurface ? this._scrollTop - this._scrollableSurface.scrollTop : this._scrollTop),\n width: this._rootRect.width,\n height: this._rootRect.height,\n };\n };\n MarqueeSelectionBase.prototype._onAsyncMouseMove = function (ev) {\n var _this = this;\n this._async.requestAnimationFrame(function () {\n _this._onMouseMove(ev);\n });\n ev.stopPropagation();\n ev.preventDefault();\n };\n MarqueeSelectionBase.prototype._onMouseMove = function (ev) {\n if (!this._autoScroll) {\n return;\n }\n if (ev.clientX !== undefined) {\n this._lastMouseEvent = ev;\n }\n var rootRect = this._getRootRect();\n var currentPoint = { left: ev.clientX - rootRect.left, top: ev.clientY - rootRect.top };\n if (!this._dragOrigin) {\n this._dragOrigin = currentPoint;\n }\n if (ev.buttons !== undefined && ev.buttons === 0) {\n this._onMouseUp(ev);\n }\n else {\n if (this.state.dragRect || getDistanceBetweenPoints(this._dragOrigin, currentPoint) > MIN_DRAG_DISTANCE) {\n if (!this.state.dragRect) {\n var selection = this.props.selection;\n if (!ev.shiftKey) {\n selection.setAllSelected(false);\n }\n this._preservedIndicies = selection && selection.getSelectedIndices && selection.getSelectedIndices();\n }\n // We need to constrain the current point to the rootRect boundaries.\n var constrainedPoint = this.props.isDraggingConstrainedToRoot\n ? {\n left: Math.max(0, Math.min(rootRect.width, this._lastMouseEvent.clientX - rootRect.left)),\n top: Math.max(0, Math.min(rootRect.height, this._lastMouseEvent.clientY - rootRect.top)),\n }\n : {\n left: this._lastMouseEvent.clientX - rootRect.left,\n top: this._lastMouseEvent.clientY - rootRect.top,\n };\n var dragRect = {\n left: Math.min(this._dragOrigin.left || 0, constrainedPoint.left),\n top: Math.min(this._dragOrigin.top || 0, constrainedPoint.top),\n width: Math.abs(constrainedPoint.left - (this._dragOrigin.left || 0)),\n height: Math.abs(constrainedPoint.top - (this._dragOrigin.top || 0)),\n };\n this._evaluateSelection(dragRect, rootRect);\n this.setState({ dragRect: dragRect });\n }\n }\n return false;\n };\n MarqueeSelectionBase.prototype._onMouseUp = function (ev) {\n this._events.off(window);\n this._events.off(this._scrollableParent, 'scroll');\n if (this._autoScroll) {\n this._autoScroll.dispose();\n }\n this._autoScroll = this._dragOrigin = this._lastMouseEvent = undefined;\n this._selectedIndicies = this._itemRectCache = undefined;\n if (this.state.dragRect) {\n this.setState({\n dragRect: undefined,\n });\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n MarqueeSelectionBase.prototype._isPointInRectangle = function (rectangle, point) {\n return (!!point.top &&\n rectangle.top < point.top &&\n rectangle.bottom > point.top &&\n !!point.left &&\n rectangle.left < point.left &&\n rectangle.right > point.left);\n };\n /**\n * We do not want to start the marquee if we're trying to marquee\n * from within an existing marquee selection.\n */\n MarqueeSelectionBase.prototype._isDragStartInSelection = function (ev) {\n var selection = this.props.selection;\n if (!this._root.current || (selection && selection.getSelectedCount() === 0)) {\n return false;\n }\n var allElements = this._root.current.querySelectorAll('[data-selection-index]');\n for (var i = 0; i < allElements.length; i++) {\n var element = allElements[i];\n var index = Number(element.getAttribute('data-selection-index'));\n if (selection.isIndexSelected(index)) {\n var itemRect = element.getBoundingClientRect();\n if (this._isPointInRectangle(itemRect, { left: ev.clientX, top: ev.clientY })) {\n return true;\n }\n }\n }\n return false;\n };\n MarqueeSelectionBase.prototype._isInSelectionToggle = function (ev) {\n var element = ev.target;\n while (element && element !== this._root.current) {\n if (element.getAttribute('data-selection-toggle') === 'true') {\n return true;\n }\n element = element.parentElement;\n }\n return false;\n };\n MarqueeSelectionBase.prototype._evaluateSelection = function (dragRect, rootRect) {\n // Break early if we don't need to evaluate.\n if (!dragRect || !this._root.current) {\n return;\n }\n var selection = this.props.selection;\n var allElements = this._root.current.querySelectorAll('[data-selection-index]');\n if (!this._itemRectCache) {\n this._itemRectCache = {};\n }\n for (var i = 0; i < allElements.length; i++) {\n var element = allElements[i];\n var index = element.getAttribute('data-selection-index');\n // Pull the memoized rectangle for the item, or the get the rect and memoize.\n var itemRect = this._itemRectCache[index];\n if (!itemRect) {\n itemRect = element.getBoundingClientRect();\n // Normalize the item rect to the dragRect coordinates.\n itemRect = {\n left: itemRect.left - rootRect.left,\n top: itemRect.top - rootRect.top,\n width: itemRect.width,\n height: itemRect.height,\n right: itemRect.left - rootRect.left + itemRect.width,\n bottom: itemRect.top - rootRect.top + itemRect.height,\n };\n if (itemRect.width > 0 && itemRect.height > 0) {\n this._itemRectCache[index] = itemRect;\n }\n }\n if (itemRect.top < dragRect.top + dragRect.height &&\n itemRect.bottom > dragRect.top &&\n itemRect.left < dragRect.left + dragRect.width &&\n itemRect.right > dragRect.left) {\n this._selectedIndicies[index] = true;\n }\n else {\n delete this._selectedIndicies[index];\n }\n }\n // set previousSelectedIndices to be all of the selected indices from last time\n var previousSelectedIndices = this._allSelectedIndices || {};\n this._allSelectedIndices = {};\n // set all indices that are supposed to be selected in _allSelectedIndices\n for (var index in this._selectedIndicies) {\n if (this._selectedIndicies.hasOwnProperty(index)) {\n this._allSelectedIndices[index] = true;\n }\n }\n if (this._preservedIndicies) {\n for (var _i = 0, _a = this._preservedIndicies; _i < _a.length; _i++) {\n var index = _a[_i];\n this._allSelectedIndices[index] = true;\n }\n }\n // check if needs to update selection, only when current _allSelectedIndices\n // is different than previousSelectedIndices\n var needToUpdate = false;\n for (var index in this._allSelectedIndices) {\n if (this._allSelectedIndices[index] !== previousSelectedIndices[index]) {\n needToUpdate = true;\n break;\n }\n }\n if (!needToUpdate) {\n for (var index in previousSelectedIndices) {\n if (this._allSelectedIndices[index] !== previousSelectedIndices[index]) {\n needToUpdate = true;\n break;\n }\n }\n }\n // only update selection when needed\n if (needToUpdate) {\n // Stop change events, clear selection to re-populate.\n selection.setChangeEvents(false);\n selection.setAllSelected(false);\n for (var _b = 0, _c = Object.keys(this._allSelectedIndices); _b < _c.length; _b++) {\n var index = _c[_b];\n selection.setIndexSelected(Number(index), true, false);\n }\n selection.setChangeEvents(true);\n }\n };\n MarqueeSelectionBase.defaultProps = {\n rootTagName: 'div',\n rootProps: {},\n isEnabled: true,\n };\n return MarqueeSelectionBase;\n}(React.Component));\nexport { MarqueeSelectionBase };\n//# sourceMappingURL=MarqueeSelection.base.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { ActionButton } from '../../Button';\nimport { buttonStyles } from './Nav.styles';\nimport { classNamesFunction, divProperties, getNativeProps, getWindow, initializeComponentRef } from '../../Utilities';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { Icon } from '../../Icon';\nimport { composeComponentAs, composeRenderFunction } from '@fluentui/utilities';\n// The number pixels per indentation level for Nav links.\nvar _indentationSize = 14;\n// The number of pixels of left margin\nvar _baseIndent = 3;\n// global var used in _isLinkSelectedKey\nvar _urlResolver;\nexport function isRelativeUrl(url) {\n // A URL is relative if it has no protocol.\n return !!url && !/^[a-z0-9+-.]+:\\/\\//i.test(url);\n}\nvar getClassNames = classNamesFunction();\nvar NavBase = /** @class */ (function (_super) {\n __extends(NavBase, _super);\n function NavBase(props) {\n var _this = _super.call(this, props) || this;\n _this._focusZone = React.createRef();\n _this._onRenderLink = function (link) {\n var _a = _this.props, styles = _a.styles, groups = _a.groups, theme = _a.theme;\n var classNames = getClassNames(styles, { theme: theme, groups: groups });\n return React.createElement(\"div\", { className: classNames.linkText }, link.name);\n };\n _this._renderGroup = function (group, groupIndex) {\n var _a = _this.props, styles = _a.styles, groups = _a.groups, theme = _a.theme, _b = _a.onRenderGroupHeader, onRenderGroupHeader = _b === void 0 ? _this._renderGroupHeader : _b;\n var isExpanded = _this._isGroupExpanded(group);\n var classNames = getClassNames(styles, {\n theme: theme,\n isGroup: true,\n isExpanded: isExpanded,\n groups: groups,\n });\n var finalOnHeaderClick = function (ev, isCollapsing) {\n _this._onGroupHeaderClicked(group, ev);\n };\n var groupProps = __assign(__assign({}, group), { isExpanded: isExpanded, onHeaderClick: finalOnHeaderClick });\n return (React.createElement(\"div\", { key: groupIndex, className: classNames.group },\n groupProps.name ? onRenderGroupHeader(groupProps, _this._renderGroupHeader) : null,\n React.createElement(\"div\", { className: classNames.groupContent }, _this._renderLinks(groupProps.links, 0 /* nestingLevel */))));\n };\n _this._renderGroupHeader = function (group) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = _this.props, styles = _a.styles, groups = _a.groups, theme = _a.theme, expandButtonAriaLabel = _a.expandButtonAriaLabel;\n var isExpanded = group.isExpanded;\n var classNames = getClassNames(styles, {\n theme: theme,\n isGroup: true,\n isExpanded: isExpanded,\n groups: groups,\n });\n var label = (isExpanded ? group.collapseAriaLabel : group.expandAriaLabel) || expandButtonAriaLabel;\n var onHeaderClick = group.onHeaderClick;\n var onClick = onHeaderClick\n ? function (ev) {\n onHeaderClick(ev, isExpanded);\n }\n : undefined;\n return (React.createElement(\"button\", { className: classNames.chevronButton, onClick: onClick, \"aria-label\": label, \"aria-expanded\": isExpanded },\n React.createElement(Icon, { className: classNames.chevronIcon, iconName: \"ChevronDown\" }),\n group.name));\n };\n initializeComponentRef(_this);\n _this.state = {\n isGroupCollapsed: {},\n // TODO: consider removing\n // eslint-disable-next-line react/no-unused-state\n isLinkExpandStateChanged: false,\n selectedKey: props.initialSelectedKey || props.selectedKey,\n };\n return _this;\n }\n NavBase.prototype.render = function () {\n var _a = this.props, styles = _a.styles, groups = _a.groups, className = _a.className, isOnTop = _a.isOnTop, theme = _a.theme;\n if (!groups) {\n return null;\n }\n var groupElements = groups.map(this._renderGroup);\n var classNames = getClassNames(styles, { theme: theme, className: className, isOnTop: isOnTop, groups: groups });\n return (React.createElement(FocusZone, { direction: FocusZoneDirection.vertical, componentRef: this._focusZone },\n React.createElement(\"nav\", { role: \"navigation\", className: classNames.root, \"aria-label\": this.props.ariaLabel }, groupElements)));\n };\n Object.defineProperty(NavBase.prototype, \"selectedKey\", {\n get: function () {\n return this.state.selectedKey;\n },\n enumerable: false,\n configurable: true\n });\n /**\n * Sets focus to the first tabbable item in the zone.\n * @param forceIntoFirstElement - If true, focus will be forced into the first element, even\n * if focus is already in the focus zone.\n * @returns True if focus could be set to an active element, false if no operation was taken.\n */\n NavBase.prototype.focus = function (forceIntoFirstElement) {\n if (forceIntoFirstElement === void 0) { forceIntoFirstElement = false; }\n if (this._focusZone && this._focusZone.current) {\n return this._focusZone.current.focus(forceIntoFirstElement);\n }\n return false;\n };\n NavBase.prototype._renderNavLink = function (link, linkIndex, nestingLevel) {\n var _a = this.props, styles = _a.styles, groups = _a.groups, theme = _a.theme;\n var isLinkWithIcon = link.icon || link.iconProps;\n var isSelectedLink = this._isLinkSelected(link);\n var _b = link.ariaCurrent, ariaCurrent = _b === void 0 ? 'page' : _b;\n var classNames = getClassNames(styles, {\n theme: theme,\n isSelected: isSelectedLink,\n isDisabled: link.disabled,\n isButtonEntry: link.onClick && !link.forceAnchor,\n leftPadding: _indentationSize * nestingLevel + _baseIndent + (isLinkWithIcon ? 0 : 24),\n groups: groups,\n });\n // Prevent hijacking of the parent window if link.target is defined\n var rel = link.url && link.target && !isRelativeUrl(link.url) ? 'noopener noreferrer' : undefined;\n var LinkAs = this.props.linkAs ? composeComponentAs(this.props.linkAs, ActionButton) : ActionButton;\n var onRenderLink = this.props.onRenderLink\n ? composeRenderFunction(this.props.onRenderLink, this._onRenderLink)\n : this._onRenderLink;\n return (React.createElement(LinkAs, { className: classNames.link, styles: buttonStyles, href: link.url || (link.forceAnchor ? '#' : undefined), iconProps: link.iconProps || { iconName: link.icon }, \n // eslint-disable-next-line react/jsx-no-bind\n onClick: link.onClick ? this._onNavButtonLinkClicked.bind(this, link) : this._onNavAnchorLinkClicked.bind(this, link), title: link.title !== undefined ? link.title : link.name, target: link.target, rel: rel, disabled: link.disabled, \"aria-current\": isSelectedLink ? ariaCurrent : undefined, \"aria-label\": link.ariaLabel ? link.ariaLabel : undefined, link: link }, onRenderLink(link)));\n };\n NavBase.prototype._renderCompositeLink = function (link, linkIndex, nestingLevel) {\n var divProps = __assign({}, getNativeProps(link, divProperties, ['onClick']));\n // eslint-disable-next-line deprecation/deprecation\n var _a = this.props, expandButtonAriaLabel = _a.expandButtonAriaLabel, styles = _a.styles, groups = _a.groups, theme = _a.theme;\n var classNames = getClassNames(styles, {\n theme: theme,\n isExpanded: !!link.isExpanded,\n isSelected: this._isLinkSelected(link),\n isLink: true,\n isDisabled: link.disabled,\n position: _indentationSize * nestingLevel + 1,\n groups: groups,\n });\n var finalExpandBtnAriaLabel = '';\n if (link.links && link.links.length > 0) {\n if (link.collapseAriaLabel || link.expandAriaLabel) {\n finalExpandBtnAriaLabel = link.isExpanded ? link.collapseAriaLabel : link.expandAriaLabel;\n }\n else {\n // TODO remove when `expandButtonAriaLabel` is removed. This is not an ideal concatenation for localization.\n finalExpandBtnAriaLabel = expandButtonAriaLabel ? link.name + \" \" + expandButtonAriaLabel : link.name;\n }\n }\n return (React.createElement(\"div\", __assign({}, divProps, { key: link.key || linkIndex, className: classNames.compositeLink }),\n link.links && link.links.length > 0 ? (React.createElement(\"button\", { className: classNames.chevronButton, onClick: this._onLinkExpandClicked.bind(this, link), \"aria-label\": finalExpandBtnAriaLabel, \"aria-expanded\": link.isExpanded ? 'true' : 'false' },\n React.createElement(Icon, { className: classNames.chevronIcon, iconName: \"ChevronDown\" }))) : null,\n this._renderNavLink(link, linkIndex, nestingLevel)));\n };\n NavBase.prototype._renderLink = function (link, linkIndex, nestingLevel) {\n var _a = this.props, styles = _a.styles, groups = _a.groups, theme = _a.theme;\n var classNames = getClassNames(styles, { theme: theme, groups: groups });\n return (React.createElement(\"li\", { key: link.key || linkIndex, role: \"listitem\", className: classNames.navItem },\n this._renderCompositeLink(link, linkIndex, nestingLevel),\n link.isExpanded ? this._renderLinks(link.links, ++nestingLevel) : null));\n };\n NavBase.prototype._renderLinks = function (links, nestingLevel) {\n var _this = this;\n if (!links || !links.length) {\n return null;\n }\n var linkElements = links.map(function (link, linkIndex) {\n return _this._renderLink(link, linkIndex, nestingLevel);\n });\n var _a = this.props, styles = _a.styles, groups = _a.groups, theme = _a.theme;\n var classNames = getClassNames(styles, { theme: theme, groups: groups });\n return (React.createElement(\"ul\", { role: \"list\", className: classNames.navItems }, linkElements));\n };\n NavBase.prototype._onGroupHeaderClicked = function (group, ev) {\n if (group.onHeaderClick) {\n group.onHeaderClick(ev, this._isGroupExpanded(group));\n }\n this._toggleCollapsed(group);\n if (ev) {\n ev.preventDefault();\n ev.stopPropagation();\n }\n };\n NavBase.prototype._onLinkExpandClicked = function (link, ev) {\n var onLinkExpandClick = this.props.onLinkExpandClick;\n if (onLinkExpandClick) {\n onLinkExpandClick(ev, link);\n }\n if (!ev.defaultPrevented) {\n link.isExpanded = !link.isExpanded;\n // eslint-disable-next-line react/no-unused-state\n this.setState({ isLinkExpandStateChanged: true });\n }\n ev.preventDefault();\n ev.stopPropagation();\n };\n NavBase.prototype._preventBounce = function (link, ev) {\n if (!link.url && link.forceAnchor) {\n ev.preventDefault();\n }\n };\n NavBase.prototype._onNavAnchorLinkClicked = function (link, ev) {\n // If the href is \"#\" we should call preventDefault to prevent scrolling to the top of the page\n this._preventBounce(link, ev);\n if (this.props.onLinkClick) {\n this.props.onLinkClick(ev, link);\n }\n if (!link.url && link.links && link.links.length > 0) {\n this._onLinkExpandClicked(link, ev);\n }\n this.setState({ selectedKey: link.key });\n };\n NavBase.prototype._onNavButtonLinkClicked = function (link, ev) {\n // If the href is \"#\" we should call preventDefault to prevent scrolling to the top of the page\n this._preventBounce(link, ev);\n if (link.onClick) {\n link.onClick(ev, link);\n }\n if (!link.url && link.links && link.links.length > 0) {\n this._onLinkExpandClicked(link, ev);\n }\n this.setState({ selectedKey: link.key });\n };\n NavBase.prototype._isLinkSelected = function (link) {\n // if caller passes in selectedKey, use it as first choice or\n // if current state.selectedKey (from addressbar) is match to the link or\n // check if URL is matching location.href (if link.url exists)\n if (this.props.selectedKey !== undefined) {\n return link.key === this.props.selectedKey;\n }\n else if (this.state.selectedKey !== undefined) {\n return link.key === this.state.selectedKey;\n }\n else if (typeof getWindow() === 'undefined' || !link.url) {\n // resolve is not supported for ssr\n return false;\n }\n else {\n // If selectedKey is undefined in props and state, then check URL\n _urlResolver = _urlResolver || document.createElement('a');\n _urlResolver.href = link.url || '';\n var target = _urlResolver.href;\n if (location.href === target) {\n return true;\n }\n // If selectedKey is not defined in state, then check URL to determine link selected status\n if (location.protocol + '//' + location.host + location.pathname === target) {\n return true;\n }\n if (location.hash) {\n // Match the hash to the url.\n if (location.hash === link.url) {\n return true;\n }\n // Match a rebased url. (e.g. #foo becomes http://hostname/foo)\n _urlResolver.href = location.hash.substring(1);\n return _urlResolver.href === target;\n }\n }\n return false;\n };\n NavBase.prototype._isGroupExpanded = function (group) {\n if (group.name && this.state.isGroupCollapsed.hasOwnProperty(group.name)) {\n return !this.state.isGroupCollapsed[group.name];\n }\n if (group.collapseByDefault !== undefined) {\n return !group.collapseByDefault;\n }\n return true;\n };\n NavBase.prototype._toggleCollapsed = function (group) {\n var _a;\n if (group.name) {\n var newGroupCollapsed = __assign(__assign({}, this.state.isGroupCollapsed), (_a = {}, _a[group.name] = this._isGroupExpanded(group), _a));\n this.setState({ isGroupCollapsed: newGroupCollapsed });\n }\n };\n NavBase.defaultProps = {\n groups: null,\n };\n return NavBase;\n}(React.Component));\nexport { NavBase };\n//# sourceMappingURL=Nav.base.js.map","import { styled } from '../../Utilities';\nimport { MarqueeSelectionBase } from './MarqueeSelection.base';\nimport { getStyles } from './MarqueeSelection.styles';\nexport var MarqueeSelection = \n// TODO: MarqueeSelectionBase defaultProps are not lining up with IMarqueeSelectionProps, so we have to be explicit\n// with styled here. defaultProps.rootTagName doesn't appear to be used anywhere and defaultProps.rootProps is not\n// in IMarqueeSelectionProps.\nstyled(MarqueeSelectionBase, getStyles, undefined, {\n scope: 'MarqueeSelection',\n});\n//# sourceMappingURL=MarqueeSelection.js.map","import { HighContrastSelector } from '../../Styling';\nexport var getStyles = function (props) {\n var _a, _b, _c;\n var theme = props.theme, className = props.className;\n var palette = theme.palette;\n return {\n root: [\n className,\n {\n position: 'relative',\n cursor: 'default',\n },\n ],\n dragMask: [\n {\n position: 'absolute',\n background: 'rgba(255, 0, 0, 0)',\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n background: 'none',\n backgroundColor: 'transparent',\n },\n _a),\n },\n ],\n box: [\n {\n position: 'absolute',\n boxSizing: 'border-box',\n border: \"1px solid \" + palette.themePrimary,\n pointerEvents: 'none',\n zIndex: 10,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n borderColor: 'Highlight',\n },\n _b),\n },\n ],\n boxFill: [\n {\n position: 'absolute',\n boxSizing: 'border-box',\n backgroundColor: palette.themePrimary,\n opacity: 0.1,\n left: 0,\n top: 0,\n right: 0,\n bottom: 0,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n background: 'none',\n backgroundColor: 'transparent',\n },\n _c),\n },\n ],\n };\n};\n//# sourceMappingURL=MarqueeSelection.styles.js.map","import { AnimationClassNames, getFocusStyle, ZIndexes, getGlobalClassNames, HighContrastSelector, FontWeights, } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Nav',\n linkText: 'ms-Nav-linkText',\n compositeLink: 'ms-Nav-compositeLink',\n link: 'ms-Nav-link',\n chevronButton: 'ms-Nav-chevronButton',\n chevronIcon: 'ms-Nav-chevron',\n navItem: 'ms-Nav-navItem',\n navItems: 'ms-Nav-navItems',\n group: 'ms-Nav-group',\n groupContent: 'ms-Nav-groupContent',\n};\nexport var buttonStyles = {\n textContainer: {\n overflow: 'hidden',\n },\n label: {\n whiteSpace: 'nowrap',\n textOverflow: 'ellipsis',\n overflow: 'hidden',\n },\n};\nexport var getStyles = function (props) {\n var _a;\n var className = props.className, theme = props.theme, isOnTop = props.isOnTop, isExpanded = props.isExpanded, isGroup = props.isGroup, isLink = props.isLink, isSelected = props.isSelected, isDisabled = props.isDisabled, isButtonEntry = props.isButtonEntry, _b = props.navHeight, navHeight = _b === void 0 ? 44 : _b, position = props.position, _c = props.leftPadding, leftPadding = _c === void 0 ? 20 : _c, _d = props.leftPaddingExpanded, leftPaddingExpanded = _d === void 0 ? 28 : _d, _e = props.rightPadding, rightPadding = _e === void 0 ? 20 : _e;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n className,\n fonts.medium,\n {\n overflowY: 'auto',\n userSelect: 'none',\n WebkitOverflowScrolling: 'touch',\n },\n isOnTop && [\n {\n position: 'absolute',\n },\n AnimationClassNames.slideRightIn40,\n ],\n ],\n linkText: [\n classNames.linkText,\n {\n margin: '0 4px',\n overflow: 'hidden',\n verticalAlign: 'middle',\n textAlign: 'left',\n textOverflow: 'ellipsis',\n },\n ],\n compositeLink: [\n classNames.compositeLink,\n {\n display: 'block',\n position: 'relative',\n color: semanticColors.bodyText,\n },\n isExpanded && 'is-expanded',\n isSelected && 'is-selected',\n isDisabled && 'is-disabled',\n isDisabled && {\n color: semanticColors.disabledText,\n },\n ],\n link: [\n classNames.link,\n getFocusStyle(theme),\n {\n display: 'block',\n position: 'relative',\n height: navHeight,\n width: '100%',\n lineHeight: navHeight + \"px\",\n textDecoration: 'none',\n cursor: 'pointer',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n paddingLeft: leftPadding,\n paddingRight: rightPadding,\n color: semanticColors.bodyText,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n border: 0,\n selectors: {\n ':focus': {\n border: '1px solid WindowText',\n },\n },\n },\n _a),\n },\n !isDisabled && {\n selectors: {\n '.ms-Nav-compositeLink:hover &': {\n backgroundColor: semanticColors.bodyBackgroundHovered,\n },\n },\n },\n isSelected && {\n color: semanticColors.bodyTextChecked,\n fontWeight: FontWeights.semibold,\n backgroundColor: semanticColors.bodyBackgroundChecked,\n selectors: {\n '&:after': {\n borderLeft: \"2px solid \" + palette.themePrimary,\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n },\n },\n },\n isDisabled && {\n color: semanticColors.disabledText,\n },\n isButtonEntry && {\n color: palette.themePrimary,\n },\n ],\n chevronButton: [\n classNames.chevronButton,\n getFocusStyle(theme),\n fonts.small,\n {\n display: 'block',\n textAlign: 'left',\n lineHeight: navHeight + \"px\",\n margin: '5px 0',\n padding: \"0px, \" + rightPadding + \"px, 0px, \" + leftPaddingExpanded + \"px\",\n border: 'none',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n cursor: 'pointer',\n color: semanticColors.bodyText,\n backgroundColor: 'transparent',\n selectors: {\n '&:visited': {\n color: semanticColors.bodyText,\n },\n },\n },\n isGroup && {\n fontSize: fonts.large.fontSize,\n width: '100%',\n height: navHeight,\n borderBottom: \"1px solid \" + semanticColors.bodyDivider,\n },\n isLink && {\n display: 'block',\n width: leftPaddingExpanded - 2,\n height: navHeight - 2,\n position: 'absolute',\n top: '1px',\n left: position + \"px\",\n zIndex: ZIndexes.Nav,\n padding: 0,\n margin: 0,\n },\n isSelected && {\n color: palette.themePrimary,\n backgroundColor: palette.neutralLighterAlt,\n selectors: {\n '&:after': {\n borderLeft: \"2px solid \" + palette.themePrimary,\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n pointerEvents: 'none',\n },\n },\n },\n ],\n chevronIcon: [\n classNames.chevronIcon,\n {\n position: 'absolute',\n left: '8px',\n height: navHeight,\n // inline-flex prevents the chevron from shifting with custom line height styles\n display: 'inline-flex',\n alignItems: 'center',\n lineHeight: navHeight + \"px\",\n fontSize: fonts.small.fontSize,\n transition: 'transform .1s linear',\n },\n isExpanded && {\n transform: 'rotate(-180deg)',\n },\n isLink && {\n top: 0,\n },\n ],\n navItem: [\n classNames.navItem,\n {\n padding: 0,\n },\n ],\n navItems: [\n classNames.navItems,\n {\n listStyleType: 'none',\n padding: 0,\n margin: 0,\n },\n ],\n group: [classNames.group, isExpanded && 'is-expanded'],\n groupContent: [\n classNames.groupContent,\n {\n display: 'none',\n marginBottom: '40px',\n },\n AnimationClassNames.slideDownIn20,\n isExpanded && {\n display: 'block',\n },\n ],\n };\n};\n//# sourceMappingURL=Nav.styles.js.map","/**\n * Enum to help identify which suggestions action button is selected.\n * {@docCategory Pickers}\n */\nexport var SuggestionActionType;\n(function (SuggestionActionType) {\n /** None of the actions is selected. */\n SuggestionActionType[SuggestionActionType[\"none\"] = 0] = \"none\";\n /** ForceResolve action is selected. */\n SuggestionActionType[SuggestionActionType[\"forceResolve\"] = 1] = \"forceResolve\";\n /** SearchMore action is selected. */\n SuggestionActionType[SuggestionActionType[\"searchMore\"] = 2] = \"searchMore\";\n})(SuggestionActionType || (SuggestionActionType = {}));\n//# sourceMappingURL=Suggestions.types.js.map","import { styled } from '../../Utilities';\nimport { NavBase } from './Nav.base';\nimport { getStyles } from './Nav.styles';\nexport var Nav = styled(NavBase, getStyles, undefined, {\n scope: 'Nav',\n});\n//# sourceMappingURL=Nav.js.map","import { __assign } from \"tslib\";\nimport { getGlobalClassNames, HighContrastSelector, getHighContrastNoAdjustStyle } from '../../../Styling';\nimport { IsFocusVisibleClassName } from '../../../Utilities';\nexport var SuggestionsItemGlobalClassNames = {\n root: 'ms-Suggestions-item',\n itemButton: 'ms-Suggestions-itemButton',\n closeButton: 'ms-Suggestions-closeButton',\n isSuggested: 'is-suggested',\n};\nexport function getStyles(props) {\n var _a, _b, _c, _d, _e, _f;\n var className = props.className, theme = props.theme, suggested = props.suggested;\n var palette = theme.palette, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(SuggestionsItemGlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n {\n display: 'flex',\n alignItems: 'stretch',\n boxSizing: 'border-box',\n width: '100%',\n position: 'relative',\n selectors: {\n '&:hover': {\n background: semanticColors.menuItemBackgroundHovered,\n },\n '&:hover .ms-Suggestions-closeButton': {\n display: 'block',\n },\n },\n },\n suggested && {\n selectors: (_a = {},\n _a[\".\" + IsFocusVisibleClassName + \" &\"] = {\n selectors: (_b = {},\n _b[\".\" + classNames.closeButton] = {\n display: 'block',\n background: semanticColors.menuItemBackgroundPressed,\n },\n _b),\n },\n _a[':after'] = {\n pointerEvents: 'none',\n content: '\"\"',\n position: 'absolute',\n left: 0,\n top: 0,\n bottom: 0,\n right: 0,\n border: \"1px solid \" + theme.semanticColors.focusBorder,\n },\n _a),\n },\n className,\n ],\n itemButton: [\n classNames.itemButton,\n {\n width: '100%',\n padding: 0,\n border: 'none',\n height: '100%',\n // Force the item button to be collapsible so it can always shrink\n // to accommodate the close button as a peer in its flex container.\n minWidth: 0,\n // Require for IE11 to truncate the component.\n overflow: 'hidden',\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'WindowText',\n selectors: {\n ':hover': __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n },\n },\n _c[':hover'] = {\n color: semanticColors.menuItemTextHovered,\n },\n _c),\n },\n suggested && [\n classNames.isSuggested,\n {\n background: semanticColors.menuItemBackgroundPressed,\n selectors: (_d = {\n ':hover': {\n background: semanticColors.menuDivider,\n }\n },\n _d[HighContrastSelector] = __assign({ background: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _d),\n },\n ],\n ],\n closeButton: [\n classNames.closeButton,\n {\n display: 'none',\n color: palette.neutralSecondary,\n padding: '0 4px',\n height: 'auto',\n width: 32,\n selectors: (_e = {\n ':hover, :active': {\n background: palette.neutralTertiaryAlt,\n color: palette.neutralDark,\n }\n },\n _e[HighContrastSelector] = {\n color: 'WindowText',\n },\n _e),\n },\n suggested && (_f = {},\n _f[\".\" + IsFocusVisibleClassName + \" &\"] = {\n selectors: {\n ':hover, :active': {\n background: palette.neutralTertiary,\n },\n },\n },\n _f.selectors = {\n ':hover, :active': {\n background: palette.neutralTertiary,\n color: palette.neutralPrimary,\n },\n },\n _f),\n ],\n };\n}\n//# sourceMappingURL=SuggestionsItem.styles.js.map","/**\n * Validation state of the user's input.\n * {@docCategory Pickers}\n */\nexport var ValidationState;\n(function (ValidationState) {\n /** User input is valid. */\n ValidationState[ValidationState[\"valid\"] = 0] = \"valid\";\n /** User input could be valid or invalid, its state is not known yet. */\n ValidationState[ValidationState[\"warning\"] = 1] = \"warning\";\n /** User input is invalid. */\n ValidationState[ValidationState[\"invalid\"] = 2] = \"invalid\";\n})(ValidationState || (ValidationState = {}));\n//# sourceMappingURL=BasePicker.types.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { initializeComponentRef, KeyCodes, classNamesFunction, css, styled } from '../../../Utilities';\nimport { CommandButton } from '../../../Button';\nimport { Spinner } from '../../../Spinner';\nimport { Announced } from '../../../Announced';\nimport { SuggestionActionType } from './Suggestions.types';\nimport { SuggestionsItem } from './SuggestionsItem';\nimport { getStyles as suggestionsItemStyles } from './SuggestionsItem.styles';\nimport * as stylesImport from './Suggestions.scss';\nvar legacyStyles = stylesImport;\nvar getClassNames = classNamesFunction();\nvar StyledSuggestionsItem = styled(SuggestionsItem, suggestionsItemStyles, undefined, {\n scope: 'SuggestionItem',\n});\n/**\n * {@docCategory Pickers}\n */\nvar Suggestions = /** @class */ (function (_super) {\n __extends(Suggestions, _super);\n function Suggestions(suggestionsProps) {\n var _this = _super.call(this, suggestionsProps) || this;\n _this._forceResolveButton = React.createRef();\n _this._searchForMoreButton = React.createRef();\n _this._selectedElement = React.createRef();\n _this._scrollContainer = React.createRef();\n /**\n * Returns true if the event was handled, false otherwise\n */\n _this.tryHandleKeyDown = function (keyCode, currentSuggestionIndex) {\n var isEventHandled = false;\n var newSelectedActionType = null;\n var currentSelectedAction = _this.state.selectedActionType;\n var suggestionLength = _this.props.suggestions.length;\n if (keyCode === KeyCodes.down) {\n switch (currentSelectedAction) {\n case SuggestionActionType.forceResolve:\n if (suggestionLength > 0) {\n _this._refocusOnSuggestions(keyCode);\n newSelectedActionType = SuggestionActionType.none;\n }\n else if (_this._searchForMoreButton.current) {\n newSelectedActionType = SuggestionActionType.searchMore;\n }\n else {\n newSelectedActionType = SuggestionActionType.forceResolve;\n }\n break;\n case SuggestionActionType.searchMore:\n if (_this._forceResolveButton.current) {\n newSelectedActionType = SuggestionActionType.forceResolve;\n }\n else if (suggestionLength > 0) {\n _this._refocusOnSuggestions(keyCode);\n newSelectedActionType = SuggestionActionType.none;\n }\n else {\n newSelectedActionType = SuggestionActionType.searchMore;\n }\n break;\n case SuggestionActionType.none:\n if (currentSuggestionIndex === -1 && _this._forceResolveButton.current) {\n newSelectedActionType = SuggestionActionType.forceResolve;\n }\n break;\n }\n }\n else if (keyCode === KeyCodes.up) {\n switch (currentSelectedAction) {\n case SuggestionActionType.forceResolve:\n if (_this._searchForMoreButton.current) {\n newSelectedActionType = SuggestionActionType.searchMore;\n }\n else if (suggestionLength > 0) {\n _this._refocusOnSuggestions(keyCode);\n newSelectedActionType = SuggestionActionType.none;\n }\n break;\n case SuggestionActionType.searchMore:\n if (suggestionLength > 0) {\n _this._refocusOnSuggestions(keyCode);\n newSelectedActionType = SuggestionActionType.none;\n }\n else if (_this._forceResolveButton.current) {\n newSelectedActionType = SuggestionActionType.forceResolve;\n }\n break;\n case SuggestionActionType.none:\n if (currentSuggestionIndex === -1 && _this._searchForMoreButton.current) {\n newSelectedActionType = SuggestionActionType.searchMore;\n }\n break;\n }\n }\n if (newSelectedActionType !== null) {\n _this.setState({ selectedActionType: newSelectedActionType });\n isEventHandled = true;\n }\n return isEventHandled;\n };\n _this._getAlertText = function () {\n var _a = _this.props, isLoading = _a.isLoading, isSearching = _a.isSearching, suggestions = _a.suggestions, suggestionsAvailableAlertText = _a.suggestionsAvailableAlertText, noResultsFoundText = _a.noResultsFoundText;\n if (!isLoading && !isSearching) {\n if (suggestions.length > 0) {\n return suggestionsAvailableAlertText || '';\n }\n if (noResultsFoundText) {\n return noResultsFoundText;\n }\n }\n return '';\n };\n _this._getMoreResults = function () {\n if (_this.props.onGetMoreResults) {\n _this.props.onGetMoreResults();\n // Reset selected action type as it will be of type SuggestionActionType.none after more results are gotten\n _this.setState({ selectedActionType: SuggestionActionType.none });\n }\n };\n _this._forceResolve = function () {\n if (_this.props.createGenericItem) {\n _this.props.createGenericItem();\n }\n };\n _this._shouldShowForceResolve = function () {\n return _this.props.showForceResolve ? _this.props.showForceResolve() : false;\n };\n _this._onClickTypedSuggestionsItem = function (item, index) {\n return function (ev) {\n _this.props.onSuggestionClick(ev, item, index);\n };\n };\n _this._refocusOnSuggestions = function (keyCode) {\n if (typeof _this.props.refocusSuggestions === 'function') {\n _this.props.refocusSuggestions(keyCode);\n }\n };\n _this._onRemoveTypedSuggestionsItem = function (item, index) {\n return function (ev) {\n var onSuggestionRemove = _this.props.onSuggestionRemove;\n onSuggestionRemove(ev, item, index);\n ev.stopPropagation();\n };\n };\n initializeComponentRef(_this);\n _this.state = {\n selectedActionType: SuggestionActionType.none,\n };\n return _this;\n }\n Suggestions.prototype.componentDidMount = function () {\n this.scrollSelected();\n this.activeSelectedElement = this._selectedElement ? this._selectedElement.current : null;\n };\n Suggestions.prototype.componentDidUpdate = function () {\n // Only scroll to selected element if the selected element has changed. Otherwise do nothing.\n // This prevents some odd behavior where scrolling the active element out of view and clicking on a selected element\n // will trigger a focus event and not give the clicked element the click.\n if (this._selectedElement.current && this.activeSelectedElement !== this._selectedElement.current) {\n this.scrollSelected();\n this.activeSelectedElement = this._selectedElement.current;\n }\n };\n Suggestions.prototype.render = function () {\n var _a, _b;\n var _this = this;\n var _c = this.props, forceResolveText = _c.forceResolveText, mostRecentlyUsedHeaderText = _c.mostRecentlyUsedHeaderText, searchForMoreIcon = _c.searchForMoreIcon, searchForMoreText = _c.searchForMoreText, className = _c.className, moreSuggestionsAvailable = _c.moreSuggestionsAvailable, noResultsFoundText = _c.noResultsFoundText, suggestions = _c.suggestions, isLoading = _c.isLoading, isSearching = _c.isSearching, loadingText = _c.loadingText, onRenderNoResultFound = _c.onRenderNoResultFound, searchingText = _c.searchingText, isMostRecentlyUsedVisible = _c.isMostRecentlyUsedVisible, resultsMaximumNumber = _c.resultsMaximumNumber, resultsFooterFull = _c.resultsFooterFull, resultsFooter = _c.resultsFooter, _d = _c.isResultsFooterVisible, isResultsFooterVisible = _d === void 0 ? true : _d, suggestionsHeaderText = _c.suggestionsHeaderText, suggestionsClassName = _c.suggestionsClassName, theme = _c.theme, styles = _c.styles, suggestionsListId = _c.suggestionsListId;\n // TODO\n // Clean this up by leaving only the first part after removing support for SASS.\n // Currently we can not remove the SASS styles from Suggestions class because it\n // might be used by consumers separately from pickers extending from BasePicker\n // and have not used the new 'styles' prop. Because it's expecting a type parameter,\n // we can not use the 'styled' function without adding some helpers which can break\n // downstream consumers who did not use the new helpers.\n // We check for 'styles' prop which is going to be injected by the 'styled' HOC\n // in BasePicker when the typed Suggestions class is ready to be rendered. If the check\n // passes we can use the CSS-in-JS styles. If the check fails (ex: custom picker),\n // then we just use the old SASS styles instead.\n this._classNames = styles\n ? getClassNames(styles, {\n theme: theme,\n className: className,\n suggestionsClassName: suggestionsClassName,\n forceResolveButtonSelected: this.state.selectedActionType === SuggestionActionType.forceResolve,\n searchForMoreButtonSelected: this.state.selectedActionType === SuggestionActionType.searchMore,\n })\n : {\n root: css('ms-Suggestions', className, legacyStyles.root),\n title: css('ms-Suggestions-title', legacyStyles.suggestionsTitle),\n searchForMoreButton: css('ms-SearchMore-button', legacyStyles.actionButton, (_a = {},\n _a['is-selected ' + legacyStyles.buttonSelected] = this.state.selectedActionType === SuggestionActionType.searchMore,\n _a)),\n forceResolveButton: css('ms-forceResolve-button', legacyStyles.actionButton, (_b = {},\n _b['is-selected ' + legacyStyles.buttonSelected] = this.state.selectedActionType === SuggestionActionType.forceResolve,\n _b)),\n suggestionsAvailable: css('ms-Suggestions-suggestionsAvailable', legacyStyles.suggestionsAvailable),\n suggestionsContainer: css('ms-Suggestions-container', legacyStyles.suggestionsContainer, suggestionsClassName),\n noSuggestions: css('ms-Suggestions-none', legacyStyles.suggestionsNone),\n };\n var spinnerStyles = this._classNames.subComponentStyles\n ? this._classNames.subComponentStyles.spinner\n : undefined;\n // TODO: cleanup after refactor of pickers to composition pattern and remove SASS support.\n var spinnerClassNameOrStyles = styles\n ? { styles: spinnerStyles }\n : {\n className: css('ms-Suggestions-spinner', legacyStyles.suggestionsSpinner),\n };\n var noResults = function () { return (\n // This ID can be used by the parent to set aria-activedescendant to this\n React.createElement(\"div\", { id: \"sug-noResultsFound\", role: \"option\" }, onRenderNoResultFound ? (onRenderNoResultFound(undefined, noResults)) : (React.createElement(\"div\", { className: _this._classNames.noSuggestions }, noResultsFoundText)))); };\n // MostRecently Used text should supercede the header text if it's there and available.\n var headerText = suggestionsHeaderText;\n if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {\n headerText = mostRecentlyUsedHeaderText;\n }\n var footerTitle = undefined;\n if (isResultsFooterVisible) {\n footerTitle = suggestions.length >= resultsMaximumNumber ? resultsFooterFull : resultsFooter;\n }\n var hasNoSuggestions = (!suggestions || !suggestions.length) && !isLoading;\n var divProps = hasNoSuggestions || isLoading ? { role: 'listbox', id: suggestionsListId } : {};\n var forceResolveId = this.state.selectedActionType === SuggestionActionType.forceResolve ? 'sug-selectedAction' : undefined;\n var searchForMoreId = this.state.selectedActionType === SuggestionActionType.searchMore ? 'sug-selectedAction' : undefined;\n return (React.createElement(\"div\", __assign({ className: this._classNames.root }, divProps),\n React.createElement(Announced, { message: this._getAlertText(), \"aria-live\": \"polite\" }),\n headerText ? React.createElement(\"div\", { className: this._classNames.title }, headerText) : null,\n forceResolveText && this._shouldShowForceResolve() && (React.createElement(CommandButton, { componentRef: this._forceResolveButton, className: this._classNames.forceResolveButton, id: forceResolveId, onClick: this._forceResolve, \"data-automationid\": 'sug-forceResolve' }, forceResolveText)),\n isLoading && React.createElement(Spinner, __assign({}, spinnerClassNameOrStyles, { label: loadingText })),\n hasNoSuggestions ? noResults() : this._renderSuggestions(),\n searchForMoreText && moreSuggestionsAvailable && (React.createElement(CommandButton, { componentRef: this._searchForMoreButton, className: this._classNames.searchForMoreButton, iconProps: searchForMoreIcon || { iconName: 'Search' }, id: searchForMoreId, onClick: this._getMoreResults, \"data-automationid\": 'sug-searchForMore' }, searchForMoreText)),\n isSearching ? React.createElement(Spinner, __assign({}, spinnerClassNameOrStyles, { label: searchingText })) : null,\n footerTitle && !moreSuggestionsAvailable && !isMostRecentlyUsedVisible && !isSearching ? (React.createElement(\"div\", { className: this._classNames.title }, footerTitle(this.props))) : null));\n };\n Suggestions.prototype.hasSuggestedAction = function () {\n return !!this._searchForMoreButton.current || !!this._forceResolveButton.current;\n };\n Suggestions.prototype.hasSuggestedActionSelected = function () {\n return this.state.selectedActionType !== SuggestionActionType.none;\n };\n Suggestions.prototype.executeSelectedAction = function () {\n switch (this.state.selectedActionType) {\n case SuggestionActionType.forceResolve:\n this._forceResolve();\n break;\n case SuggestionActionType.searchMore:\n this._getMoreResults();\n break;\n }\n };\n Suggestions.prototype.focusAboveSuggestions = function () {\n if (this._forceResolveButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.forceResolve });\n }\n else if (this._searchForMoreButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.searchMore });\n }\n };\n Suggestions.prototype.focusBelowSuggestions = function () {\n if (this._searchForMoreButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.searchMore });\n }\n else if (this._forceResolveButton.current) {\n this.setState({ selectedActionType: SuggestionActionType.forceResolve });\n }\n };\n Suggestions.prototype.focusSearchForMoreButton = function () {\n if (this._searchForMoreButton.current) {\n this._searchForMoreButton.current.focus();\n }\n };\n Suggestions.prototype.scrollSelected = function () {\n if (this._selectedElement.current &&\n this._scrollContainer.current &&\n this._scrollContainer.current.scrollTo !== undefined) {\n var _a = this._selectedElement.current, offsetHeight = _a.offsetHeight, offsetTop = _a.offsetTop;\n var _b = this._scrollContainer.current, parentOffsetHeight = _b.offsetHeight, scrollTop = _b.scrollTop;\n var isAbove = offsetTop < scrollTop;\n var isBelow = offsetTop + offsetHeight > scrollTop + parentOffsetHeight;\n if (isAbove) {\n this._scrollContainer.current.scrollTo(0, offsetTop);\n }\n else if (isBelow) {\n this._scrollContainer.current.scrollTo(0, offsetTop - parentOffsetHeight + offsetHeight);\n }\n }\n };\n Suggestions.prototype._renderSuggestions = function () {\n var _this = this;\n var _a = this.props, isMostRecentlyUsedVisible = _a.isMostRecentlyUsedVisible, mostRecentlyUsedHeaderText = _a.mostRecentlyUsedHeaderText, onRenderSuggestion = _a.onRenderSuggestion, removeSuggestionAriaLabel = _a.removeSuggestionAriaLabel, suggestionsItemClassName = _a.suggestionsItemClassName, resultsMaximumNumber = _a.resultsMaximumNumber, showRemoveButtons = _a.showRemoveButtons, suggestionsContainerAriaLabel = _a.suggestionsContainerAriaLabel, suggestionsHeaderText = _a.suggestionsHeaderText, suggestionsListId = _a.suggestionsListId, removeButtonIconProps = _a.removeButtonIconProps;\n var suggestions = this.props.suggestions;\n var StyledTypedSuggestionsItem = StyledSuggestionsItem;\n var selectedIndex = -1;\n suggestions.some(function (element, index) {\n if (element.selected) {\n selectedIndex = index;\n return true;\n }\n return false;\n });\n if (resultsMaximumNumber) {\n suggestions =\n selectedIndex >= resultsMaximumNumber\n ? suggestions.slice(selectedIndex - resultsMaximumNumber + 1, selectedIndex + 1)\n : suggestions.slice(0, resultsMaximumNumber);\n }\n if (suggestions.length === 0) {\n return null;\n }\n // MostRecently Used text should supercede the header text if it's there and available.\n var headerText = suggestionsHeaderText;\n if (isMostRecentlyUsedVisible && mostRecentlyUsedHeaderText) {\n headerText = mostRecentlyUsedHeaderText;\n }\n return (React.createElement(\"div\", { className: this._classNames.suggestionsContainer, id: suggestionsListId, ref: this._scrollContainer, role: \"listbox\", \"aria-label\": suggestionsContainerAriaLabel || headerText }, suggestions.map(function (suggestion, index) { return (React.createElement(\"div\", { ref: suggestion.selected ? _this._selectedElement : undefined, key: suggestion.item.key ? suggestion.item.key : index, role: \"presentation\" },\n React.createElement(StyledTypedSuggestionsItem, { suggestionModel: suggestion, RenderSuggestion: onRenderSuggestion, onClick: _this._onClickTypedSuggestionsItem(suggestion.item, index), className: suggestionsItemClassName, showRemoveButton: showRemoveButtons, removeButtonAriaLabel: removeSuggestionAriaLabel, onRemoveItem: _this._onRemoveTypedSuggestionsItem(suggestion.item, index), id: 'sug-' + index, removeButtonIconProps: removeButtonIconProps }))); })));\n };\n return Suggestions;\n}(React.Component));\nexport { Suggestions };\n//# sourceMappingURL=Suggestions.js.map","/**\n * {@docCategory Pickers}\n */\nvar SuggestionsController = /** @class */ (function () {\n function SuggestionsController() {\n var _this = this;\n this._isSuggestionModel = function (value) {\n return value.item !== undefined;\n };\n this._ensureSuggestionModel = function (suggestion) {\n if (_this._isSuggestionModel(suggestion)) {\n return suggestion;\n }\n else {\n return {\n item: suggestion,\n selected: false,\n ariaLabel: suggestion.name || suggestion.primaryText,\n };\n }\n };\n this.suggestions = [];\n this.currentIndex = -1;\n }\n SuggestionsController.prototype.updateSuggestions = function (newSuggestions, selectedIndex) {\n if (newSuggestions && newSuggestions.length > 0) {\n this.suggestions = this.convertSuggestionsToSuggestionItems(newSuggestions);\n this.currentIndex = selectedIndex ? selectedIndex : 0;\n if (selectedIndex === -1) {\n this.currentSuggestion = undefined;\n }\n else if (selectedIndex !== undefined) {\n this.suggestions[selectedIndex].selected = true;\n this.currentSuggestion = this.suggestions[selectedIndex];\n }\n }\n else {\n this.suggestions = [];\n this.currentIndex = -1;\n this.currentSuggestion = undefined;\n }\n };\n /**\n * Increments the suggestion index and gets the next suggestion in the list.\n */\n SuggestionsController.prototype.nextSuggestion = function () {\n if (this.suggestions && this.suggestions.length) {\n if (this.currentIndex < this.suggestions.length - 1) {\n this.setSelectedSuggestion(this.currentIndex + 1);\n return true;\n }\n else if (this.currentIndex === this.suggestions.length - 1) {\n this.setSelectedSuggestion(0);\n return true;\n }\n }\n return false;\n };\n /**\n * Decrements the suggestion index and gets the previous suggestion in the list.\n */\n SuggestionsController.prototype.previousSuggestion = function () {\n if (this.suggestions && this.suggestions.length) {\n if (this.currentIndex > 0) {\n this.setSelectedSuggestion(this.currentIndex - 1);\n return true;\n }\n else if (this.currentIndex === 0) {\n this.setSelectedSuggestion(this.suggestions.length - 1);\n return true;\n }\n }\n return false;\n };\n SuggestionsController.prototype.getSuggestions = function () {\n return this.suggestions;\n };\n SuggestionsController.prototype.getCurrentItem = function () {\n return this.currentSuggestion;\n };\n SuggestionsController.prototype.getSuggestionAtIndex = function (index) {\n return this.suggestions[index];\n };\n SuggestionsController.prototype.hasSelectedSuggestion = function () {\n return this.currentSuggestion ? true : false;\n };\n SuggestionsController.prototype.removeSuggestion = function (index) {\n this.suggestions.splice(index, 1);\n };\n SuggestionsController.prototype.createGenericSuggestion = function (itemToConvert) {\n var itemToAdd = this.convertSuggestionsToSuggestionItems([itemToConvert])[0];\n this.currentSuggestion = itemToAdd;\n };\n SuggestionsController.prototype.convertSuggestionsToSuggestionItems = function (suggestions) {\n return Array.isArray(suggestions) ? suggestions.map(this._ensureSuggestionModel) : [];\n };\n SuggestionsController.prototype.deselectAllSuggestions = function () {\n if (this.currentIndex > -1) {\n this.suggestions[this.currentIndex].selected = false;\n this.currentIndex = -1;\n }\n };\n SuggestionsController.prototype.setSelectedSuggestion = function (index) {\n if (index > this.suggestions.length - 1 || index < 0) {\n this.currentIndex = 0;\n this.currentSuggestion.selected = false;\n this.currentSuggestion = this.suggestions[0];\n this.currentSuggestion.selected = true;\n }\n else {\n if (this.currentIndex > -1) {\n this.suggestions[this.currentIndex].selected = false;\n }\n this.suggestions[index].selected = true;\n this.currentIndex = index;\n this.currentSuggestion = this.suggestions[index];\n }\n };\n return SuggestionsController;\n}());\nexport { SuggestionsController };\n//# sourceMappingURL=SuggestionsController.js.map","import { __assign } from \"tslib\";\nimport { getGlobalClassNames, getHighContrastNoAdjustStyle, HighContrastSelector, hiddenContentStyle, } from '../../../Styling';\nvar GlobalClassNames = {\n root: 'ms-Suggestions',\n suggestionsContainer: 'ms-Suggestions-container',\n title: 'ms-Suggestions-title',\n forceResolveButton: 'ms-forceResolve-button',\n searchForMoreButton: 'ms-SearchMore-button',\n spinner: 'ms-Suggestions-spinner',\n noSuggestions: 'ms-Suggestions-none',\n suggestionsAvailable: 'ms-Suggestions-suggestionsAvailable',\n isSelected: 'is-selected',\n};\nexport function getStyles(props) {\n var _a;\n var className = props.className, suggestionsClassName = props.suggestionsClassName, theme = props.theme, forceResolveButtonSelected = props.forceResolveButtonSelected, searchForMoreButtonSelected = props.searchForMoreButtonSelected;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var actionButtonStyles = {\n backgroundColor: 'transparent',\n border: 0,\n cursor: 'pointer',\n margin: 0,\n paddingLeft: 8,\n position: 'relative',\n borderTop: \"1px solid \" + palette.neutralLight,\n height: 40,\n textAlign: 'left',\n width: '100%',\n fontSize: fonts.small.fontSize,\n selectors: {\n ':hover': {\n backgroundColor: semanticColors.menuItemBackgroundPressed,\n cursor: 'pointer',\n },\n ':focus, :active': {\n backgroundColor: palette.themeLight,\n },\n '.ms-Button-icon': {\n fontSize: fonts.mediumPlus.fontSize,\n width: 25,\n },\n '.ms-Button-label': {\n margin: '0 4px 0 9px',\n },\n },\n };\n var actionButtonSelectedStyles = {\n backgroundColor: palette.themeLight,\n selectors: (_a = {},\n _a[HighContrastSelector] = __assign({ backgroundColor: 'Highlight', borderColor: 'Highlight', color: 'HighlightText' }, getHighContrastNoAdjustStyle()),\n _a),\n };\n return {\n root: [\n classNames.root,\n {\n minWidth: 260,\n },\n className,\n ],\n suggestionsContainer: [\n classNames.suggestionsContainer,\n {\n overflowY: 'auto',\n overflowX: 'hidden',\n maxHeight: 300,\n transform: 'translate3d(0,0,0)',\n },\n suggestionsClassName,\n ],\n title: [\n classNames.title,\n {\n padding: '0 12px',\n fontSize: fonts.small.fontSize,\n color: palette.themePrimary,\n lineHeight: 40,\n borderBottom: \"1px solid \" + semanticColors.menuItemBackgroundPressed,\n },\n ],\n forceResolveButton: [\n classNames.forceResolveButton,\n actionButtonStyles,\n forceResolveButtonSelected && [classNames.isSelected, actionButtonSelectedStyles],\n ],\n searchForMoreButton: [\n classNames.searchForMoreButton,\n actionButtonStyles,\n searchForMoreButtonSelected && [classNames.isSelected, actionButtonSelectedStyles],\n ],\n noSuggestions: [\n classNames.noSuggestions,\n {\n textAlign: 'center',\n color: palette.neutralSecondary,\n fontSize: fonts.small.fontSize,\n lineHeight: 30,\n },\n ],\n suggestionsAvailable: [classNames.suggestionsAvailable, hiddenContentStyle],\n subComponentStyles: {\n spinner: {\n root: [\n classNames.spinner,\n {\n margin: '5px 0',\n paddingLeft: 14,\n textAlign: 'left',\n whiteSpace: 'nowrap',\n lineHeight: 20,\n fontSize: fonts.small.fontSize,\n },\n ],\n circle: {\n display: 'inline-block',\n verticalAlign: 'middle',\n },\n label: {\n display: 'inline-block',\n verticalAlign: 'middle',\n margin: '0 10px 0 16px',\n },\n },\n },\n };\n}\n//# sourceMappingURL=Suggestions.styles.js.map","/* eslint-disable */\nimport { loadStyles } from '@microsoft/load-themed-styles';\nloadStyles([{ \"rawString\": \".pickerText_15a92175{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border:1px solid \" }, { \"theme\": \"neutralTertiary\", \"defaultValue\": \"#a19f9d\" }, { \"rawString\": \";min-width:180px;min-height:30px}.pickerText_15a92175:hover{border-color:\" }, { \"theme\": \"inputBorderHovered\", \"defaultValue\": \"#323130\" }, { \"rawString\": \"}.pickerText_15a92175.inputFocused_15a92175{position:relative;border-color:\" }, { \"theme\": \"inputFocusBorderAlt\", \"defaultValue\": \"#0078d4\" }, { \"rawString\": \"}.pickerText_15a92175.inputFocused_15a92175:after{pointer-events:none;content:'';position:absolute;left:-1px;top:-1px;bottom:-1px;right:-1px;border:2px solid \" }, { \"theme\": \"inputFocusBorderAlt\", \"defaultValue\": \"#0078d4\" }, { \"rawString\": \"}@media screen and (-ms-high-contrast:active){.pickerText_15a92175.inputDisabled_15a92175{position:relative;border-color:GrayText}.pickerText_15a92175.inputDisabled_15a92175:after{pointer-events:none;content:'';position:absolute;left:0;top:0;bottom:0;right:0;background-color:Window}}.pickerInput_15a92175{height:34px;border:none;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;outline:0;padding:0 6px 0;-ms-flex-item-align:end;align-self:flex-end}.pickerItems_15a92175{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;max-width:100%}.screenReaderOnly_15a92175{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}\" }]);\nexport var pickerText = \"pickerText_15a92175\";\nexport var inputFocused = \"inputFocused_15a92175\";\nexport var inputDisabled = \"inputDisabled_15a92175\";\nexport var pickerInput = \"pickerInput_15a92175\";\nexport var pickerItems = \"pickerItems_15a92175\";\nexport var screenReaderOnly = \"screenReaderOnly_15a92175\";\n//# sourceMappingURL=BasePicker.scss.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { Async, KeyCodes, css, elementContains, format, getId, classNamesFunction, styled, initializeComponentRef, } from '../../Utilities';\nimport { Callout } from '../../Callout';\nimport { Selection, SelectionZone, SelectionMode } from '../../utilities/selection/index';\nimport { DirectionalHint } from '../../common/DirectionalHint';\nimport { Suggestions } from './Suggestions/Suggestions';\nimport { getStyles as suggestionsStyles } from './Suggestions/Suggestions.styles';\nimport { SuggestionsController } from './Suggestions/SuggestionsController';\nimport { ValidationState } from './BasePicker.types';\nimport { Autofill } from '../Autofill/index';\nimport * as stylesImport from './BasePicker.scss';\nvar legacyStyles = stylesImport;\nvar getClassNames = classNamesFunction();\n/**\n * Should be removed once new picker without inheritance is created\n */\nfunction getStyledSuggestions(suggestionsType) {\n return styled(suggestionsType, suggestionsStyles, undefined, {\n scope: 'Suggestions',\n });\n}\n/**\n * {@docCategory Pickers}\n */\nvar BasePicker = /** @class */ (function (_super) {\n __extends(BasePicker, _super);\n function BasePicker(basePickerProps) {\n var _this = _super.call(this, basePickerProps) || this;\n // Refs\n _this.root = React.createRef();\n _this.input = React.createRef();\n _this.suggestionElement = React.createRef();\n /**\n * @deprecated this is no longer necessary as typescript now supports generic elements\n */\n _this.SuggestionOfProperType = Suggestions;\n // eslint-disable-next-line deprecation/deprecation\n _this._styledSuggestions = getStyledSuggestions(_this.SuggestionOfProperType);\n _this.dismissSuggestions = function (ev) {\n var selectItemFunction = function () {\n var addItemOnDismiss = true;\n if (_this.props.onDismiss) {\n addItemOnDismiss = _this.props.onDismiss(ev, _this.suggestionStore.currentSuggestion ? _this.suggestionStore.currentSuggestion.item : undefined);\n }\n if (!ev || (ev && !ev.defaultPrevented)) {\n // Select the first suggestion if one is available and permitted by onDismiss when user leaves.\n if (addItemOnDismiss !== false &&\n _this.canAddItems() &&\n _this.suggestionStore.hasSelectedSuggestion() &&\n _this.state.suggestedDisplayValue) {\n _this.addItemByIndex(0);\n }\n }\n };\n if (_this.currentPromise) {\n _this.currentPromise.then(function () { return selectItemFunction(); });\n }\n else {\n selectItemFunction();\n }\n _this.setState({ suggestionsVisible: false });\n };\n _this.refocusSuggestions = function (keyCode) {\n _this.resetFocus();\n if (_this.suggestionStore.suggestions && _this.suggestionStore.suggestions.length > 0) {\n if (keyCode === KeyCodes.up) {\n _this.suggestionStore.setSelectedSuggestion(_this.suggestionStore.suggestions.length - 1);\n }\n else if (keyCode === KeyCodes.down) {\n _this.suggestionStore.setSelectedSuggestion(0);\n }\n }\n };\n _this.onInputChange = function (value) {\n _this.updateValue(value);\n _this.setState({\n moreSuggestionsAvailable: true,\n isMostRecentlyUsedVisible: false,\n });\n };\n _this.onSuggestionClick = function (ev, item, index) {\n _this.addItemByIndex(index);\n };\n _this.onSuggestionRemove = function (ev, item, index) {\n if (_this.props.onRemoveSuggestion) {\n _this.props.onRemoveSuggestion(item);\n }\n _this.suggestionStore.removeSuggestion(index);\n };\n _this.onInputFocus = function (ev) {\n _this.selection.setAllSelected(false);\n // Only trigger all of the focus if this component isn't already focused.\n // For example when an item is selected or removed from the selected list it should be treated\n // as though the input is still focused.\n if (!_this.state.isFocused) {\n _this._userTriggeredSuggestions();\n if (_this.props.inputProps && _this.props.inputProps.onFocus) {\n _this.props.inputProps.onFocus(ev);\n }\n }\n };\n _this.onInputBlur = function (ev) {\n if (_this.props.inputProps && _this.props.inputProps.onBlur) {\n _this.props.inputProps.onBlur(ev);\n }\n };\n _this.onBlur = function (ev) {\n if (_this.state.isFocused) {\n // Only blur the entire component if an unrelated element gets focus.\n // Otherwise treat it as though it still has focus.\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 bluring from the whole comboBox\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 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 && !elementContains(_this.root.current, relatedTarget)) {\n _this.setState({ isFocused: false });\n if (_this.props.onBlur) {\n _this.props.onBlur(ev);\n }\n }\n }\n };\n /**\n * Reveals suggestions any time the user clicks on the input element\n * without shifting focus.\n */\n _this.onClick = function (ev) {\n if (_this.props.inputProps !== undefined && _this.props.inputProps.onClick !== undefined) {\n _this.props.inputProps.onClick(ev);\n }\n // Only primary (left) clicks show suggestions.\n if (ev.button === 0) {\n _this._userTriggeredSuggestions();\n }\n };\n _this.onFocus = function () {\n if (!_this.state.isFocused) {\n _this.setState({ isFocused: true });\n }\n };\n _this.onKeyDown = function (ev) {\n // eslint-disable-next-line deprecation/deprecation\n var keyCode = ev.which;\n switch (keyCode) {\n case KeyCodes.escape:\n if (_this.state.suggestionsVisible) {\n _this.setState({ suggestionsVisible: false });\n ev.preventDefault();\n ev.stopPropagation();\n }\n break;\n case KeyCodes.tab:\n case KeyCodes.enter:\n if (_this.suggestionElement.current && _this.suggestionElement.current.hasSuggestedActionSelected()) {\n _this.suggestionElement.current.executeSelectedAction();\n }\n else if (!ev.shiftKey && _this.suggestionStore.hasSelectedSuggestion() && _this.state.suggestionsVisible) {\n _this.completeSuggestion();\n ev.preventDefault();\n ev.stopPropagation();\n }\n else {\n _this._completeGenericSuggestion();\n }\n break;\n case KeyCodes.backspace:\n if (!_this.props.disabled) {\n _this.onBackspace(ev);\n }\n ev.stopPropagation();\n break;\n case KeyCodes.del:\n if (!_this.props.disabled) {\n if (_this.input.current &&\n ev.target === _this.input.current.inputElement &&\n _this.state.suggestionsVisible &&\n _this.suggestionStore.currentIndex !== -1) {\n if (_this.props.onRemoveSuggestion) {\n _this.props.onRemoveSuggestion(_this.suggestionStore.currentSuggestion.item);\n }\n _this.suggestionStore.removeSuggestion(_this.suggestionStore.currentIndex);\n _this.forceUpdate();\n }\n else {\n _this.onBackspace(ev);\n }\n }\n ev.stopPropagation();\n break;\n case KeyCodes.up:\n if (_this.input.current && ev.target === _this.input.current.inputElement && _this.state.suggestionsVisible) {\n if (_this.suggestionElement.current &&\n _this.suggestionElement.current.tryHandleKeyDown(keyCode, _this.suggestionStore.currentIndex)) {\n ev.preventDefault();\n ev.stopPropagation();\n _this.forceUpdate();\n }\n else {\n if (_this.suggestionElement.current &&\n _this.suggestionElement.current.hasSuggestedAction() &&\n _this.suggestionStore.currentIndex === 0) {\n ev.preventDefault();\n ev.stopPropagation();\n _this.suggestionElement.current.focusAboveSuggestions();\n _this.suggestionStore.deselectAllSuggestions();\n _this.forceUpdate();\n }\n else {\n if (_this.suggestionStore.previousSuggestion()) {\n ev.preventDefault();\n ev.stopPropagation();\n _this.onSuggestionSelect();\n }\n }\n }\n }\n break;\n case KeyCodes.down:\n if (_this.input.current && ev.target === _this.input.current.inputElement && _this.state.suggestionsVisible) {\n if (_this.suggestionElement.current &&\n _this.suggestionElement.current.tryHandleKeyDown(keyCode, _this.suggestionStore.currentIndex)) {\n ev.preventDefault();\n ev.stopPropagation();\n _this.forceUpdate();\n }\n else {\n if (_this.suggestionElement.current &&\n _this.suggestionElement.current.hasSuggestedAction() &&\n _this.suggestionStore.currentIndex + 1 === _this.suggestionStore.suggestions.length) {\n ev.preventDefault();\n ev.stopPropagation();\n _this.suggestionElement.current.focusBelowSuggestions();\n _this.suggestionStore.deselectAllSuggestions();\n _this.forceUpdate();\n }\n else {\n if (_this.suggestionStore.nextSuggestion()) {\n ev.preventDefault();\n ev.stopPropagation();\n _this.onSuggestionSelect();\n }\n }\n }\n }\n break;\n }\n };\n _this.onItemChange = function (changedItem, index) {\n var items = _this.state.items;\n if (index >= 0) {\n var newItems = items;\n newItems[index] = changedItem;\n _this._updateSelectedItems(newItems);\n }\n };\n _this.onGetMoreResults = function () {\n _this.setState({\n isSearching: true,\n }, function () {\n if (_this.props.onGetMoreResults && _this.input.current) {\n var suggestions = _this.props.onGetMoreResults(_this.input.current.value, _this.state.items);\n var suggestionsArray = suggestions;\n var suggestionsPromiseLike = suggestions;\n if (Array.isArray(suggestionsArray)) {\n _this.updateSuggestions(suggestionsArray);\n _this.setState({ isSearching: false });\n }\n else if (suggestionsPromiseLike.then) {\n suggestionsPromiseLike.then(function (newSuggestions) {\n _this.updateSuggestions(newSuggestions);\n _this.setState({ isSearching: false });\n });\n }\n }\n else {\n _this.setState({ isSearching: false });\n }\n if (_this.input.current) {\n _this.input.current.focus();\n }\n _this.setState({\n moreSuggestionsAvailable: false,\n isResultsFooterVisible: true,\n });\n });\n };\n _this.completeSelection = function (item) {\n _this.addItem(item);\n _this.updateValue('');\n if (_this.input.current) {\n _this.input.current.clear();\n }\n _this.setState({ suggestionsVisible: false });\n };\n _this.addItemByIndex = function (index) {\n _this.completeSelection(_this.suggestionStore.getSuggestionAtIndex(index).item);\n };\n _this.addItem = function (item) {\n var processedItem = _this.props.onItemSelected\n ? _this.props.onItemSelected(item)\n : item;\n if (processedItem === null) {\n return;\n }\n var processedItemObject = processedItem;\n var processedItemPromiseLike = processedItem;\n if (processedItemPromiseLike && processedItemPromiseLike.then) {\n processedItemPromiseLike.then(function (resolvedProcessedItem) {\n var newItems = _this.state.items.concat([resolvedProcessedItem]);\n _this._updateSelectedItems(newItems);\n });\n }\n else {\n var newItems = _this.state.items.concat([processedItemObject]);\n _this._updateSelectedItems(newItems);\n }\n _this.setState({ suggestedDisplayValue: '', selectionRemoved: undefined });\n };\n _this.removeItem = function (item) {\n var items = _this.state.items;\n var index = items.indexOf(item);\n if (index >= 0) {\n var newItems = items.slice(0, index).concat(items.slice(index + 1));\n _this.setState({ selectionRemoved: item });\n _this._updateSelectedItems(newItems);\n }\n };\n _this.removeItems = function (itemsToRemove) {\n var items = _this.state.items;\n var newItems = items.filter(function (item) { return itemsToRemove.indexOf(item) === -1; });\n _this._updateSelectedItems(newItems);\n };\n /**\n * @deprecated this is no longer necessary as focuszone has been removed\n */\n _this._shouldFocusZoneEnterInnerZone = function (ev) {\n // If suggestions are shown const up/down keys control them, otherwise allow them through to control the focusZone.\n if (_this.state.suggestionsVisible) {\n // eslint-disable-next-line deprecation/deprecation\n switch (ev.which) {\n case KeyCodes.up:\n case KeyCodes.down:\n return true;\n }\n }\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n return true;\n }\n return false;\n };\n _this._onResolveSuggestions = function (updatedValue) {\n var suggestions = _this.props.onResolveSuggestions(updatedValue, _this.state.items);\n if (suggestions !== null) {\n _this.updateSuggestionsList(suggestions, updatedValue);\n }\n };\n _this._completeGenericSuggestion = function () {\n if (_this.props.onValidateInput &&\n _this.input.current &&\n _this.props.onValidateInput(_this.input.current.value) !== ValidationState.invalid &&\n _this.props.createGenericItem) {\n var itemToConvert = _this.props.createGenericItem(_this.input.current.value, _this.props.onValidateInput(_this.input.current.value));\n _this.suggestionStore.createGenericSuggestion(itemToConvert);\n _this.completeSuggestion();\n }\n };\n /**\n * This should be called when the user does something other than use text entry to trigger suggestions.\n *\n */\n _this._userTriggeredSuggestions = function () {\n if (!_this.state.suggestionsVisible) {\n var input = _this.input.current ? _this.input.current.value : '';\n if (!input) {\n _this.onEmptyInputFocus();\n }\n else {\n if (_this.suggestionStore.suggestions.length === 0) {\n _this._onResolveSuggestions(input);\n }\n else {\n _this.setState({\n isMostRecentlyUsedVisible: false,\n suggestionsVisible: true,\n });\n }\n }\n }\n };\n initializeComponentRef(_this);\n _this._async = new Async(_this);\n var items = basePickerProps.selectedItems || basePickerProps.defaultSelectedItems || [];\n _this._id = getId();\n _this._ariaMap = {\n selectedItems: \"selected-items-\" + _this._id,\n selectedSuggestionAlert: \"selected-suggestion-alert-\" + _this._id,\n suggestionList: \"suggestion-list-\" + _this._id,\n combobox: \"combobox-\" + _this._id,\n };\n _this.suggestionStore = new SuggestionsController();\n _this.selection = new Selection({ onSelectionChanged: function () { return _this.onSelectionChange(); } });\n _this.selection.setItems(items);\n _this.state = {\n items: items,\n suggestedDisplayValue: '',\n isMostRecentlyUsedVisible: false,\n moreSuggestionsAvailable: false,\n isFocused: false,\n isSearching: false,\n selectedIndices: [],\n selectionRemoved: undefined,\n };\n return _this;\n }\n BasePicker.getDerivedStateFromProps = function (newProps) {\n if (newProps.selectedItems) {\n return { items: newProps.selectedItems };\n }\n return null;\n };\n Object.defineProperty(BasePicker.prototype, \"items\", {\n get: function () {\n return this.state.items;\n },\n enumerable: false,\n configurable: true\n });\n BasePicker.prototype.componentDidMount = function () {\n this.selection.setItems(this.state.items);\n this._onResolveSuggestions = this._async.debounce(this._onResolveSuggestions, this.props.resolveDelay);\n };\n BasePicker.prototype.componentDidUpdate = function (oldProps, oldState) {\n if (this.state.items && this.state.items !== oldState.items) {\n var currentSelectedIndex = this.selection.getSelectedIndices()[0];\n this.selection.setItems(this.state.items);\n if (this.state.isFocused) {\n // Reset focus and selection so that selected item stays in sync if something\n // has been removed\n if (this.state.items.length < oldState.items.length) {\n this.selection.setIndexSelected(currentSelectedIndex, false, true);\n this.resetFocus(currentSelectedIndex);\n }\n // Reset focus to last item if the input is removed\n else if (this.state.items.length > oldState.items.length && !this.canAddItems()) {\n this.resetFocus(this.state.items.length - 1);\n }\n }\n }\n };\n BasePicker.prototype.componentWillUnmount = function () {\n if (this.currentPromise) {\n this.currentPromise = undefined;\n }\n this._async.dispose();\n };\n BasePicker.prototype.focus = function () {\n if (this.input.current) {\n this.input.current.focus();\n }\n };\n BasePicker.prototype.focusInput = function () {\n if (this.input.current) {\n this.input.current.focus();\n }\n };\n BasePicker.prototype.completeSuggestion = function (forceComplete) {\n if (this.suggestionStore.hasSelectedSuggestion() && this.input.current) {\n this.completeSelection(this.suggestionStore.currentSuggestion.item);\n }\n else if (forceComplete) {\n this._completeGenericSuggestion();\n }\n };\n BasePicker.prototype.render = function () {\n var _a = this.state, suggestedDisplayValue = _a.suggestedDisplayValue, isFocused = _a.isFocused, items = _a.items;\n var _b = this.props, className = _b.className, inputProps = _b.inputProps, disabled = _b.disabled, selectionAriaLabel = _b.selectionAriaLabel, _c = _b.selectionRole, selectionRole = _c === void 0 ? 'list' : _c, theme = _b.theme, styles = _b.styles;\n var suggestionsAvailable = this.state.suggestionsVisible ? this._ariaMap.suggestionList : '';\n // TODO\n // Clean this up by leaving only the first part after removing support for SASS.\n // Currently we can not remove the SASS styles from BasePicker class because it\n // might be used by consumers who created custom pickers from extending from\n // this base class and have not used the new 'styles' prop.\n // We check for 'styles' prop which is going to be injected by the 'styled' HOC\n // for every other already existing picker variant (PeoplePicker, TagPicker)\n // so that we can use the CSS-in-JS styles. If the check fails (ex: custom picker),\n // then we just use the old SASS styles instead.\n var classNames = styles\n ? getClassNames(styles, {\n theme: theme,\n className: className,\n isFocused: isFocused,\n disabled: disabled,\n inputClassName: inputProps && inputProps.className,\n })\n : {\n root: css('ms-BasePicker', className ? className : ''),\n text: css('ms-BasePicker-text', legacyStyles.pickerText, this.state.isFocused && legacyStyles.inputFocused),\n itemsWrapper: legacyStyles.pickerItems,\n input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className),\n screenReaderText: legacyStyles.screenReaderOnly,\n };\n var comboLabel = this.props['aria-label'] || (inputProps === null || inputProps === void 0 ? void 0 : inputProps['aria-label']);\n // selectionAriaLabel is contained in a separate rather than an aria-label on the items list\n // because if the items list has an aria-label, the aria-describedby on the input will only read\n // that label instead of all the selected items. Using aria-labelledby instead fixes this, since\n // aria-describedby and aria-labelledby will not follow a second aria-labelledby\n return (React.createElement(\"div\", { ref: this.root, className: classNames.root, onKeyDown: this.onKeyDown, onFocus: this.onFocus, onBlur: this.onBlur },\n this.renderCustomAlert(classNames.screenReaderText),\n React.createElement(\"span\", { id: this._ariaMap.selectedItems + \"-label\", hidden: true }, selectionAriaLabel || comboLabel),\n React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.multiple },\n React.createElement(\"div\", { className: classNames.text, \"aria-owns\": suggestionsAvailable },\n items.length > 0 && (React.createElement(\"span\", { id: this._ariaMap.selectedItems, className: classNames.itemsWrapper, role: selectionRole, \"aria-labelledby\": this._ariaMap.selectedItems + \"-label\" }, this.renderItems())),\n this.canAddItems() && (React.createElement(Autofill, __assign({ spellCheck: false }, inputProps, { className: classNames.input, componentRef: this.input, id: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) ? inputProps.id : this._ariaMap.combobox, onClick: this.onClick, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, \"aria-activedescendant\": this.getActiveDescendant(), \"aria-controls\": suggestionsAvailable, \"aria-describedby\": items.length > 0 ? this._ariaMap.selectedItems : undefined, \"aria-expanded\": !!this.state.suggestionsVisible, \"aria-haspopup\": \"listbox\", \"aria-label\": comboLabel, role: \"combobox\", disabled: disabled, onInputChange: this.props.onInputChange }))))),\n this.renderSuggestions()));\n };\n BasePicker.prototype.canAddItems = function () {\n var items = this.state.items;\n var itemLimit = this.props.itemLimit;\n return itemLimit === undefined || items.length < itemLimit;\n };\n BasePicker.prototype.renderSuggestions = function () {\n var StyledTypedSuggestions = this._styledSuggestions;\n return this.state.suggestionsVisible && this.input ? (React.createElement(Callout, __assign({ isBeakVisible: false, gapSpace: 5, target: this.input.current ? this.input.current.inputElement : undefined, onDismiss: this.dismissSuggestions, directionalHint: DirectionalHint.bottomLeftEdge, directionalHintForRTL: DirectionalHint.bottomRightEdge }, this.props.pickerCalloutProps),\n React.createElement(StyledTypedSuggestions\n // Assumed to set in derived component's defaultProps\n , __assign({ \n // Assumed to set in derived component's defaultProps\n onRenderSuggestion: this.props.onRenderSuggestionsItem, onSuggestionClick: this.onSuggestionClick, onSuggestionRemove: this.onSuggestionRemove, suggestions: this.suggestionStore.getSuggestions(), componentRef: this.suggestionElement, onGetMoreResults: this.onGetMoreResults, moreSuggestionsAvailable: this.state.moreSuggestionsAvailable, isLoading: this.state.suggestionsLoading, isSearching: this.state.isSearching, isMostRecentlyUsedVisible: this.state.isMostRecentlyUsedVisible, isResultsFooterVisible: this.state.isResultsFooterVisible, refocusSuggestions: this.refocusSuggestions, removeSuggestionAriaLabel: this.props.removeButtonAriaLabel, suggestionsListId: this._ariaMap.suggestionList, createGenericItem: this._completeGenericSuggestion }, this.props.pickerSuggestionsProps)))) : null;\n };\n BasePicker.prototype.renderItems = function () {\n var _this = this;\n var _a = this.props, disabled = _a.disabled, removeButtonAriaLabel = _a.removeButtonAriaLabel, removeButtonIconProps = _a.removeButtonIconProps;\n var onRenderItem = this.props.onRenderItem;\n var _b = this.state, items = _b.items, selectedIndices = _b.selectedIndices;\n return items.map(function (item, index) {\n return onRenderItem({\n item: item,\n index: index,\n key: item.key ? item.key : index,\n selected: selectedIndices.indexOf(index) !== -1,\n onRemoveItem: function () { return _this.removeItem(item); },\n disabled: disabled,\n onItemChange: _this.onItemChange,\n removeButtonAriaLabel: removeButtonAriaLabel,\n removeButtonIconProps: removeButtonIconProps,\n });\n });\n };\n BasePicker.prototype.resetFocus = function (index) {\n var items = this.state.items;\n if (items.length && index >= 0) {\n var newEl = this.root.current &&\n this.root.current.querySelectorAll('[data-selection-index]')[Math.min(index, items.length - 1)];\n if (newEl) {\n newEl.focus();\n }\n }\n else if (!this.canAddItems()) {\n this.resetFocus(items.length - 1);\n }\n else {\n if (this.input.current) {\n this.input.current.focus();\n }\n }\n };\n BasePicker.prototype.onSuggestionSelect = function () {\n if (this.suggestionStore.currentSuggestion) {\n var currentValue = this.input.current ? this.input.current.value : '';\n var itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, currentValue);\n this.setState({ suggestedDisplayValue: itemValue });\n }\n };\n BasePicker.prototype.onSelectionChange = function () {\n this.setState({\n selectedIndices: this.selection.getSelectedIndices(),\n });\n };\n BasePicker.prototype.updateSuggestions = function (suggestions) {\n this.suggestionStore.updateSuggestions(suggestions, 0);\n this.forceUpdate();\n };\n /**\n * Only to be called when there is nothing in the input. Checks to see if the consumer has\n * provided a function to resolve suggestions\n */\n BasePicker.prototype.onEmptyInputFocus = function () {\n var emptyResolveSuggestions = this.props.onEmptyResolveSuggestions\n ? this.props.onEmptyResolveSuggestions\n : // eslint-disable-next-line deprecation/deprecation\n this.props.onEmptyInputFocus;\n // Only attempt to resolve suggestions if it exists\n if (emptyResolveSuggestions) {\n var suggestions = emptyResolveSuggestions(this.state.items);\n this.updateSuggestionsList(suggestions);\n this.setState({\n isMostRecentlyUsedVisible: true,\n suggestionsVisible: true,\n moreSuggestionsAvailable: false,\n });\n }\n };\n BasePicker.prototype.updateValue = function (updatedValue) {\n this._onResolveSuggestions(updatedValue);\n };\n BasePicker.prototype.updateSuggestionsList = function (suggestions, updatedValue) {\n var _this = this;\n var suggestionsArray = suggestions;\n var suggestionsPromiseLike = suggestions;\n // Check to see if the returned value is an array, if it is then just pass it into the next function .\n // If the returned value is not an array then check to see if it's a promise or PromiseLike.\n // If it is then resolve it asynchronously.\n if (Array.isArray(suggestionsArray)) {\n this._updateAndResolveValue(updatedValue, suggestionsArray);\n }\n else if (suggestionsPromiseLike && suggestionsPromiseLike.then) {\n this.setState({\n suggestionsLoading: true,\n });\n // Clear suggestions\n this.suggestionStore.updateSuggestions([]);\n if (updatedValue !== undefined) {\n this.setState({\n suggestionsVisible: this._getShowSuggestions(),\n });\n }\n else {\n this.setState({\n suggestionsVisible: this.input.current && this.input.current.inputElement === document.activeElement,\n });\n }\n // Ensure that the promise will only use the callback if it was the most recent one.\n var promise_1 = (this.currentPromise = suggestionsPromiseLike);\n promise_1.then(function (newSuggestions) {\n if (promise_1 === _this.currentPromise) {\n _this._updateAndResolveValue(updatedValue, newSuggestions);\n }\n });\n }\n };\n BasePicker.prototype.resolveNewValue = function (updatedValue, suggestions) {\n var _this = this;\n this.updateSuggestions(suggestions);\n var itemValue = undefined;\n if (this.suggestionStore.currentSuggestion) {\n itemValue = this._getTextFromItem(this.suggestionStore.currentSuggestion.item, updatedValue);\n }\n // Only set suggestionloading to false after there has been time for the new suggestions to flow\n // to the suggestions list. This is to ensure that the suggestions are available before aria-activedescendant\n // is set so that screen readers will read out the first selected option.\n this.setState({\n suggestedDisplayValue: itemValue,\n suggestionsVisible: this._getShowSuggestions(),\n }, function () { return _this.setState({ suggestionsLoading: false }); });\n };\n BasePicker.prototype.onChange = function (items) {\n if (this.props.onChange) {\n this.props.onChange(items);\n }\n };\n // This is protected because we may expect the backspace key to work differently in a different kind of picker.\n // This lets the subclass override it and provide it's own onBackspace. For an example see the BasePickerListBelow\n BasePicker.prototype.onBackspace = function (ev) {\n if ((this.state.items.length && !this.input.current) ||\n (this.input.current && !this.input.current.isValueSelected && this.input.current.cursorLocation === 0)) {\n if (this.selection.getSelectedCount() > 0) {\n this.removeItems(this.selection.getSelection());\n }\n else {\n this.removeItem(this.state.items[this.state.items.length - 1]);\n }\n }\n };\n BasePicker.prototype.getActiveDescendant = function () {\n var _a;\n if (this.state.suggestionsLoading) {\n return undefined;\n }\n var currentIndex = this.suggestionStore.currentIndex;\n if (currentIndex < 0) {\n // if the suggestions element has actions and the currentIndex does not point to a suggestion,\n // return the action id\n if ((_a = this.suggestionElement.current) === null || _a === void 0 ? void 0 : _a.hasSuggestedAction()) {\n return 'sug-selectedAction';\n }\n // If there are no suggestions and no action suggested, then return the ID for the no results found.\n if (this.suggestionStore.suggestions.length === 0) {\n return 'sug-noResultsFound';\n }\n return undefined;\n }\n else {\n return \"sug-\" + currentIndex;\n }\n };\n /** @deprecated use renderCustomAlert instead */\n BasePicker.prototype.getSuggestionsAlert = function (suggestionAlertClassName) {\n if (suggestionAlertClassName === void 0) { suggestionAlertClassName = legacyStyles.screenReaderOnly; }\n var currentIndex = this.suggestionStore.currentIndex;\n if (this.props.enableSelectedSuggestionAlert) {\n var selectedSuggestion = currentIndex > -1 ? this.suggestionStore.getSuggestionAtIndex(this.suggestionStore.currentIndex) : undefined;\n var selectedSuggestionAlertText = selectedSuggestion ? selectedSuggestion.ariaLabel : undefined;\n // keeping the id/className here for legacy support\n return (React.createElement(\"div\", { id: this._ariaMap.selectedSuggestionAlert, className: suggestionAlertClassName }, selectedSuggestionAlertText + \" \"));\n }\n };\n BasePicker.prototype.renderCustomAlert = function (alertClassName) {\n if (alertClassName === void 0) { alertClassName = legacyStyles.screenReaderOnly; }\n var _a = this.props.suggestionRemovedText, suggestionRemovedText = _a === void 0 ? 'removed {0}' : _a;\n var removedItemText = '';\n if (this.state.selectionRemoved) {\n var itemName = this._getTextFromItem(this.state.selectionRemoved, '');\n removedItemText = format(suggestionRemovedText, itemName);\n }\n return (React.createElement(\"div\", { className: alertClassName, id: this._ariaMap.selectedSuggestionAlert, \"aria-live\": \"assertive\" },\n // eslint-disable-next-line deprecation/deprecation\n this.getSuggestionsAlert(alertClassName),\n removedItemText));\n };\n /**\n * Takes in the current updated value and either resolves it with the new suggestions\n * or if updated value is undefined then it clears out currently suggested items\n */\n BasePicker.prototype._updateAndResolveValue = function (updatedValue, newSuggestions) {\n if (updatedValue !== undefined) {\n this.resolveNewValue(updatedValue, newSuggestions);\n }\n else {\n this.suggestionStore.updateSuggestions(newSuggestions, -1);\n if (this.state.suggestionsLoading) {\n this.setState({\n suggestionsLoading: false,\n });\n }\n }\n };\n /**\n * Controls what happens whenever there is an action that impacts the selected items.\n * If `selectedItems` is provided, this will act as a controlled component and it will not update its own state.\n */\n BasePicker.prototype._updateSelectedItems = function (items) {\n var _this = this;\n if (this.props.selectedItems) {\n // If the component is a controlled component then the controlling component will need to add or remove the items.\n this.onChange(items);\n }\n else {\n this.setState({ items: items }, function () {\n _this._onSelectedItemsUpdated(items);\n });\n }\n };\n BasePicker.prototype._onSelectedItemsUpdated = function (items) {\n this.onChange(items);\n };\n /**\n * Suggestions are normally shown after the user updates text and the text\n * is non-empty, but also when the user clicks on the input element.\n * @returns True if suggestions should be shown.\n */\n BasePicker.prototype._getShowSuggestions = function () {\n var areSuggestionsVisible = this.input.current !== undefined &&\n this.input.current !== null &&\n this.input.current.inputElement === document.activeElement &&\n this.input.current.value !== '';\n return areSuggestionsVisible;\n };\n BasePicker.prototype._getTextFromItem = function (item, currentValue) {\n if (this.props.getTextFromItem) {\n return this.props.getTextFromItem(item, currentValue);\n }\n else {\n return '';\n }\n };\n return BasePicker;\n}(React.Component));\nexport { BasePicker };\nvar BasePickerListBelow = /** @class */ (function (_super) {\n __extends(BasePickerListBelow, _super);\n function BasePickerListBelow() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n BasePickerListBelow.prototype.render = function () {\n var _a = this.state, suggestedDisplayValue = _a.suggestedDisplayValue, isFocused = _a.isFocused;\n var _b = this.props, className = _b.className, inputProps = _b.inputProps, disabled = _b.disabled, selectionAriaLabel = _b.selectionAriaLabel, _c = _b.selectionRole, selectionRole = _c === void 0 ? 'list' : _c, theme = _b.theme, styles = _b.styles;\n var suggestionsAvailable = this.state.suggestionsVisible ? this._ariaMap.suggestionList : '';\n // TODO\n // Clean this up by leaving only the first part after removing support for SASS.\n // Currently we can not remove the SASS styles from BasePicker class because it\n // might be used by consumers who created custom pickers from extending from\n // this base class and have not used the new 'styles' prop.\n // We check for 'styles' prop which is going to be injected by the 'styled' HOC\n // for every other already existing picker variant (PeoplePicker, TagPicker)\n // so that we can use the CSS-in-JS styles. If the check fails (ex: custom picker),\n // then we just use the old SASS styles instead.\n var classNames = styles\n ? getClassNames(styles, {\n theme: theme,\n className: className,\n isFocused: isFocused,\n inputClassName: inputProps && inputProps.className,\n })\n : {\n root: css('ms-BasePicker', className ? className : ''),\n text: css('ms-BasePicker-text', legacyStyles.pickerText, this.state.isFocused && legacyStyles.inputFocused, disabled && legacyStyles.inputDisabled),\n itemsWrapper: legacyStyles.pickerItems,\n input: css('ms-BasePicker-input', legacyStyles.pickerInput, inputProps && inputProps.className),\n screenReaderText: legacyStyles.screenReaderOnly,\n };\n var comboLabel = this.props['aria-label'] || (inputProps === null || inputProps === void 0 ? void 0 : inputProps['aria-label']);\n return (React.createElement(\"div\", { ref: this.root, onBlur: this.onBlur, onFocus: this.onFocus },\n React.createElement(\"div\", { className: classNames.root, onKeyDown: this.onKeyDown },\n this.renderCustomAlert(classNames.screenReaderText),\n React.createElement(\"div\", { className: classNames.text, \"aria-owns\": suggestionsAvailable || undefined },\n React.createElement(Autofill, __assign({}, inputProps, { className: classNames.input, componentRef: this.input, onFocus: this.onInputFocus, onBlur: this.onInputBlur, onClick: this.onClick, onInputValueChange: this.onInputChange, suggestedDisplayValue: suggestedDisplayValue, \"aria-activedescendant\": this.getActiveDescendant(), \"aria-controls\": suggestionsAvailable || undefined, \"aria-expanded\": !!this.state.suggestionsVisible, \"aria-haspopup\": \"listbox\", \"aria-label\": comboLabel, role: \"combobox\", id: (inputProps === null || inputProps === void 0 ? void 0 : inputProps.id) ? inputProps.id : this._ariaMap.combobox, disabled: disabled, onInputChange: this.props.onInputChange })))),\n this.renderSuggestions(),\n React.createElement(SelectionZone, { selection: this.selection, selectionMode: SelectionMode.single },\n React.createElement(\"div\", { id: this._ariaMap.selectedItems, className: \"ms-BasePicker-selectedItems\" // just a className hook without any styles applied to it.\n , role: selectionRole, \"aria-label\": selectionAriaLabel || comboLabel }, this.renderItems()))));\n };\n BasePickerListBelow.prototype.onBackspace = function (ev) {\n // override the existing backspace method to not do anything because the list items appear below.\n };\n return BasePickerListBelow;\n}(BasePicker));\nexport { BasePickerListBelow };\n//# sourceMappingURL=BasePicker.js.map","import { __assign } from \"tslib\";\nimport { getGlobalClassNames, getFocusStyle, HighContrastSelector, getHighContrastNoAdjustStyle, } from '../../../../Styling';\nimport { ButtonGlobalClassNames } from '../../../Button/BaseButton.classNames';\nvar GlobalClassNames = {\n root: 'ms-PickerPersona-container',\n itemContent: 'ms-PickerItem-content',\n removeButton: 'ms-PickerItem-removeButton',\n isSelected: 'is-selected',\n isInvalid: 'is-invalid',\n};\nvar REMOVE_BUTTON_SIZE = 24;\nexport function getStyles(props) {\n var _a, _b, _c, _d, _e, _f, _g;\n var className = props.className, theme = props.theme, selected = props.selected, invalid = props.invalid, disabled = props.disabled;\n var palette = theme.palette, semanticColors = theme.semanticColors, fonts = theme.fonts;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var personaPrimaryTextStyles = [\n selected &&\n !invalid &&\n !disabled && {\n color: palette.white,\n selectors: (_a = {\n ':hover': {\n color: palette.white,\n }\n },\n _a[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _a),\n },\n ((invalid && !selected) || (invalid && selected && disabled)) && {\n color: palette.redDark,\n borderBottom: \"2px dotted \" + palette.redDark,\n selectors: (_b = {},\n _b[\".\" + classNames.root + \":hover &\"] = {\n // override Persona root:hover selector\n color: palette.redDark,\n },\n _b),\n },\n invalid &&\n selected &&\n !disabled && {\n color: palette.white,\n borderBottom: \"2px dotted \" + palette.white,\n },\n disabled && {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n },\n ];\n var personaCoinInitialsStyles = [\n invalid && {\n fontSize: fonts.xLarge.fontSize,\n },\n ];\n return {\n root: [\n classNames.root,\n getFocusStyle(theme, { inset: -2 }),\n {\n borderRadius: 15,\n display: 'inline-flex',\n alignItems: 'center',\n background: palette.neutralLighter,\n margin: '1px 2px',\n cursor: 'default',\n userSelect: 'none',\n maxWidth: 300,\n verticalAlign: 'middle',\n minWidth: 0,\n selectors: (_d = {\n ':hover': {\n background: !selected && !disabled ? palette.neutralLight : '',\n }\n },\n _d[HighContrastSelector] = [{ border: '1px solid WindowText' }, disabled && { borderColor: 'GrayText' }],\n _d),\n },\n selected &&\n !disabled && [\n classNames.isSelected,\n {\n background: palette.themePrimary,\n selectors: (_e = {},\n _e[HighContrastSelector] = __assign({ borderColor: 'HighLight', background: 'Highlight' }, getHighContrastNoAdjustStyle()),\n _e),\n },\n ],\n invalid && [classNames.isInvalid],\n invalid &&\n selected &&\n !disabled && {\n background: palette.redDark,\n },\n className,\n ],\n itemContent: [\n classNames.itemContent,\n {\n flex: '0 1 auto',\n minWidth: 0,\n // CSS below is needed for IE 11 to properly truncate long persona names in the picker\n // and to clip the presence indicator (in all browsers)\n maxWidth: '100%',\n overflow: 'hidden',\n },\n ],\n removeButton: [\n classNames.removeButton,\n {\n borderRadius: 15,\n color: palette.neutralPrimary,\n flex: '0 0 auto',\n width: REMOVE_BUTTON_SIZE,\n height: REMOVE_BUTTON_SIZE,\n selectors: {\n ':hover': {\n background: palette.neutralTertiaryAlt,\n color: palette.neutralDark,\n },\n },\n },\n selected && [\n {\n color: palette.white,\n selectors: (_f = {\n ':hover': {\n color: palette.white,\n background: palette.themeDark,\n },\n ':active': {\n color: palette.white,\n background: palette.themeDarker,\n }\n },\n _f[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _f),\n },\n invalid && {\n selectors: {\n ':hover': {\n background: palette.red,\n },\n ':active': {\n background: palette.redDark,\n },\n },\n },\n ],\n disabled && {\n selectors: (_g = {},\n _g[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: semanticColors.buttonText,\n },\n _g),\n },\n ],\n subComponentStyles: {\n persona: {\n primaryText: personaPrimaryTextStyles,\n },\n personaCoin: {\n initials: personaCoinInitialsStyles,\n },\n },\n };\n}\n//# sourceMappingURL=PeoplePickerItem.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { getId, classNamesFunction, styled } from '../../../../Utilities';\nimport { Persona, PersonaSize } from '../../../../Persona';\nimport { IconButton } from '../../../../Button';\nimport { ValidationState } from '../../BasePicker.types';\nimport { getStyles } from './PeoplePickerItem.styles';\nvar getClassNames = classNamesFunction();\nexport var PeoplePickerItemBase = function (props) {\n var item = props.item, onRemoveItem = props.onRemoveItem, index = props.index, selected = props.selected, removeButtonAriaLabel = props.removeButtonAriaLabel, styles = props.styles, theme = props.theme, className = props.className, disabled = props.disabled, removeButtonIconProps = props.removeButtonIconProps;\n var itemId = getId();\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n selected: selected,\n disabled: disabled,\n invalid: item.ValidationState === ValidationState.warning,\n });\n var personaStyles = classNames.subComponentStyles\n ? classNames.subComponentStyles.persona\n : undefined;\n var personaCoinStyles = classNames.subComponentStyles\n ? classNames.subComponentStyles.personaCoin\n : undefined;\n return (React.createElement(\"div\", { className: classNames.root, role: 'listitem' },\n React.createElement(\"div\", { className: classNames.itemContent, id: 'selectedItemPersona-' + itemId },\n React.createElement(Persona, __assign({ size: PersonaSize.size24, styles: personaStyles, coinProps: { styles: personaCoinStyles } }, item))),\n React.createElement(IconButton, { id: itemId, onClick: onRemoveItem, disabled: disabled, iconProps: removeButtonIconProps !== null && removeButtonIconProps !== void 0 ? removeButtonIconProps : { iconName: 'Cancel' }, styles: { icon: { fontSize: '12px' } }, className: classNames.removeButton, ariaLabel: removeButtonAriaLabel, \"aria-labelledby\": itemId + \" selectedItemPersona-\" + itemId, \"data-selection-index\": index })));\n};\nexport var PeoplePickerItem = styled(PeoplePickerItemBase, getStyles, undefined, { scope: 'PeoplePickerItem' });\n//# sourceMappingURL=PeoplePickerItem.js.map","import { getGlobalClassNames, HighContrastSelector } from '../../../../Styling';\nimport { SuggestionsItemGlobalClassNames as suggested } from '../../Suggestions/SuggestionsItem.styles';\nvar GlobalClassNames = {\n root: 'ms-PeoplePicker-personaContent',\n personaWrapper: 'ms-PeoplePicker-Persona',\n};\nexport function getStyles(props) {\n var _a, _b, _c;\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n var textSelectorsStyles = {\n selectors: (_a = {},\n _a[\".\" + suggested.isSuggested + \" &\"] = {\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _b),\n },\n _a[\".\" + classNames.root + \":hover &\"] = {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'HighlightText',\n },\n _c),\n },\n _a),\n };\n return {\n root: [\n classNames.root,\n {\n width: '100%',\n padding: '4px 12px',\n },\n className,\n ],\n personaWrapper: [\n classNames.personaWrapper,\n {\n width: 180,\n },\n ],\n subComponentStyles: {\n persona: {\n primaryText: textSelectorsStyles,\n secondaryText: textSelectorsStyles,\n },\n },\n };\n}\n//# sourceMappingURL=PeoplePickerItemSuggestion.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { classNamesFunction, styled } from '../../../../Utilities';\nimport { Persona, PersonaSize } from '../../../../Persona';\nimport { getStyles } from './PeoplePickerItemSuggestion.styles';\nvar getClassNames = classNamesFunction();\nexport var PeoplePickerItemSuggestionBase = function (props) {\n var personaProps = props.personaProps, suggestionsProps = props.suggestionsProps, compact = props.compact, styles = props.styles, theme = props.theme, className = props.className;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: (suggestionsProps && suggestionsProps.suggestionsItemClassName) || className,\n });\n var personaStyles = classNames.subComponentStyles && classNames.subComponentStyles.persona\n ? classNames.subComponentStyles.persona\n : undefined;\n return (React.createElement(\"div\", { className: classNames.root },\n React.createElement(Persona, __assign({ size: PersonaSize.size24, styles: personaStyles, className: classNames.personaWrapper, showSecondaryText: !compact, showOverflowTooltip: false }, personaProps))));\n};\nexport var PeoplePickerItemSuggestion = styled(PeoplePickerItemSuggestionBase, getStyles, undefined, { scope: 'PeoplePickerItemSuggestion' });\n//# sourceMappingURL=PeoplePickerItemSuggestion.js.map","import { getGlobalClassNames, getInputFocusStyle, getPlaceholderStyles, hiddenContentStyle, HighContrastSelector, } from '../../Styling';\nvar GlobalClassNames = {\n root: 'ms-BasePicker',\n text: 'ms-BasePicker-text',\n itemsWrapper: 'ms-BasePicker-itemsWrapper',\n input: 'ms-BasePicker-input',\n};\nexport function getStyles(props) {\n var _a, _b, _c;\n var className = props.className, theme = props.theme, isFocused = props.isFocused, inputClassName = props.inputClassName, disabled = props.disabled;\n if (!theme) {\n throw new Error('theme is undefined or null in base BasePicker getStyles function.');\n }\n var semanticColors = theme.semanticColors, effects = theme.effects, fonts = theme.fonts;\n var inputBorder = semanticColors.inputBorder, inputBorderHovered = semanticColors.inputBorderHovered, inputFocusBorderAlt = semanticColors.inputFocusBorderAlt;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n // placeholder style constants\n var placeholderStyles = [\n fonts.medium,\n {\n color: semanticColors.inputPlaceholderText,\n opacity: 1,\n selectors: (_a = {},\n _a[HighContrastSelector] = {\n color: 'GrayText',\n },\n _a),\n },\n ];\n var disabledPlaceholderStyles = {\n color: semanticColors.disabledText,\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n color: 'GrayText',\n },\n _b),\n };\n // The following lines are to create a semi-transparent color overlay for the disabled state with designer's approval.\n // @todo: investigate the performance cost of the calculation below and apply if negligible.\n // Replacing with a static color for now.\n // const rgbColor: IRGB | undefined = cssColor(palette.neutralQuaternaryAlt);\n // const disabledOverlayColor = rgbColor ? `rgba(${rgbColor.r}, ${rgbColor.g}, ${rgbColor.b}, 0.29)` : 'transparent';\n var disabledOverlayColor = 'rgba(218, 218, 218, 0.29)';\n return {\n root: [classNames.root, className],\n text: [\n classNames.text,\n {\n display: 'flex',\n position: 'relative',\n flexWrap: 'wrap',\n alignItems: 'center',\n boxSizing: 'border-box',\n minWidth: 180,\n minHeight: 30,\n border: \"1px solid \" + inputBorder,\n borderRadius: effects.roundedCorner2,\n },\n !isFocused &&\n !disabled && {\n selectors: {\n ':hover': {\n borderColor: inputBorderHovered,\n },\n },\n },\n isFocused && !disabled && getInputFocusStyle(inputFocusBorderAlt, effects.roundedCorner2),\n disabled && {\n borderColor: disabledOverlayColor,\n selectors: (_c = {\n ':after': {\n content: '\"\"',\n position: 'absolute',\n top: 0,\n right: 0,\n bottom: 0,\n left: 0,\n background: disabledOverlayColor,\n }\n },\n _c[HighContrastSelector] = {\n borderColor: 'GrayText',\n selectors: {\n ':after': {\n background: 'none',\n },\n },\n },\n _c),\n },\n ],\n itemsWrapper: [\n classNames.itemsWrapper,\n {\n display: 'flex',\n flexWrap: 'wrap',\n maxWidth: '100%',\n },\n ],\n input: [\n classNames.input,\n fonts.medium,\n {\n height: 30,\n border: 'none',\n flexGrow: 1,\n outline: 'none',\n padding: '0 6px 0',\n alignSelf: 'flex-end',\n borderRadius: effects.roundedCorner2,\n backgroundColor: 'transparent',\n color: semanticColors.inputText,\n selectors: {\n '::-ms-clear': {\n display: 'none',\n },\n },\n },\n getPlaceholderStyles(placeholderStyles),\n disabled && getPlaceholderStyles(disabledPlaceholderStyles),\n inputClassName,\n ],\n screenReaderText: hiddenContentStyle,\n };\n}\n//# sourceMappingURL=BasePicker.styles.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getRTL, getInitials, styled } from '../../../Utilities';\nimport { BasePicker, BasePickerListBelow } from '../BasePicker';\nimport { ValidationState } from '../BasePicker.types';\nimport { PeoplePickerItem } from './PeoplePickerItems/PeoplePickerItem';\nimport { PeoplePickerItemSuggestion } from './PeoplePickerItems/PeoplePickerItemSuggestion';\nimport { getStyles } from '../BasePicker.styles';\n/**\n * {@docCategory PeoplePicker}\n */\nvar BasePeoplePicker = /** @class */ (function (_super) {\n __extends(BasePeoplePicker, _super);\n function BasePeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return BasePeoplePicker;\n}(BasePicker));\nexport { BasePeoplePicker };\n/**\n * {@docCategory PeoplePicker}\n */\nvar MemberListPeoplePicker = /** @class */ (function (_super) {\n __extends(MemberListPeoplePicker, _super);\n function MemberListPeoplePicker() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n return MemberListPeoplePicker;\n}(BasePickerListBelow));\nexport { MemberListPeoplePicker };\n/**\n * Standard People Picker.\n * {@docCategory PeoplePicker}\n */\nvar NormalPeoplePickerBase = /** @class */ (function (_super) {\n __extends(NormalPeoplePickerBase, _super);\n function NormalPeoplePickerBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /** Default props for NormalPeoplePicker. */\n NormalPeoplePickerBase.defaultProps = {\n onRenderItem: function (props) { return React.createElement(PeoplePickerItem, __assign({}, props)); },\n onRenderSuggestionsItem: function (personaProps, suggestionsProps) { return (React.createElement(PeoplePickerItemSuggestion, { personaProps: personaProps, suggestionsProps: suggestionsProps })); },\n createGenericItem: createGenericItem,\n };\n return NormalPeoplePickerBase;\n}(BasePeoplePicker));\nexport { NormalPeoplePickerBase };\n/**\n * Compact layout. It uses personas without secondary text when displaying search results.\n * {@docCategory PeoplePicker}\n */\nvar CompactPeoplePickerBase = /** @class */ (function (_super) {\n __extends(CompactPeoplePickerBase, _super);\n function CompactPeoplePickerBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /** Default props for CompactPeoplePicker. */\n CompactPeoplePickerBase.defaultProps = {\n onRenderItem: function (props) { return React.createElement(PeoplePickerItem, __assign({}, props)); },\n onRenderSuggestionsItem: function (personaProps, suggestionsProps) { return (React.createElement(PeoplePickerItemSuggestion, { personaProps: personaProps, suggestionsProps: suggestionsProps, compact: true })); },\n createGenericItem: createGenericItem,\n };\n return CompactPeoplePickerBase;\n}(BasePeoplePicker));\nexport { CompactPeoplePickerBase };\n/**\n * MemberList layout. The selected people show up below the search box.\n * {@docCategory PeoplePicker}\n */\nvar ListPeoplePickerBase = /** @class */ (function (_super) {\n __extends(ListPeoplePickerBase, _super);\n function ListPeoplePickerBase() {\n return _super !== null && _super.apply(this, arguments) || this;\n }\n /** Default props for ListPeoplePicker. */\n ListPeoplePickerBase.defaultProps = {\n onRenderItem: function (props) { return React.createElement(PeoplePickerItem, __assign({}, props)); },\n onRenderSuggestionsItem: function (personaProps, suggestionsProps) { return (React.createElement(PeoplePickerItemSuggestion, { personaProps: personaProps, suggestionsProps: suggestionsProps })); },\n createGenericItem: createGenericItem,\n };\n return ListPeoplePickerBase;\n}(MemberListPeoplePicker));\nexport { ListPeoplePickerBase };\n/**\n * {@docCategory PeoplePicker}\n */\nexport function createGenericItem(name, currentValidationState) {\n var personaToConvert = {\n key: name,\n primaryText: name,\n imageInitials: '!',\n ValidationState: currentValidationState,\n };\n if (currentValidationState !== ValidationState.warning) {\n personaToConvert.imageInitials = getInitials(name, getRTL());\n }\n return personaToConvert;\n}\nexport var NormalPeoplePicker = styled(NormalPeoplePickerBase, getStyles, undefined, {\n scope: 'NormalPeoplePicker',\n});\nexport var CompactPeoplePicker = styled(CompactPeoplePickerBase, getStyles, undefined, {\n scope: 'CompactPeoplePicker',\n});\nexport var ListPeoplePicker = styled(ListPeoplePickerBase, getStyles, undefined, {\n scope: 'ListPeoplePickerBase',\n});\n//# sourceMappingURL=PeoplePicker.js.map","import { getGlobalClassNames, getFocusStyle, HighContrastSelector } from '../../../Styling';\nimport { ButtonGlobalClassNames } from '../../Button/BaseButton.classNames';\nimport { getRTL } from '../../../Utilities';\nvar GlobalClassNames = {\n root: 'ms-TagItem',\n text: 'ms-TagItem-text',\n close: 'ms-TagItem-close',\n isSelected: 'is-selected',\n};\nvar TAG_HEIGHT = 26;\nexport function getStyles(props) {\n var _a, _b, _c, _d;\n var className = props.className, theme = props.theme, selected = props.selected, disabled = props.disabled;\n var palette = theme.palette, effects = theme.effects, fonts = theme.fonts, semanticColors = theme.semanticColors;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n root: [\n classNames.root,\n fonts.medium,\n getFocusStyle(theme),\n {\n boxSizing: 'content-box',\n flexShrink: '1',\n margin: 2,\n height: TAG_HEIGHT,\n lineHeight: TAG_HEIGHT,\n cursor: 'default',\n userSelect: 'none',\n display: 'flex',\n flexWrap: 'nowrap',\n maxWidth: 300,\n minWidth: 0,\n borderRadius: effects.roundedCorner2,\n color: semanticColors.inputText,\n background: palette.neutralLighter,\n selectors: (_a = {\n ':hover': [\n !disabled &&\n !selected && {\n color: palette.neutralDark,\n background: palette.neutralLight,\n selectors: {\n '.ms-TagItem-close': {\n color: palette.neutralPrimary,\n },\n },\n },\n disabled && { background: palette.neutralLighter },\n ],\n ':focus-within': [\n !disabled && {\n background: palette.themePrimary,\n color: palette.white,\n },\n ]\n },\n _a[HighContrastSelector] = {\n border: \"1px solid \" + (!selected ? 'WindowText' : 'WindowFrame'),\n },\n _a),\n },\n disabled && {\n selectors: (_b = {},\n _b[HighContrastSelector] = {\n borderColor: 'GrayText',\n },\n _b),\n },\n selected && !disabled && [classNames.isSelected],\n className,\n ],\n text: [\n classNames.text,\n {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n whiteSpace: 'nowrap',\n minWidth: 30,\n margin: '0 8px',\n },\n disabled && {\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n color: 'GrayText',\n },\n _c),\n },\n ],\n close: [\n classNames.close,\n {\n color: palette.neutralSecondary,\n width: 30,\n height: '100%',\n flex: '0 0 auto',\n borderRadius: getRTL(theme)\n ? effects.roundedCorner2 + \" 0 0 \" + effects.roundedCorner2\n : \"0 \" + effects.roundedCorner2 + \" \" + effects.roundedCorner2 + \" 0\",\n selectors: {\n ':hover': {\n background: palette.neutralQuaternaryAlt,\n color: palette.neutralPrimary,\n },\n ':focus': {\n color: palette.white,\n background: palette.themePrimary,\n },\n ':focus:hover': {\n color: palette.white,\n background: palette.themeDark,\n },\n ':active': {\n color: palette.white,\n backgroundColor: palette.themeDark,\n },\n },\n },\n disabled && {\n selectors: (_d = {},\n _d[\".\" + ButtonGlobalClassNames.msButtonIcon] = {\n color: palette.neutralSecondary,\n },\n _d),\n },\n ],\n };\n}\n//# sourceMappingURL=TagItem.styles.js.map","import { __assign } from \"tslib\";\nimport * as React from 'react';\nimport { styled, classNamesFunction } from '../../../Utilities';\nimport { IconButton } from '../../../Button';\nimport { getStyles } from './TagItem.styles';\nimport { useId } from '@fluentui/react-hooks';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory TagPicker}\n */\nexport var TagItemBase = function (props) {\n var theme = props.theme, styles = props.styles, selected = props.selected, disabled = props.disabled, enableTagFocusInDisabledPicker = props.enableTagFocusInDisabledPicker, children = props.children, className = props.className, index = props.index, onRemoveItem = props.onRemoveItem, removeButtonAriaLabel = props.removeButtonAriaLabel, _a = props.title, title = _a === void 0 ? typeof props.children === 'string' ? props.children : props.item.name : _a, removeButtonIconProps = props.removeButtonIconProps;\n var classNames = getClassNames(styles, {\n theme: theme,\n className: className,\n selected: selected,\n disabled: disabled,\n });\n var itemId = useId();\n var disabledAttrs = enableTagFocusInDisabledPicker\n ? {\n 'aria-disabled': disabled,\n tabindex: 0,\n }\n : {\n disabled: disabled,\n };\n return (React.createElement(\"div\", { className: classNames.root, role: 'listitem', key: index },\n React.createElement(\"span\", { className: classNames.text, title: title, id: itemId + \"-text\" }, children),\n React.createElement(IconButton, __assign({ id: itemId, onClick: onRemoveItem }, disabledAttrs, { iconProps: removeButtonIconProps !== null && removeButtonIconProps !== void 0 ? removeButtonIconProps : { iconName: 'Cancel' }, styles: { icon: { fontSize: '12px' } }, className: classNames.close, ariaLabel: removeButtonAriaLabel, \"aria-labelledby\": itemId + \" \" + itemId + \"-text\", \"data-selection-index\": index }))));\n};\nexport var TagItem = styled(TagItemBase, getStyles, undefined, {\n scope: 'TagItem',\n});\n//# sourceMappingURL=TagItem.js.map","import { getGlobalClassNames } from '../../../Styling';\nvar GlobalClassNames = {\n suggestionTextOverflow: 'ms-TagItem-TextOverflow',\n};\nexport function getStyles(props) {\n var className = props.className, theme = props.theme;\n var classNames = getGlobalClassNames(GlobalClassNames, theme);\n return {\n suggestionTextOverflow: [\n classNames.suggestionTextOverflow,\n {\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n maxWidth: '60vw',\n padding: '6px 12px 7px',\n whiteSpace: 'nowrap',\n },\n className,\n ],\n };\n}\n//# sourceMappingURL=TagItemSuggestion.styles.js.map","import * as React from 'react';\nimport { classNamesFunction, styled } from '../../../Utilities';\nimport { getStyles } from './TagItemSuggestion.styles';\nvar getClassNames = classNamesFunction();\n/**\n * {@docCategory TagPicker}\n */\nexport var TagItemSuggestionBase = function (props) {\n var styles = props.styles, theme = props.theme, children = props.children;\n var classNames = getClassNames(styles, {\n theme: theme,\n });\n return React.createElement(\"div\", { className: classNames.suggestionTextOverflow },\n \" \",\n children,\n \" \");\n};\nexport var TagItemSuggestion = styled(TagItemSuggestionBase, getStyles, undefined, { scope: 'TagItemSuggestion' });\n//# sourceMappingURL=TagItemSuggestion.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { styled, initializeComponentRef } from '../../../Utilities';\nimport { BasePicker } from '../BasePicker';\nimport { getStyles } from '../BasePicker.styles';\nimport { TagItem } from './TagItem';\nimport { TagItemSuggestion } from './TagItemSuggestion';\n/**\n * {@docCategory TagPicker}\n */\nvar TagPickerBase = /** @class */ (function (_super) {\n __extends(TagPickerBase, _super);\n function TagPickerBase(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n return _this;\n }\n TagPickerBase.defaultProps = {\n onRenderItem: function (props) { return React.createElement(TagItem, __assign({}, props), props.item.name); },\n onRenderSuggestionsItem: function (props) { return React.createElement(TagItemSuggestion, null, props.name); },\n };\n return TagPickerBase;\n}(BasePicker));\nexport { TagPickerBase };\nexport var TagPicker = styled(TagPickerBase, getStyles, undefined, {\n scope: 'TagPicker',\n});\n//# sourceMappingURL=TagPicker.js.map","import * as React from 'react';\n/**\n * Creates a ref, and calls a callback whenever the ref changes to a non-null value. The callback can optionally return\n * a cleanup function that'll be called before the value changes, and when the ref is unmounted.\n *\n * This can be used to work around a limitation that useEffect cannot depend on `ref.current` (see\n * https://github.com/facebook/react/issues/14387#issuecomment-503616820).\n *\n * Usage example:\n * ```ts\n * const myRef = useRefEffect(element => {\n * ...\n * return () => { ... cleanup ... };\n * });\n * ```\n * ```jsx\n * \n * ```\n *\n * @param callback - Called whenever the ref's value changes to non-null. Can optionally return a cleanup function.\n * @param initial - (Optional) The initial value for the ref.\n *\n * @returns A function that should be called to set the ref's value. The object also has a `.current` member that can be\n * used to access the ref's value (like a normal RefObject). It can be hooked up to an element's `ref` property.\n */\nexport function useRefEffect(callback, initial) {\n if (initial === void 0) { initial = null; }\n var createRefCallback = function () {\n var refCallback = function (value) {\n if (data.ref.current !== value) {\n if (data.cleanup) {\n data.cleanup();\n data.cleanup = undefined;\n }\n data.ref.current = value;\n if (value !== null) {\n data.cleanup = data.callback(value);\n }\n }\n };\n refCallback.current = initial;\n return refCallback;\n };\n var data = React.useRef({\n ref: createRefCallback(),\n callback: callback,\n }).current;\n data.callback = callback;\n return data.ref;\n}\n//# sourceMappingURL=useRefEffect.js.map","import { getWindow } from '@fluentui/utilities';\n/**\n * Wrapper for ResizeObserver, with fallback for browsers that don't support ResizeObserver.\n *\n * Calls the onResize callback once layout is complete, and again whenever any of the target(s) change size.\n * Or if ResizeObserver isn't supported, calls the callback whenever the window changes size.\n *\n * @param target - Either a single element, or array of elements to watch for size changes.\n * @param onResize - Callback to be notified when layout is complete, and when the target(s) change size.\n * If this browser supports ResizeObserver, the callback will be passed the ResizeObserverEntry[] array.\n * Otherwise, the entries array will be undefined, and you'll need to find another way to get the element's size,\n * (e.g. clientWidth/clientHeight or getBoundingClientRect).\n *\n * @returns A function to clean up the observer/listener.\n */\nexport var observeResize = function (target, onResize) {\n if (typeof ResizeObserver !== 'undefined') {\n var observer_1 = new ResizeObserver(onResize);\n if (Array.isArray(target)) {\n target.forEach(function (t) { return observer_1.observe(t); });\n }\n else {\n observer_1.observe(target);\n }\n return function () { return observer_1.disconnect(); };\n }\n else {\n // Fallback for browsers that don't support ResizeObserver\n var onResizeWrapper_1 = function () { return onResize(undefined); };\n var win_1 = getWindow(Array.isArray(target) ? target[0] : target);\n if (!win_1) {\n // Can't listen for resize if we can't get the window object\n return function () {\n // Nothing to clean up\n };\n }\n // Listen for the first animation frame, which will happen after layout is complete\n var animationFrameId_1 = win_1.requestAnimationFrame(onResizeWrapper_1);\n win_1.addEventListener('resize', onResizeWrapper_1, false);\n return function () {\n win_1.cancelAnimationFrame(animationFrameId_1);\n win_1.removeEventListener('resize', onResizeWrapper_1, false);\n };\n }\n};\n//# sourceMappingURL=observeResize.js.map","import { __assign, __extends } from \"tslib\";\nimport * as React from 'react';\nimport { getNativeProps, divProperties, initializeComponentRef, warnDeprecations } from '@fluentui/utilities';\nvar COMPONENT_NAME = 'PivotItem';\nvar PivotItem = /** @class */ (function (_super) {\n __extends(PivotItem, _super);\n function PivotItem(props) {\n var _this = _super.call(this, props) || this;\n initializeComponentRef(_this);\n warnDeprecations(COMPONENT_NAME, props, {\n linkText: 'headerText',\n });\n return _this;\n }\n PivotItem.prototype.render = function () {\n return React.createElement(\"div\", __assign({}, getNativeProps(this.props, divProperties)), this.props.children);\n };\n return PivotItem;\n}(React.Component));\nexport { PivotItem };\n//# sourceMappingURL=PivotItem.js.map","import { __assign, __rest } from \"tslib\";\nimport * as React from 'react';\nimport { useControllableValue, useId } from '@fluentui/react-hooks';\nimport { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';\nimport { CommandButton } from '../../Button';\nimport { useOverflow } from '../../utilities/useOverflow';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { DirectionalHint } from '../ContextualMenu/ContextualMenu.types';\nimport { Icon } from '../Icon/Icon';\nimport { PivotItem } from './PivotItem';\nvar getClassNames = classNamesFunction();\nvar COMPONENT_NAME = 'Pivot';\nvar getTabId = function (props, pivotId, itemKey, index) {\n if (props.getTabId) {\n return props.getTabId(itemKey, index);\n }\n return pivotId + (\"-Tab\" + index);\n};\n// Gets the set of PivotLinks as array of IPivotItemProps\n// The set of Links is determined by child components of type PivotItem\nvar getLinkItems = function (props, pivotId) {\n var result = {\n links: [],\n keyToIndexMapping: {},\n keyToTabIdMapping: {},\n };\n React.Children.forEach(React.Children.toArray(props.children), function (child, index) {\n if (isPivotItem(child)) {\n // eslint-disable-next-line deprecation/deprecation\n var _a = child.props, linkText = _a.linkText, pivotItemProps = __rest(_a, [\"linkText\"]);\n var itemKey = child.props.itemKey || index.toString();\n result.links.push(__assign(__assign({ headerText: linkText }, pivotItemProps), { itemKey: itemKey }));\n result.keyToIndexMapping[itemKey] = index;\n result.keyToTabIdMapping[itemKey] = getTabId(props, pivotId, itemKey, index);\n }\n else if (child) {\n warn('The children of a Pivot component must be of type PivotItem to be rendered.');\n }\n });\n return result;\n};\nvar isPivotItem = function (item) {\n var _a;\n return React.isValidElement(item) && ((_a = item.type) === null || _a === void 0 ? void 0 : _a.name) === PivotItem.name;\n};\nexport var PivotBase = React.forwardRef(function (props, ref) {\n var focusZoneRef = React.useRef(null);\n var overflowMenuButtonComponentRef = React.useRef(null);\n var pivotId = useId('Pivot');\n var _a = useControllableValue(props.selectedKey, props.defaultSelectedKey), selectedKey = _a[0], setSelectedKey = _a[1];\n var componentRef = props.componentRef, theme = props.theme, linkSize = props.linkSize, linkFormat = props.linkFormat, overflowBehavior = props.overflowBehavior, overflowAriaLabel = props.overflowAriaLabel, focusZoneProps = props.focusZoneProps;\n var classNames;\n var nameProps = {\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby'],\n };\n var divProps = getNativeProps(props, divProperties, [\n 'aria-label',\n 'aria-labelledby',\n ]);\n var linkCollection = getLinkItems(props, pivotId);\n React.useImperativeHandle(componentRef, function () { return ({\n focus: function () {\n var _a;\n (_a = focusZoneRef.current) === null || _a === void 0 ? void 0 : _a.focus();\n },\n }); });\n var renderLinkContent = function (link) {\n if (!link) {\n return null;\n }\n var itemCount = link.itemCount, itemIcon = link.itemIcon, headerText = link.headerText;\n return (React.createElement(\"span\", { className: classNames.linkContent },\n itemIcon !== undefined && (React.createElement(\"span\", { className: classNames.icon },\n React.createElement(Icon, { iconName: itemIcon }))),\n headerText !== undefined && React.createElement(\"span\", { className: classNames.text },\n \" \",\n link.headerText),\n itemCount !== undefined && React.createElement(\"span\", { className: classNames.count },\n \" (\",\n itemCount,\n \")\")));\n };\n var renderPivotLink = function (renderLinkCollection, link, renderPivotLinkSelectedKey, className) {\n var itemKey = link.itemKey, headerButtonProps = link.headerButtonProps, onRenderItemLink = link.onRenderItemLink;\n var tabId = renderLinkCollection.keyToTabIdMapping[itemKey];\n var linkContent;\n var isSelected = renderPivotLinkSelectedKey === itemKey;\n if (onRenderItemLink) {\n linkContent = onRenderItemLink(link, renderLinkContent);\n }\n else {\n linkContent = renderLinkContent(link);\n }\n var contentString = link.headerText || '';\n contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';\n // Adding space supplementary for icon\n contentString += link.itemIcon ? ' xx' : '';\n return (React.createElement(CommandButton, __assign({}, headerButtonProps, { id: tabId, key: itemKey, className: css(className, isSelected && classNames.linkIsSelected), \n // eslint-disable-next-line react/jsx-no-bind\n onClick: function (ev) { return onLinkClick(itemKey, ev); }, \n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown: function (ev) { return onKeyDown(itemKey, ev); }, \"aria-label\": link.ariaLabel, role: link.role || 'tab', \"aria-selected\": isSelected, name: link.headerText, keytipProps: link.keytipProps, \"data-content\": contentString }), linkContent));\n };\n var onLinkClick = function (itemKey, ev) {\n ev.preventDefault();\n updateSelectedItem(itemKey, ev);\n };\n var onKeyDown = function (itemKey, ev) {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n ev.preventDefault();\n updateSelectedItem(itemKey);\n }\n };\n var updateSelectedItem = function (itemKey, ev) {\n var _a;\n setSelectedKey(itemKey);\n linkCollection = getLinkItems(props, pivotId);\n if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {\n var selectedIndex = linkCollection.keyToIndexMapping[itemKey];\n var item = React.Children.toArray(props.children)[selectedIndex];\n if (isPivotItem(item)) {\n props.onLinkClick(item, ev);\n }\n }\n (_a = overflowMenuButtonComponentRef.current) === null || _a === void 0 ? void 0 : _a.dismissMenu();\n };\n var renderPivotItem = function (itemKey, isActive) {\n if (props.headersOnly || !itemKey) {\n return null;\n }\n var index = linkCollection.keyToIndexMapping[itemKey];\n var selectedTabId = linkCollection.keyToTabIdMapping[itemKey];\n return (React.createElement(\"div\", { role: \"tabpanel\", hidden: !isActive, key: itemKey, \"aria-hidden\": !isActive, \"aria-labelledby\": selectedTabId, className: classNames.itemContainer }, React.Children.toArray(props.children)[index]));\n };\n var isKeyValid = function (itemKey) {\n return itemKey === null || (itemKey !== undefined && linkCollection.keyToIndexMapping[itemKey] !== undefined);\n };\n var getSelectedKey = function () {\n if (isKeyValid(selectedKey)) {\n return selectedKey;\n }\n if (linkCollection.links.length) {\n return linkCollection.links[0].itemKey;\n }\n return undefined;\n };\n classNames = getClassNames(props.styles, {\n theme: theme,\n linkSize: linkSize,\n linkFormat: linkFormat,\n });\n var renderedSelectedKey = getSelectedKey();\n var renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;\n var items = linkCollection.links.map(function (l) {\n return renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link);\n });\n // The overflow menu starts empty and items[] is updated as the overflow items change\n var overflowMenuProps = React.useMemo(function () { return ({\n items: [],\n alignTargetEdge: true,\n directionalHint: DirectionalHint.bottomRightEdge,\n }); }, []);\n var overflowMenuButtonRef = useOverflow({\n onOverflowItemsChanged: function (overflowIndex, elements) {\n // Set data-is-overflowing on each item\n elements.forEach(function (_a) {\n var ele = _a.ele, isOverflowing = _a.isOverflowing;\n return (ele.dataset.isOverflowing = \"\" + isOverflowing);\n });\n // Update the menu items\n overflowMenuProps.items = linkCollection.links\n .slice(overflowIndex)\n .filter(function (link) { return link.itemKey !== renderedSelectedKey; })\n .map(function (link, index) {\n return {\n key: link.itemKey || \"\" + (overflowIndex + index),\n onRender: function () { return renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu); },\n };\n });\n },\n rtl: getRTL(theme),\n pinnedIndex: renderedSelectedIndex,\n }).menuButtonRef;\n return (React.createElement(\"div\", __assign({ ref: ref }, divProps),\n React.createElement(FocusZone, __assign({ componentRef: focusZoneRef, role: \"tablist\" }, nameProps, { direction: FocusZoneDirection.horizontal }, focusZoneProps, { className: css(classNames.root, focusZoneProps === null || focusZoneProps === void 0 ? void 0 : focusZoneProps.className) }),\n items,\n overflowBehavior === 'menu' && (React.createElement(CommandButton, { className: css(classNames.link, classNames.overflowMenuButton), elementRef: overflowMenuButtonRef, componentRef: overflowMenuButtonComponentRef, menuProps: overflowMenuProps, menuIconProps: { iconName: 'More', style: { color: 'inherit' } }, ariaLabel: overflowAriaLabel }))),\n renderedSelectedKey &&\n linkCollection.links.map(function (link) {\n return (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&\n renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey);\n })));\n});\nPivotBase.displayName = COMPONENT_NAME;\n//# sourceMappingURL=Pivot.base.js.map","import * as React from 'react';\nimport { useRefEffect } from '@fluentui/react-hooks';\nimport { getWindow } from '@fluentui/utilities';\nimport { observeResize } from './observeResize';\n/**\n * Track whether any items don't fit within their container, and move them to the overflow menu.\n * Items are moved into the overflow menu from back to front, excluding pinned items.\n *\n * The overflow menu button must be the last sibling of all of the items that can be put into the overflow, and it\n * must be hooked up to the `setMenuButtonRef` setter function that's returned by `useOverflow`:\n * ```ts\n * const overflow = useOverflow(...);\n * ```\n * ```jsx\n * \n * {intended_content}
\n // 2. -ve padding, margin, etc. are not be used.\n // 3. scrollWidth of a parent is greater than or equal to max of scrollWidths of its children, and same holds\n // for children.\n // placeholder width should be computed in the best possible way to prevent overscroll/underscroll.\n width =\n this.nonStickyContent.firstElementChild.scrollWidth +\n (this.nonStickyContent.firstElementChild.offsetWidth -\n this.nonStickyContent.firstElementChild.clientWidth);\n }\n return {\n height: height,\n width: width,\n };\n }\n else {\n return {};\n }\n };\n // Gets background of nearest parent element that has a declared background-color attribute\n Sticky.prototype._getBackground = function () {\n if (!this.root) {\n return undefined;\n }\n var curr = this.root;\n while (window.getComputedStyle(curr).getPropertyValue('background-color') === 'rgba(0, 0, 0, 0)' ||\n window.getComputedStyle(curr).getPropertyValue('background-color') === 'transparent') {\n if (curr.tagName === 'HTML') {\n // Fallback color if no element has a declared background-color attribute\n return undefined;\n }\n if (curr.parentElement) {\n curr = curr.parentElement;\n }\n }\n return window.getComputedStyle(curr).getPropertyValue('background-color');\n };\n Sticky.defaultProps = {\n stickyPosition: StickyPositionType.Both,\n isScrollSynced: true,\n };\n Sticky.contextType = ScrollablePaneContext;\n return Sticky;\n}(React.Component));\nexport { Sticky };\nfunction _isOffsetHeightDifferent(a, b) {\n return (a && b && a.current && b.current && a.current.offsetHeight !== b.current.offsetHeight);\n}\n//# sourceMappingURL=Sticky.js.map","import * as React from 'react';\nimport { mergeStyleSets } from '../../Styling';\nimport { classNamesFunction, memoizeFunction } from '../../Utilities';\nimport { getColorFromString } from '../../Color';\nimport { ButtonGridCell } from '../../utilities/ButtonGrid/ButtonGridCell';\nimport { getStyles as getActionButtonStyles } from '../Button/ActionButton/ActionButton.styles';\nvar getClassNames = classNamesFunction();\n/** Validate if the cell's color is white or not to apply whiteCell style */\nvar isWhiteCell = function (inputColor) {\n var currentColor = getColorFromString(inputColor);\n return (currentColor === null || currentColor === void 0 ? void 0 : currentColor.hex) === 'ffffff';\n};\nvar getColorPickerGridCellButtonClassNames = memoizeFunction(function (theme, className, variantClassName, iconClassName, menuIconClassName, disabled, checked, expanded, isSplit) {\n var styles = getActionButtonStyles(theme);\n return mergeStyleSets({\n root: [\n 'ms-Button',\n styles.root,\n variantClassName,\n className,\n checked && ['is-checked', styles.rootChecked],\n disabled && ['is-disabled', styles.rootDisabled],\n !disabled &&\n !checked && {\n selectors: {\n ':hover': styles.rootHovered,\n ':focus': styles.rootFocused,\n ':active': styles.rootPressed,\n },\n },\n disabled && checked && [styles.rootCheckedDisabled],\n !disabled &&\n checked && {\n selectors: {\n ':hover': styles.rootCheckedHovered,\n ':active': styles.rootCheckedPressed,\n },\n },\n ],\n flexContainer: ['ms-Button-flexContainer', styles.flexContainer],\n });\n});\nexport var ColorPickerGridCellBase = function (props) {\n var item = props.item, \n // eslint-disable-next-line deprecation/deprecation\n _a = props.idPrefix, \n // eslint-disable-next-line deprecation/deprecation\n idPrefix = _a === void 0 ? props.id : _a, _b = props.selected, selected = _b === void 0 ? false : _b, _c = props.disabled, disabled = _c === void 0 ? false : _c, styles = props.styles, _d = props.circle, circle = _d === void 0 ? true : _d, color = props.color, onClick = props.onClick, onHover = props.onHover, onFocus = props.onFocus, onMouseEnter = props.onMouseEnter, onMouseMove = props.onMouseMove, onMouseLeave = props.onMouseLeave, onWheel = props.onWheel, onKeyDown = props.onKeyDown, height = props.height, width = props.width, borderWidth = props.borderWidth;\n var classNames = getClassNames(styles, {\n theme: props.theme,\n disabled: disabled,\n selected: selected,\n circle: circle,\n isWhite: isWhiteCell(color),\n height: height,\n width: width,\n borderWidth: borderWidth,\n });\n // Render the core of a color cell\n var onRenderColorOption = function (colorOption) {\n var _a;\n var svgClassName = classNames.svg;\n // Build an SVG for the cell with the given shape and color properties\n return (React.createElement(\"svg\", { className: svgClassName, viewBox: \"0 0 20 20\", fill: (_a = getColorFromString(colorOption.color)) === null || _a === void 0 ? void 0 : _a.str }, circle ? React.createElement(\"circle\", { cx: \"50%\", cy: \"50%\", r: \"50%\" }) : React.createElement(\"rect\", { width: \"100%\", height: \"100%\" })));\n };\n return (React.createElement(ButtonGridCell, { item: item, id: idPrefix + \"-\" + item.id + \"-\" + item.index, key: item.id, disabled: disabled, role: 'gridcell', \n // eslint-disable-next-line react/jsx-no-bind\n onRenderItem: onRenderColorOption, selected: selected, onClick: onClick, onHover: onHover, onFocus: onFocus, label: item.label, className: classNames.colorCell, getClassNames: getColorPickerGridCellButtonClassNames, index: item.index, onMouseEnter: onMouseEnter, onMouseMove: onMouseMove, onMouseLeave: onMouseLeave, onWheel: onWheel, onKeyDown: onKeyDown }));\n};\n//# sourceMappingURL=ColorPickerGridCell.base.js.map","import { IsFocusVisibleClassName } from '../../Utilities';\nimport { HighContrastSelector, getFocusStyle } from '../../Styling';\n// Size breakpoint when the default border width changes from 2px to 4px.\nvar CELL_BORDER_BREAKPOINT = 24;\nvar LARGE_BORDER = 4;\nvar SMALL_BORDER = 2;\nvar DIVIDING_PADDING = 2;\nvar DEFAULT_CELL_SIZE = 20;\nvar cellHighContrastFocus = {\n left: -2,\n top: -2,\n bottom: -2,\n right: -2,\n border: 'none',\n outlineColor: 'ButtonText',\n};\nexport var getStyles = function (props) {\n var _a, _b, _c, _d, _e;\n var theme = props.theme, disabled = props.disabled, selected = props.selected, circle = props.circle, isWhite = props.isWhite, _f = props.height, height = _f === void 0 ? DEFAULT_CELL_SIZE : _f, _g = props.width, width = _g === void 0 ? DEFAULT_CELL_SIZE : _g, borderWidth = props.borderWidth;\n var semanticColors = theme.semanticColors, palette = theme.palette;\n var buttonBorderHovered = palette.neutralLighter;\n var buttonBorderChecked = palette.neutralLight;\n var buttonBorderCheckedHovered = palette.neutralSecondary;\n var buttonBorderIsWhite = palette.neutralTertiary;\n // If user provided a value, use it. If not, then we decide depending on the 24px size breakpoint.\n var calculatedBorderWidth = borderWidth\n ? borderWidth\n : width < CELL_BORDER_BREAKPOINT\n ? SMALL_BORDER\n : LARGE_BORDER;\n return {\n // this is a button that wraps the color\n colorCell: [\n getFocusStyle(theme, { inset: -1, position: 'relative', highContrastStyle: cellHighContrastFocus }),\n {\n backgroundColor: semanticColors.bodyBackground,\n padding: 0,\n position: 'relative',\n boxSizing: 'border-box',\n display: 'inline-block',\n cursor: 'pointer',\n userSelect: 'none',\n borderRadius: 0,\n border: 'none',\n height: height,\n width: width,\n verticalAlign: 'top',\n },\n !circle && {\n selectors: (_a = {},\n _a[\".\" + IsFocusVisibleClassName + \" &:focus::after\"] = {\n // -1px so that we don't increase visually the size of the cell.\n outlineOffset: calculatedBorderWidth - 1 + \"px\",\n },\n _a),\n },\n // In focus state for circle we want a round border which is not possible with outline.\n circle && {\n borderRadius: '50%',\n selectors: (_b = {},\n _b[\".\" + IsFocusVisibleClassName + \" &:focus::after\"] = {\n outline: 'none',\n borderColor: semanticColors.focusBorder,\n borderRadius: '50%',\n left: -calculatedBorderWidth,\n right: -calculatedBorderWidth,\n top: -calculatedBorderWidth,\n bottom: -calculatedBorderWidth,\n selectors: (_c = {},\n _c[HighContrastSelector] = {\n outline: \"1px solid ButtonText\",\n },\n _c),\n },\n _b),\n },\n selected && {\n padding: DIVIDING_PADDING,\n border: calculatedBorderWidth + \"px solid \" + buttonBorderChecked,\n selectors: (_d = {},\n _d['&:hover::before'] = {\n content: '\"\"',\n height: height,\n width: width,\n position: 'absolute',\n top: -calculatedBorderWidth,\n left: -calculatedBorderWidth,\n borderRadius: circle ? '50%' : 'default',\n boxShadow: \"inset 0 0 0 1px \" + buttonBorderCheckedHovered,\n },\n _d),\n },\n !selected && {\n selectors: (_e = {},\n _e['&:hover, &:active, &:focus'] = {\n backgroundColor: semanticColors.bodyBackground,\n padding: DIVIDING_PADDING,\n border: calculatedBorderWidth + \"px solid \" + buttonBorderHovered,\n },\n _e['&:focus'] = {\n borderColor: semanticColors.bodyBackground,\n padding: 0,\n selectors: {\n ':hover': {\n borderColor: theme.palette.neutralLight,\n padding: DIVIDING_PADDING,\n },\n },\n },\n _e),\n },\n disabled && {\n color: semanticColors.disabledBodyText,\n pointerEvents: 'none',\n opacity: 0.3,\n },\n isWhite &&\n !selected && {\n // fake a border for white\n backgroundColor: buttonBorderIsWhite,\n padding: 1,\n },\n ],\n // the